AllowanceRollForward

import * as React from "react";
import { cn } from "@/lib/ledger/cn";
import type { MoneyValue } from "@/lib/ledger/money.types";
import { Money } from "@/components/ledger/money";
import { RollForward } from "@/components/ledger/roll-forward";

export type AllowanceMethodologyInput = {
  bucket: string;
  rate: number;
  base: MoneyValue;
  computed: MoneyValue;
};

export interface AllowanceRollForwardProps extends React.ComponentPropsWithoutRef<"div"> {
  closing: MoneyValue;
  glBalance: MoneyValue;
  methodology: AllowanceMethodologyInput[];
  opening: MoneyValue;
  periodLabel: string;
  /** Provision and write-off are named as distinct actions — they have
      different P&L effects. */
  provision: MoneyValue;
  recoveries: MoneyValue;
  writeOffs: MoneyValue;
}

/** The methodology is displayed, each input traceable to the aging. */
export const AllowanceRollForward = React.forwardRef<HTMLDivElement, AllowanceRollForwardProps>(
  (
    {
      className,
      periodLabel,
      opening,
      provision,
      writeOffs,
      recoveries,
      closing,
      glBalance,
      methodology,
      ...props
    },
    ref,
  ) => (
    <div className={cn("space-y-4", className)} ref={ref} {...props}>
      <RollForward
        additions={provision}
        adjustments={recoveries}
        closing={closing}
        glBalance={glBalance}
        opening={opening}
        periodLabel={periodLabel}
        releases={writeOffs}
        title="Allowance for credit losses"
      />

      <div className="rounded-xl border border-border bg-surface p-6">
        <h3 className="text-title-sm font-medium">Methodology</h3>
        <p className="mt-1 text-caption text-text-secondary">Each input traces to a bucket in the aging.</p>
        <table className="mt-3 w-full">
          <caption className="sr-only">Allowance methodology inputs</caption>
          <thead>
            <tr className="border-b border-border-subtle">
              <th className="py-2 text-left text-label font-medium text-text-secondary" scope="col">
                Bucket
              </th>
              <th className="py-2 text-right text-label font-medium text-text-secondary" scope="col">
                Rate
              </th>
              <th className="py-2 text-right text-label font-medium text-text-secondary" scope="col">
                Base
              </th>
              <th className="py-2 text-right text-label font-medium text-text-secondary" scope="col">
                Allowance
              </th>
            </tr>
          </thead>
          <tbody>
            {methodology.map((m) => (
              <tr className="border-b border-border-subtle" key={m.bucket}>
                <th className="py-2 text-left text-body font-normal" scope="row">
                  {m.bucket}
                </th>
                <td className="numeric py-2 text-right text-figure-sm">{m.rate}%</td>
                <td className="py-2 text-right">
                  <Money accounting tone="secondary" value={m.base} />
                </td>
                <td className="py-2 text-right">
                  <Money accounting value={m.computed} />
                </td>
              </tr>
            ))}
          </tbody>
        </table>
        <p className="mt-3 text-caption text-text-secondary">
          {methodology.map((m) => `${m.rate}% of ${m.bucket}`).join(" + ")}
        </p>
      </div>
    </div>
  ),
);
AllowanceRollForward.displayName = "AllowanceRollForward";