import { useMemo, useState } from "react";
import { Card, CardContent, CardHeader } from "@/components/ui/card";
import { TimeSeriesChart } from "@/components/charts/TimeSeriesChart";
import { SegmentedControl } from "@/components/charts/SegmentedControl";
import { ChartTypeToggle } from "@/components/charts/ChartTypeToggle";
import { portfolioValueHistory, mergeSnapshotsIntoHistory } from "@/lib/holdings";
import { periodChange } from "@/lib/balanceSheet";
import { toDateString, formatCompactMoney } from "@/lib/format";
import { usePrivacy } from "@/lib/privacy";
import { formatMoney } from "@/lib/format";
import type { Holding } from "@/types/finance";
import { TrendingDown, TrendingUp, LineChart as LineChartIcon, BarChart3 } from "lucide-react";
import { cn } from "@/lib/utils";

const PERIODS = [
  { label: "1M", days: 30 },
  { label: "3M", days: 90 },
  { label: "1Y", days: 365 },
  { label: "All", days: 999 },
];
const PERIOD_OPTIONS = PERIODS.map((p) => ({ value: p.label, label: p.label }));
const CHART_TYPES = [
  { value: "line", icon: LineChartIcon, label: "Line" },
  { value: "bar", icon: BarChart3, label: "Bar" },
] as const;

function fmt(v: number, c: string) {
  return formatMoney(v, c, { decimals: 2 });
}

/**
 * "Total portfolio value" hero: the combined value of every same-currency
 * holding over time, see portfolioValueHistory for how sparse per-holding
 * history is turned into one series. A portfolio that's mostly brokerage-
 * synced (no stored history) will show a flatter early curve than reality,
 * an honest gap given the data actually available rather than a fabricated
 * smooth line - though as `snapshots` (a real recorded total per day,
 * see usePortfolioSnapshotOnMount) accumulate, they take over for any date
 * they cover, since they're the actual figure rather than an approximation.
 */
export function PortfolioValueChart({
  holdings, currency, snapshots,
}: {
  holdings: Holding[];
  currency: string;
  snapshots?: { date: string; value: number }[];
}) {
  usePrivacy();
  const [period, setPeriod] = useState("1Y");
  const [chartType, setChartType] = useState<"line" | "bar">("line");

  const allData = useMemo(
    () => mergeSnapshotsIntoHistory(portfolioValueHistory(holdings, currency), snapshots ?? []),
    [holdings, currency, snapshots]
  );

  const data = useMemo(() => {
    const days = PERIODS.find((p) => p.label === period)?.days;
    if (!days || days >= 999) return allData;
    const cutoff = new Date();
    cutoff.setDate(cutoff.getDate() - days);
    const cutoffStr = toDateString(cutoff);
    return allData.filter((d) => d.date >= cutoffStr);
  }, [allData, period]);

  const change = useMemo(() => periodChange(data.map((d) => d.value)), [data]);
  const latest = data[data.length - 1]?.value ?? 0;

  return (
    <Card className="border-border/50">
      <CardHeader className="pb-2">
        <p className="text-xs uppercase tracking-wider font-semibold text-muted-foreground/60">Total portfolio value</p>
        <p className="text-3xl font-bold text-foreground tabular-nums tracking-tight">{fmt(latest, currency)}</p>
        {change && (
          <p className="flex items-center gap-1 text-sm tabular-nums">
            {change.amount > 0 ? (
              <TrendingUp size={14} strokeWidth={1.75} className="text-chart-green" aria-hidden />
            ) : change.amount < 0 ? (
              <TrendingDown size={14} strokeWidth={1.75} className="text-chart-red" aria-hidden />
            ) : null}
            <span className={cn("font-medium", change.amount > 0 ? "text-chart-green" : change.amount < 0 ? "text-chart-red" : "text-foreground")}>
              {change.amount > 0 ? "+" : change.amount < 0 ? "-" : ""}{fmt(Math.abs(change.amount), currency)}
              {change.pct !== null && ` (${change.pct > 0 ? "+" : ""}${change.pct.toFixed(1)}%)`}
            </span>
            <span className="text-muted-foreground">over {period === "All" ? "all time" : period}</span>
          </p>
        )}
        <div className="flex items-center justify-end gap-2 pt-1">
          <ChartTypeToggle options={CHART_TYPES} value={chartType} onChange={setChartType} label="Chart type" />
          <SegmentedControl label="Chart period" options={PERIOD_OPTIONS} value={period} onChange={setPeriod} />
        </div>
      </CardHeader>
      <CardContent>
        {data.length === 0 ? (
          <p className="text-sm text-muted-foreground text-center py-16">No value history yet.</p>
        ) : (
          <TimeSeriesChart
            data={data}
            height={260}
            label="Portfolio value"
            formatValue={(v) => fmt(v, currency)}
            formatAxisValue={(v) => formatCompactMoney(v, currency)}
            chartType={chartType}
          />
        )}
      </CardContent>
    </Card>
  );
}