import { useState } from "react";
import { toast } from "sonner";
import { Button } from "@/components/ui/button";
import { api } from "@/lib/api";
import { PlaidLinkSession } from "./PlaidLinkSession";

export function BankReconnectButton({ itemId, institution, onReconnected }: { itemId: string; institution: string; onReconnected: () => Promise<unknown> }) {
  const [token, setToken] = useState<string | null>(null);
  const [busy, setBusy] = useState(false);
  const start = async () => {
    setBusy(true);
    try { setToken((await api.plaid.createLinkToken(itemId)).link_token); }
    catch { toast.error("Couldn't start bank sign-in. Please try again."); }
    finally { setBusy(false); }
  };
  const complete = async () => {
    setToken(null);
    setBusy(true);
    // Update mode repairs the existing Item; never exchange a new public token.
    try { await onReconnected(); toast.success(`${institution} reconnected and synced`); }
    catch (error) { toast.error(error instanceof Error ? error.message : "Bank sign-in completed, but sync needs another attempt."); }
    finally { setBusy(false); }
  };
  return token
    ? <PlaidLinkSession token={token} onSuccess={() => { void complete(); }} onClose={() => setToken(null)} />
    : <Button size="sm" variant="outline" disabled={busy} onClick={() => { void start(); }} aria-label={`Reconnect ${institution}`}>{busy ? "Connecting…" : "Sign in to bank"}</Button>;
}