TransactionDetail

"use client";

import type * as React from "react";
import { formatDate, formatTimestamp } from "@/lib/ledger/fiscal-period";
import { Figure } from "@/components/ledger/figure";
import { Reference } from "@/components/ledger/reference";
import { Sheet } from "@/components/ledger/sheet";
import { StatusPill } from "@/components/ledger/status-pill";
import type { Transaction } from "@/components/ledger/transaction-table";

export type AuditEvent = {
  at: Date;
  actor: string;
  role: string;
  action: string;
  onBehalfOf?: string;
};

export interface TransactionDetailProps {
  attachments?: { name: string; size: string }[];
  auditTrail?: AuditEvent[];
  /** The rule that fired, if any — shown, because it is editable context. */
  categorizationRule?: string;
  onOpenChange: (open: boolean) => void;
  open: boolean;
  transaction: Transaction | null;
}

/**
 * A sheet on phone, a side panel on desktop. Everything: full amounts, the
 * rule that fired, the attachments, and the full audit trail with actor,
 * role and timestamp.
 */
export function TransactionDetail({
  transaction: t,
  open,
  onOpenChange,
  auditTrail = [],
  categorizationRule,
  attachments = [],
}: TransactionDetailProps) {
  if (!t) return null;
  return (
    <Sheet
      description={formatDate(t.date)}
      onOpenChange={onOpenChange}
      open={open}
      side="right"
      title={t.description}
    >
      <div className="space-y-6">
        <div>
          <Figure colorBySign size="lg" value={t.amount} />
          <div className="mt-2">
            <StatusPill entity="Transaction" status={t.status} />
          </div>
        </div>

        <dl className="space-y-2">
          <Row label="Account">
            {t.account} <span className="reference-numeric">•••• {t.accountLast4}</span>
          </Row>
          <Row label="Category">{t.category}</Row>
          <Row label="Reference">
            <Reference truncate={false} value={t.reference} />
          </Row>
          {t.memo ? <Row label="Memo">{t.memo}</Row> : null}
          {t.createdBy ? <Row label="Created by">{t.createdBy}</Row> : null}
        </dl>

        {categorizationRule ? (
          <section>
            <h3 className="text-label font-medium text-text-secondary">Categorization rule</h3>
            <p className="mt-1 rounded-sm bg-surface-sunken p-3 text-body">{categorizationRule}</p>
          </section>
        ) : null}

        {attachments.length > 0 ? (
          <section>
            <h3 className="text-label font-medium text-text-secondary">Attachments</h3>
            <ul className="mt-2 space-y-1">
              {attachments.map((a) => (
                <li
                  className="flex items-center justify-between rounded-sm border border-border px-3 py-2 text-body"
                  key={a.name}
                >
                  <span className="truncate">{a.name}</span>
                  <span className="numeric text-caption text-text-tertiary">{a.size}</span>
                </li>
              ))}
            </ul>
          </section>
        ) : null}

        {auditTrail.length > 0 ? (
          <section>
            <h3 className="text-label font-medium text-text-secondary">Audit trail</h3>
            <ol className="mt-2 space-y-3">
              {auditTrail.map((e, i) => (
                <li className="border-l-2 border-border pl-3" key={i}>
                  <p className="text-body">{e.action}</p>
                  <p className="text-caption text-text-secondary">
                    {e.actor} ({e.role}){e.onBehalfOf ? ` on behalf of ${e.onBehalfOf}` : ""}
                  </p>
                  <p className="numeric text-caption text-text-tertiary">{formatTimestamp(e.at)}</p>
                </li>
              ))}
            </ol>
          </section>
        ) : null}
      </div>
    </Sheet>
  );
}

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

export { Money } from "@/components/ledger/money";