TrialBalance

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 type TrialBalanceRow = {
  number: string;
  name: string;
  /** Two columns. One of these is zero for any given account. */
  debit: number;
  credit: number;
  normalBalance: "Dr" | "Cr";
};

export interface TrialBalanceProps extends React.ComponentPropsWithoutRef<"div"> {
  asOfLabel: string;
  currency: string;
  /** Caps the scroller so the header and the account column can freeze. */
  maxHeight?: number;
  rows: TrialBalanceRow[];
  totalCredit: number;
  totalDebit: number;
}

/**
 * The most boring component in the library, and the one an accountant checks
 * first. Every account, with the proof that debits equal credits.
 */
export const TrialBalance = React.forwardRef<HTMLDivElement, TrialBalanceProps>(
  ({ className, rows, currency, totalDebit, totalCredit, asOfLabel, maxHeight = 520, ...props }, ref) => {
    const scroller = useScrollEdges<HTMLDivElement>();
    const balanced = totalDebit === totalCredit;
    return (
      <div className={cn("rounded-xl border border-border bg-surface", className)} ref={ref} {...props}>
        <div className="px-6 pb-4 pt-6">
          <p className="text-title-sm font-medium">Trial balance</p>
          <p className="text-caption text-text-secondary">{asOfLabel}</p>
        </div>
        <div className="ledger-frozen scrollbar-thin" ref={scroller} style={{ maxHeight }}>
          <table className="w-full min-w-[680px]">
            <caption className="sr-only">Trial balance. {asOfLabel}</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">
                  Account
                </th>
                <th className="px-3 py-3 text-left text-label font-medium text-text-secondary" scope="col">
                  Normal
                </th>
                <th className="px-3 py-3 text-right text-label font-medium text-text-secondary" scope="col">
                  Debit
                </th>
                <th className="px-6 py-3 text-right text-label font-medium text-text-secondary" scope="col">
                  Credit
                </th>
              </tr>
            </thead>
            <tbody>
              {rows.map((r) => (
                <tr className="border-b border-border-subtle" key={r.number}>
                  <th className="px-6 py-2 text-left font-normal" scope="row">
                    <span className="reference-numeric text-caption text-text-tertiary">{r.number}</span>{" "}
                    <span className="text-body">{r.name}</span>
                  </th>
                  <td className="px-3 py-2 text-left text-caption text-text-secondary">{r.normalBalance}</td>
                  <td className="px-3 py-2 text-right">
                    {r.debit === 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.debit, currency }} />
                    )}
                  </td>
                  <td className="px-6 py-2 text-right">
                    {r.credit === 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.credit, currency }} />
                    )}
                  </td>
                </tr>
              ))}
            </tbody>
            <tfoot>
              <tr>
                <td colSpan={2} />
                <td className="px-3">
                  <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">
                  Totals
                </th>
                <td />
                <td className="px-3 py-3 text-right">
                  <Money accounting size="md" value={{ amount: totalDebit, currency }} />
                </td>
                <td className="px-6 py-3 text-right">
                  <Money accounting size="md" value={{ amount: totalCredit, currency }} />
                </td>
              </tr>
              <tr>
                <td colSpan={2} />
                <td className="px-3">
                  <Rule variant="total" />
                </td>
                <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",
            balanced ? "bg-positive-subtle text-positive" : "bg-negative-subtle text-negative",
          )}
          role={balanced ? undefined : "alert"}
        >
          {balanced ? (
            <CheckIcon aria-hidden="true" className="size-4" />
          ) : (
            <ExclamationTriangleIcon aria-hidden="true" className="size-4" />
          )}
          {balanced ? (
            "Debits equal credits."
          ) : (
            <>
              Out of balance by{" "}
              <Money tone="inherit" value={{ amount: Math.abs(totalDebit - totalCredit), currency }} />.
            </>
          )}
        </p>
      </div>
    );
  },
);
TrialBalance.displayName = "TrialBalance";