import { useMemo, useState } from "react";
import { Card, CardContent, CardHeader, CardTitle, CardDescription } from "@/components/ui/card";
import { DonutChart } from "@/components/charts/DonutChart";
import { BubbleChart } from "@/components/charts/BubbleChart";
import { ChartTypeToggle } from "@/components/charts/ChartTypeToggle";
import { SegmentedControl } from "@/components/charts/SegmentedControl";
import { shareColor } from "@/components/dashboard/shareColors";
import { allocationBreakdown, type AllocationMode } from "@/lib/holdings";
import { usePrivacy } from "@/lib/privacy";
import { formatMoney } from "@/lib/format";
import type { Holding } from "@/types/finance";
import { PieChart, Circle } from "lucide-react";

// "currency" is deliberately not offered here: this panel receives holdings
// already scoped to one currency (the caller filters, same as the headline
// stats), so a currency breakdown of them would always be a single 100% slice.
const MODES: { value: AllocationMode; label: string }[] = [
  { value: "asset", label: "Asset" },
  { value: "account", label: "Account" },
];
const CHART_TYPES = [
  { value: "donut", icon: PieChart, label: "Donut" },
  { value: "bubbles", icon: Circle, label: "Bubbles" },
] as const;

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

export function AllocationPanel({
  holdings, investmentAccounts, currency,
}: {
  holdings: Holding[];
  investmentAccounts: { id: string; label: string }[];
  currency: string;
}) {
  usePrivacy();
  const [mode, setMode] = useState<AllocationMode>("asset");
  const [chartType, setChartType] = useState<"donut" | "bubbles">("donut");

  const rows = useMemo(() => allocationBreakdown(holdings, mode, investmentAccounts), [holdings, mode, investmentAccounts]);
  const total = rows.reduce((s, r) => s + r.value, 0);
  const slices = rows.map((r, i) => ({ name: r.label, value: r.value, color: shareColor(i) }));

  return (
    <Card className="border-border/50">
      <CardHeader className="pb-3">
        <div className="flex items-start justify-between gap-3">
          <div>
            <CardTitle className="text-base font-semibold">Allocation</CardTitle>
          </div>
          <ChartTypeToggle options={CHART_TYPES} value={chartType} onChange={setChartType} label="Chart type" />
        </div>
        <SegmentedControl label="Group by" options={MODES} value={mode} onChange={setMode} className="mt-1" />
      </CardHeader>
      <CardContent>
        {rows.length === 0 ? (
          <p className="text-sm text-muted-foreground text-center py-8">No holdings to allocate yet.</p>
        ) : (
          <div className="flex flex-col sm:flex-row items-center gap-6">
            {chartType === "donut" ? (
              <DonutChart
                data={slices}
                size={160}
                thickness={26}
                formatValue={(v) => fmt(v, currency)}
                centerLabel={`${rows.length} ${rows.length === 1 ? "group" : "groups"}`}
                centerValue={fmt(total, currency)}
              />
            ) : (
              <BubbleChart data={slices} size={160} formatValue={(v) => fmt(v, currency)} />
            )}
            <div className="flex-1 w-full space-y-2">
              {rows.map((r, i) => {
                const pct = total > 0 ? (r.value / total) * 100 : 0;
                return (
                  <div key={r.key} className="flex items-center justify-between gap-2 text-sm">
                    <span className="flex items-center gap-2 min-w-0">
                      <span aria-hidden className="h-2.5 w-2.5 rounded-full shrink-0" style={{ backgroundColor: shareColor(i) }} />
                      <span className="text-foreground truncate">{r.label}</span>
                    </span>
                    <span className="text-muted-foreground tabular-nums shrink-0">{pct.toFixed(1)}%</span>
                  </div>
                );
              })}
            </div>
          </div>
        )}
      </CardContent>
    </Card>
  );
}