Ledger Table

import { Fragment } from "react";
import { cn } from "@/lib/utils";

export interface LedgerEntry {
  date: string;
  ref: string;
  memo: string;
  account: string;
  debit?: number;
  credit?: number;
}

export interface LedgerTableProps {
  title?: string;
  entries?: LedgerEntry[];
  className?: string;
}

const DEFAULT_ENTRIES: LedgerEntry[] = [
  { date: "Sep 24, 2026", ref: "JE-3310", memo: "Payment · Northwind (INV-2041)", account: "1010 · Operating cash", debit: 18400 },
  { date: "Sep 24, 2026", ref: "JE-3310", memo: "Payment · Northwind (INV-2041)", account: "1200 · Accounts receivable", credit: 18400 },
  { date: "Sep 23, 2026", ref: "JE-3309", memo: "AWS · September usage", account: "6100 · Cloud infrastructure", debit: 12400 },
  { date: "Sep 23, 2026", ref: "JE-3309", memo: "AWS · September usage", account: "2000 · Accounts payable", credit: 12400 },
  { date: "Sep 23, 2026", ref: "JE-3308", memo: "Card fees · Stripe payout", account: "6550 · Payment processing fees", debit: 312.4 },
  { date: "Sep 23, 2026", ref: "JE-3308", memo: "Card fees · Stripe payout", account: "1010 · Operating cash", credit: 312.4 },
];

/** General-ledger table grouped by date: journal ref and memo, GL account, debit/credit columns in mono, credits indented, and balanced totals row with a “Balanced” check. */
export function LedgerTable({ title = "General ledger", entries = DEFAULT_ENTRIES, className }: LedgerTableProps) {
  const fmt = (n?: number) => (n === undefined ? "" : n.toLocaleString("en-US", { minimumFractionDigits: 2 }));
  const dates = [...new Set(entries.map((e) => e.date))];
  const debit = entries.reduce((s, e) => s + (e.debit ?? 0), 0);
  const credit = entries.reduce((s, e) => s + (e.credit ?? 0), 0);
  const balanced = Math.abs(debit - credit) < 0.005;
  return (
    <div
      className={cn("da-stroke relative overflow-x-auto rounded-da-lg bg-da-surface text-da-surface-fg shadow-da-sm", className)}
      role="region"
      aria-label={title}
      tabIndex={0}
    >
      <table className="w-full min-w-[680px] text-sm">
        <caption className="border-b border-da-border px-4 py-3 text-left font-semibold">{title}</caption>
        <thead className="bg-da-surface-2 text-left text-xs text-da-muted-fg">
          <tr>
            <th scope="col" className="px-4 py-2.5 font-medium">
              Ref
            </th>
            <th scope="col" className="px-4 py-2.5 font-medium">
              Memo
            </th>
            <th scope="col" className="px-4 py-2.5 font-medium">
              Account
            </th>
            <th scope="col" className="px-4 py-2.5 text-right font-medium">
              Debit
            </th>
            <th scope="col" className="px-4 py-2.5 text-right font-medium">
              Credit
            </th>
          </tr>
        </thead>
        {dates.map((d) => (
          <Fragment key={d}>
            <tbody>
              <tr className="border-y border-da-border bg-da-surface">
                <th scope="colgroup" colSpan={5} className="px-4 pt-4 pb-1.5 text-left text-xs font-semibold tracking-da-label text-da-muted-fg uppercase">
                  {d}
                </th>
              </tr>
              {entries
                .filter((e) => e.date === d)
                .map((e, i) => (
                  <tr key={`${e.ref}-${i}`} className="border-b border-da-border last:border-0">
                    <td className="px-4 py-2.5 font-da-mono text-xs text-da-muted-fg">{e.ref}</td>
                    <td className="px-4 py-2.5">{e.memo}</td>
                    <td className={cn("px-4 py-2.5", e.credit !== undefined && "pl-10")}>{e.account}</td>
                    <td className="px-4 py-2.5 text-right font-da-mono tabular-nums">{fmt(e.debit)}</td>
                    <td className="px-4 py-2.5 text-right font-da-mono tabular-nums">{fmt(e.credit)}</td>
                  </tr>
                ))}
            </tbody>
          </Fragment>
        ))}
        <tfoot className="border-t-2 border-da-border-strong bg-da-surface-2">
          <tr>
            <th scope="row" colSpan={3} className="px-4 py-3 text-left font-semibold">
              Totals{" "}
              <span
                className={cn(
                  "ml-2 rounded-da-sm px-1.5 py-0.5 text-xs font-semibold",
                  balanced ? "bg-da-success/12 text-da-success" : "bg-da-danger/10 text-da-danger",
                )}
              >
                {balanced ? "✓ Balanced" : "Out of balance"}
              </span>
            </th>
            <td className="px-4 py-3 text-right font-da-mono font-medium tabular-nums">{fmt(debit)}</td>
            <td className="px-4 py-3 text-right font-da-mono font-medium tabular-nums">{fmt(credit)}</td>
          </tr>
        </tfoot>
      </table>
    </div>
  );
}

export default LedgerTable;