ScheduleTable

"use client";

import * as React from "react";
import { useScrollEdges } from "@/hooks/ledger/use-scroll-edges";
import type { ScheduleType } from "@/lib/ledger/accounting.types";
import { cn } from "@/lib/ledger/cn";
import { formatDate } from "@/lib/ledger/fiscal-period";
import type { MoneyValue } from "@/lib/ledger/money.types";
import { Money } from "@/components/ledger/money";
import { Rule } from "@/components/ledger/rule";

export type ScheduleRow = {
  id: string;
  description: string;
  startDate: Date;
  endDate: Date;
  original: MoneyValue;
  opening: MoneyValue;
  periodMovement: MoneyValue;
  closing: MoneyValue;
  /** Fully-released items are shown, then dropped — silently disappearing
      rows make a schedule impossible to follow. */
  fullyReleased?: boolean;
  extra?: Record<string, React.ReactNode>;
};

/** Columns are type-specific; the shell, totals and tie-out are shared. */
const PRESETS: Record<ScheduleType, { title: string; movementLabel: string; extraColumns: string[] }> = {
  accrual: { extraColumns: [], movementLabel: "Released this period", title: "Accrued liabilities" },
  debt: { extraColumns: ["Rate", "Maturity"], movementLabel: "Principal movement", title: "Debt" },
  "deferred-revenue": {
    extraColumns: ["Obligation"],
    movementLabel: "Recognized this period",
    title: "Deferred revenue",
  },
  "fixed-asset": {
    extraColumns: ["In service", "Life", "Method"],
    movementLabel: "Depreciation this period",
    title: "Fixed assets",
  },
  intangible: {
    extraColumns: ["Life", "Method"],
    movementLabel: "Amortization this period",
    title: "Intangible assets",
  },
  lease: {
    extraColumns: ["Classification", "Discount rate"],
    movementLabel: "Liability movement",
    title: "Leases",
  },
  prepaid: { extraColumns: [], movementLabel: "Amortized this period", title: "Prepaid expenses" },
};

export interface ScheduleTableProps extends React.ComponentPropsWithoutRef<"div"> {
  /** Caps the scroller so the header and the item column can freeze. */
  maxHeight?: number;
  onDrilldown?: (row: ScheduleRow) => void;
  periodLabel: string;
  rows: ScheduleRow[];
  totals: { opening: MoneyValue; movement: MoneyValue; closing: MoneyValue };
  type: ScheduleType;
}

/**
 * One component, seven presets. Every row drills to the entries behind it,
 * and they sum to the row.
 */
export const ScheduleTable = React.forwardRef<HTMLDivElement, ScheduleTableProps>(
  ({ className, type, periodLabel, rows, totals, onDrilldown, maxHeight = 520, ...props }, ref) => {
    const scroller = useScrollEdges<HTMLDivElement>();
    const preset = PRESETS[type];
    const [showReleased, setShowReleased] = React.useState(true);
    const visible = showReleased ? rows : rows.filter((r) => !r.fullyReleased);
    const releasedCount = rows.filter((r) => r.fullyReleased).length;

    return (
      <div className={cn("space-y-3", className)} ref={ref} {...props}>
        <div className="rounded-xl border border-border bg-surface">
          <div className="px-6 pb-4 pt-6">
            <p className="text-title-sm font-medium">{preset.title}</p>
            <p className="text-caption text-text-secondary">{periodLabel}</p>
          </div>
          <div className="ledger-frozen scrollbar-thin" ref={scroller} style={{ maxHeight }}>
            <table className="w-full min-w-[900px]">
              <caption className="sr-only">
                {preset.title}. {periodLabel}
              </caption>
              <thead>
                <tr className="border-b border-border-subtle">
                  <th
                    className="py-3 pl-6 pr-3 text-left text-label font-medium text-text-secondary"
                    scope="col"
                  >
                    Item
                  </th>
                  <th className="px-3 py-3 text-left text-label font-medium text-text-secondary" scope="col">
                    Term
                  </th>
                  {preset.extraColumns.map((c) => (
                    <th
                      className="px-3 py-3 text-left text-label font-medium text-text-secondary"
                      key={c}
                      scope="col"
                    >
                      {c}
                    </th>
                  ))}
                  <th className="px-3 py-3 text-right text-label font-medium text-text-secondary" scope="col">
                    Opening
                  </th>
                  <th className="px-3 py-3 text-right text-label font-medium text-text-secondary" scope="col">
                    {preset.movementLabel}
                  </th>
                  <th
                    className="py-3 pl-3 pr-6 text-right text-label font-medium text-text-secondary"
                    scope="col"
                  >
                    Closing
                  </th>
                </tr>
              </thead>
              <tbody>
                {visible.map((r) => (
                  <tr
                    className={cn(
                      "border-b border-border-subtle transition-colors duration-1 ease-standard hover:bg-surface-hover",
                      r.fullyReleased && "text-text-secondary",
                    )}
                    key={r.id}
                  >
                    <th className="py-3 pl-6 pr-3 text-left font-normal" scope="row">
                      <button
                        className="text-left text-body hover:underline"
                        onClick={() => onDrilldown?.(r)}
                        type="button"
                      >
                        {r.description}
                      </button>
                      {r.fullyReleased ? (
                        <span className="ml-2 text-caption text-text-tertiary">Fully released</span>
                      ) : null}
                    </th>
                    <td className="numeric px-3 py-3 text-caption text-text-secondary">
                      {formatDate(r.startDate)} – {formatDate(r.endDate)}
                    </td>
                    {preset.extraColumns.map((c) => (
                      <td className="px-3 py-3 text-caption text-text-secondary" key={c}>
                        {r.extra?.[c] ?? "—"}
                      </td>
                    ))}
                    <td className="px-3 py-3 text-right">
                      <Money accounting value={r.opening} />
                    </td>
                    <td className="px-3 py-3 text-right">
                      <Money accounting value={r.periodMovement} />
                    </td>
                    <td className="py-3 pl-3 pr-6 text-right">
                      <Money accounting value={r.closing} />
                    </td>
                  </tr>
                ))}
              </tbody>
              <tfoot>
                <tr>
                  <td colSpan={2 + preset.extraColumns.length} />
                  <td className="px-3">
                    <Rule variant="subtotal" />
                  </td>
                  <td className="px-3">
                    <Rule variant="subtotal" />
                  </td>
                  <td className="pr-6">
                    <Rule variant="subtotal" />
                  </td>
                </tr>
                <tr>
                  <th className="py-3 pl-6 pr-3 text-left text-label font-medium" scope="row">
                    Total
                  </th>
                  <td colSpan={1 + preset.extraColumns.length} />
                  <td className="px-3 py-3 text-right">
                    <Money accounting size="md" value={totals.opening} />
                  </td>
                  <td className="px-3 py-3 text-right">
                    <Money accounting size="md" value={totals.movement} />
                  </td>
                  <td className="py-3 pl-3 pr-6 text-right">
                    <Money accounting size="md" value={totals.closing} />
                  </td>
                </tr>
                <tr>
                  <td colSpan={4 + preset.extraColumns.length} />
                  <td className="pr-6">
                    <Rule variant="total" />
                  </td>
                </tr>
              </tfoot>
            </table>
          </div>
        </div>

        {releasedCount > 0 ? (
          <button
            aria-pressed={showReleased}
            className="text-caption font-medium text-accent hover:underline"
            onClick={() => setShowReleased((v) => !v)}
            type="button"
          >
            {showReleased ? "Hide" : "Show"} {releasedCount} fully released item
            {releasedCount === 1 ? "" : "s"}
          </button>
        ) : null}
      </div>
    );
  },
);
ScheduleTable.displayName = "ScheduleTable";

export { PRESETS as SCHEDULE_PRESETS };