cyclone/src/components/ClaimDrawer/StateHistoryTimeline.tsx

import { fmt } from "@/lib/format";
import type { ClaimDetail } from "@/types";

type StateHistoryTimelineProps = {
  history: ClaimDetail["stateHistory"];
};

/**
 * Event-kind → dot background color. The dot is the only colored element
 * per row; the rest of the row uses the standard ink tokens so the
 * timeline reads as a calm list of facts, with the dot color doing the
 * signal work.
 *
 *   claim_submitted   → ink-secondary  (neutral, in-flight)
 *   claim_accepted    → success        (payer accepted)
 *   claim_paid        → success        (funds received)
 *   claim_denied      → error          (needs attention)
 *   manual_match      → warning        (operator action)
 *   manual_unmatch    → warning        (operator action)
 *   remit_received    → accent         (ERA arrived)
 *   anything else     → muted          (forward-compat with new kinds)
 */
const DOT_BG: Record<string, string> = {
  claim_submitted: "bg-[color:var(--m-ink-secondary)]",
  claim_accepted: "bg-[color:var(--m-success)]",
  claim_paid: "bg-[color:var(--m-success)]",
  claim_denied: "bg-[color:var(--m-error)]",
  manual_match: "bg-[color:var(--m-warning)]",
  manual_unmatch: "bg-[color:var(--m-warning)]",
  remit_received: "bg-[color:var(--m-accent)]",
};

function dotColorFor(kind: string): string {
  return DOT_BG[kind] ?? "bg-[color:var(--m-ink-tertiary)]";
}

/**
 * Display label for the event kind. The raw kind is a snake-case machine
 * value (e.g. ``claim_paid``); replacing underscores with spaces gives a
 * friendlier visual label without losing the original token (it's still
 * on the ``<li data-kind="…">`` attribute for tests/inspection). The
 * CSS ``uppercase`` transform handles visual casing.
 */
function kindLabel(kind: string): string {
  return kind.replace(/_/g, " ");
}

/**
 * State-history timeline for the claim detail drawer (SP4).
 *
 * Vertical timeline: a 2px left rule on the outer <ol> with a colored
 * dot on each <li> centered on the rule (negative offset). Events
 * render in input order — the backend already returns them
 * most-recent-first per the type comment, so the visual order matches
 * the audit order without resorting. Each row shows the kind eyebrow,
 * a mono ts (date + time), and an optional remittance id underneath
 * when the event was triggered by an ERA.
 */
export function StateHistoryTimeline({ history }: StateHistoryTimelineProps) {
  return (
    <section
      className="flex flex-col gap-3 px-6 py-4"
      data-testid="state-history-section"
    >
      <h3
        data-testid="section-label"
        className="eyebrow text-[color:var(--m-ink-tertiary)]"
      >
        State History ({history.length})
      </h3>

      {history.length === 0 ? (
        <p
          data-testid="state-history-empty"
          className="text-sm text-[color:var(--m-ink-tertiary)]"
        >
          No history events
        </p>
      ) : (
        <ol
          data-testid="state-history-timeline"
          className="relative ml-2 flex flex-col gap-3.5 border-l border-dashed border-[color:var(--m-border-heavy)]/40 pl-6"
        >
          {history.map((event, i) => (
            <li
              key={`${event.kind}-${event.ts}-${i}`}
              data-testid="state-history-item"
              data-kind={event.kind}
              className="relative flex flex-col gap-1"
            >
              <span
                data-testid="state-history-dot"
                aria-hidden
                className={`absolute -left-[29px] top-1.5 h-2.5 w-2.5 rounded-full ring-4 ring-[color:var(--m-surface)] ${dotColorFor(event.kind)}`}
              />
              <div className="flex flex-wrap items-baseline gap-x-2 gap-y-0.5">
                <span
                  data-testid="state-history-kind"
                  className="text-[10px] font-semibold uppercase tracking-[0.14em] text-[color:var(--m-ink-primary)]"
                >
                  {kindLabel(event.kind)}
                </span>
                <span
                  data-testid="state-history-ts"
                  className="mono text-xs text-[color:var(--m-ink-secondary)] tabular-nums"
                >
                  {fmt.date(event.ts)} · {fmt.time(event.ts)}
                </span>
              </div>
              {event.remittanceId ? (
                <span
                  data-testid="history-remit-id"
                  className="mono text-xs text-[color:var(--m-ink-tertiary)]"
                >
                  ↳ Remit {event.remittanceId}
                </span>
              ) : null}
            </li>
          ))}
        </ol>
      )}
    </section>
  );
}