AgingTable

import * as React from "react";
import { useScrollEdges } from "@/hooks/ledger/use-scroll-edges";
import { cn } from "@/lib/ledger/cn";
import { CheckIcon, ExclamationTriangleIcon } from "@/components/ledger/icons";
import { Money } from "@/components/ledger/money";
import { Rule } from "@/components/ledger/rule";

export const AGING_BUCKETS = ["current", "1-30", "31-60", "61-90", "90+"] as const;
export type Bucket = (typeof AGING_BUCKETS)[number];

export type AgingRow = {
  id: string;
  name: string;
  /** Minor units per bucket. */
  buckets: Record<Bucket, number>;
  total: number;
};

export interface AgingTableProps extends React.ComponentPropsWithoutRef<"div"> {
  columnTotals: Record<Bucket, number>;
  currency: string;
  grandTotal: number;
  kind: "receivable" | "payable";
  /**
   * Caps the scroller so the header and the party column can freeze. Without
   * a height the page scrolls instead and there is nothing for the frozen
   * header to stick to.
   */
  maxHeight?: number;
  rows: AgingRow[];
}

const LABELS: Record<Bucket, string> = {
  "1-30": "1–30 days",
  "31-60": "31–60 days",
  "61-90": "61–90 days",
  "90+": "90+ days",
  current: "Current",
};

/**
 * The intersection cell is proven both ways — rows and columns must agree,
 * and the component asserts it.
 *
 * Bucket severity uses a sequential lightness ramp within one hue, not a red
 * gradient, so it survives greyscale and the signal palette.
 */
export const AgingTable = React.forwardRef<HTMLDivElement, AgingTableProps>(
  ({ className, rows, currency, kind, columnTotals, grandTotal, maxHeight = 520, ...props }, ref) => {
    const scroller = useScrollEdges<HTMLDivElement>();
    const rowSum = rows.reduce((s, r) => s + r.total, 0);
    const colSum = AGING_BUCKETS.reduce((s, b) => s + columnTotals[b], 0);
    const proven = rowSum === grandTotal && colSum === grandTotal;

    return (
      <div className={cn("rounded-xl border border-border bg-surface", className)} ref={ref} {...props}>
        {/* The caption lives outside the scroller: a title that scrolls away
            from the table it titles is a title nobody reads. */}
        <p className="px-6 pt-6 text-title-sm font-medium">
          {kind === "receivable" ? "Accounts receivable aging" : "Accounts payable aging"}
        </p>
        <div className="ledger-frozen scrollbar-thin mt-4" ref={scroller} style={{ maxHeight }}>
          <table className="w-full min-w-[760px]">
            <caption className="sr-only">
              {kind === "receivable" ? "Accounts receivable aging" : "Accounts payable aging"}
            </caption>
            <thead>
              <tr className="border-b border-border-subtle">
                <th className="px-6 py-3 text-left text-label font-medium text-text-secondary" scope="col">
                  {kind === "receivable" ? "Customer" : "Vendor"}
                </th>
                {AGING_BUCKETS.map((b, i) => (
                  <th
                    /* Primary, not secondary: the deepest tint drops secondary
                       text to 4.4:1. */
                    className="px-3 py-3 text-right text-label font-medium text-text-primary"
                    key={b}
                    scope="col"
                    style={{
                      // Sequential lightness within one hue — magnitude, not alarm.
                      background: `oklch(${0.985 - i * 0.028} ${0.004 + i * 0.012} 265)`,
                    }}
                  >
                    {LABELS[b]}
                  </th>
                ))}
                <th className="px-6 py-3 text-right text-label font-medium text-text-secondary" scope="col">
                  Total
                </th>
              </tr>
            </thead>
            <tbody>
              {rows.map((r) => (
                <tr className="border-b border-border-subtle" key={r.id}>
                  <th className="px-6 py-3 text-left text-body font-normal" scope="row">
                    {r.name}
                  </th>
                  {AGING_BUCKETS.map((b) => (
                    <td className="px-3 py-3 text-right" key={b}>
                      {r.buckets[b] === 0 ? (
                        <span className="numeric relative text-figure-sm text-text-tertiary">
                          <span aria-hidden="true">—</span>
                          <span className="sr-only select-none">zero</span>
                        </span>
                      ) : (
                        <Money accounting value={{ amount: r.buckets[b], currency }} />
                      )}
                    </td>
                  ))}
                  <td className="px-6 py-3 text-right">
                    <Money accounting value={{ amount: r.total, currency }} />
                  </td>
                </tr>
              ))}
            </tbody>
            <tfoot>
              <tr>
                <td data-frozen="left" />
                {AGING_BUCKETS.map((b) => (
                  <td className="px-3" key={b}>
                    <Rule variant="subtotal" />
                  </td>
                ))}
                <td className="px-6">
                  <Rule variant="subtotal" />
                </td>
              </tr>
              <tr>
                <th className="px-6 py-3 text-left text-label font-medium" scope="row">
                  Total
                </th>
                {AGING_BUCKETS.map((b) => (
                  <td className="px-3 py-3 text-right" key={b}>
                    <Money accounting size="md" value={{ amount: columnTotals[b], currency }} />
                  </td>
                ))}
                <td className="px-6 py-3 text-right">
                  <Money accounting size="md" value={{ amount: grandTotal, currency }} />
                </td>
              </tr>
              <tr>
                <td colSpan={6} />
                <td className="px-6">
                  <Rule variant="total" />
                </td>
              </tr>
            </tfoot>
          </table>
        </div>

        <p
          className={cn(
            "m-6 mt-4 flex items-center gap-2 rounded-sm px-3 py-2 text-body",
            proven ? "bg-positive-subtle text-positive" : "bg-negative-subtle text-negative",
          )}
          role={proven ? undefined : "alert"}
        >
          {proven ? (
            <CheckIcon aria-hidden="true" className="size-4" />
          ) : (
            <ExclamationTriangleIcon aria-hidden="true" className="size-4" />
          )}
          {proven
            ? "Row totals and column totals agree with the grand total."
            : "Row totals and column totals disagree — this aging cannot be relied on."}
        </p>
      </div>
    );
  },
);
AgingTable.displayName = "AgingTable";