AccountRegister

import * as React from "react";
import { useScrollEdges } from "@/hooks/ledger/use-scroll-edges";
import { cn } from "@/lib/ledger/cn";
import { formatDateShort } from "@/lib/ledger/fiscal-period";
import type { MoneyValue } from "@/lib/ledger/money.types";
import { Money } from "@/components/ledger/money";
import { Reference } from "@/components/ledger/reference";
import { Rule } from "@/components/ledger/rule";

export type RegisterLine = {
  id: string;
  date: Date;
  entryNumber: string;
  memo: string;
  debit: MoneyValue | null;
  credit: MoneyValue | null;
  /** Passed in, already computed. */
  runningBalance: MoneyValue;
};

export interface AccountRegisterProps extends React.ComponentPropsWithoutRef<"div"> {
  accountName: string;
  accountNumber: string;
  closingBalance: MoneyValue;
  lines: RegisterLine[];
  /** Caps the scroller so the header and the date column can freeze. */
  maxHeight?: number;
  openingBalance: MoneyValue;
  periodLabel: string;
}

/**
 * Where an accountant goes when a tie-out fails. Opening balance row,
 * closing balance row, and a running balance column — both ends tie to the
 * trial balance.
 */
export const AccountRegister = React.forwardRef<HTMLDivElement, AccountRegisterProps>(
  (
    {
      className,
      accountNumber,
      accountName,
      periodLabel,
      openingBalance,
      closingBalance,
      lines,
      maxHeight = 520,
      ...props
    },
    ref,
  ) => {
    const scroller = useScrollEdges<HTMLDivElement>();
    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">
            <span className="reference-numeric text-text-tertiary">{accountNumber}</span> {accountName}
          </p>
          <p className="text-caption text-text-secondary">{periodLabel}</p>
        </div>
        <div className="ledger-frozen scrollbar-thin" ref={scroller} style={{ maxHeight }}>
          <table
            className="w-full min-w-[760px]"
            /* Never sortable. The running balance column is only a running balance
             in date order — re-order the rows and every figure in it becomes a
             number that was never true. Declared here rather than left to the
             caller, because the register is what knows it. */
            data-sortable="false"
          >
            <caption className="sr-only">
              Register for {accountNumber} {accountName}. {periodLabel}
            </caption>
            <thead>
              <tr className="border-b border-border-subtle">
                {["Date", "Entry", "Memo", "Debit", "Credit", "Balance"].map((h, i) => (
                  <th
                    className={cn(
                      "px-3 py-3 text-label font-medium text-text-secondary",
                      i >= 3 ? "text-right" : "text-left",
                      i === 0 && "pl-6",
                      i === 5 && "pr-6",
                    )}
                    data-frozen={i === 0 ? "left" : undefined}
                    key={h}
                    scope="col"
                  >
                    {h}
                  </th>
                ))}
              </tr>
            </thead>
            <tbody>
              <tr className="border-b border-border-subtle bg-surface-sunken">
                <th
                  className="py-2 pl-6 pr-3 text-left text-label font-medium"
                  colSpan={5}
                  data-frozen="none"
                  scope="row"
                >
                  Opening balance
                </th>
                <td className="py-2 pl-3 pr-6 text-right">
                  <Money accounting value={openingBalance} />
                </td>
              </tr>
              {lines.map((l) => (
                <tr className="border-b border-border-subtle" key={l.id}>
                  <td
                    className="numeric py-2 pl-6 pr-3 text-figure-sm text-text-secondary"
                    data-frozen="left"
                  >
                    {formatDateShort(l.date)}
                  </td>
                  <td className="px-3 py-2">
                    <Reference copyable={false} truncate={false} value={l.entryNumber} />
                  </td>
                  <th
                    className="max-w-0 truncate px-3 py-2 text-left text-body font-normal"
                    data-frozen="none"
                    scope="row"
                  >
                    {l.memo}
                  </th>
                  <td className="px-3 py-2 text-right">
                    {l.debit ? <Money accounting value={l.debit} /> : null}
                  </td>
                  <td className="px-3 py-2 text-right">
                    {l.credit ? <Money accounting value={l.credit} /> : null}
                  </td>
                  <td className="py-2 pl-3 pr-6 text-right">
                    <Money accounting tone="secondary" value={l.runningBalance} />
                  </td>
                </tr>
              ))}
            </tbody>
            <tfoot>
              <tr>
                <td colSpan={5} />
                <td className="pr-6">
                  <Rule variant="subtotal" />
                </td>
              </tr>
              <tr>
                <th
                  className="py-3 pl-6 pr-3 text-left text-label font-medium"
                  colSpan={5}
                  data-frozen="none"
                  scope="row"
                >
                  Closing balance
                </th>
                <td className="py-3 pl-3 pr-6 text-right">
                  <Money accounting size="md" value={closingBalance} />
                </td>
              </tr>
              <tr>
                <td colSpan={5} />
                <td className="pr-6">
                  <Rule variant="total" />
                </td>
              </tr>
            </tfoot>
          </table>
        </div>
      </div>
    );
  },
);
AccountRegister.displayName = "AccountRegister";