RollForward

import * as React from "react";
import { cn } from "@/lib/ledger/cn";
import type { MoneyValue } from "@/lib/ledger/money.types";
import { CheckIcon, ExclamationTriangleIcon } from "@/components/ledger/icons";
import { Money } from "@/components/ledger/money";
import { Rule } from "@/components/ledger/rule";

export interface RollForwardProps extends React.ComponentPropsWithoutRef<"div"> {
  additions: MoneyValue;
  adjustments: MoneyValue;
  closing: MoneyValue;
  explanation?: string;
  /** Asserted against the GL. */
  glBalance: MoneyValue;
  opening: MoneyValue;
  periodLabel: string;
  /** Asserted against the prior period's closing. */
  priorClosing?: MoneyValue;
  releases: MoneyValue;
  title: string;
}

/**
 * The most reusable component in the accounting family — every schedule is
 * this shape.
 *
 * Opening · + Additions · − Releases · ± Adjustments · = Closing, then
 * closing vs. GL. The difference is always visible, and non-zero is the
 * primary state of the screen with a required explanation.
 */
export const RollForward = React.forwardRef<HTMLDivElement, RollForwardProps>(
  (
    {
      className,
      title,
      periodLabel,
      opening,
      priorClosing,
      additions,
      releases,
      adjustments,
      closing,
      glBalance,
      explanation,
      ...props
    },
    ref,
  ) => {
    const currency = closing.currency;
    const continuity = priorClosing == null || Number(priorClosing.amount) === Number(opening.amount);
    const glDifference = Number(closing.amount) - Number(glBalance.amount);
    const ties = glDifference === 0;
    const ok = continuity && ties;

    return (
      <div
        className={cn("rounded-xl border bg-surface", ok ? "border-border" : "border-negative", className)}
        ref={ref}
        {...props}
      >
        <header className="border-b border-border-subtle px-6 py-4">
          <h3 className="text-title-sm font-medium">{title}</h3>
          <p className="text-caption text-text-secondary">{periodLabel}</p>
        </header>

        <table className="w-full">
          <caption className="sr-only">
            {title} roll-forward for {periodLabel}
          </caption>
          <tbody>
            <Line amount={opening} label="Opening balance" />
            <Line amount={additions} label="Additions" sign="+" />
            <Line amount={releases} label="Releases" sign="−" />
            <Line amount={adjustments} label="Adjustments" sign="±" />
            <tr>
              <td />
              <td className="px-6">
                <Rule variant="subtotal" />
              </td>
            </tr>
            <Line amount={closing} emphasis label="Closing balance" />
            <tr>
              <td />
              <td className="px-6">
                <Rule variant="total" />
              </td>
            </tr>
            <Line amount={glBalance} label="General ledger balance" muted />
            <tr>
              <th
                className={cn(
                  "py-2 pl-6 pr-6 text-left text-label font-medium",
                  ties ? "text-positive" : "text-negative",
                )}
                scope="row"
              >
                Difference
              </th>
              <td className={cn("px-6 py-2 text-right", ties ? "text-positive" : "text-negative")}>
                <Money accounting size="md" tone="inherit" value={{ amount: glDifference, currency }} />
              </td>
            </tr>
          </tbody>
        </table>

        <div className="space-y-2 px-6 pb-6">
          {!continuity && priorClosing ? (
            <p
              className="flex items-center gap-2 rounded-sm bg-negative-subtle px-3 py-2 text-body text-negative"
              role="alert"
            >
              <ExclamationTriangleIcon aria-hidden="true" className="size-4 shrink-0" />
              Opening does not equal the prior period’s closing of{" "}
              <Money accounting tone="inherit" value={priorClosing} />.
            </p>
          ) : null}

          <p
            className={cn(
              "flex items-center gap-2 rounded-sm px-3 py-2 text-body",
              ties ? "bg-positive-subtle text-positive" : "bg-negative-subtle text-negative",
            )}
            role={ties ? undefined : "alert"}
          >
            {ties ? (
              <CheckIcon aria-hidden="true" className="size-4 shrink-0" />
            ) : (
              <ExclamationTriangleIcon aria-hidden="true" className="size-4 shrink-0" />
            )}
            {ties
              ? "Closing balance ties to the general ledger."
              : "Closing balance does not tie to the general ledger. This must be explained before the close can proceed."}
          </p>

          {!ties ? (
            explanation ? (
              <p className="rounded-sm bg-surface-sunken p-3 text-body">{explanation}</p>
            ) : (
              <label className="block">
                <span className="mb-1 block text-label font-medium text-text-secondary">
                  Explanation (required)
                </span>
                <textarea
                  className="w-full rounded-sm border border-border bg-surface p-2 text-body outline-none focus-visible:border-accent"
                  placeholder="What accounts for the difference?"
                  rows={2}
                />
              </label>
            )
          ) : null}
        </div>
      </div>
    );
  },
);
RollForward.displayName = "RollForward";

function Line({
  label,
  amount,
  sign,
  emphasis,
  muted,
}: {
  label: string;
  amount: MoneyValue;
  sign?: string;
  emphasis?: boolean;
  muted?: boolean;
}) {
  return (
    <tr>
      <th
        className={cn(
          "py-2 pl-6 pr-6 text-left text-body font-normal",
          emphasis && "font-medium",
          muted && "text-text-secondary",
        )}
        scope="row"
      >
        {sign ? (
          <span aria-hidden="true" className="mr-2 inline-block w-3 text-text-tertiary">
            {sign}
          </span>
        ) : (
          <span aria-hidden="true" className="mr-2 inline-block w-3" />
        )}
        {label}
      </th>
      <td className="px-6 py-2 text-right">
        <Money
          accounting
          size={emphasis ? "md" : "sm"}
          tone={muted ? "secondary" : "primary"}
          value={amount}
        />
      </td>
    </tr>
  );
}