import { useState } from "react";
import {
  ArrowRight,
  CircleDashed,
  GitMerge,
  X,
} from "lucide-react";
import { toast } from "sonner";
import { useReconciliation } from "@/hooks/useReconciliation";
import { ApiError } from "@/lib/api";
import { Skeleton } from "@/components/ui/skeleton";
import { ErrorState } from "@/components/ui/error-state";
import { Button } from "@/components/ui/button";
import { cn } from "@/lib/utils";

/**
 * Two-column manual reconciliation surface. The operator picks one row from
 * the claims column, one from the remits column, then clicks "Match
 * selected" to POST /api/reconciliation/match. The hook's invalidation
 * cascade refreshes the unmatched bucket + claims + remits + activity feeds
 * on success.
 *
 * Hybrid layout: dark editorial hero → torn-page fold → cream paper plane
 * with the two pairing columns, a footer with the match action, and a
 * "currently selected" annotation between them.
 */
export function ReconciliationPage() {
  const { unmatched, match } = useReconciliation();
  const [selectedClaim, setSelectedClaim] = useState<string | null>(null);
  const [selectedRemit, setSelectedRemit] = useState<string | null>(null);

  // -----------------------------------------------------------------
  // Stagger choreography
  // -----------------------------------------------------------------
  const heroDelay = 0;
  const foldDelay = 220;
  const titleDelay = 320;
  const kpiDelay = 460;
  const columnsDelay = 600;
  const actionDelay = 760;

  // ---------- Loading state ----------
  if (unmatched.isLoading) {
    return (
      <div className="space-y-0">
        <section
          className="relative animate-fade-in pt-6 pb-8 lg:pt-9 lg:pb-10"
          style={{ animationDelay: `${heroDelay}ms` }}
        >
          <div className="relative z-10 max-w-3xl">
            <div className="flex items-center gap-3 mb-5">
              <div className="h-px w-14 bg-foreground/25" />
              <span className="mono text-[12px] uppercase tracking-[0.22em] text-muted-foreground">
                Reconciliation
              </span>
            </div>
            <h1 className="display text-[48px] sm:text-[64px] lg:text-[80px] leading-[0.92] text-foreground tracking-[-0.04em]">
              Manual{" "}
              <span className="italic text-muted-foreground/85">pairing.</span>
            </h1>
          </div>
        </section>
        <div
          className="relative max-w-[1280px] mx-auto animate-fade-in-up px-8 lg:px-14 py-8"
          style={{
            animationDelay: `${titleDelay}ms`,
            backgroundColor: "hsl(var(--surface))",
          }}
        >
          <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
            <Skeleton variant="default" height={320} />
            <Skeleton variant="default" height={320} />
          </div>
        </div>
      </div>
    );
  }

  // ---------- Error state ----------
  if (unmatched.isError) {
    const detail =
      unmatched.error instanceof Error
        ? unmatched.error.message
        : String(unmatched.error);
    return (
      <div className="space-y-0">
        <section
          className="relative animate-fade-in pt-6 pb-8 lg:pt-9 lg:pb-10"
          style={{ animationDelay: `${heroDelay}ms` }}
        >
          <div className="relative z-10 max-w-3xl">
            <div className="flex items-center gap-3 mb-5">
              <div className="h-px w-14 bg-foreground/25" />
              <span className="mono text-[12px] uppercase tracking-[0.22em] text-muted-foreground">
                Reconciliation
              </span>
            </div>
            <h1 className="display text-[48px] sm:text-[64px] lg:text-[80px] leading-[0.92] text-foreground tracking-[-0.04em]">
              Manual{" "}
              <span className="italic text-muted-foreground/85">pairing.</span>
            </h1>
          </div>
        </section>
        <div
          className="relative max-w-[1280px] mx-auto animate-fade-in-up px-8 lg:px-14 py-8"
          style={{
            animationDelay: `${titleDelay}ms`,
            backgroundColor: "hsl(var(--surface))",
            boxShadow:
              "inset 0 1px 0 0 hsl(0 0% 100% / 0.5), 0 1px 0 0 hsl(30 14% 22% / 0.06), 0 30px 80px -24px hsl(0 0% 0% / 0.45)",
          }}
        >
          <ErrorState
            message="Couldn't load unmatched claims and remittances."
            detail={detail}
            onRetry={() => unmatched.refetch()}
          />
        </div>
      </div>
    );
  }

  const { claims, remittances } = unmatched.data ?? {
    claims: [],
    remittances: [],
  };
  const empty = claims.length === 0 && remittances.length === 0;

  const handleMatch = async () => {
    if (!selectedClaim || !selectedRemit) return;
    try {
      await match.mutateAsync({ claimId: selectedClaim, remitId: selectedRemit });
      toast.success(`Matched ${selectedClaim} ↔ ${selectedRemit}`);
      setSelectedClaim(null);
      setSelectedRemit(null);
    } catch (e) {
      const msg =
        e instanceof ApiError && e.status === 409
          ? "Already matched — view the existing match."
          : e instanceof Error
            ? e.message
            : String(e);
      toast.error(msg);
    }
  };

  const handleClear = () => {
    setSelectedClaim(null);
    setSelectedRemit(null);
  };

  // ---------- Empty state ----------
  if (empty) {
    return (
      <div className="space-y-0">
        <section
          className="relative animate-fade-in pt-6 pb-8 lg:pt-9 lg:pb-10"
          style={{ animationDelay: `${heroDelay}ms` }}
        >
          <div
            aria-hidden
            className="pointer-events-none select-none absolute inset-x-0 top-[58%] -translate-y-1/2 whitespace-nowrap display text-center"
            style={{
              fontSize: "clamp(160px, 20vw, 300px)",
              letterSpacing: "-0.05em",
              opacity: 0.05,
              lineHeight: 1,
              color: "hsl(var(--surface-ink))",
            }}
          >
            PAIRED
          </div>
          <div className="relative z-10 max-w-3xl">
            <div className="flex items-center gap-3 mb-5">
              <div className="h-px w-14 bg-foreground/25" />
              <span className="mono text-[12px] uppercase tracking-[0.22em] text-muted-foreground">
                Reconciliation
              </span>
            </div>
            <h1 className="display text-[48px] sm:text-[64px] lg:text-[80px] leading-[0.92] text-foreground tracking-[-0.04em]">
              Manual{" "}
              <span className="italic text-muted-foreground/85">pairing.</span>
            </h1>
            <p className="text-[14px] text-muted-foreground mt-5 max-w-xl leading-relaxed">
              Pick one claim and one remittance, then match them. The system
              reconciles automatically when amounts and providers line up;
              the ones that don't are dropped here for you to triage.
            </p>
          </div>
        </section>

        {/* Fold */}
        <div
          aria-hidden
          className="relative h-14 animate-fade-in"
          style={{ animationDelay: `${foldDelay}ms` }}
        >
          <div
            className="absolute inset-x-0 top-0 h-1/2"
            style={{
              background:
                "linear-gradient(to bottom, hsl(0 0% 0% / 0.55), transparent)",
            }}
          />
          <div
            className="absolute inset-x-0 bottom-0 h-1/2"
            style={{
              background:
                "linear-gradient(to top, hsl(30 14% 14% / 0.18), transparent)",
            }}
          />
          <div
            className="absolute inset-x-0 top-1/2 -translate-y-1/2 h-px"
            style={{
              background:
                "linear-gradient(to right, transparent, hsl(30 14% 14% / 0.5) 12%, hsl(30 14% 14% / 0.7) 50%, hsl(30 14% 14% / 0.5) 88%, transparent)",
            }}
          />
          <div
            className="absolute inset-x-0 top-1/2 -translate-y-1/2 flex justify-between px-2"
            style={{ pointerEvents: "none" }}
          >
            {Array.from({ length: 48 }, (_, i) => (
              <span
                key={i}
                className="block h-[3px] w-[3px] rounded-full"
                style={{ backgroundColor: "hsl(30 14% 14% / 0.22)" }}
              />
            ))}
          </div>
          <div className="relative z-10 mx-auto h-full flex items-center justify-center gap-3 bg-background px-4 w-fit">
            <span
              className="display italic"
              style={{ color: "hsl(var(--muted-foreground))", fontSize: 15 }}
            >
              ↘
            </span>
            <span
              className="mono uppercase tracking-[0.24em]"
              style={{
                color: "hsl(var(--muted-foreground))",
                fontSize: 11,
                fontWeight: 500,
              }}
            >
              Pair them by hand
            </span>
            <span
              className="display italic"
              style={{ color: "hsl(var(--muted-foreground))", fontSize: 15 }}
            >
              ↙
            </span>
          </div>
        </div>

        <div
          className="relative max-w-[1280px] mx-auto animate-fade-in-up"
          style={{
            animationDelay: `${titleDelay}ms`,
            backgroundColor: "hsl(var(--surface))",
            boxShadow:
              "inset 0 1px 0 0 hsl(0 0% 100% / 0.5), 0 1px 0 0 hsl(30 14% 22% / 0.06), 0 30px 80px -24px hsl(0 0% 0% / 0.45)",
          }}
        >
          <div
            aria-hidden
            className="pointer-events-none absolute inset-0 opacity-[0.04]"
            style={{
              backgroundImage:
                "url(\"data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.1  0 0 0 0 0.08  0 0 0 0 0.05  0 0 0 0.9 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>\")",
              backgroundSize: "160px 160px",
              mixBlendMode: "multiply",
            }}
          />
          <div className="relative px-8 lg:px-14 py-16 text-center">
            <CircleDashed
              className="h-10 w-10 mx-auto mb-4"
              strokeWidth={1.25}
              style={{ color: "hsl(var(--surface-ink-3))" }}
            />
            <div
              className="display italic mb-2"
              style={{ color: "hsl(var(--surface-ink-2))", fontSize: 28 }}
            >
              Nothing pending.
            </div>
            <div
              className="mono text-[11px] uppercase tracking-[0.18em]"
              style={{ color: "hsl(var(--surface-ink-3))" }}
            >
              Every claim and remittance is paired.
            </div>
          </div>
        </div>
      </div>
    );
  }

  // ---------- Main rendering ----------
  return (
    <div className="space-y-0">
      {/* HERO */}
      <section
        className="relative animate-fade-in pt-6 pb-8 lg:pt-9 lg:pb-10"
        style={{ animationDelay: `${heroDelay}ms` }}
      >
        {/* Ghost watermark */}
        <div
          aria-hidden
          className="pointer-events-none select-none absolute inset-x-0 top-[58%] -translate-y-1/2 whitespace-nowrap display text-center"
          style={{
            fontSize: "clamp(160px, 20vw, 300px)",
            letterSpacing: "-0.05em",
            opacity: 0.05,
            lineHeight: 1,
            color: "hsl(var(--surface-ink))",
          }}
        >
          PAIRED
        </div>

        <div className="relative z-10 grid grid-cols-1 lg:grid-cols-[1fr,auto] gap-8 items-end mb-7">
          <div className="min-w-0 max-w-3xl">
            <div className="flex items-center gap-3 mb-5">
              <div className="h-px w-14 bg-foreground/25" />
              <span className="mono text-[12px] uppercase tracking-[0.22em] text-muted-foreground">
                Reconciliation
              </span>
              <span
                className="mono text-[12px] uppercase tracking-[0.22em] text-muted-foreground/60 hidden sm:inline"
                aria-hidden
              >
                ·{" "}
                {claims.length + remittances.length} need eyes
              </span>
            </div>
            <h1 className="display text-[48px] sm:text-[64px] lg:text-[80px] leading-[0.92] text-foreground tracking-[-0.04em]">
              Manual{" "}
              <span className="italic text-muted-foreground/85">pairing.</span>
            </h1>
          </div>
          <div className="flex flex-col items-start lg:items-end gap-3">
            <div
              className="inline-flex items-center gap-2 rounded-full border border-border/60 bg-card/60 px-3.5 py-2 text-[11.5px] mono uppercase tracking-[0.14em] text-muted-foreground backdrop-blur"
            >
              <span className="relative inline-flex h-1.5 w-1.5">
                <span className="absolute inline-flex h-full w-full rounded-full bg-[hsl(var(--warning))] opacity-60 animate-ping" />
                <span className="relative inline-flex h-1.5 w-1.5 rounded-full bg-[hsl(var(--warning))]" />
              </span>
              Auto-match paused
            </div>
          </div>
        </div>

        <div className="relative z-10 max-w-2xl">
          <p className="text-[14px] text-muted-foreground leading-relaxed">
            Pick one claim and one remittance, then match them. The system
            reconciles automatically when amounts and providers line up; the
            ones that don't are dropped here for you to triage.
          </p>
        </div>
      </section>

      {/* FOLD */}
      <div
        aria-hidden
        className="relative h-14 animate-fade-in"
        style={{ animationDelay: `${foldDelay}ms` }}
      >
        <div
          className="absolute inset-x-0 top-0 h-1/2"
          style={{
            background:
              "linear-gradient(to bottom, hsl(0 0% 0% / 0.55), transparent)",
          }}
        />
        <div
          className="absolute inset-x-0 bottom-0 h-1/2"
          style={{
            background:
              "linear-gradient(to top, hsl(30 14% 14% / 0.18), transparent)",
          }}
        />
        <div
          className="absolute inset-x-0 top-1/2 -translate-y-1/2 h-px"
          style={{
            background:
              "linear-gradient(to right, transparent, hsl(30 14% 14% / 0.5) 12%, hsl(30 14% 14% / 0.7) 50%, hsl(30 14% 14% / 0.5) 88%, transparent)",
          }}
        />
        <div
          className="absolute inset-x-0 top-1/2 -translate-y-1/2 flex justify-between px-2"
          style={{ pointerEvents: "none" }}
        >
          {Array.from({ length: 48 }, (_, i) => (
            <span
              key={i}
              className="block h-[3px] w-[3px] rounded-full"
              style={{ backgroundColor: "hsl(30 14% 14% / 0.22)" }}
            />
          ))}
        </div>
        <div className="relative z-10 mx-auto h-full flex items-center justify-center gap-3 bg-background px-4 w-fit">
          <span
            className="display italic"
            style={{ color: "hsl(var(--muted-foreground))", fontSize: 15 }}
          >
            ↘
          </span>
          <span
            className="mono uppercase tracking-[0.24em]"
            style={{
              color: "hsl(var(--muted-foreground))",
              fontSize: 11,
              fontWeight: 500,
            }}
          >
            Pair them by hand
          </span>
          <span
            className="display italic"
            style={{ color: "hsl(var(--muted-foreground))", fontSize: 15 }}
          >
            ↙
          </span>
        </div>
      </div>

      {/* PAPER PLANE */}
      <div
        className="relative max-w-[1280px] mx-auto animate-fade-in-up"
        style={{
          animationDelay: `${titleDelay}ms`,
          backgroundColor: "hsl(var(--surface))",
          boxShadow:
            "inset 0 1px 0 0 hsl(0 0% 100% / 0.5), 0 1px 0 0 hsl(30 14% 22% / 0.06), 0 30px 80px -24px hsl(0 0% 0% / 0.45)",
        }}
      >
        {/* Paper grain */}
        <div
          aria-hidden
          className="pointer-events-none absolute inset-0 opacity-[0.04]"
          style={{
            backgroundImage:
              "url(\"data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.1  0 0 0 0 0.08  0 0 0 0 0.05  0 0 0 0.9 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>\")",
            backgroundSize: "160px 160px",
            mixBlendMode: "multiply",
          }}
        />

        {/* Title block */}
        <div className="relative px-8 lg:px-14 pt-12 pb-9 border-b border-[hsl(30_14%_14%/_0.12)]">
          <div
            aria-hidden
            className="absolute left-7 lg:left-12 top-0 bottom-0 w-px"
            style={{ backgroundColor: "hsl(30 14% 14% / 0.14)" }}
          />
          <div className="flex items-end justify-between gap-8 flex-wrap">
            <div>
              <div
                className="mono text-[12px] uppercase tracking-[0.24em] mb-4 font-medium"
                style={{ color: "hsl(var(--surface-ink-3))" }}
              >
                Reconciliation · Sheet 01
              </div>
              <h2
                className="display leading-[0.92] tracking-[-0.04em]"
                style={{
                  color: "hsl(var(--surface-ink))",
                  fontSize: "clamp(48px, 7vw, 96px)",
                  fontWeight: 400,
                }}
              >
                Pair them.
              </h2>
              <div
                className="mt-4 display italic"
                style={{
                  color: "hsl(var(--surface-ink-2))",
                  fontSize: "clamp(15px, 1.3vw, 18px)",
                  lineHeight: 1.4,
                  maxWidth: "32ch",
                }}
              >
                One claim, one remit. The system learns from every pair you
                confirm — make them count.
              </div>
            </div>
            <div className="text-right shrink-0">
              <div
                className="mono text-[11px] uppercase tracking-[0.24em] mb-1.5 font-medium"
                style={{ color: "hsl(var(--surface-ink-3))" }}
              >
                In the queue
              </div>
              <div
                className="display tabular-nums"
                style={{
                  color: "hsl(var(--surface-ink))",
                  fontSize: 26,
                  lineHeight: 1.1,
                }}
              >
                {claims.length + remittances.length}
              </div>
              <div
                className="mono text-[11px] mt-1"
                style={{ color: "hsl(var(--surface-ink-3))" }}
              >
                {claims.length} claim{claims.length === 1 ? "" : "s"} ·{" "}
                {remittances.length} remit
                {remittances.length === 1 ? "" : "s"}
              </div>
            </div>
          </div>
        </div>

        {/* KPI strip — § 01 Vital signs */}
        <section
          aria-label="Reconciliation metrics"
          className="relative px-8 lg:px-14 py-7 animate-fade-in-up"
          style={{ animationDelay: `${kpiDelay}ms` }}
        >
          <div
            aria-hidden
            className="absolute left-7 lg:left-12 top-7 flex flex-col items-center gap-1"
          >
            <span
              className="mono text-[10px] uppercase tracking-[0.18em] font-semibold"
              style={{ color: "hsl(var(--surface-ink-3))" }}
            >
              § 01
            </span>
            <div
              className="w-px h-10"
              style={{ backgroundColor: "hsl(30 14% 14% / 0.18)" }}
            />
            <span
              className="display italic"
              style={{
                color: "hsl(var(--surface-ink-2))",
                fontSize: 11,
                writingMode: "vertical-rl",
                transform: "rotate(180deg)",
                letterSpacing: "0.16em",
              }}
            >
              Vital signs
            </span>
          </div>
          <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
            <KpiTile
              label="Unmatched claims"
              value={claims.length}
              tone="blue"
            />
            <KpiTile
              label="Unmatched remits"
              value={remittances.length}
              tone="amber"
            />
            <KpiTile
              label="In the queue"
              value={claims.length + remittances.length}
              tone="ink"
            />
          </div>
        </section>

        {/* Two-column pairing surface — § 02 The match */}
        <section
          aria-label="Pick a claim and a remit"
          className="relative px-8 lg:px-14 pb-8 lg:pb-10 animate-fade-in-up"
          style={{ animationDelay: `${columnsDelay}ms` }}
        >
          <div
            aria-hidden
            className="absolute left-7 lg:left-12 top-9 flex flex-col items-center gap-1"
          >
            <span
              className="mono text-[10px] uppercase tracking-[0.18em] font-semibold"
              style={{ color: "hsl(var(--surface-ink-3))" }}
            >
              § 02
            </span>
            <div
              className="w-px h-12"
              style={{ backgroundColor: "hsl(30 14% 14% / 0.18)" }}
            />
            <span
              className="display italic"
              style={{
                color: "hsl(var(--surface-ink-2))",
                fontSize: 11,
                writingMode: "vertical-rl",
                transform: "rotate(180deg)",
                letterSpacing: "0.16em",
              }}
            >
              The match
            </span>
          </div>

          <div
            className="pt-6 border-t"
            style={{
              borderTopStyle: "double",
              borderTopWidth: 3,
              borderColor: "hsl(30 14% 14% / 0.12)",
            }}
          >
            <div className="flex items-end justify-between gap-6 flex-wrap mb-5">
              <div>
                <div
                  className="mono text-[11.5px] uppercase tracking-[0.24em] font-semibold mb-2"
                  style={{ color: "hsl(var(--surface-ink-3))" }}
                >
                  The match
                </div>
                <h3
                  className="display leading-[0.98] tracking-[-0.03em]"
                  style={{
                    color: "hsl(var(--surface-ink))",
                    fontSize: "clamp(24px, 2.6vw, 32px)",
                    fontWeight: 400,
                  }}
                >
                  Pick one of <span className="italic">each.</span>
                </h3>
              </div>
              <div
                className="text-[12.5px] display italic"
                style={{ color: "hsl(var(--surface-ink-2))", maxWidth: 380 }}
              >
                Tap a row on the left, tap a row on the right, then send the
                pair.
              </div>
            </div>

            <div className="grid grid-cols-1 md:grid-cols-[1fr,auto,1fr] gap-4 items-stretch">
              {/* Claims column */}
              <PairColumn
                eyebrow="Claims"
                count={claims.length}
                tone="blue"
                empty={claims.length === 0}
                emptyMessage="No unmatched claims."
              >
                {claims.map((c) => {
                  const active = selectedClaim === c.id;
                  return (
                    <button
                      key={c.id}
                      type="button"
                      onClick={() => setSelectedClaim(c.id)}
                      aria-pressed={active}
                      className={cn(
                        "w-full text-left p-3.5 min-h-[44px] rounded-md border transition-colors",
                        active
                          ? "border-[hsl(212_100%_45%)] bg-[hsl(212_85%_95%)] ring-1 ring-inset ring-[hsl(212_100%_45%_/_0.30)]"
                          : "border-[hsl(30_14%_14%/_0.14)] bg-[hsl(36_22%_98%)] hover:bg-[hsl(36_22%_94%)] hover:border-[hsl(30_14%_14%/_0.25)]"
                      )}
                    >
                      <div
                        className="display mono text-[13.5px]"
                        style={{ color: "hsl(var(--surface-ink))" }}
                      >
                        {c.id}
                      </div>
                      <div
                        className="text-[12.5px] mt-0.5"
                        style={{ color: "hsl(var(--surface-ink-2))" }}
                      >
                        {c.patientName}
                      </div>
                      <div
                        className="mono text-[11px] mt-1"
                        style={{ color: "hsl(var(--surface-ink-3))" }}
                      >
                        {c.serviceDate ?? "—"} · $
                        {c.billedAmount.toFixed(2)} · NPI{" "}
                        {c.providerNpi ?? "—"}
                      </div>
                    </button>
                  );
                })}
              </PairColumn>

              {/* Center bridge — a vertical "→" between the two columns */}
              <div className="hidden md:flex flex-col items-center justify-center px-2">
                <div
                  aria-hidden
                  className="w-px flex-1"
                  style={{ backgroundColor: "hsl(30 14% 14% / 0.14)" }}
                />
                <div
                  className="my-3 h-10 w-10 rounded-full flex items-center justify-center border"
                  style={{
                    backgroundColor: selectedClaim && selectedRemit
                      ? "hsl(152 50% 88%)"
                      : "hsl(36 22% 92%)",
                    borderColor: selectedClaim && selectedRemit
                      ? "hsl(152 64% 38% / 0.4)"
                      : "hsl(30 14% 14% / 0.18)",
                    color: selectedClaim && selectedRemit
                      ? "hsl(152 64% 30%)"
                      : "hsl(var(--surface-ink-3))",
                  }}
                >
                  {selectedClaim && selectedRemit ? (
                    <GitMerge className="h-4 w-4" strokeWidth={1.75} />
                  ) : (
                    <ArrowRight
                      className="h-4 w-4 rotate-90"
                      strokeWidth={1.75}
                    />
                  )}
                </div>
                <div
                  aria-hidden
                  className="w-px flex-1"
                  style={{ backgroundColor: "hsl(30 14% 14% / 0.14)" }}
                />
              </div>

              {/* Remits column */}
              <PairColumn
                eyebrow="Remits"
                count={remittances.length}
                tone="amber"
                empty={remittances.length === 0}
                emptyMessage="No unmatched remits."
              >
                {remittances.map((r) => {
                  const active = selectedRemit === r.id;
                  return (
                    <button
                      key={r.id}
                      type="button"
                      onClick={() => setSelectedRemit(r.id)}
                      aria-pressed={active}
                      className={cn(
                        "w-full text-left p-3.5 min-h-[44px] rounded-md border transition-colors",
                        active
                          ? "border-[hsl(36_92%_50%)] bg-[hsl(36_82%_92%)] ring-1 ring-inset ring-[hsl(36_92%_50%_/_0.30)]"
                          : "border-[hsl(30_14%_14%/_0.14)] bg-[hsl(36_22%_98%)] hover:bg-[hsl(36_22%_94%)] hover:border-[hsl(30_14%_14%/_0.25)]"
                      )}
                    >
                      <div
                        className="mono text-[13.5px] flex items-center gap-2"
                        style={{ color: "hsl(var(--surface-ink))" }}
                      >
                        <span className="display">{r.payerClaimControlNumber}</span>
                        {r.isReversal ? (
                          <span
                            className="text-[10px] uppercase tracking-[0.18em] mono font-semibold"
                            style={{ color: "hsl(36 92% 30%)" }}
                          >
                            Reversal
                          </span>
                        ) : null}
                      </div>
                      <div
                        className="mono text-[11px] mt-1"
                        style={{ color: "hsl(var(--surface-ink-3))" }}
                      >
                        Status {r.status} · ${r.paidAmount.toFixed(2)} paid · $
                        {r.adjustmentAmount.toFixed(2)} adj
                      </div>
                    </button>
                  );
                })}
              </PairColumn>
            </div>
          </div>
        </section>

        {/* Action footer — § 03 The action */}
        <section
          aria-label="Match action"
          className="relative px-8 lg:px-14 pb-8 animate-fade-in-up"
          style={{ animationDelay: `${actionDelay}ms` }}
        >
          <div
            aria-hidden
            className="absolute left-7 lg:left-12 top-7 flex flex-col items-center gap-1"
          >
            <span
              className="mono text-[10px] uppercase tracking-[0.18em] font-semibold"
              style={{ color: "hsl(var(--surface-ink-3))" }}
            >
              § 03
            </span>
            <div
              className="w-px h-10"
              style={{ backgroundColor: "hsl(30 14% 14% / 0.18)" }}
            />
            <span
              className="display italic"
              style={{
                color: "hsl(var(--surface-ink-2))",
                fontSize: 11,
                writingMode: "vertical-rl",
                transform: "rotate(180deg)",
                letterSpacing: "0.16em",
              }}
            >
              The action
            </span>
          </div>
          <div
            className="pt-5 border-t flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between"
            style={{ borderColor: "hsl(30 14% 14% / 0.10)" }}
          >
            <div
              className="text-[12.5px] display italic"
              style={{ color: "hsl(var(--surface-ink-2))" }}
            >
              {selectedClaim && selectedRemit ? (
                <>
                  Ready to pair{" "}
                  <span
                    className="display mono not-italic"
                    style={{ color: "hsl(var(--surface-ink))" }}
                  >
                    {selectedClaim}
                  </span>{" "}
                  with{" "}
                  <span
                    className="display mono not-italic"
                    style={{ color: "hsl(var(--surface-ink))" }}
                  >
                    {selectedRemit}
                  </span>
                  .
                </>
              ) : selectedClaim ? (
                <>Now pick a remit on the right.</>
              ) : selectedRemit ? (
                <>Now pick a claim on the left.</>
              ) : (
                <>Pick one from each side to begin.</>
              )}
            </div>
            <div className="flex items-center gap-2 flex-wrap">
              <Button
                variant="outline"
                onClick={handleClear}
                disabled={(!selectedClaim && !selectedRemit) || match.isPending}
                className="min-h-[44px] sm:min-h-0"
              >
                <X className="h-3.5 w-3.5 mr-1.5" />
                Clear
              </Button>
              <Button
                onClick={handleMatch}
                disabled={!selectedClaim || !selectedRemit || match.isPending}
                className="min-h-[44px] sm:min-h-0"
              >
                <GitMerge className="h-3.5 w-3.5 mr-1.5" />
                Match selected
              </Button>
            </div>
          </div>
        </section>

        {/* Footer */}
        <div
          className="relative px-8 lg:px-14 py-5 border-t flex items-center justify-between mono text-[10.5px] uppercase tracking-[0.18em]"
          style={{
            borderColor: "hsl(30 14% 14% / 0.12)",
            color: "hsl(var(--surface-ink-3))",
          }}
        >
          <span>End of sheet 01</span>
          <span>Cyclone · Reconciliation</span>
          <span>
            {claims.length + remittances.length}{" "}
            {claims.length + remittances.length === 1 ? "row" : "rows"} pending
          </span>
        </div>
      </div>
    </div>
  );
}

// ---------------------------------------------------------------------------
// Helper components
// ---------------------------------------------------------------------------

function KpiTile({
  label,
  value,
  tone,
}: {
  label: string;
  value: number;
  tone: "blue" | "amber" | "ink";
}) {
  const colorMap = {
    blue: "hsl(212 100% 45%)",
    amber: "hsl(36 92% 50%)",
    ink: "hsl(var(--surface-ink))",
  } as const;
  const tintMap = {
    blue: "hsl(212 85% 95%)",
    amber: "hsl(36 82% 92%)",
    ink: "hsl(36 22% 92%)",
  } as const;
  return (
    <div
      className="relative rounded-xl p-5 overflow-hidden border"
      style={{
        backgroundColor: "hsl(var(--surface))",
        boxShadow:
          "inset 0 1px 0 0 hsl(0 0% 100% / 0.45), 0 1px 0 0 hsl(30 14% 22% / 0.06), inset 3px 0 0 0 hsl(0 0% 100% / 0.4)",
        borderColor: "hsl(30 14% 14% / 0.10)",
      }}
    >
      <div
        aria-hidden
        className="absolute left-0 top-5 bottom-5 w-[3px] rounded-r-sm"
        style={{ backgroundColor: colorMap[tone], opacity: 0.85 }}
      />
      <div className="flex items-center justify-between mb-2.5">
        <div
          className="mono text-[10px] uppercase tracking-[0.18em] font-semibold"
          style={{ color: "hsl(var(--surface-ink-3))" }}
        >
          {label}
        </div>
        <div
          className="h-5 w-5 rounded-md flex items-center justify-center"
          style={{ backgroundColor: tintMap[tone] }}
        >
          <span
            className="block h-1.5 w-1.5 rounded-full"
            style={{ backgroundColor: colorMap[tone] }}
          />
        </div>
      </div>
      <div
        className="display tabular-nums tracking-[-0.04em]"
        style={{
          color: "hsl(var(--surface-ink))",
          fontSize: "clamp(32px, 3.6vw, 44px)",
          lineHeight: 1,
          fontWeight: 400,
        }}
      >
        {value}
      </div>
    </div>
  );
}

function PairColumn({
  eyebrow,
  count,
  tone,
  empty,
  emptyMessage,
  children,
}: {
  eyebrow: string;
  count: number;
  tone: "blue" | "amber";
  empty: boolean;
  emptyMessage: string;
  children: React.ReactNode;
}) {
  const accent =
    tone === "blue" ? "hsl(212 100% 45%)" : "hsl(36 92% 50%)";
  const tint =
    tone === "blue" ? "hsl(212 85% 95%)" : "hsl(36 82% 92%)";
  return (
    <div
      className="rounded-xl border overflow-hidden"
      style={{
        backgroundColor: "hsl(36 22% 96%)",
        borderColor: "hsl(30 14% 14% / 0.10)",
        boxShadow:
          "inset 0 1px 0 0 hsl(0 0% 100% / 0.45), 0 1px 0 0 hsl(30 14% 22% / 0.06)",
      }}
    >
      <div
        className="px-4 py-3 border-b flex items-center justify-between"
        style={{
          borderColor: "hsl(30 14% 14% / 0.08)",
          backgroundColor: "hsl(36 22% 92%)",
        }}
      >
        <div className="flex items-center gap-2.5">
          <div
            aria-hidden
            className="h-2.5 w-2.5 rounded-sm"
            style={{ backgroundColor: accent }}
          />
          <span
            className="mono text-[10.5px] uppercase tracking-[0.20em] font-semibold"
            style={{ color: "hsl(var(--surface-ink-2))" }}
          >
            {eyebrow}
          </span>
        </div>
        <span
          className="display mono tabular-nums"
          style={{
            color: "hsl(var(--surface-ink))",
            fontSize: 16,
            backgroundColor: tint,
            padding: "2px 8px",
            borderRadius: 3,
            border: "1px solid hsl(30 14% 14% / 0.10)",
          }}
        >
          {count}
        </span>
      </div>
      <div className="p-3 space-y-2 min-h-[200px] max-h-[420px] overflow-y-auto">
        {empty ? (
          <div
            className="text-center py-8 text-[12.5px] display italic"
            style={{ color: "hsl(var(--surface-ink-3))" }}
          >
            {emptyMessage}
          </div>
        ) : (
          children
        )}
      </div>
    </div>
  );
}