CashFlowStatement

"use client";

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

export interface CashFlowStatementProps {
  className?: string;
  /** Offer the period columns to hide. See `StatementTable`. */
  columnManager?: boolean;
  header: Omit<StatementHeader, "statement">;
  lines: StatementLine[];
  /** Caps the scroller so the column headers freeze. See `StatementTable`. */
  maxHeight?: number;
  method?: "indirect" | "direct";
  periods: string[];
  /** Beginning + net change = ending, and ending must equal the balance
      sheet cash line. Asserted and displayed. */
  tieOut: {
    beginningCash: number[];
    netChange: number[];
    endingCash: number[];
    balanceSheetCash: number[];
  };
}

/**
 * The working-capital sign convention is inverted and it confuses everyone:
 * an *increase* in AR is a *use* of cash. The lines are labelled
 * "(Increase) / decrease in …" exactly so, because the parenthetical is
 * what makes the sign readable.
 */
export function CashFlowStatement({
  header,
  periods,
  method = "indirect",
  lines,
  tieOut,
  maxHeight,
  columnManager,
  className,
}: CashFlowStatementProps) {
  return (
    <div className={cn("w-full", className)}>
      <StatementTable
        columnManager={columnManager}
        header={{
          ...header,
          statement: `Statement of cash flows (${method} method)`,
        }}
        lines={lines}
        maxHeight={maxHeight}
        periods={periods}
      />

      <div className="mt-4 space-y-2">
        {periods.map((p, i) => {
          const computed = tieOut.beginningCash[i] + tieOut.netChange[i];
          const tiesInternally = computed === tieOut.endingCash[i];
          const tiesToBalanceSheet = tieOut.endingCash[i] === tieOut.balanceSheetCash[i];
          const ok = tiesInternally && tiesToBalanceSheet;

          return (
            <div
              className={cn(
                "flex flex-wrap items-center gap-2 rounded-md border px-4 py-3",
                ok ? "border-positive bg-positive-subtle" : "border-negative bg-negative-subtle",
              )}
              key={p}
              role={ok ? undefined : "alert"}
            >
              {ok ? (
                <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">{p}:</span>
              <span className="flex flex-wrap items-baseline gap-1 text-body">
                Beginning{" "}
                <Money accounting value={{ amount: tieOut.beginningCash[i], currency: header.currency }} />
                <span aria-hidden="true">+</span>
                Net change{" "}
                <Money accounting value={{ amount: tieOut.netChange[i], currency: header.currency }} />
                <span aria-hidden="true">=</span>
                Ending{" "}
                <Money accounting value={{ amount: tieOut.endingCash[i], currency: header.currency }} />
              </span>
              <span className={cn("text-body font-medium", ok ? "text-positive" : "text-negative")}>
                {ok
                  ? "Ties to the balance sheet cash line."
                  : tiesInternally
                    ? "Does not tie to the balance sheet cash line."
                    : "Beginning plus net change does not equal ending cash."}
              </span>
            </div>
          );
        })}
      </div>
    </div>
  );
}