DrilldownSheet

"use client";

import { cn } from "@/lib/ledger/cn";
import { formatDateShort } from "@/lib/ledger/fiscal-period";
import type { MoneyValue } from "@/lib/ledger/money.types";
import { ArrowTopRightOnSquareIcon, CheckIcon, ExclamationTriangleIcon } from "@/components/ledger/icons";
import { Money } from "@/components/ledger/money";
import { Reference } from "@/components/ledger/reference";
import { Rule } from "@/components/ledger/rule";
import { Sheet } from "@/components/ledger/sheet";

export type GlEntry = {
  id: string;
  date: Date;
  journal: string;
  account: string;
  memo: string;
  amount: MoneyValue;
  sourceDocument?: string;
};

export interface DrilldownSheetProps {
  entries: GlEntry[];
  /** Passed in — the component doesn't sum. It compares. */
  entriesTotal: MoneyValue;
  lineLabel: string;
  /** The statement line's value, as reported. */
  lineValue: MoneyValue;
  onOpenChange: (open: boolean) => void;
  open: boolean;
  /** The resolved period the figure was read from. Shown under the line
      label rather than concatenated into it — one heading, not a slug. */
  periodLabel?: string;
}

/**
 * Statement line → the GL entries behind it. The entries sum to the line and
 * the sum is displayed — that verification is the whole point of drilling
 * down.
 *
 * Two columns, not four: the memo is what identifies an entry to a human, so
 * it leads, and the date, journal, account and source document sit under it
 * as one quiet provenance line. Everything else competing for the same
 * horizontal space is what made this hard to read.
 */
export function DrilldownSheet({
  open,
  onOpenChange,
  lineLabel,
  periodLabel,
  lineValue,
  entries,
  entriesTotal,
}: DrilldownSheetProps) {
  const ties = Number(entriesTotal.amount) === Number(lineValue.amount);
  const difference = Number(entriesTotal.amount) - Number(lineValue.amount);

  return (
    <Sheet
      description={
        periodLabel
          ? `${periodLabel} · ${entries.length} general ledger entries`
          : `${entries.length} general ledger entries`
      }
      onOpenChange={onOpenChange}
      open={open}
      side="right"
      title={lineLabel}
    >
      <table className="w-full">
        <caption className="sr-only">Entries behind {lineLabel}</caption>
        <thead>
          <tr className="border-b border-border-subtle">
            <th className="py-2 text-left text-label text-text-secondary" scope="col">
              Entry
            </th>
            <th className="py-2 text-right text-label text-text-secondary" scope="col">
              Amount
            </th>
          </tr>
        </thead>
        <tbody>
          {entries.map((e) => (
            <tr className="border-b border-border-subtle align-top" key={e.id}>
              <th className="py-2.5 pr-4 text-left font-normal" scope="row">
                <span className="block text-body">{e.memo}</span>
                {/* Provenance, one line, tertiary: the reader scans memos
                    and amounts, and only reaches for this when an entry looks
                    wrong. */}
                {/* Each separator travels with the item it precedes, so a
                    wrap at 480px never strands a "·" at the end of a line. */}
                <span className="mt-0.5 flex flex-wrap items-center gap-x-1.5 text-caption text-text-tertiary">
                  <span className="numeric">{formatDateShort(e.date)}</span>
                  <span className="flex items-center gap-x-1.5 whitespace-nowrap">
                    <span aria-hidden="true">·</span>
                    {/* Not copyable here. A copy control per row is a button
                        every four lines, and hiding it until hover either
                        reserves the gap anyway or reflows the line under the
                        pointer. The entry opens from its source document. */}
                    <Reference copyable={false} truncate={false} value={e.journal} />
                  </span>
                  <span className="whitespace-nowrap">
                    <span aria-hidden="true" className="mr-1.5">
                      ·
                    </span>
                    {e.account}
                  </span>
                  {e.sourceDocument ? (
                    <span className="whitespace-nowrap">
                      <span aria-hidden="true" className="mr-1.5">
                        ·
                      </span>
                      <a
                        className="inline-flex items-center gap-1 align-middle text-accent hover:underline"
                        href="#source"
                      >
                        <ArrowTopRightOnSquareIcon aria-hidden="true" className="size-3" />
                        {e.sourceDocument}
                      </a>
                    </span>
                  ) : null}
                </span>
              </th>
              <td className="py-2.5 text-right">
                <Money accounting value={e.amount} />
              </td>
            </tr>
          ))}
        </tbody>
        <tfoot>
          <tr>
            <td />
            <td>
              <Rule variant="subtotal" />
            </td>
          </tr>
          <tr>
            <th className="py-2 text-left text-label font-medium" scope="row">
              Entries total
            </th>
            <td className="py-2 text-right">
              <Money accounting size="md" value={entriesTotal} />
            </td>
          </tr>
          <tr>
            <th className="py-2 text-left text-label text-text-secondary" scope="row">
              Statement line
            </th>
            <td className="py-2 text-right">
              <Money accounting tone="secondary" value={lineValue} />
            </td>
          </tr>
        </tfoot>
      </table>

      {/* When it ties this is a receipt, not an announcement — one quiet
          line. When it does not, it is the most important thing on screen. */}
      <p
        className={cn(
          "mt-4 flex items-center gap-2 text-body",
          ties ? "text-text-secondary" : "rounded-sm bg-negative-subtle px-3 py-2 text-negative",
        )}
        role={ties ? undefined : "alert"}
      >
        {ties ? (
          <CheckIcon aria-hidden="true" className="size-4 shrink-0 text-positive" />
        ) : (
          <ExclamationTriangleIcon aria-hidden="true" className="size-4 shrink-0" />
        )}
        {ties ? (
          "The entries sum to the statement line."
        ) : (
          <>
            The entries do not sum to the statement line — out by{" "}
            <Money tone="inherit" value={{ amount: difference, currency: lineValue.currency }} />.
          </>
        )}
      </p>
    </Sheet>
  );
}