import { useCallback, useState } from "react";
import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogDescription } from "@/components/ui/dialog";
import { Button } from "@/components/ui/button";
import { api } from "@/lib/api";
import { ExternalLink, Loader2, LogIn } from "lucide-react";
import { toast } from "sonner";

const OAUTH_WINDOW_NAME = "investment_oauth";

function openLoginPopup(loginUrl: string) {
  const w = 520;
  const h = 740;
  const left = Math.max(0, Math.floor((window.screen.width - w) / 2));
  const top = Math.max(0, Math.floor((window.screen.height - h) / 4));
  const features = `popup=yes,width=${w},height=${h},left=${left},top=${top},scrollbars=yes,resizable=yes`;
  return window.open(loginUrl, OAUTH_WINDOW_NAME, features);
}

interface KiteReconnectDialogProps {
  open: boolean;
  onOpenChange: (open: boolean) => void;
  /** OAuth provider, defaults to "kite". */
  provider?: string;
}

export function KiteReconnectDialog({ open, onOpenChange, provider = "kite" }: KiteReconnectDialogProps) {
  const [openingLogin, setOpeningLogin] = useState(false);
  const [openingPopup, setOpeningPopup] = useState(false);

  const fetchLoginUrl = useCallback(async () => {
    const { login_url } = await api.investments.connectUrl(provider);
    return login_url;
  }, [provider]);

  const handleOpenLogin = async () => {
    setOpeningLogin(true);
    try {
      const login_url = await fetchLoginUrl();
      window.open(login_url, "_blank", "noopener,noreferrer");
    } catch (err: unknown) {
      toast.error("Failed to get login URL: " + (err instanceof Error ? err.message : "Unknown error"));
    } finally {
      setOpeningLogin(false);
    }
  };

  const handleOpenLoginPopup = async () => {
    setOpeningPopup(true);
    try {
      const login_url = await fetchLoginUrl();
      const win = openLoginPopup(login_url);
      if (!win) toast.error("Popup blocked, try “Open in a new tab” instead.");
    } catch (err: unknown) {
      toast.error("Failed to get login URL: " + (err instanceof Error ? err.message : "Unknown error"));
    } finally {
      setOpeningPopup(false);
    }
  };

  return (
    <Dialog open={open} onOpenChange={onOpenChange}>
      <DialogContent className="sm:max-w-sm">
        <DialogHeader>
          <DialogTitle>Reconnect your broker</DialogTitle>
          <DialogDescription>
            Your session has expired. Log in again and your holdings will refresh automatically.
          </DialogDescription>
        </DialogHeader>

        <div className="flex flex-col gap-2 pt-2">
          <Button className="w-full gap-2" size="lg" onClick={handleOpenLoginPopup} disabled={openingPopup}>
            {openingPopup ? <Loader2 className="h-4 w-4 animate-spin" /> : <LogIn className="h-4 w-4" />}
            Log in
          </Button>
          <Button
            variant="ghost"
            size="sm"
            className="w-full gap-2 text-muted-foreground hover:text-foreground"
            onClick={handleOpenLogin}
            disabled={openingLogin}
          >
            {openingLogin ? <Loader2 className="h-4 w-4 animate-spin" /> : <ExternalLink className="h-4 w-4" />}
            Open in a new tab
          </Button>
        </div>
      </DialogContent>
    </Dialog>
  );
}