SchedulePreview

"use client";

import { useScrollEdges } from "@/hooks/ledger/use-scroll-edges";
import { cn } from "@/lib/ledger/cn";
import { formatDate } from "@/lib/ledger/fiscal-period";
import type { MoneyValue } from "@/lib/ledger/money.types";
import { Button } from "@/components/ledger/button";
import { Money } from "@/components/ledger/money";
import { Rule } from "@/components/ledger/rule";

export type PreviewEntry = {
  id: string;
  schedule: string;
  description: string;
  debitAccount: string;
  creditAccount: string;
  amount: MoneyValue;
};

export interface SchedulePreviewProps {
  className?: string;
  entries: PreviewEntry[];
  /** Caps the scroller so the header and the schedule column can freeze. */
  maxHeight?: number;
  onPostBatch?: () => void;
  periodEnd: Date;
  total: MoneyValue;
}

/**
 * Every entry the period's schedules will generate, with totals, **before**
 * anything posts. A close should never be surprised by its own automation.
 *
 * Posts as one batch with one audit record.
 */
export function SchedulePreview({
  periodEnd,
  entries,
  total,
  onPostBatch,
  maxHeight = 520,
  className,
}: SchedulePreviewProps) {
  const scroller = useScrollEdges<HTMLDivElement>();
  return (
    <div className={cn("space-y-3", className)}>
      <div className="rounded-xl border border-border bg-surface">
        <div className="px-6 pb-4 pt-6">
          <p className="text-title-sm font-medium">Schedule entries to be posted</p>
          <p className="text-caption text-text-secondary">
            Period ending {formatDate(periodEnd)} · nothing has posted yet
          </p>
        </div>
        <div className="ledger-frozen scrollbar-thin" ref={scroller} style={{ maxHeight }}>
          <table className="w-full min-w-[820px]">
            <caption className="sr-only">
              Schedule entries to be posted for the period ending {formatDate(periodEnd)}
            </caption>
            <thead>
              <tr className="border-b border-border-subtle">
                {["Schedule", "Description", "Debit", "Credit", "Amount"].map((h, i) => (
                  <th
                    className={cn(
                      "px-3 py-3 text-label font-medium text-text-secondary",
                      i === 4 ? "pr-6 text-right" : "text-left",
                      i === 0 && "pl-6",
                    )}
                    key={h}
                    scope="col"
                  >
                    {h}
                  </th>
                ))}
              </tr>
            </thead>
            <tbody>
              {entries.map((e) => (
                <tr className="border-b border-border-subtle" key={e.id}>
                  <td className="py-3 pl-6 pr-3 text-caption capitalize text-text-secondary">{e.schedule}</td>
                  <th className="px-3 py-3 text-left text-body font-normal" scope="row">
                    {e.description}
                  </th>
                  <td className="px-3 py-3 text-caption text-text-secondary">{e.debitAccount}</td>
                  <td className="px-3 py-3 text-caption text-text-secondary">{e.creditAccount}</td>
                  <td className="py-3 pl-3 pr-6 text-right">
                    <Money accounting value={e.amount} />
                  </td>
                </tr>
              ))}
            </tbody>
            <tfoot>
              <tr>
                <td colSpan={4} />
                <td className="pr-6">
                  <Rule variant="subtotal" />
                </td>
              </tr>
              <tr>
                <th
                  className="py-3 pl-6 pr-3 text-left text-label font-medium"
                  colSpan={4}
                  data-frozen="none"
                  scope="row"
                >
                  Total to post
                </th>
                <td className="py-3 pl-3 pr-6 text-right">
                  <Money accounting size="md" value={total} />
                </td>
              </tr>
              <tr>
                <td colSpan={4} />
                <td className="pr-6">
                  <Rule variant="total" />
                </td>
              </tr>
            </tfoot>
          </table>
        </div>
      </div>

      <Button onClick={onPostBatch} variant="primary">
        Post {entries.length} entries as one batch
      </Button>
      <p className="text-caption text-text-tertiary">
        Posting creates one audit record covering the whole batch.
      </p>
    </div>
  );
}