AuditTrail

"use client";

import * as React from "react";
import { cn } from "@/lib/ledger/cn";
import { formatTimestamp } from "@/lib/ledger/fiscal-period";
import { UserCircleIcon } from "@/components/ledger/icons";

export type AuditRecord = {
  id: string;
  at: Date;
  actor: string;
  role: string;
  /** Delegated and support access renders explicitly, never silently. */
  onBehalfOf?: string;
  action: string;
  /** Field-level diffs: "Amount changed from $1,240.00 to $1,420.00". */
  diffs?: { field: string; from: string; to: string }[];
};

export interface AuditTrailProps {
  className?: string;
  records: AuditRecord[];
  /** Server UTC, with the zone displayed. */
  timeZone?: string;
}

/**
 * A timeline on **every** financial object, not a hidden admin log.
 * Append-only. Filters narrow the view and say so.
 */
export function AuditTrail({ records, timeZone = "UTC", className }: AuditTrailProps) {
  const [filter, setFilter] = React.useState("");
  const filtered = filter
    ? records.filter(
        (r) =>
          r.actor.toLowerCase().includes(filter.toLowerCase()) ||
          r.action.toLowerCase().includes(filter.toLowerCase()),
      )
    : records;

  return (
    <div className={cn("rounded-xl border border-border bg-surface p-6", className)}>
      <div className="flex flex-wrap items-baseline justify-between gap-3">
        <h3 className="text-title-sm font-medium">Audit trail</h3>
        <input
          aria-label="Filter audit trail"
          className="h-8 w-56 rounded-sm border border-border bg-surface px-2 text-label outline-none focus-visible:border-accent"
          onChange={(e) => setFilter(e.target.value)}
          placeholder="Filter by actor or action"
          value={filter}
        />
      </div>

      {filter ? (
        <p aria-live="polite" className="mt-1 text-caption text-text-secondary">
          Showing <span className="numeric">{filtered.length}</span> of{" "}
          <span className="numeric">{records.length}</span> events.
        </p>
      ) : (
        <p className="mt-1 numeric text-caption text-text-tertiary">{records.length} events · append-only</p>
      )}

      <ol className="mt-4 space-y-4">
        {filtered.map((r) => (
          <li className="border-l-2 border-border pl-4" key={r.id}>
            <p className="text-body">{r.action}</p>
            {r.diffs?.length ? (
              <ul className="mt-1 space-y-0.5">
                {r.diffs.map((d) => (
                  <li className="text-caption text-text-secondary" key={d.field}>
                    <span className="font-medium text-text-primary">{d.field}</span> changed from{" "}
                    <span className="numeric">{d.from}</span> to <span className="numeric">{d.to}</span>
                  </li>
                ))}
              </ul>
            ) : null}
            <p className="mt-1 flex flex-wrap items-center gap-1 text-caption text-text-tertiary">
              <span className="text-text-secondary">
                {r.actor} ({r.role})
              </span>
              {r.onBehalfOf ? (
                <span className="inline-flex items-center gap-1 rounded-xs bg-warning-subtle px-1.5 py-0.5 text-warning">
                  <UserCircleIcon aria-hidden="true" className="size-3" />
                  on behalf of {r.onBehalfOf}
                </span>
              ) : null}
              <span aria-hidden="true">·</span>
              <span className="numeric">{formatTimestamp(r.at, timeZone)}</span>
            </p>
          </li>
        ))}
      </ol>
    </div>
  );
}