BalanceSheet

"use client";

import { cn } from "@/lib/ledger/cn";
import { formatDate } from "@/lib/ledger/fiscal-period";
import { CheckIcon, ExclamationTriangleIcon } from "@/components/ledger/icons";
import { Money } from "@/components/ledger/money";
import {
  type DrilldownTarget,
  type StatementHeader,
  type StatementLine,
  StatementTable,
} from "@/components/ledger/statement-table";

export interface BalanceSheetProps {
  /** A balance sheet is a point in time. Taking a Date, not a range, makes
      "September 2026" a category error the type system prevents. */
  asOf: Date;
  className?: string;
  /** Offer the period columns to hide. See `StatementTable`. */
  columnManager?: boolean;
  comparativeDates?: Date[];
  header: Omit<StatementHeader, "statement" | "periodLabel">;
  lines: StatementLine[];
  /** Caps the scroller so the column headers freeze. See `StatementTable`. */
  maxHeight?: number;
  onDrilldown?: (line: StatementLine, target: DrilldownTarget) => void;
  /** Passed in, already computed, per column. */
  totals: { assets: number[]; liabilities: number[]; equity: number[] };
}

/**
 * The accounting identity is a first-class UI element, not a footnote.
 * When it doesn't balance, that is a prominent error state with the
 * difference stated — never a silently wrong statement.
 */
export function BalanceSheet({
  asOf,
  comparativeDates = [],
  header,
  lines,
  totals,
  onDrilldown,
  maxHeight,
  columnManager,
  className,
}: BalanceSheetProps) {
  const dates = [asOf, ...comparativeDates];
  const periods = dates.map((d) => `As of ${formatDate(d)}`);

  return (
    <div className={cn("w-full", className)}>
      <StatementTable
        columnManager={columnManager}
        header={{
          ...header,
          periodLabel: `As of ${formatDate(asOf)}`,
          statement: "Balance sheet",
        }}
        lines={lines}
        maxHeight={maxHeight}
        onDrilldown={onDrilldown}
        periods={periods}
      />

      <div className="mt-4 space-y-2">
        {dates.map((d, i) => {
          const assets = totals.assets[i];
          const liabilities = totals.liabilities[i];
          const equity = totals.equity[i];
          const difference = assets - (liabilities + equity);
          const balanced = difference === 0;

          return (
            <div
              className={cn(
                "flex flex-wrap items-center gap-x-2 gap-y-1 rounded-md border px-4 py-3",
                balanced ? "border-positive bg-positive-subtle" : "border-negative bg-negative-subtle",
              )}
              key={d.toISOString()}
              role={balanced ? undefined : "alert"}
            >
              {balanced ? (
                <CheckIcon aria-hidden="true" className="size-4 shrink-0 text-positive" />
              ) : (
                <ExclamationTriangleIcon aria-hidden="true" className="size-4 shrink-0 text-negative" />
              )}
              <span className="text-caption text-text-secondary">{formatDate(d)}:</span>
              <span className="flex flex-wrap items-baseline gap-1 text-body">
                Assets <Money accounting value={{ amount: assets, currency: header.currency }} />
                <span aria-hidden="true">=</span>
                Liabilities <Money accounting value={{ amount: liabilities, currency: header.currency }} />
                <span aria-hidden="true">+</span>
                Equity <Money accounting value={{ amount: equity, currency: header.currency }} />
              </span>
              {balanced ? (
                <span className="text-body font-medium text-positive">Balanced</span>
              ) : (
                <span className="flex items-baseline gap-1 text-body font-medium text-negative">
                  Out by{" "}
                  <Money
                    accounting
                    tone="inherit"
                    value={{ amount: difference, currency: header.currency }}
                  />
                </span>
              )}
            </div>
          );
        })}
      </div>
    </div>
  );
}