import { HorizontalBarChart } from "@/components/charts/HorizontalBarChart";
import { useMoney } from "@/hooks/useMoney";
import { cn } from "@/lib/utils";
import type { Category } from "@/lib/categories";

export interface CategoryDatum {
  name: Category;
  value: number;
  pct: number;
}

const getName = (d: CategoryDatum) => d.name;
const getValue = (d: CategoryDatum) => d.value;

/**
 * Spending by category as a sorted horizontal bar chart.
 *
 * Deliberately NOT the donut this app used to carry (which was never rendered
 * anywhere anyway). Two reasons:
 *   - Part-to-whole across ~20 long-named categories is a bar chart's job; a pie
 *     makes the reader compare angles and truncates its own labels.
 *   - The donut assigned colors by `index % 6` AFTER sorting by value, so a
 *     category's color changed whenever the ranking changed and repeated every
 *     7th slice. Bar length already encodes magnitude, so one hue is correct and
 *     colour never lies about identity.
 */
export function SpendByCategoryChart({
  data,
  onSelect,
  selected,
}: {
  data: CategoryDatum[];
  onSelect?: (category: Category) => void;
  selected?: Category | null;
}) {
  const { money, compact } = useMoney();

  if (data.length === 0) {
    return <p className="text-sm text-muted-foreground text-center py-10">No spending in this period.</p>;
  }

  return (
    <HorizontalBarChart
      data={data}
      getLabel={getName}
      getValue={getValue}
      // One hue: bar length carries magnitude, so opacity is free to carry
      // selection state instead of re-encoding the same number.
      colorVar="--series-magnitude"
      // Direct labels, the relief channel the contrast check requires, and
      // they remove the need to hover just to read a value.
      formatValue={compact}
      selected={selected}
      onSelect={onSelect ? (d) => onSelect(d.name) : undefined}
      renderTooltip={(d) => (
        <>
          <p className="font-semibold text-foreground">{d.name}</p>
          <p className="text-muted-foreground tabular-nums">
            {money(d.value)} · {d.pct.toFixed(1)}% of spend
          </p>
          {onSelect && <p className="text-primary">Click to see transactions</p>}
        </>
      )}
    />
  );
}

/** The same numbers as an accessible table, the chart's non-visual equivalent. */
export function SpendByCategoryTable({ data }: { data: CategoryDatum[] }) {
  const { money } = useMoney();
  return (
    <table className="w-full text-sm">
      <caption className="sr-only">Spending by category</caption>
      <thead>
        <tr className="text-xs text-muted-foreground">
          <th scope="col" className="text-left font-medium py-1.5">Category</th>
          <th scope="col" className="text-right font-medium py-1.5">Spent</th>
          <th scope="col" className="text-right font-medium py-1.5">Share</th>
        </tr>
      </thead>
      <tbody>
        {data.map((d) => (
          <tr key={d.name} className={cn("border-t border-border/30")}>
            <td className="py-1.5 text-foreground">{d.name}</td>
            <td className="py-1.5 text-right tabular-nums text-foreground">{money(d.value)}</td>
            <td className="py-1.5 text-right tabular-nums text-muted-foreground">{d.pct.toFixed(1)}%</td>
          </tr>
        ))}
      </tbody>
    </table>
  );
}