import { useState } from "react";
import { useNavigate } from "react-router-dom";
import { Button } from "@/components/ui/button";
import {
  DropdownMenu,
  DropdownMenuTrigger,
  DropdownMenuContent,
  DropdownMenuItem,
  DropdownMenuLabel,
  DropdownMenuSeparator,
} from "@/components/ui/dropdown-menu";
import { useFinanceData } from "@/context/FinanceDataContext";
import { useAuth } from "@/context/AuthContext";
import { api } from "@/lib/api";
import { Plus, Loader2, Building2, PencilLine } from "lucide-react";
import { toast } from "sonner";

interface Props {
  size?: "sm" | "default";
  label?: string;
  className?: string;
}

/**
 * Provider picker for adding an investment source: Kite (OAuth) and a Manual portfolio (created on the spot, then navigated to).
 * Shared by the Brokerages settings page and the Investments overview.
 */
export function AddInvestmentAccountButton({ size = "default", label = "Add account", className }: Props) {
  const { investmentAccounts, refreshData } = useFinanceData();
  const { user } = useAuth();
  const navigate = useNavigate();
  const [busy, setBusy] = useState(false);

  const connectKite = async () => {
    setBusy(true);
    try {
      const { login_url } = await api.investments.connectUrl("kite");
      const w = 520, 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 popup = window.open(login_url, "investment_oauth", `popup=yes,width=${w},height=${h},left=${left},top=${top}`);
      if (!popup) window.location.href = login_url;
    } catch (err) {
      toast.error("Failed to get login URL: " + ((err as Error)?.message || "Unknown error"));
    } finally {
      setBusy(false);
    }
  };

  const addManual = async () => {
    setBusy(true);
    try {
      // Default the portfolio currency to an existing account's (e.g. an INR Kite
      // account) so manual holdings line up; backend falls back to USD.
      const currency = investmentAccounts[0]?.currency ?? "USD";
      const acct = await api.investments.createManual("Manual Portfolio", currency);
      refreshData();
      toast.success("Manual portfolio ready, add your holdings");
      navigate(`/investments/${acct.id}`);
    } catch (err) {
      toast.error("Failed to create manual portfolio: " + ((err as Error)?.message || "Unknown error"));
    } finally {
      setBusy(false);
    }
  };

  return (
    <DropdownMenu>
      <DropdownMenuTrigger asChild>
        <Button size={size} disabled={busy} className={className ?? "gap-2"}>
          {busy ? <Loader2 className="h-4 w-4 animate-spin" /> : <Plus className="h-4 w-4" />}
          {label}
        </Button>
      </DropdownMenuTrigger>
      <DropdownMenuContent align="end" className="w-56">
        <DropdownMenuLabel>Add investment source</DropdownMenuLabel>
        <DropdownMenuSeparator />
        {user?.kiteEnabled && (
          <DropdownMenuItem onClick={connectKite} className="gap-2">
            <Building2 className="h-4 w-4" /> Kite (Zerodha)
          </DropdownMenuItem>
        )}
        <DropdownMenuItem onClick={addManual} className="gap-2">
          <PencilLine className="h-4 w-4" /> Manual portfolio
        </DropdownMenuItem>
      </DropdownMenuContent>
    </DropdownMenu>
  );
}