ReceiptSheet

import * as React from "react";
import { cn } from "@/lib/ledger/cn";
import { formatTimestamp } from "@/lib/ledger/fiscal-period";
import type { MoneyValue } from "@/lib/ledger/money.types";
import { Money } from "@/components/ledger/money";
import { Reference } from "@/components/ledger/reference";
import { Rule } from "@/components/ledger/rule";

export interface ReceiptSheetProps extends React.ComponentPropsWithoutRef<"article"> {
  amount: MoneyValue;
  at: Date;
  entity: string;
  lines?: { label: string; amount: MoneyValue }[];
  method: string;
  payee: string;
  reference: string;
  timeZone?: string;
}

/**
 * A document people keep. Print styles are first-class, and nothing here is
 * abbreviated.
 */
export const ReceiptSheet = React.forwardRef<HTMLElement, ReceiptSheetProps>(
  (
    { className, entity, amount, payee, method, reference, at, timeZone = "UTC", lines = [], ...props },
    ref,
  ) => (
    <article
      className={cn("rounded-xl border border-border bg-surface p-6 print:border-0", className)}
      ref={ref}
      {...props}
    >
      <header className="border-b border-border-subtle pb-4">
        <p className="font-display text-title-md">{entity}</p>
        <p className="text-caption text-text-secondary">Payment receipt</p>
      </header>

      <dl className="mt-4 space-y-2">
        <Row label="Paid to">{payee}</Row>
        <Row label="Method">{method}</Row>
        <Row label="Reference">
          <Reference truncate={false} value={reference} />
        </Row>
        <Row label="Date">
          <span className="numeric">{formatTimestamp(at, timeZone)}</span>
        </Row>
      </dl>

      {lines.length > 0 ? (
        <table className="mt-4 w-full">
          <tbody>
            {lines.map((l) => (
              <tr key={l.label}>
                <th className="py-1 text-left text-body font-normal text-text-secondary" scope="row">
                  {l.label}
                </th>
                <td className="py-1 text-right">
                  <Money accounting value={l.amount} />
                </td>
              </tr>
            ))}
          </tbody>
        </table>
      ) : null}

      <div className="mt-4">
        <Rule className="ml-auto w-1/2" variant="subtotal" />
        <div className="flex items-baseline justify-between pt-2">
          <span className="text-label font-medium">Total paid</span>
          <Money accounting size="md" value={amount} />
        </div>
        <Rule className="ml-auto mt-1 w-1/2" variant="total" />
      </div>
    </article>
  ),
);
ReceiptSheet.displayName = "ReceiptSheet";

function Row({ label, children }: { label: string; children: React.ReactNode }) {
  return (
    <div className="flex items-baseline justify-between gap-6">
      <dt className="text-body text-text-secondary">{label}</dt>
      <dd className="text-right text-body">{children}</dd>
    </div>
  );
}