AccountTieOut

import * as React from "react";
import { useScrollEdges } from "@/hooks/ledger/use-scroll-edges";
import { cn } from "@/lib/ledger/cn";
import { formatDate } from "@/lib/ledger/fiscal-period";
import { FROZEN_LABEL } from "@/lib/ledger/frozen-label";
import type { MoneyValue } from "@/lib/ledger/money.types";
import { CheckIcon, DocumentMagnifyingGlassIcon, ExclamationTriangleIcon, PaperClipIcon } from "@/components/ledger/icons";
import { Money } from "@/components/ledger/money";

export type TieOutRow = {
  accountNumber: string;
  accountName: string;
  glBalance: MoneyValue;
  /** null means there is no supporting schedule at all. */
  scheduleBalance: MoneyValue | null;
  evidence?: { name: string; hash: string };
  reviewer?: string;
  reviewedAt?: Date;
};

export interface AccountTieOutProps extends React.ComponentPropsWithoutRef<"div"> {
  asOfLabel: string;
  /**
   * Caps the scroller so the header and the account column can freeze. Without a
   * height the page scrolls instead and there is nothing for the frozen
   * header to stick to.
   */
  maxHeight?: number;
  rows: TieOutRow[];
}

/**
 * The balance-sheet walk-down. **Every balance sheet account gets one.**
 * An account with no supporting evidence renders an explicit "Unsupported"
 * state rather than nothing — nothing reads as fine.
 */
export const AccountTieOut = React.forwardRef<HTMLDivElement, AccountTieOutProps>(
  ({ className, rows, asOfLabel, maxHeight = 520, ...props }, ref) => {
    const scroller = useScrollEdges<HTMLDivElement>();
    const unsupported = rows.filter((r) => r.scheduleBalance === null);
    const breaks = rows.filter(
      (r) => r.scheduleBalance !== null && Number(r.scheduleBalance.amount) !== Number(r.glBalance.amount),
    );

    return (
      <div className={cn("space-y-3", className)} ref={ref} {...props}>
        <div className="flex flex-wrap gap-2">
          <Chip
            label={`${breaks.length} account${breaks.length === 1 ? "" : "s"} out of tie`}
            tone={breaks.length === 0 ? "positive" : "negative"}
          />
          <Chip
            label={`${unsupported.length} unsupported`}
            tone={unsupported.length === 0 ? "positive" : "warning"}
          />
        </div>

        <div className="rounded-xl border border-border bg-surface">
          <div className="px-6 pb-4 pt-6">
            <p className="text-title-sm font-medium">Balance sheet account tie-out</p>
            <p className="text-caption text-text-secondary">{asOfLabel}</p>
          </div>
          <div className="ledger-frozen scrollbar-thin" ref={scroller} style={{ maxHeight }}>
            <table className="w-full min-w-[860px]">
              <caption className="sr-only">Balance sheet account tie-out. {asOfLabel}</caption>
              <thead>
                <tr className="border-b border-border-subtle">
                  {["Account", "GL balance", "Schedule", "Difference", "Evidence", "Reviewed"].map((h, i) => (
                    <th
                      className={cn(
                        "px-3 py-3 text-label font-medium text-text-secondary",
                        i >= 1 && i <= 3 ? "text-right" : "text-left",
                        i === 0 && `pl-6 ${FROZEN_LABEL}`,
                        i === 5 && "pr-6",
                      )}
                      key={h}
                      scope="col"
                    >
                      {h}
                    </th>
                  ))}
                </tr>
              </thead>
              <tbody>
                {rows.map((r) => {
                  /* Held as a value rather than a boolean so the null check
                     narrows the type for every use below it. */
                  const scheduleBalance = r.scheduleBalance;
                  const unsupportedRow = scheduleBalance === null;
                  const difference = scheduleBalance
                    ? Number(r.glBalance.amount) - Number(scheduleBalance.amount)
                    : null;
                  const ties = difference === 0;

                  return (
                    <tr
                      className={cn(
                        "border-b border-border-subtle",
                        !unsupportedRow && !ties && "bg-negative-subtle",
                        unsupportedRow && "bg-warning-subtle",
                      )}
                      key={r.accountNumber}
                    >
                      <th
                        className="sticky left-0 z-sticky bg-[inherit] shadow-[1px_0_0_var(--border-subtle)] py-3 pl-6 pr-3 text-left font-normal"
                        scope="row"
                      >
                        <span className="reference-numeric text-caption text-text-tertiary">
                          {r.accountNumber}
                        </span>{" "}
                        <span className="text-body">{r.accountName}</span>
                      </th>
                      <td className="px-3 py-3 text-right">
                        <Money accounting value={r.glBalance} />
                      </td>
                      <td className="px-3 py-3 text-right">
                        {scheduleBalance === null ? (
                          <span className="inline-flex items-center gap-1 text-caption text-warning">
                            <DocumentMagnifyingGlassIcon aria-hidden="true" className="size-3.5" />
                            Unsupported
                          </span>
                        ) : (
                          <Money accounting value={scheduleBalance} />
                        )}
                      </td>
                      <td className="px-3 py-3 text-right">
                        {difference === null ? (
                          <span className="numeric relative text-figure-sm text-text-tertiary">
                            <span aria-hidden="true">n/a</span>
                            <span className="sr-only select-none">not available</span>
                          </span>
                        ) : (
                          <span
                            className={cn(
                              "inline-flex items-center gap-1",
                              ties ? "text-positive" : "text-negative",
                            )}
                          >
                            {ties ? (
                              <CheckIcon aria-hidden="true" className="size-3.5" />
                            ) : (
                              <ExclamationTriangleIcon aria-hidden="true" className="size-3.5" />
                            )}
                            <Money
                              accounting
                              tone="inherit"
                              value={{ amount: difference, currency: r.glBalance.currency }}
                            />
                          </span>
                        )}
                      </td>
                      <td className="px-3 py-3 text-left">
                        {r.evidence ? (
                          <span className="inline-flex items-center gap-1 text-caption text-text-secondary">
                            <PaperClipIcon aria-hidden="true" className="size-3" />
                            {r.evidence.name}
                          </span>
                        ) : (
                          <span className="text-caption text-warning">None attached</span>
                        )}
                      </td>
                      <td className="py-3 pl-3 pr-6 text-left text-caption text-text-secondary">
                        {r.reviewer && r.reviewedAt ? (
                          <>
                            {r.reviewer}
                            <span className="block text-text-tertiary">{formatDate(r.reviewedAt)}</span>
                          </>
                        ) : (
                          <span className="text-warning">Not reviewed</span>
                        )}
                      </td>
                    </tr>
                  );
                })}
              </tbody>
            </table>
          </div>
        </div>
      </div>
    );
  },
);
AccountTieOut.displayName = "AccountTieOut";

function Chip({ tone, label }: { tone: "positive" | "negative" | "warning"; label: string }) {
  return (
    <span
      className={cn(
        "rounded-sm px-2 py-1 text-caption font-medium",
        tone === "positive" && "bg-positive-subtle text-positive",
        tone === "negative" && "bg-negative-subtle text-negative",
        tone === "warning" && "bg-warning-subtle text-warning",
      )}
    >
      {label}
    </span>
  );
}