JournalEntryTable

"use client";

import * as React from "react";
import { useScrollEdges } from "@/hooks/ledger/use-scroll-edges";
import type { EntrySource, JournalEntryRecord } from "@/lib/ledger/accounting.types";
import { cn } from "@/lib/ledger/cn";
import { formatDateShort } from "@/lib/ledger/fiscal-period";
import type { MoneyValue } from "@/lib/ledger/money.types";
import { ExclamationTriangleIcon } from "@/components/ledger/icons";
import { Money } from "@/components/ledger/money";
import { Reference } from "@/components/ledger/reference";

export interface JournalEntryTableProps extends React.ComponentPropsWithoutRef<"div"> {
  entries: (JournalEntryRecord & { total: MoneyValue })[];
  /** Caps the scroller so the header and the entry column can freeze. */
  maxHeight?: number;
  /** Most tax regimes require sequence; a gap is an audit finding. */
  numberingGaps?: string[];
  onOpen?: (entry: JournalEntryRecord) => void;
}

const SOURCES: EntrySource[] = [
  "manual",
  "adjusting",
  "recurring",
  "subledger",
  "schedule",
  "elimination",
  "translation",
  "import",
];

export function JournalEntryTable({
  className,
  entries,
  numberingGaps = [],
  onOpen,
  maxHeight = 520,
  ...props
}: JournalEntryTableProps) {
  const scroller = useScrollEdges<HTMLDivElement>();
  const [source, setSource] = React.useState<EntrySource | "all">("all");
  const filtered = source === "all" ? entries : entries.filter((e) => e.source === source);

  return (
    <div className={cn("space-y-3", className)} {...props}>
      {numberingGaps.length > 0 ? (
        <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" />
          Entry numbering has {numberingGaps.length} gap
          {numberingGaps.length === 1 ? "" : "s"} ({numberingGaps.join(", ")}). Sequence is required, and a
          gap is an audit finding.
        </p>
      ) : null}

      <label className="inline-flex items-center gap-2">
        <span className="text-label font-medium text-text-secondary">Source</span>
        <select
          className="h-8 rounded-sm border border-border bg-surface px-2 text-label outline-none focus-visible:border-accent focus-visible:ring-2 focus-visible:ring-accent-subtle"
          onChange={(e) => setSource(e.target.value as EntrySource | "all")}
          value={source}
        >
          <option value="all">All</option>
          {SOURCES.map((s) => (
            <option className="capitalize" key={s} value={s}>
              {s}
            </option>
          ))}
        </select>
      </label>

      <div
        className="ledger-frozen scrollbar-thin rounded-xl border border-border bg-surface"
        ref={scroller}
        style={{ maxHeight }}
      >
        <table className="w-full min-w-[720px]">
          <caption className="sr-only">Journal entries</caption>
          <thead>
            <tr className="border-b border-border-subtle">
              {["Entry", "Date", "Description", "Source", "Status", "Amount"].map((h, i) => (
                <th
                  className={cn(
                    "px-3 py-3 text-label font-medium text-text-secondary",
                    i === 5 ? "text-right" : "text-left",
                    i === 0 && "pl-6",
                    i === 5 && "pr-6",
                  )}
                  data-frozen={i === 0 ? "left" : undefined}
                  key={h}
                  scope="col"
                >
                  {h}
                </th>
              ))}
            </tr>
          </thead>
          <tbody>
            {filtered.map((e) => (
              <tr
                className="border-b border-border-subtle transition-colors duration-1 ease-standard hover:bg-surface-hover"
                key={e.id}
              >
                <td className="py-3 pl-6 pr-3" data-frozen="left">
                  <button className="text-left" onClick={() => onOpen?.(e)} type="button">
                    <Reference copyable={false} truncate={false} value={e.entryNumber} />
                  </button>
                </td>
                <td className="numeric px-3 py-3 text-figure-sm text-text-secondary">
                  {formatDateShort(e.date)}
                </td>
                <th
                  className="max-w-0 truncate px-3 py-3 text-left text-body font-normal"
                  data-frozen="none"
                  scope="row"
                >
                  {e.description}
                </th>
                <td className="px-3 py-3 text-caption capitalize text-text-secondary">{e.source}</td>
                <td className="px-3 py-3 text-caption capitalize text-text-secondary">{e.status}</td>
                <td className="py-3 pl-3 pr-6 text-right">
                  <Money accounting value={e.total} />
                </td>
              </tr>
            ))}
          </tbody>
        </table>
      </div>
    </div>
  );
}