cyclone/src/components/RemitDrawer/RemitDrawerHeader.tsx

import { ExternalLink, X } from "lucide-react";
import { Badge, type BadgeProps } from "@/components/ui/badge";
import { Button } from "@/components/ui/button";
import { fmt } from "@/lib/format";
import { cn } from "@/lib/utils";
import type { RemitDetail } from "@/hooks/useRemitDetail";

type RemitDrawerHeaderProps = {
  remit: RemitDetail;
  onClose: () => void;
};

/**
 * Remittance status → Badge variant. Mirrors the list-endpoint mapping
 * used by `MatchedRemitCard` (received / posted / reconciled). Unknown
 * statuses (the type is an unconstrained string) fall back to ``muted``
 * so a future backend status doesn't blow up the drawer.
 *
 *   received    → secondary  (in-flight, not yet posted)
 *   posted      → default    (brand-colored, posted to ledger)
 *   reconciled  → success    (matched to claims, settled)
 */
const STATUS_VARIANT: Record<string, BadgeProps["variant"]> = {
  received: "secondary",
  posted: "default",
  reconciled: "success",
};

function badgeVariantFor(status: string): BadgeProps["variant"] {
  return STATUS_VARIANT[status] ?? "muted";
}

/**
 * Header band for the remittance detail drawer (RemitDrawer).
 *
 * Mirror of `ClaimDrawerHeader` — same instrument-style eyebrow +
 * mono ID on the left, status badge + total paid on the right, plus a
 * "View raw 835" link below the ID. The close button reuses the same
 * `X` icon at the same position so the two drawers have visually
 * identical chrome.
 *
 * The "View raw 835" link points at `/api/remittances/{id}/raw` — the
 * backend's text/835 endpoint for inspecting the source X12 file. The
 * fallback (when the backend doesn't yet expose that endpoint) is the
 * detail JSON endpoint so the link never 404s on a misconfigured
 * deployment.
 */
export function RemitDrawerHeader({ remit, onClose }: RemitDrawerHeaderProps) {
  const rawLink = `/api/remittances/${encodeURIComponent(remit.id)}/raw`;

  return (
    <header
      className={cn(
        "flex items-start justify-between gap-4 px-6 py-5",
        "border-b border-[color:var(--m-border-heavy)]/40",
        "bg-[color:var(--m-surface)]"
      )}
      data-testid="remit-drawer-header"
    >
      {/* Left: eyebrow + mono remit ID + raw link */}
      <div className="flex min-w-0 flex-col gap-1">
        <span className="eyebrow text-[color:var(--m-ink-tertiary)]">
          Remittance
        </span>
        <span
          data-testid="header-id"
          className="mono text-2xl font-semibold tracking-tight text-[color:var(--m-ink-primary)]"
        >
          {remit.id}
        </span>
        <a
          href={rawLink}
          target="_blank"
          rel="noreferrer"
          data-testid="header-raw-link"
          className="mt-1 inline-flex w-fit items-center gap-1 text-[11px] text-[color:var(--m-ink-tertiary)] hover:text-[color:var(--m-ink-secondary)] transition-colors"
        >
          View raw 835
          <ExternalLink className="h-3 w-3" strokeWidth={1.75} aria-hidden />
        </a>
      </div>

      {/* Right: status badge + total paid + close */}
      <div className="flex items-start gap-4">
        <div className="flex flex-col items-end gap-1">
          <Badge
            variant={badgeVariantFor(remit.status)}
            data-testid="header-status"
            className="uppercase tracking-[0.14em]"
          >
            {remit.status}
          </Badge>
          <span
            data-testid="header-paid"
            className="mono text-lg tabular-nums text-[color:var(--m-ink-primary)]"
          >
            {fmt.usdPrecise(remit.paidAmount)}
          </span>
        </div>
        <Button
          variant="ghost"
          size="icon"
          onClick={onClose}
          aria-label="Close drawer"
          data-testid="header-close"
        >
          <X className="h-4 w-4" strokeWidth={1.75} />
        </Button>
      </div>
    </header>
  );
}