import { useCallback, useState } from "react";
import { CheckCircle2, Download, ShieldCheck } from "lucide-react";
import {
  Table,
  TableBody,
  TableCell,
  TableHead,
  TableHeader,
  TableRow,
} from "@/components/ui/table";
import { Skeleton } from "@/components/ui/skeleton";
import { EmptyState } from "@/components/ui/empty-state";
import { ErrorState } from "@/components/ui/error-state";
import { KeyboardCheatsheet } from "@/components/KeyboardCheatsheet";
import { useAcks } from "@/hooks/useAcks";
import { useRowKeyboard } from "@/hooks/useRowKeyboard";
import { api } from "@/lib/api";
import { fmt } from "@/lib/format";
import { cn } from "@/lib/utils";
import type { Ack } from "@/types";

/**
 * Renders one persisted 999 ACK with the per-status badge color and a
 * "Download 999" button that fetches the raw X12 via `api.getAck`
 * and triggers a browser download.
 */
function AckCodeBadge({ code }: { code: Ack["ackCode"] }) {
  const color =
    code === "A"
      ? {
          text: "hsl(152 64% 30%)",
          bg: "hsl(152 50% 88%)",
          border: "hsl(152 64% 38% / 0.30)",
        }
      : code === "R"
        ? {
            text: "hsl(358 70% 36%)",
            bg: "hsl(358 70% 92%)",
            border: "hsl(358 70% 50% / 0.30)",
          }
        : {
            text: "hsl(36 92% 30%)",
            bg: "hsl(36 82% 88%)",
            border: "hsl(36 92% 50% / 0.30)",
          };
  return (
    <span
      className="inline-flex items-center gap-1 rounded-sm border px-2 py-0.5 mono text-[10.5px] font-semibold uppercase tracking-[0.14em]"
      style={{
        color: color.text,
        backgroundColor: color.bg,
        borderColor: color.border,
      }}
    >
      {code}
    </span>
  );
}

function downloadBlob(filename: string, content: string) {
  const blob = new Blob([content], { type: "text/plain" });
  const url = URL.createObjectURL(blob);
  const a = document.createElement("a");
  a.href = url;
  a.download = filename;
  a.click();
  URL.revokeObjectURL(url);
}

function DownloadButton({ id, sourceBatchId }: { id: number; sourceBatchId: string }) {
  const [busy, setBusy] = useState(false);
  const onClick = async () => {
    if (busy) return;
    setBusy(true);
    try {
      const detail = await api.getAck(id);
      const raw =
        (detail as unknown as { raw_999_text?: string }).raw_999_text ??
        (() => {
          return "";
        })();
      if (raw) {
        downloadBlob(`ack-${sourceBatchId}.999`, raw);
      }
    } catch (err) {
      console.error("download 999 failed", err);
    } finally {
      setBusy(false);
    }
  };
  return (
    <button
      type="button"
      onClick={onClick}
      disabled={busy}
      className={cn(
        "inline-flex items-center gap-1.5 rounded-sm border px-2 py-1 mono text-[10.5px] uppercase tracking-[0.14em] font-semibold transition-colors",
        busy && "opacity-50 cursor-not-allowed",
      )}
      style={{
        borderColor: "hsl(30 14% 14% / 0.20)",
        color: "hsl(var(--surface-ink-2))",
        backgroundColor: "hsl(36 22% 96%)",
      }}
      aria-label="Download 999"
    >
      <Download className="h-3 w-3" strokeWidth={1.75} />
      999
    </button>
  );
}

export function Acks() {
  const { data, isLoading, isError, error, refetch } = useAcks({ limit: 100 });
  const items = data?.items ?? [];

  const [selectedIndex, setSelectedIndex] = useState<number | null>(null);
  const [helpOpen, setHelpOpen] = useState(false);

  const moveNext = useCallback(() => {
    setSelectedIndex((i) => {
      if (items.length === 0) return null;
      if (i === null) return 0;
      return (i + 1) % items.length;
    });
  }, [items.length]);

  const movePrev = useCallback(() => {
    setSelectedIndex((i) => {
      if (items.length === 0) return null;
      if (i === null) return items.length - 1;
      return (i - 1 + items.length) % items.length;
    });
  }, [items.length]);

  useRowKeyboard({
    enabled: !helpOpen && items.length > 0,
    onNext: moveNext,
    onPrev: movePrev,
    onClose: () => setHelpOpen(false),
    onToggleHelp: () => setHelpOpen((v) => !v),
  });

  // -----------------------------------------------------------------
  // Aggregate metrics for the KPI strip
  // -----------------------------------------------------------------
  const totals = items.reduce(
    (acc, a) => ({
      accepted: acc.accepted + a.acceptedCount,
      rejected: acc.rejected + a.rejectedCount,
      received: acc.received + a.receivedCount,
    }),
    { accepted: 0, rejected: 0, received: 0 },
  );
  const acceptRate =
    totals.received > 0
      ? Math.round((totals.accepted / totals.received) * 1000) / 10
      : 0;

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

  return (
    <>
      <KeyboardCheatsheet
        open={helpOpen}
        onClose={() => setHelpOpen(false)}
      />
      <div className="space-y-0">
        {/* =================================================================
            HERO — DARK EDITORIAL HEADER
            ================================================================= */}
        <section
          className="relative animate-fade-in pt-6 pb-8 lg:pt-9 lg:pb-10"
          style={{ animationDelay: `${heroDelay}ms` }}
        >
          {/* Ghost "999" watermark — a print-shop stamp behind the title */}
          <div
            aria-hidden="true"
            className="pointer-events-none select-none absolute inset-x-0 top-[58%] -translate-y-1/2 whitespace-nowrap display text-center"
            style={{
              fontSize: "clamp(180px, 22vw, 320px)",
              letterSpacing: "-0.05em",
              opacity: 0.05,
              lineHeight: 1,
              color: "hsl(var(--surface-ink))",
            }}
          >
            999
          </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">
                  999 ACKs · Reference
                </span>
                <span
                  className="mono text-[12px] uppercase tracking-[0.22em] text-muted-foreground/60 hidden sm:inline"
                  aria-hidden
                >
                  · {items.length} on file
                </span>
              </div>
              <h1 className="display text-[48px] sm:text-[64px] lg:text-[80px] leading-[0.92] text-foreground tracking-[-0.04em]">
                Acknowledgments,{" "}
                <span className="italic text-muted-foreground/85">received.</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">
                <ShieldCheck
                  className="h-3.5 w-3.5"
                  strokeWidth={1.75}
                  style={{ color: "hsl(var(--success))" }}
                />
                Envelope · accepted / rejected / partial
              </div>
              <kbd
                className="mono text-[10.5px] uppercase tracking-[0.18em] text-muted-foreground/70"
              >
                Press <span className="text-foreground">?</span> for shortcuts
              </kbd>
            </div>
          </div>

          <div className="relative z-10 max-w-2xl">
            <p className="text-[14px] text-muted-foreground leading-relaxed">
              999 Implementation Acknowledgments — generated automatically in
              response to 837P ingests, or parsed from inbound 999 uploads.
              Each row below is a single transaction set with its accept /
              reject counts and the original X12 to download.
            </p>
          </div>
        </section>

        {/* =================================================================
            FOLD — TORN PAGE
            ================================================================= */}
        <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,
              }}
            >
              999 register
            </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))" }}
                >
                  Register · 999 Implementation ACKs
                </div>
                <h2
                  className="display leading-[0.92] tracking-[-0.04em]"
                  style={{
                    color: "hsl(var(--surface-ink))",
                    fontSize: "clamp(48px, 7vw, 96px)",
                    fontWeight: 400,
                  }}
                >
                  The register.
                </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 row per inbound 999 — the accept / reject / partial
                  count, the source batch it answers, and the original
                  transaction set to download.
                </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))" }}
                >
                  On file
                </div>
                <div
                  className="display tabular-nums"
                  style={{
                    color: "hsl(var(--surface-ink))",
                    fontSize: 26,
                    lineHeight: 1.1,
                  }}
                >
                  {items.length}
                </div>
                <div
                  className="mono text-[11px] mt-1"
                  style={{ color: "hsl(var(--surface-ink-3))" }}
                >
                  999 ACK
                  {items.length === 1 ? "" : "s"}
                </div>
              </div>
            </div>
          </div>

          {/* KPI strip — § 01 Vital signs */}
          <section
            aria-label="Aggregate ACK 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-2 md:grid-cols-4 gap-4">
              <AckKpiTile
                label="Accepted"
                value={totals.accepted}
                tone="success"
              />
              <AckKpiTile
                label="Rejected"
                value={totals.rejected}
                tone="destructive"
              />
              <AckKpiTile
                label="Received"
                value={totals.received}
                tone="ink"
              />
              <AckKpiTile
                label="Accept rate"
                value={`${acceptRate}%`}
                tone="blue"
                numeric={false}
              />
            </div>
          </section>

          {/* Table — § 02 The register */}
          <section
            aria-label="ACK register"
            className="relative px-8 lg:px-14 pb-8 lg:pb-10 animate-fade-in-up"
            style={{ animationDelay: `${tableDelay}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 register
              </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 register
                  </div>
                  <h3
                    className="display leading-[0.98] tracking-[-0.03em]"
                    style={{
                      color: "hsl(var(--surface-ink))",
                      fontSize: "clamp(24px, 2.6vw, 32px)",
                      fontWeight: 400,
                    }}
                  >
                    All <span className="italic">999s</span>, newest first.
                  </h3>
                </div>
                <div
                  className="text-[12.5px] display italic"
                  style={{ color: "hsl(var(--surface-ink-2))", maxWidth: 380 }}
                >
                  Navigate rows with{" "}
                  <kbd
                    className="mono not-italic text-[10.5px] uppercase tracking-[0.14em] px-1 py-0.5 rounded-sm border"
                    style={{
                      borderColor: "hsl(30 14% 14% / 0.20)",
                      color: "hsl(var(--surface-ink))",
                    }}
                  >
                    j
                  </kbd>{" "}
                  /{" "}
                  <kbd
                    className="mono not-italic text-[10.5px] uppercase tracking-[0.14em] px-1 py-0.5 rounded-sm border"
                    style={{
                      borderColor: "hsl(30 14% 14% / 0.20)",
                      color: "hsl(var(--surface-ink))",
                    }}
                  >
                    k
                  </kbd>
                  .
                </div>
              </div>

              {isError ? (
                <div
                  className="rounded-md border p-5"
                  style={{
                    borderColor: "hsl(30 14% 14% / 0.16)",
                    backgroundColor: "hsl(36 22% 96%)",
                  }}
                >
                  <ErrorState
                    message="Couldn't load ACKs from the backend."
                    detail={error instanceof Error ? error.message : String(error)}
                    onRetry={() => refetch()}
                  />
                </div>
              ) : isLoading ? (
                <div
                  className="rounded-md border p-4 space-y-2"
                  style={{
                    borderColor: "hsl(30 14% 14% / 0.10)",
                    backgroundColor: "hsl(36 22% 96%)",
                  }}
                >
                  {Array.from({ length: 5 }).map((_, i) => (
                    <Skeleton key={i} variant="row" />
                  ))}
                </div>
              ) : items.length === 0 ? (
                <div
                  className="rounded-md border p-10 text-center"
                  style={{
                    borderColor: "hsl(30 14% 14% / 0.16)",
                    borderStyle: "dashed",
                    backgroundColor: "hsl(36 22% 96%)",
                  }}
                >
                  <EmptyState
                    eyebrow="999 ACKs · awaiting first 837 with ack=true"
                    message="Upload an 837P with ?ack=true, or parse a 999 file directly to populate this list."
                  />
                </div>
              ) : (
                <div
                  className="rounded-md border overflow-hidden"
                  style={{
                    borderColor: "hsl(30 14% 14% / 0.10)",
                    backgroundColor: "hsl(36 22% 98%)",
                    boxShadow:
                      "inset 0 1px 0 0 hsl(0 0% 100% / 0.5)",
                  }}
                >
                  <Table tone="paper">
                    <TableHeader>
                      <TableRow>
                        <TableHead
                          className="w-12"
                          aria-label="Status"
                          style={{ color: "hsl(var(--surface-ink-2))" }}
                        />
                        <TableHead style={{ color: "hsl(var(--surface-ink-2))" }}>
                          ID
                        </TableHead>
                        <TableHead style={{ color: "hsl(var(--surface-ink-2))" }}>
                          Source Batch
                        </TableHead>
                        <TableHead
                          className="text-right"
                          style={{ color: "hsl(var(--surface-ink-2))" }}
                        >
                          Accepted
                        </TableHead>
                        <TableHead
                          className="text-right"
                          style={{ color: "hsl(var(--surface-ink-2))" }}
                        >
                          Rejected
                        </TableHead>
                        <TableHead
                          className="text-right"
                          style={{ color: "hsl(var(--surface-ink-2))" }}
                        >
                          Received
                        </TableHead>
                        <TableHead style={{ color: "hsl(var(--surface-ink-2))" }}>
                          ACK Code
                        </TableHead>
                        <TableHead style={{ color: "hsl(var(--surface-ink-2))" }}>
                          Parsed
                        </TableHead>
                        <TableHead
                          className="w-20"
                          aria-label="Download"
                          style={{ color: "hsl(var(--surface-ink-2))" }}
                        />
                      </TableRow>
                    </TableHeader>
                    <TableBody>
                      {items.map((a, idx) => {
                        const isSelected = selectedIndex === idx;
                        return (
                          <TableRow
                            key={a.id}
                            data-row-index={idx}
                            data-state={isSelected ? "selected" : undefined}
                            aria-selected={isSelected}
                            className={cn(
                              isSelected && [
                                "ring-1 ring-inset",
                              ],
                            )}
                            style={
                              isSelected
                                ? {
                                    backgroundColor: "hsl(212 85% 95%)",
                                    boxShadow:
                                      "inset 2px 0 0 0 hsl(212 100% 45%)",
                                  }
                                : undefined
                            }
                          >
                            <TableCell>
                              <CheckCircle2
                                className={cn(
                                  "h-3.5 w-3.5",
                                  a.ackCode === "A"
                                    ? "text-[hsl(152_64%_38%)]"
                                    : a.ackCode === "R"
                                      ? "text-[hsl(358_70%_42%)]"
                                      : "text-[hsl(36_92%_50%)]",
                                )}
                                strokeWidth={1.75}
                                aria-hidden
                              />
                            </TableCell>
                            <TableCell
                              className="display num text-[13px]"
                              style={{ color: "hsl(var(--surface-ink))" }}
                            >
                              {a.id}
                            </TableCell>
                            <TableCell
                              className="font-mono text-[12px] truncate max-w-[180px]"
                              style={{ color: "hsl(var(--surface-ink-2))" }}
                            >
                              {a.sourceBatchId}
                            </TableCell>
                            <TableCell
                              className="text-right display num"
                              style={{ color: "hsl(152 64% 32%)" }}
                            >
                              {a.acceptedCount}
                            </TableCell>
                            <TableCell
                              className="text-right display num"
                              style={{ color: "hsl(358 70% 38%)" }}
                            >
                              {a.rejectedCount}
                            </TableCell>
                            <TableCell
                              className="text-right display num"
                              style={{ color: "hsl(var(--surface-ink-2))" }}
                            >
                              {a.receivedCount}
                            </TableCell>
                            <TableCell>
                              <AckCodeBadge code={a.ackCode} />
                            </TableCell>
                            <TableCell
                              className="num text-[12.5px]"
                              style={{ color: "hsl(var(--surface-ink-3))" }}
                            >
                              {a.parsedAt ? fmt.dateShort(a.parsedAt) : "—"}
                            </TableCell>
                            <TableCell>
                              <DownloadButton
                                id={a.id}
                                sourceBatchId={a.sourceBatchId}
                              />
                            </TableCell>
                          </TableRow>
                        );
                      })}
                    </TableBody>
                  </Table>
                </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 register</span>
            <span>Cyclone · 999 ACKs</span>
            <span>
              {items.length} {items.length === 1 ? "row" : "rows"}
            </span>
          </div>
        </div>
      </div>
    </>
  );
}

// ---------------------------------------------------------------------------
// AckKpiTile — paper-toned metric for the ACK register.
// ---------------------------------------------------------------------------
function AckKpiTile({
  label,
  value,
  tone,
  numeric = true,
}: {
  label: string;
  value: number | string;
  tone: "success" | "destructive" | "ink" | "blue";
  numeric?: boolean;
}) {
  const accentMap = {
    success: "hsl(152 64% 38%)",
    destructive: "hsl(358 70% 42%)",
    ink: "hsl(var(--surface-ink))",
    blue: "hsl(212 100% 45%)",
  } as const;
  const tintMap = {
    success: "hsl(152 50% 88%)",
    destructive: "hsl(358 70% 92%)",
    ink: "hsl(36 22% 90%)",
    blue: "hsl(212 85% 92%)",
  } as const;
  const accent = accentMap[tone];
  const tint = tintMap[tone];
  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: accent, 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: tint }}
        >
          <span
            className="block h-1.5 w-1.5 rounded-full"
            style={{ backgroundColor: accent }}
          />
        </div>
      </div>
      <div
        className={cn(
          "tabular-nums tracking-[-0.04em]",
          numeric ? "display" : "display"
        )}
        style={{
          color: "hsl(var(--surface-ink))",
          fontSize: "clamp(28px, 3vw, 40px)",
          lineHeight: 1,
          fontWeight: 400,
        }}
      >
        {value}
      </div>
    </div>
  );
}
