import { useMemo, useState } from "react";
import { useParentSize } from "@visx/responsive";
import { DonutChart } from "@/components/charts/DonutChart";
import { BubbleChart } from "@/components/charts/BubbleChart";
import { ChartTypeToggle } from "@/components/charts/ChartTypeToggle";
import { categorySpendBreakdown } from "@/lib/categorySpend";
import { shareColor } from "@/components/dashboard/shareColors";
import { useMoney } from "@/hooks/useMoney";
import { PieChart, Circle } from "lucide-react";
import type { Transaction } from "@/types/finance";

//: Slices beyond this rank fold into a single "Other" row, the same cutoff
//: (and the same colour-cycling-to-muted fallback) the balance sheet's
//: account list already uses via shareColor.
const MAX_SLICES = 5;

/**
 * Dashboard "Outflows": this period's spending by category as a donut with
 * a ranked list beside it, matching Sure's dashboard widget of the same
 * name. Shares `categorySpendBreakdown` with the Analytics page's category
 * chart, so the two surfaces never disagree on what counts as spending.
 */
const CHART_TYPES = [
  { value: "donut", icon: PieChart, label: "Donut" },
  { value: "bubbles", icon: Circle, label: "Bubbles" },
] as const;

export function OutflowsWidget({ transactions, donutOnly = false }: { transactions: Transaction[]; donutOnly?: boolean }) {
  const { money, compact } = useMoney();
  const { parentRef, width } = useParentSize({ debounceTime: 30 });
  const [chartType, setChartType] = useState<"donut" | "bubbles">("donut");
  const breakdown = useMemo(() => categorySpendBreakdown(transactions), [transactions]);
  const total = breakdown.reduce((s, d) => s + d.value, 0);

  const top = breakdown.slice(0, MAX_SLICES);
  const rest = breakdown.slice(MAX_SLICES);
  const otherValue = rest.reduce((s, d) => s + d.value, 0);
  const rows = otherValue > 0
    ? [...top, { name: "Other", value: otherValue, pct: total > 0 ? (otherValue / total) * 100 : 0 }]
    : top;

  if (breakdown.length === 0) {
    return (
      <div className="flex items-center justify-center py-8 text-sm text-muted-foreground">
        No spending in this period.
      </div>
    );
  }

  const slices = rows.map((r, i) => ({ name: r.name, value: r.value, color: shareColor(i) }));

  if (donutOnly) {
    return (
      <div ref={parentRef} className="mx-auto w-full max-w-[168px]">
        {width > 0 && <DonutChart data={slices} size={Math.min(168, width)} thickness={20} formatValue={compact} centerLabel="This month" centerValue={money(total)} />}
      </div>
    );
  }

  return (
    <div className="space-y-3">
      <div className="flex justify-end">
        <ChartTypeToggle options={CHART_TYPES} value={chartType} onChange={setChartType} label="Chart type" />
      </div>
      <div className="flex flex-col sm:flex-row items-center gap-6">
        {chartType === "donut" ? (
          <DonutChart
            data={slices}
            size={168}
            thickness={20}
            formatValue={compact}
            centerLabel="Spent"
            centerValue={money(total)}
          />
        ) : (
          <BubbleChart data={slices} size={168} formatValue={compact} />
        )}
        <div className="flex-1 w-full space-y-2.5">
          {rows.map((r, i) => (
            <div key={r.name} className="space-y-1">
              <div 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.name}</span>
                </span>
                <span className="text-muted-foreground tabular-nums shrink-0">
                  <span className="text-foreground font-medium">{money(r.value)}</span> · {r.pct.toFixed(0)}%
                </span>
              </div>
              <div className="h-1 rounded-full bg-muted overflow-hidden" aria-hidden>
                <div className="h-full rounded-full" style={{ width: `${Math.max(2, r.pct)}%`, backgroundColor: shareColor(i) }} />
              </div>
            </div>
          ))}
        </div>
      </div>
    </div>
  );
}