import { useQuery } from "@tanstack/react-query";
import { api } from "@/lib/api";
import { useFinanceData } from "@/context/FinanceDataContext";
import { Button } from "@/components/ui/button";
import { ToolCard, QueryError, useToolAction } from "./shared";

type Status = { provider: string; status: string; attemptedAt: string; succeededAt: string | null; error: string | null; stale: boolean };
export function SyncTools() {
  const query = useQuery({ queryKey: ["enhanced", "sync-status"], queryFn: () => api.enhanced.get<Status[]>("sync-status"), refetchInterval: 15000 });
  const { syncPlaid, plaidItems } = useFinanceData();
  const action = useToolAction();
  return <ToolCard title="Sync health">
    <QueryError error={query.error} />
    {!query.isPending && !query.error && !query.data?.length && <p className="text-sm text-muted-foreground">No sync attempts recorded yet.</p>}
    {query.data?.map(s => <div key={s.provider} className="space-y-1"><p className="text-sm font-medium">{s.provider}: {s.status}{s.stale ? " · needs refresh" : ""}</p>
      <p className="text-xs text-muted-foreground">Last attempt: {new Date(s.attemptedAt).toLocaleString()}. Last complete success: {s.succeededAt ? new Date(s.succeededAt).toLocaleString() : "none"}.</p>
      {s.error && <p role="status" className="text-sm">{s.error}</p>}
    </div>)}
    {plaidItems.filter(item => item.sync_error).map(item => <div key={item.item_id} className="rounded-md border p-3 text-sm">
      <p className="font-medium">{item.institution_name || "Linked bank"}: {item.requires_reconnect ? "Sign-in required" : "Sync needs attention"}</p>
      <p className="mt-1 text-muted-foreground">{item.sync_error}</p>
      {item.requires_reconnect && <a href="#bank-connections" className="mt-2 inline-block text-primary underline">Reconnect this bank</a>}
    </div>)}
    <Button variant="outline" disabled={action.isPending || !plaidItems.length || query.data?.some(s => s.provider === "plaid" && s.status === "running")}
      onClick={() => action.mutate(() => syncPlaid())}>{action.isPending ? "Syncing…" : "Retry bank sync"}</Button>
    <p className="text-xs text-muted-foreground">Retries update saved bank records by their provider IDs. A failed source does not remove its saved data.</p>
    {plaidItems.some(item => item.requires_reconnect) && <p className="text-xs text-muted-foreground">Banks requiring sign-in must be reconnected below before they can sync again.</p>}
  </ToolCard>;
}