import { GroupedBarChart, type BarSeries } from "@/components/charts/GroupedBarChart";
import { TooltipRow } from "@/components/charts/ChartTooltip";
import { useMoney } from "@/hooks/useMoney";

import type { CashflowPoint } from "./cashflow-data";

const SERIES: BarSeries<"income" | "expenses">[] = [
  { key: "income", label: "Income", colorVar: "--series-income" },
  { key: "expenses", label: "Expenses", colorVar: "--series-expense" },
];
const getLabel = (d: CashflowPoint) => d.label;
const getValue = (d: CashflowPoint, key: "income" | "expenses") => d[key];

/**
 * Income vs expenses per month.
 *
 * Two series, so this is the one genuinely categorical chart in the app. The
 * green/red pair is inherently the worst case for red-green colour blindness
 * (validated ΔE 6.7–7.2, inside the 6–8 floor band), which is legal only with
 * secondary encoding, hence the always-present legend, the gap between paired
 * bars, and the value labels in the tooltip.
 */
export function CashflowChart({ data }: { data: CashflowPoint[] }) {
  const { money, compact } = useMoney();

  if (data.length === 0) {
    return <p className="text-sm text-muted-foreground text-center py-10">No transactions to chart.</p>;
  }

  return (
    <div className="space-y-3">
      {/* Legend is mandatory for two series, identity must never be colour alone. */}
      <div className="flex items-center gap-4 text-xs">
        <span className="flex items-center gap-1.5">
          <span className="h-2.5 w-2.5 rounded-sm bg-series-income" aria-hidden />
          <span className="text-muted-foreground">Income</span>
        </span>
        <span className="flex items-center gap-1.5">
          <span className="h-2.5 w-2.5 rounded-sm bg-series-expense" aria-hidden />
          <span className="text-muted-foreground">Expenses</span>
        </span>
      </div>

      {/* 2px gap between adjacent fills keeps the pair readable without colour. */}
      <GroupedBarChart
        data={data}
        series={SERIES}
        getLabel={getLabel}
        getValue={getValue}
        height={260}
        formatAxisValue={compact}
        renderTooltip={(d) => (
          <>
            <p className="font-semibold text-foreground">{d.label}</p>
            <TooltipRow color="hsl(var(--series-income))" label="Income" value={money(d.income)} />
            <TooltipRow color="hsl(var(--series-expense))" label="Expenses" value={money(d.expenses)} />
            <TooltipRow className="border-t border-border/40 pt-1" label="Net" value={money(d.income - d.expenses)} />
          </>
        )}
      />
    </div>
  );
}