import { useEffect, useRef } from "react";
import { usePlaidLink } from "react-plaid-link";
import { Button } from "@/components/ui/button";

/** One automatically opened Link session, shared by connect and reconnect. */
export function PlaidLinkSession({ token, onSuccess, onClose }: {
  token: string; onSuccess: (publicToken: string) => void; onClose: (failed?: boolean) => void;
}) {
  const opened = useRef(false);
  const { open, ready, error } = usePlaidLink({
    token, onSuccess, onExit: error => onClose(Boolean(error)),
  });
  useEffect(() => {
    if (ready && !opened.current) { opened.current = true; open(); }
  }, [ready, open]);
  if (error) return <div className="space-y-2"><p role="alert" className="text-sm text-destructive">The secure bank window couldn't load. Refresh the page and try again.</p><Button size="sm" variant="outline" onClick={() => onClose(true)}>Close</Button></div>;
  return <div className="flex flex-wrap items-center gap-2"><span role="status" className="text-xs text-muted-foreground">{ready ? "Bank connection window open" : "Opening secure bank connection…"}</span><Button variant="ghost" size="sm" onClick={() => onClose()}>Cancel</Button></div>;
}