import { useEffect, useMemo, useState } from "react";
import { Dialog, DialogContent, DialogHeader, DialogTitle } from "@/components/ui/dialog";
import { TimeSeriesChart } from "@/components/charts/TimeSeriesChart";
import { SegmentedControl } from "@/components/charts/SegmentedControl";
import { Loader2, TrendingUp, TrendingDown, Info } from "lucide-react";
import { api } from "@/lib/api";
import { cn } from "@/lib/utils";
import type { Holding } from "@/types/finance";
import { usePrivacy } from "@/lib/privacy";
import { formatMoney } from "@/lib/format";

const PERIODS = ["1mo", "3mo", "6mo", "1y", "2y", "5y", "10y"] as const;
const PERIOD_LABEL: Record<string, string> = { "1mo": "1M", "3mo": "3M", "6mo": "6M", "1y": "1Y", "2y": "2Y", "5y": "5Y", "10y": "10Y" };
const PERIOD_OPTIONS = PERIODS.map((p) => ({ value: p as string, label: PERIOD_LABEL[p] }));

type Quote = Awaited<ReturnType<typeof api.market.history>>;

function fmtPrice(n: number, currency: string) {
  return formatMoney(n, currency, { decimals: 2 });
}

interface Props {
  holding: Holding | null;
  open: boolean;
  onOpenChange: (open: boolean) => void;
}

/**
 * Live price + history for a manual holding linked to a public ticker (the
 * SpaceX-went-public case). Resolves the holding's symbol via the backend
 * /market/history endpoint (yfinance). Shows guidance when the symbol has no
 * public market data (still private / wrong ticker).
 */
export function HoldingChart({ holding, open, onOpenChange }: Props) {
  // Local formatter reads privacy mode; subscribe so toggling it re-renders.
  usePrivacy();
  const [period, setPeriod] = useState<string>("1y");
  const [data, setData] = useState<Quote | null>(null);
  const [loading, setLoading] = useState(false);

  const symbol = holding?.symbol ?? "";
  const currency = holding?.currency ?? "USD";

  useEffect(() => {
    if (!open || !symbol) return;
    let cancelled = false;
    setLoading(true);
    setData(null);
    api.market
      .history(symbol, currency, period)
      .then((res) => { if (!cancelled) setData(res); })
      .catch(() => { if (!cancelled) setData(null); })
      .finally(() => { if (!cancelled) setLoading(false); });
    return () => { cancelled = true; };
  }, [open, symbol, currency, period]);

  const up = (data?.changePercent ?? 0) >= 0;
  const series = useMemo(
    () => (data?.series ?? []).map((p) => ({ date: String(p.date).slice(0, 10), value: p.close })),
    [data]
  );

  return (
    <Dialog open={open} onOpenChange={onOpenChange}>
      <DialogContent className="sm:max-w-[560px]">
        <DialogHeader>
          <DialogTitle className="flex items-center gap-2">
            {holding?.name}
            {data?.found && data.resolved && (
              <span className="text-xs font-normal text-muted-foreground">({data.resolved})</span>
            )}
          </DialogTitle>
        </DialogHeader>

        {loading ? (
          <div className="flex flex-col items-center justify-center py-16 gap-3 text-muted-foreground">
            <Loader2 className="h-8 w-8 animate-spin" />
            <p className="text-sm">Fetching live market data…</p>
          </div>
        ) : data?.found && data.series.length > 1 ? (
          <div className="space-y-4">
            <div className="flex items-end justify-between">
              <div>
                <p className="text-3xl font-bold tabular-nums text-foreground">{fmtPrice(data.price ?? 0, data.currency)}</p>
                <p className={cn("text-sm font-medium tabular-nums flex items-center gap-1", up ? "text-chart-green" : "text-chart-red")}>
                  {up ? <TrendingUp size={14} /> : <TrendingDown size={14} />}
                  {up ? "+" : ""}{fmtPrice(data.change ?? 0, data.currency)} ({up ? "+" : ""}{data.changePercent?.toFixed(2)}%)
                </p>
              </div>
              <SegmentedControl label="Price history period" options={PERIOD_OPTIONS} value={period} onChange={setPeriod} className="[&>button]:px-2" />
            </div>

            <TimeSeriesChart
              data={series}
              height={240}
              label="Price"
              formatValue={(v) => fmtPrice(v, data.currency)}
              formatAxisValue={(v) => fmtPrice(v, data.currency)}
              yAxisWidth={60}
            />
            <p className="text-[11px] text-muted-foreground text-center">Live market data via Yahoo Finance. Tracking <span className="font-medium text-foreground">{symbol}</span>.</p>
          </div>
        ) : (
          <div className="flex flex-col items-center justify-center py-12 gap-3 text-center">
            <div className="h-12 w-12 rounded-full bg-muted flex items-center justify-center">
              <Info size={22} strokeWidth={1.5} className="text-muted-foreground" />
            </div>
            <div className="space-y-1 max-w-sm">
              <p className="text-sm font-semibold text-foreground">No public market data for “{symbol}”</p>
              <p className="text-xs text-muted-foreground">
                This looks like a private or unlisted holding. Once it goes public, edit the holding and set its
                <span className="font-medium text-foreground"> public ticker</span> (e.g. AAPL, RELIANCE) to track the live price here.
              </p>
            </div>
          </div>
        )}
      </DialogContent>
    </Dialog>
  );
}