ChartOfAccounts

"use client";

import * as React from "react";
import { useScrollEdges } from "@/hooks/ledger/use-scroll-edges";
import type { Account } from "@/lib/ledger/accounting.types";
import { cn } from "@/lib/ledger/cn";
import { FROZEN_LABEL } from "@/lib/ledger/frozen-label";
import type { MoneyValue } from "@/lib/ledger/money.types";
import { ChevronRightIcon, ExclamationTriangleIcon } from "@/components/ledger/icons";
import { Money } from "@/components/ledger/money";

export interface ChartOfAccountsProps {
  accounts: Account[];
  balances: Record<string, MoneyValue>;
  className?: 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;
}

/**
 * Hierarchy capped at 5 levels — deeper is a chart-of-accounts problem, not
 * a UI problem.
 *
 * Accounts with no supporting-schedule mapping are surfaced, because that
 * absence is itself a finding.
 */
export function ChartOfAccounts({ accounts, balances, maxHeight = 520, className }: ChartOfAccountsProps) {
  const scroller = useScrollEdges<HTMLDivElement>();
  const [collapsed, setCollapsed] = React.useState<Set<string>>(new Set());

  const byParent = React.useMemo(() => {
    const map = new Map<string | undefined, Account[]>();
    for (const a of accounts) {
      const list = map.get(a.parentId) ?? [];
      list.push(a);
      map.set(a.parentId, list);
    }
    return map;
  }, [accounts]);

  const unsupported = accounts.filter(
    (a) => (a.type === "asset" || a.type === "liability") && a.isPostable && !a.scheduleType,
  );

  const rows: { account: Account; depth: number }[] = [];
  const walk = (parentId: string | undefined, depth: number) => {
    if (depth > 5) return;
    for (const a of byParent.get(parentId) ?? []) {
      rows.push({ account: a, depth });
      if (!collapsed.has(a.id)) walk(a.id, depth + 1);
    }
  };
  walk(undefined, 0);

  return (
    <div className={cn("space-y-3", className)}>
      {unsupported.length > 0 ? (
        <p className="flex items-start gap-2 rounded-sm bg-warning-subtle px-3 py-2 text-body">
          <ExclamationTriangleIcon aria-hidden="true" className="mt-0.5 size-4 shrink-0 text-warning" />
          <span>
            <span className="numeric font-medium">{unsupported.length}</span> balance-sheet accounts have no
            supporting schedule mapped: {unsupported.map((a) => `${a.number} ${a.name}`).join(", ")}. That
            absence is itself a finding.
          </span>
        </p>
      ) : null}

      <div
        className="ledger-frozen scrollbar-thin rounded-xl border border-border bg-surface"
        ref={scroller}
        style={{ maxHeight }}
      >
        <table className="w-full min-w-[820px]">
          <caption className="sr-only">Chart of accounts</caption>
          <thead>
            <tr className="border-b border-border-subtle">
              {["Account", "Type", "Normal", "Statement line", "Schedule", "Balance"].map((h, i) => (
                <th
                  className={cn(
                    "px-3 py-3 text-label font-medium text-text-secondary",
                    i === 5 ? "text-right pr-6" : "text-left",
                    i === 0 && `pl-6 ${FROZEN_LABEL}`,
                  )}
                  key={h}
                  scope="col"
                >
                  {h}
                </th>
              ))}
            </tr>
          </thead>
          <tbody>
            {rows.map(({ account: a, depth }) => {
              const hasChildren = (byParent.get(a.id)?.length ?? 0) > 0;
              return (
                <tr className="border-b border-border-subtle" key={a.id}>
                  <th
                    className={cn(FROZEN_LABEL, "py-2 pr-3 text-left font-normal")}
                    data-level={depth + 1}
                    scope="row"
                    style={{ paddingLeft: 24 + depth * 24 }}
                  >
                    <span className="flex items-center gap-1.5">
                      {hasChildren ? (
                        <button
                          aria-expanded={!collapsed.has(a.id)}
                          aria-label={`${collapsed.has(a.id) ? "Expand" : "Collapse"} ${a.name}`}
                          className="press grid size-5 place-items-center rounded-xs text-text-tertiary hover:bg-surface-hover"
                          onClick={() =>
                            setCollapsed((prev) => {
                              const next = new Set(prev);
                              if (next.has(a.id)) next.delete(a.id);
                              else next.add(a.id);
                              return next;
                            })
                          }
                          type="button"
                        >
                          <ChevronRightIcon
                            className={cn(
                              "size-3.5 transition-transform duration-2 ease-standard",
                              !collapsed.has(a.id) && "rotate-90",
                            )}
                          />
                        </button>
                      ) : (
                        <span aria-hidden="true" className="size-5" />
                      )}
                      <span className="reference-numeric text-caption text-text-tertiary">{a.number}</span>
                      <span className={cn("text-body", !a.isPostable && "font-medium")}>{a.name}</span>
                      {a.isContra ? <span className="text-caption text-text-tertiary">(contra)</span> : null}
                    </span>
                  </th>
                  <td className="px-3 py-2 text-caption capitalize text-text-secondary">{a.type}</td>
                  <td className="px-3 py-2 text-caption text-text-secondary">
                    {a.normalBalance === "debit" ? "Dr" : "Cr"}
                  </td>
                  <td className="px-3 py-2 text-caption text-text-secondary">{a.statementMapping}</td>
                  <td className="px-3 py-2 text-caption text-text-secondary">
                    {a.scheduleType ?? <span className="text-warning">Unsupported</span>}
                  </td>
                  <td className="py-2 pl-3 pr-6 text-right">
                    {balances[a.id] ? (
                      <Money accounting value={balances[a.id]} />
                    ) : (
                      <span className="numeric relative text-figure-sm text-text-tertiary">
                        <span className="sr-only select-none">not applicable</span>
                      </span>
                    )}
                  </td>
                </tr>
              );
            })}
          </tbody>
        </table>
      </div>
    </div>
  );
}