CategoryBreakdown

"use client";

import { allocatePercentages } from "@/lib/ledger/allocate";
import { vizColorFor } from "@/lib/ledger/chart-utils";
import { cn } from "@/lib/ledger/cn";
import type { MoneyValue } from "@/lib/ledger/money.types";
import { Money } from "@/components/ledger/money";
import { Percent } from "@/components/ledger/percent";

export type Category = { key: string; label: string; amount: number };

export interface CategoryBreakdownProps {
  categories: Category[];
  className?: string;
  currency: string;
  /** Max 6 series; the rest group into "Other". Beyond that is a data problem. */
  maxSeries?: number;
  title?: string;
}

/**
 * Ranked horizontal bars. **Not a pie chart** — humans compare lengths
 * accurately and angles poorly.
 *
 * Percentages use largest-remainder allocation, so they sum to exactly 100%.
 */
export function CategoryBreakdown({
  categories,
  currency,
  maxSeries = 6,
  className,
  title,
}: CategoryBreakdownProps) {
  const sorted = [...categories].sort((a, b) => b.amount - a.amount);
  const top = sorted.slice(0, maxSeries - (sorted.length > maxSeries ? 1 : 0));
  const rest = sorted.slice(top.length);
  const rows =
    rest.length > 0
      ? [...top, { amount: rest.reduce((s, c) => s + c.amount, 0), key: "other", label: "Other" }]
      : top;

  const percentages = allocatePercentages(rows.map((r) => r.amount));
  const max = Math.max(...rows.map((r) => r.amount), 1);

  return (
    <div className={cn("w-full", className)}>
      <table className="w-full">
        {title ? <caption className="sr-only">{title}</caption> : null}
        <tbody>
          {rows.map((row, i) => (
            <tr key={row.key}>
              <th className="w-[35%] max-w-0 truncate py-2 pr-3 text-left text-body font-normal" scope="row">
                {row.label}
              </th>
              <td className="py-2">
                <div
                  aria-hidden="true"
                  className="h-4 rounded-xs"
                  style={{
                    background: vizColorFor(row.key),
                    width: `${(row.amount / max) * 100}%`,
                  }}
                />
              </td>
              <td className="w-24 py-2 pl-3 text-right">
                <Money value={{ amount: row.amount, currency } as MoneyValue} />
              </td>
              <td className="w-16 py-2 pl-3 text-right">
                <Percent
                  className="text-text-secondary"
                  signed={false}
                  value={{ kind: "relative", value: percentages[i] }}
                />
              </td>
            </tr>
          ))}
        </tbody>
      </table>
      <p className="mt-2 text-caption text-text-tertiary">
        Shares allocated by largest remainder, so they sum to exactly 100%.
      </p>
    </div>
  );
}