"use client";
import * as React from "react";
import { AnimatePresence, motion, useReducedMotion } from "motion/react";
import { Brain, Check, ChevronDown, Copy, Loader2, RotateCcw, Sparkles, Square } from "lucide-react";
import { cn } from "@/lib/utils";

export interface ResponseSource {
  id: number;
  title: string;
  domain: string;
  snippet?: string;
}
export interface ResponseStep {
  title: string;
  detail?: string;
}
export interface GeneratedCard {
  title: string;
  subtitle?: string;
  rows: { label: string; value: number; display?: string }[];
  footer?: string;
}

export interface StreamingResponseProps {
  /** Markdown-ish answer: #/## headings, - and 1. lists, ``` code fences, **bold**, `code`, [n] citations, and a `:::card` line for generated UI. */
  content?: string;
  sources?: ResponseSource[];
  steps?: ResponseStep[];
  card?: GeneratedCard;
  /** Characters revealed per second. */
  speed?: number;
  /** ms each reasoning step takes. */
  stepDuration?: number;
  /** ms the "generating UI" skeleton shows before morphing into the card. */
  cardDelay?: number;
  autoStart?: boolean;
  onComplete?: () => void;
  className?: string;
}

/* ---------------- parsing ---------------- */

type Seg =
  | { kind: "text"; start: number; text: string; bold?: boolean }
  | { kind: "code"; start: number; text: string }
  | { kind: "cite"; start: number; end: number; n: number };
type Block =
  | { kind: "h"; level: 1 | 2 | 3; start: number; end: number; segs: Seg[] }
  | { kind: "p"; start: number; end: number; segs: Seg[] }
  | { kind: "list"; ordered: boolean; start: number; end: number; items: { start: number; end: number; segs: Seg[] }[] }
  | { kind: "pre"; lang: string; start: number; end: number; code: string }
  | { kind: "card"; start: number; end: number };

function parseInline(line: string, base: number): Seg[] {
  const segs: Seg[] = [];
  const re = /\*\*([^*]+)\*\*|`([^`]+)`|\[(\d+)\]/g;
  let last = 0;
  let m: RegExpExecArray | null;
  while ((m = re.exec(line))) {
    if (m.index > last) segs.push({ kind: "text", start: base + last, text: line.slice(last, m.index) });
    if (m[1] !== undefined) segs.push({ kind: "text", start: base + m.index + 2, text: m[1], bold: true });
    else if (m[2] !== undefined) segs.push({ kind: "code", start: base + m.index + 1, text: m[2] });
    else segs.push({ kind: "cite", start: base + m.index, end: base + m.index + m[0].length, n: Number(m[3]) });
    last = m.index + m[0].length;
  }
  if (last < line.length) segs.push({ kind: "text", start: base + last, text: line.slice(last) });
  return segs;
}

function parse(src: string): Block[] {
  const lines = src.split("\n");
  const blocks: Block[] = [];
  let off = 0;
  let i = 0;
  const offsets: number[] = [];
  for (const l of lines) {
    offsets.push(off);
    off += l.length + 1;
  }
  while (i < lines.length) {
    const line = lines[i];
    const o = offsets[i];
    if (!line.trim()) {
      i++;
      continue;
    }
    if (line.startsWith("```")) {
      const lang = line.slice(3).trim();
      const codeStart = offsets[i + 1] ?? o + line.length + 1;
      let j = i + 1;
      while (j < lines.length && !lines[j].startsWith("```")) j++;
      const code = lines.slice(i + 1, j).join("\n");
      blocks.push({ kind: "pre", lang, start: codeStart, end: codeStart + code.length, code });
      i = j + 1;
      continue;
    }
    if (line.trim() === ":::card") {
      blocks.push({ kind: "card", start: o, end: o + line.length });
      i++;
      continue;
    }
    const h = /^(#{1,3})\s+/.exec(line);
    if (h) {
      const base = o + h[0].length;
      blocks.push({ kind: "h", level: h[1].length as 1 | 2 | 3, start: o, end: o + line.length, segs: parseInline(line.slice(h[0].length), base) });
      i++;
      continue;
    }
    const li = /^(\s*)([-*]|\d+\.)\s+/;
    if (li.test(line)) {
      const ordered = /\d/.test(li.exec(line)![2]);
      const items: { start: number; end: number; segs: Seg[] }[] = [];
      while (i < lines.length && li.test(lines[i])) {
        const mm = li.exec(lines[i])!;
        const base = offsets[i] + mm[0].length;
        items.push({ start: offsets[i], end: offsets[i] + lines[i].length, segs: parseInline(lines[i].slice(mm[0].length), base) });
        i++;
      }
      blocks.push({ kind: "list", ordered, start: items[0].start, end: items[items.length - 1].end, items });
      continue;
    }
    // paragraph: consecutive plain lines
    const start = o;
    const parts: string[] = [];
    let j = i;
    while (j < lines.length && lines[j].trim() && !/^(#{1,3}\s|```|:::card|\s*([-*]|\d+\.)\s)/.test(lines[j])) {
      parts.push(lines[j]);
      j++;
    }
    const joined = parts.join("\n");
    blocks.push({ kind: "p", start, end: start + joined.length, segs: parseInline(joined.replace(/\n/g, " "), start) });
    i = j;
  }
  return blocks;
}

/* ---------------- defaults ---------------- */

const DEFAULT_CONTENT = `## Roll it out in three waves
Edge rendering moves HTML generation next to your shoppers, which usually cuts **time to first byte by 40–60%** on global traffic [1]. The catch is that anything touching a single-region database gets slower, so start with pages that are cache-friendly [2].

1. **Wave one:** marketing and category pages — mostly static, easy wins.
2. **Wave two:** product pages with stale-while-revalidate pricing.
3. **Wave three:** cart and checkout, only after you replicate reads [3].

Here’s how the latency compares in our staging run:
:::card
Mark the product route as edge-ready and keep a long cache on the shell:
\`\`\`ts
export const runtime = "edge";
export const revalidate = 60; // seconds

export async function getProduct(id: string) {
  return fetch(\`/api/products/\${id}\`, { next: { tags: ["product"] } });
}
\`\`\`
Measure p75 latency per region for a week before moving on to wave two.`;

const DEFAULT_SOURCES: ResponseSource[] = [
  { id: 1, title: "Rendering at the edge: a field report", domain: "northwind.dev", snippet: "Across 12 regions, median TTFB dropped from 410 ms to 180 ms after moving SSR to edge workers." },
  { id: 2, title: "When the edge is slower", domain: "lumen.engineering", snippet: "Round-trips to a single-region database can erase the gains; co-locate reads or cache aggressively." },
  { id: 3, title: "Read replicas for global checkout", domain: "orbit-docs.io", snippet: "Replicate read paths first, keep writes in the primary region, and fence carts with idempotency keys." },
];

const DEFAULT_STEPS: ResponseStep[] = [
  { title: "Reading the storefront architecture", detail: "3 services · 1 primary database" },
  { title: "Searching benchmarks", detail: "Found 3 relevant sources" },
  { title: "Planning a staged rollout" },
];

const DEFAULT_CARD: GeneratedCard = {
  title: "p75 time to first byte",
  subtitle: "Staging · 7 regions · last 24 h",
  rows: [
    { label: "Origin (us-east)", value: 410, display: "410 ms" },
    { label: "Edge + cache", value: 180, display: "180 ms" },
    { label: "Edge, no cache", value: 290, display: "290 ms" },
  ],
  footer: "56% faster with edge + cache",
};

/* ---------------- component ---------------- */

type Phase = "thinking" | "streaming" | "done";

export function StreamingResponse({
  content = DEFAULT_CONTENT,
  sources = DEFAULT_SOURCES,
  steps = DEFAULT_STEPS,
  card = DEFAULT_CARD,
  speed = 110,
  stepDuration = 750,
  cardDelay = 1300,
  autoStart = true,
  onComplete,
  className,
}: StreamingResponseProps) {
  const reduce = useReducedMotion() ?? false;
  const rootRef = React.useRef<HTMLDivElement>(null);
  const blocks = React.useMemo(() => parse(content), [content]);
  const cardBlock = blocks.find((b) => b.kind === "card");
  const [run, setRun] = React.useState(autoStart ? 1 : 0);
  const [phase, setPhase] = React.useState<Phase>(autoStart ? "thinking" : "done");
  const [stepIndex, setStepIndex] = React.useState(0);
  const [revealed, setRevealed] = React.useState(autoStart ? 0 : content.length);
  const [cardReady, setCardReady] = React.useState(!autoStart);
  const [thoughtsOpen, setThoughtsOpen] = React.useState(true);
  const [copied, setCopied] = React.useState(false);
  const [visible, setVisible] = React.useState(true);
  const doneCb = React.useRef(onComplete);
  React.useEffect(() => {
    doneCb.current = onComplete;
  }, [onComplete]);

  React.useEffect(() => {
    const el = rootRef.current;
    if (!el) return;
    const io = new IntersectionObserver(([e]) => setVisible(e.isIntersecting));
    io.observe(el);
    return () => io.disconnect();
  }, []);

  // Thinking phase: advance steps.
  React.useEffect(() => {
    if (!run || phase !== "thinking" || !visible) return;
    if (stepIndex >= steps.length) {
      const t = setTimeout(() => {
        setPhase("streaming");
        setThoughtsOpen(false);
      }, 250);
      return () => clearTimeout(t);
    }
    const t = setTimeout(() => setStepIndex((i) => i + 1), reduce ? 150 : stepDuration);
    return () => clearTimeout(t);
  }, [run, phase, stepIndex, steps.length, stepDuration, visible, reduce]);

  // Streaming phase: reveal characters on rAF; hold at the card marker.
  React.useEffect(() => {
    if (phase !== "streaming" || !visible) return;
    let raf = 0;
    let last = performance.now();
    let pos = revealed;
    let hold: ReturnType<typeof setTimeout> | null = null;
    let ready = cardReady;
    const tick = (now: number) => {
      const dt = (now - last) / 1000;
      last = now;
      if (cardBlock && !ready && pos >= cardBlock.start) {
        pos = cardBlock.end;
        setRevealed(pos);
        hold = setTimeout(() => {
          ready = true;
          setCardReady(true);
          last = performance.now();
          raf = requestAnimationFrame(tick);
        }, reduce ? 200 : cardDelay);
        return;
      }
      pos = Math.min(content.length, pos + dt * (reduce ? speed * 8 : speed));
      // Snap to the end of the current word so tokens appear whole.
      let snap = Math.floor(pos);
      while (snap < content.length && !/\s/.test(content[snap])) snap++;
      setRevealed(snap);
      if (snap >= content.length) {
        setPhase("done");
        doneCb.current?.();
        return;
      }
      raf = requestAnimationFrame(tick);
    };
    raf = requestAnimationFrame(tick);
    return () => {
      cancelAnimationFrame(raf);
      if (hold) clearTimeout(hold);
    };
    // `revealed`/`cardReady` are read once as the resume point.
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [phase, visible, content, speed, cardDelay, cardBlock, reduce]);

  const restart = () => {
    setRun((r) => r + 1);
    setPhase("thinking");
    setStepIndex(0);
    setRevealed(0);
    setCardReady(false);
    setThoughtsOpen(true);
  };
  const stop = () => {
    setPhase("done");
    setCardReady(true);
    if (phase === "thinking") setStepIndex(steps.length);
  };

  const copy = () => {
    const plain = content.replace(/:::card\n?/g, "").replace(/\*\*|`{3}\w*|\[(\d+)\]/g, "");
    navigator.clipboard?.writeText(plain).catch(() => {});
    setCopied(true);
    setTimeout(() => setCopied(false), 1400);
  };

  const streaming = phase === "streaming";
  const r = phase === "thinking" ? 0 : revealed;
  const thinkingSecs = ((steps.length * stepDuration) / 1000).toFixed(1);
  const usedSources = sources.filter((s) => content.includes(`[${s.id}]`));

  return (
    <div ref={rootRef} data-streaming-root="" className={cn("w-full text-[15px] leading-7 text-foreground", className)}>
      {/* Reasoning disclosure */}
      {steps.length > 0 && (
        <div className="mb-3">
          <button
            type="button"
            aria-expanded={thoughtsOpen}
            onClick={() => setThoughtsOpen((o) => !o)}
            className="inline-flex items-center gap-2 rounded-full border bg-card px-3 py-1 text-sm text-muted-foreground transition outline-none hover:text-foreground focus-visible:ring-2 focus-visible:ring-ring"
          >
            <Brain className="size-3.5" />
            {phase === "thinking" ? <Shimmer reduce={reduce}>Thinking…</Shimmer> : <span>Thought for {thinkingSecs}s</span>}
            <ChevronDown className={cn("size-3.5 transition", thoughtsOpen && "rotate-180")} />
          </button>
          <AnimatePresence initial={false}>
            {thoughtsOpen && (
              <motion.ol
                initial={{ height: 0, opacity: 0 }}
                animate={{ height: "auto", opacity: 1 }}
                exit={{ height: 0, opacity: 0 }}
                transition={{ duration: reduce ? 0 : 0.25 }}
                className="ml-[18px] overflow-hidden border-l pl-5"
              >
                {steps.map((s, i) => {
                  const state = i < stepIndex || phase !== "thinking" ? "done" : i === stepIndex ? "active" : "todo";
                  if (state === "todo") return null;
                  return (
                    <motion.li
                      key={s.title}
                      initial={{ opacity: 0, x: -4 }}
                      animate={{ opacity: 1, x: 0 }}
                      className="group relative py-1.5 text-sm first:pt-3"
                    >
                      <span className="absolute top-[7px] -left-[30px] grid size-[18px] place-items-center rounded-full border bg-background group-first:top-[13px]">
                        {state === "done" ? <Check className="size-2.5 text-primary" /> : <Loader2 className="size-2.5 animate-spin text-muted-foreground" />}
                      </span>
                      <span className={cn(state === "active" ? "text-foreground" : "text-muted-foreground")}>{s.title}</span>
                      {s.detail && <span className="ml-2 text-xs text-muted-foreground/80">{s.detail}</span>}
                    </motion.li>
                  );
                })}
              </motion.ol>
            )}
          </AnimatePresence>
        </div>
      )}

      {/* Answer */}
      <div className="space-y-3" aria-live="polite" aria-busy={phase !== "done"}>
        {blocks.map((b, bi) => {
          if (r <= b.start && b.kind !== "card") return null;
          const active = streaming && r > b.start && r <= b.end + 1;
          const caret = active && b.kind !== "pre" && b.kind !== "card" ? <Caret /> : null;
          if (b.kind === "h") {
            const Tag = (["h3", "h3", "h4", "h5"] as const)[b.level];
            return (
              <Tag key={bi} className={cn("font-semibold tracking-tight", b.level === 1 ? "text-xl" : "text-lg")}>
                <Inline segs={b.segs} r={r} sources={sources} animate={!reduce} />
                {caret}
              </Tag>
            );
          }
          if (b.kind === "p")
            return (
              <p key={bi}>
                <Inline segs={b.segs} r={r} sources={sources} animate={!reduce} />
                {caret}
              </p>
            );
          if (b.kind === "list") {
            const L = b.ordered ? "ol" : "ul";
            return (
              <L key={bi} className={cn("space-y-1.5 pl-5", b.ordered ? "list-decimal marker:text-muted-foreground" : "list-disc marker:text-muted-foreground")}>
                {b.items.map((it, ii) =>
                  r > it.start ? (
                    <li key={ii} className="pl-1">
                      <Inline segs={it.segs} r={r} sources={sources} animate={!reduce} />
                      {active && r <= it.end + 1 && <Caret />}
                    </li>
                  ) : null,
                )}
              </L>
            );
          }
          if (b.kind === "pre") return <CodeBlock key={bi} lang={b.lang} code={b.code.slice(0, Math.max(0, r - b.start))} full={b.code} streaming={active} />;
          if (r < b.start) return null;
          return <UICard key={bi} card={card} ready={cardReady} reduce={reduce} />;
        })}
      </div>

      {/* Footer */}
      <div className="mt-4 flex flex-wrap items-center gap-2 border-t pt-3">
        {phase === "done" ? (
          <>
            <FooterButton onClick={copy} label={copied ? "Copied" : "Copy answer"}>
              {copied ? <Check className="size-3.5" /> : <Copy className="size-3.5" />}
            </FooterButton>
            <FooterButton onClick={restart} label="Regenerate">
              <RotateCcw className="size-3.5" />
            </FooterButton>
          </>
        ) : (
          <FooterButton onClick={stop} label="Stop">
            <Square className="size-3 fill-current" />
          </FooterButton>
        )}
        {usedSources.length > 0 && (
          <div className="ml-auto flex items-center gap-1.5 text-xs text-muted-foreground">
            <span className="flex -space-x-1.5">
              {usedSources.map((s) => (
                <SourceDot key={s.id} domain={s.domain} />
              ))}
            </span>
            {usedSources.length} sources
          </div>
        )}
      </div>
    </div>
  );
}

/* ---------------- pieces ---------------- */

function Inline({ segs, r, sources, animate }: { segs: Seg[]; r: number; sources: ResponseSource[]; animate: boolean }) {
  return (
    <>
      {segs.map((s) => {
        if (s.kind === "cite") {
          if (r < s.end) return null;
          const src = sources.find((x) => x.id === s.n);
          return <Cite key={s.start} n={s.n} source={src} />;
        }
        const vis = s.text.slice(0, Math.max(0, r - s.start));
        if (!vis) return null;
        if (s.kind === "code")
          return (
            <code key={s.start} className="rounded-md border bg-muted px-1 py-0.5 font-mono text-[0.85em]">
              {vis}
            </code>
          );
        const words: React.ReactNode[] = [];
        const re = /\S+\s*|\s+/g;
        let m: RegExpExecArray | null;
        while ((m = re.exec(vis))) {
          words.push(
            <span key={s.start + m.index} className={animate ? "animate-streaming-response-in" : undefined}>
              {m[0]}
            </span>,
          );
        }
        return s.bold ? (
          <strong key={s.start} className="font-semibold">
            {words}
          </strong>
        ) : (
          <React.Fragment key={s.start}>{words}</React.Fragment>
        );
      })}
    </>
  );
}

function Caret() {
  return <span aria-hidden className="ml-0.5 inline-block h-[1.05em] w-[0.45em] translate-y-[0.18em] animate-pulse rounded-[2px] bg-primary/70" />;
}

function Shimmer({ children, reduce }: { children: React.ReactNode; reduce: boolean }) {
  return (
    <motion.span
      className="bg-[linear-gradient(90deg,var(--color-muted-foreground)_0%,var(--color-foreground)_50%,var(--color-muted-foreground)_100%)] bg-[length:200%_100%] bg-clip-text text-transparent"
      animate={reduce ? undefined : { backgroundPosition: ["100% 0%", "-100% 0%"] }}
      transition={{ duration: 1.6, repeat: Infinity, ease: "linear" }}
    >
      {children}
    </motion.span>
  );
}

function SourceDot({ domain }: { domain: string }) {
  const hue = [...domain].reduce((a, c) => a + c.charCodeAt(0), 0) % 360;
  return (
    <span
      aria-hidden
      className="grid size-5 place-items-center rounded-full text-[9px] font-bold text-white uppercase ring-2 ring-background"
      style={{ background: `oklch(0.6 0.15 ${hue})` }}
    >
      {domain[0]}
    </span>
  );
}

function Cite({ n, source }: { n: number; source?: ResponseSource }) {
  const [open, setOpen] = React.useState(false);
  const [shift, setShift] = React.useState(0);
  const [below, setBelow] = React.useState(false);
  const cardRef = React.useRef<HTMLSpanElement>(null);
  const id = React.useId();
  React.useLayoutEffect(() => {
    if (!open || !cardRef.current) return;
    const rect = cardRef.current.getBoundingClientRect();
    // Flip below when the nearest scroll container (or viewport) would clip the top.
    let clipTop = 0;
    for (let el = cardRef.current.parentElement; el; el = el.parentElement) {
      const oy = getComputedStyle(el).overflowY;
      if (oy === "auto" || oy === "scroll" || oy === "hidden") {
        clipTop = el.getBoundingClientRect().top;
        break;
      }
    }
    if (!below && rect.top < clipTop + 4) setBelow(true);
    const bounds = cardRef.current.closest("[data-streaming-root]")?.getBoundingClientRect();
    const minX = Math.max(8, bounds?.left ?? 0);
    const maxX = Math.min(document.documentElement.clientWidth - 8, bounds?.right ?? Infinity);
    let dx = 0;
    if (rect.left < minX) dx = minX - rect.left;
    else if (rect.right > maxX) dx = maxX - rect.right;
    if (dx) setShift((s) => s + dx);
  }, [open, below]);
  return (
    <span className="relative inline-block" onMouseEnter={() => setOpen(true)} onMouseLeave={() => (setOpen(false), setShift(0), setBelow(false))}>
      <button
        type="button"
        aria-describedby={open ? id : undefined}
        aria-label={`Source ${n}${source ? `: ${source.title}` : ""}`}
        onFocus={() => setOpen(true)}
        onBlur={() => (setOpen(false), setShift(0), setBelow(false))}
        onKeyDown={(e) => e.key === "Escape" && setOpen(false)}
        className="animate-streaming-response-in mx-0.5 inline-flex h-[17px] min-w-[17px] items-center justify-center rounded-md bg-primary/10 px-1 align-[0.12em] text-[10px] leading-none font-semibold text-primary tabular-nums transition outline-none hover:bg-primary hover:text-primary-foreground focus-visible:ring-2 focus-visible:ring-ring"
      >
        {n}
      </button>
      <AnimatePresence>
        {open && source && (
          <motion.span
            ref={cardRef}
            id={id}
            role="tooltip"
            initial={{ opacity: 0, y: below ? -4 : 4 }}
            animate={{ opacity: 1, y: 0 }}
            exit={{ opacity: 0, y: below ? -4 : 4 }}
            transition={{ duration: 0.14 }}
            style={{ marginLeft: shift }}
            className={cn("absolute left-1/2 z-30 block w-64 -translate-x-1/2", below ? "top-full mt-2" : "bottom-full mb-2", "rounded-xl border bg-popover p-3 text-left text-popover-foreground shadow-xl")}
          >
            <span className="flex items-center gap-2 text-xs text-muted-foreground">
              <SourceDot domain={source.domain} />
              {source.domain}
            </span>
            <span className="mt-1.5 block text-sm leading-snug font-semibold">{source.title}</span>
            {source.snippet && <span className="mt-1 block text-xs leading-relaxed text-muted-foreground">{source.snippet}</span>}
          </motion.span>
        )}
      </AnimatePresence>
    </span>
  );
}

function CodeBlock({ lang, code, full, streaming }: { lang: string; code: string; full: string; streaming: boolean }) {
  const [copied, setCopied] = React.useState(false);
  return (
    <div className="overflow-hidden rounded-xl border bg-muted/50">
      <div className="flex items-center justify-between border-b bg-muted/60 px-3 py-1.5 text-xs text-muted-foreground">
        <span className="font-mono">{lang || "code"}</span>
        <button
          type="button"
          onClick={() => {
            navigator.clipboard?.writeText(full).catch(() => {});
            setCopied(true);
            setTimeout(() => setCopied(false), 1400);
          }}
          className="inline-flex items-center gap-1 rounded-md px-1.5 py-0.5 transition outline-none hover:bg-background hover:text-foreground focus-visible:ring-2 focus-visible:ring-ring"
        >
          {copied ? <Check className="size-3" /> : <Copy className="size-3" />}
          {copied ? "Copied" : "Copy"}
        </button>
      </div>
      <pre className="overflow-x-auto p-3 font-mono text-[12.5px] leading-6">
        <code>
          {code}
          {streaming && <span aria-hidden className="ml-px inline-block h-4 w-2 translate-y-0.5 animate-pulse bg-primary/70" />}
        </code>
      </pre>
    </div>
  );
}

function UICard({ card, ready, reduce }: { card: GeneratedCard; ready: boolean; reduce: boolean }) {
  const max = Math.max(...card.rows.map((r) => r.value), 1);
  const best = card.rows.reduce((a, b) => (b.value < a.value ? b : a), card.rows[0]);
  return (
    <motion.div
      layout={!reduce}
      transition={{ type: "spring", stiffness: 260, damping: 28 }}
      className={cn("relative overflow-hidden rounded-2xl border", ready ? "bg-card shadow-sm" : "bg-muted/40")}
    >
      <AnimatePresence mode="popLayout" initial={false}>
        {!ready ? (
          <motion.div key="sk" exit={{ opacity: 0 }} className="space-y-3 p-4" aria-label="Generating interface" role="status">
            <div className="flex items-center gap-2 text-xs font-medium text-muted-foreground">
              <Sparkles className="size-3.5 animate-pulse text-primary" /> Generating UI…
            </div>
            {[0.55, 0.8, 0.65].map((w, i) => (
              <div key={i} className="relative h-3 overflow-hidden rounded-full bg-muted" style={{ width: `${w * 100}%` }}>
                {!reduce && (
                  <motion.span
                    className="absolute inset-y-0 w-1/2 bg-gradient-to-r from-transparent via-foreground/10 to-transparent"
                    animate={{ x: ["-100%", "250%"] }}
                    transition={{ duration: 1.1, repeat: Infinity, ease: "easeInOut", delay: i * 0.12 }}
                  />
                )}
              </div>
            ))}
          </motion.div>
        ) : (
          <motion.div key="card" initial={{ opacity: 0, filter: reduce ? "none" : "blur(6px)" }} animate={{ opacity: 1, filter: "blur(0px)" }} className="p-4">
            <div className="flex items-start justify-between gap-3">
              <div>
                <p className="text-sm font-semibold">{card.title}</p>
                {card.subtitle && <p className="text-xs text-muted-foreground">{card.subtitle}</p>}
              </div>
              <span className="rounded-full bg-emerald-500/10 px-2 py-0.5 text-[11px] font-medium text-emerald-600 dark:text-emerald-400">Live</span>
            </div>
            <ul className="mt-4 space-y-2.5">
              {card.rows.map((row, i) => (
                <li key={row.label} className="grid grid-cols-[minmax(0,7.5rem)_1fr_auto] items-center gap-3 text-xs sm:grid-cols-[9rem_1fr_auto]">
                  <span className="truncate text-muted-foreground">{row.label}</span>
                  <span className="h-2 overflow-hidden rounded-full bg-muted">
                    <motion.span
                      className={cn("block h-full rounded-full", row === best ? "bg-gradient-to-r from-emerald-500 to-teal-400" : "bg-primary/70")}
                      initial={{ width: 0 }}
                      animate={{ width: `${(row.value / max) * 100}%` }}
                      transition={{ delay: reduce ? 0 : 0.15 + i * 0.1, duration: reduce ? 0 : 0.7, ease: [0.22, 1, 0.36, 1] }}
                    />
                  </span>
                  <span className="font-mono tabular-nums">{row.display ?? row.value}</span>
                </li>
              ))}
            </ul>
            {card.footer && <p className="mt-3 text-xs font-medium text-emerald-600 dark:text-emerald-400">{card.footer}</p>}
          </motion.div>
        )}
      </AnimatePresence>
    </motion.div>
  );
}

function FooterButton({ children, label, onClick }: { children: React.ReactNode; label: string; onClick: () => void }) {
  return (
    <button
      type="button"
      onClick={onClick}
      className="inline-flex h-7 items-center gap-1.5 rounded-full border px-2.5 text-xs font-medium text-muted-foreground transition outline-none hover:bg-muted hover:text-foreground focus-visible:ring-2 focus-visible:ring-ring"
    >
      {children}
      {label}
    </button>
  );
}