"use client";
import * as React from "react";
import {
  ArrowUp,
  BarChart3,
  Boxes,
  Check,
  ChevronDown,
  ChevronRight,
  Copy,
  FolderOpen,
  GitBranch,
  Library,
  Menu,
  MessageSquare,
  Mic,
  PanelLeft,
  Plus,
  RotateCcw,
  Search,
  Sparkles,
  SquarePen,
  Star,
  Swords,
  Trophy,
  WandSparkles,
  Zap,
} from "lucide-react";
import { Logo } from "@/components/brand/logo";
import { ProviderIcon } from "@/components/brand/provider-icon";
import { Badge } from "@/components/ui/badge";
import { MOBILE_TABS } from "@/components/app/bottom-nav";
import { cn } from "@/lib/utils";
import { approxTokens } from "./fake-stream";
import { MOCK_MODELS, MOCK_PROJECTS, RECENT_CONVERSATIONS, SCOREBOARD, USAGE_BY_PROVIDER, USAGE_COST_SERIES, USAGE_DAY_LABELS, USAGE_KPIS, USAGE_SAVINGS, USAGE_SERIES, PROVIDER_LABEL, type MockModel } from "./mock-data";

/* ------------------------------------------------------------------------------------------------
 * Ultra-light inline markdown for the mocks (bold, inline code, paragraphs, pipe tables).
 * Not the real renderer — just enough to look like it.
 * ---------------------------------------------------------------------------------------------- */
function renderInline(line: string, keyPrefix: string) {
  const parts = line.split(/(\*\*[^*]+\*\*|`[^`]+`)/g).filter(Boolean);
  return parts.map((p, i) => {
    if (p.startsWith("**") && p.endsWith("**")) return <strong key={`${keyPrefix}-${i}`}>{p.slice(2, -2)}</strong>;
    if (p.startsWith("`") && p.endsWith("`")) return <code key={`${keyPrefix}-${i}`}>{p.slice(1, -1)}</code>;
    return <React.Fragment key={`${keyPrefix}-${i}`}>{p}</React.Fragment>;
  });
}

function MockTable({ block, streaming }: { block: string; streaming: boolean }) {
  const lines = block.split("\n").filter((l) => l.trim().startsWith("|"));
  const rows = lines.filter((l) => !/^\|\s*-{2,}/.test(l.trim())).map((l) => l.trim().replace(/^\||\|$/g, "").split("|").map((c) => c.trim()));
  if (!rows.length) return null;
  const [head, ...body] = rows;
  return (
    <table className={cn(streaming && "opacity-90")}>
      <thead>
        <tr>
          {head.map((c, i) => (
            <th key={i}>{renderInline(c, `h${i}`)}</th>
          ))}
        </tr>
      </thead>
      <tbody>
        {body.map((r, ri) => (
          <tr key={ri}>
            {r.map((c, ci) => (
              <td key={ci}>{renderInline(c, `c${ri}-${ci}`)}</td>
            ))}
          </tr>
        ))}
      </tbody>
    </table>
  );
}

export function MockMarkdown({ text, streaming, className }: { text: string; streaming: boolean; className?: string }) {
  const blocks = text.split(/\n\n/);
  return (
    <div className={cn("prose-chat text-[13px] leading-[1.6] sm:text-[13.5px]", className)}>
      {blocks.map((b, i) => {
        const last = i === blocks.length - 1;
        if (b.trim().startsWith("|")) {
          return (
            <React.Fragment key={i}>
              <MockTable block={b} streaming={streaming && last} />
              {streaming && last ? <span className="caret" aria-hidden /> : null}
            </React.Fragment>
          );
        }
        return (
          <p key={i}>
            {renderInline(b, String(i))}
            {streaming && last ? <span className="caret" aria-hidden /> : null}
          </p>
        );
      })}
    </div>
  );
}

/* ------------------------------------------------------------------------------------------------
 * Atoms that mirror the real app
 * ---------------------------------------------------------------------------------------------- */
export function ModelPill({ model, className, size = "md" }: { model: MockModel; className?: string; size?: "sm" | "md" }) {
  return (
    <span className={cn("inline-flex items-center gap-1.5 rounded-md border border-border bg-bg-elevated font-medium", size === "sm" ? "h-6 px-1.5 text-[11.5px]" : "h-7 px-2 text-[12.5px]", className)}>
      <ProviderIcon provider={model.provider} size={size === "sm" ? 12 : 13} />
      <span className="truncate">{model.name}</span>
      <ChevronDown className={cn("shrink-0 text-fg-subtle", size === "sm" ? "size-3" : "size-3.5")} aria-hidden />
    </span>
  );
}

export function ContextIndicator({ used, total, className }: { used: string; total: string; className?: string }) {
  return (
    <span className={cn("inline-flex items-center gap-1.5 font-mono text-[10.5px] tabular-nums text-fg-subtle", className)} title="Context used">
      <span className="h-1 w-10 overflow-hidden rounded-full bg-bg-muted">
        <span className="block h-full w-[9%] rounded-full bg-accent" />
      </span>
      {used} / {total}
    </span>
  );
}

/** The metadata line shown under an assistant message in the real app. */
export function MessageMeta({ chars, elapsedMs, ttftMs, done, model, className }: { chars: number; elapsedMs: number; ttftMs: number; done: boolean; model: MockModel; className?: string }) {
  const out = approxTokens(chars);
  const inTok = 60 + Math.round(chars / 40);
  const secs = Math.max(0.1, elapsedMs / 1000);
  const tps = chars > 0 ? Math.round(out / secs) : 0;
  const cost = (out / 1_000_000) * parseFloat(model.output.slice(1)) + (inTok / 1_000_000) * parseFloat(model.input.slice(1));
  return (
    <div className={cn("flex flex-wrap items-center gap-x-2.5 gap-y-1 font-mono text-[10.5px] tabular-nums text-fg-subtle", className)} aria-label="Message metadata">
      <span className="inline-flex items-center gap-1 text-fg-muted">
        <ProviderIcon provider={model.provider} size={11} />
        {model.name}
      </span>
      <span>
        {inTok} in · {out} out
      </span>
      <span>{(secs + ttftMs / 1000).toFixed(1)} s</span>
      <span>TTFT {(ttftMs / 1000).toFixed(1)} s</span>
      <span>{tps} tok/s</span>
      <span className={cn(done && "text-fg-muted")}>≈ ${cost.toFixed(4)}</span>
      {done ? (
        <span className="ml-auto hidden items-center gap-2 text-fg-subtle sm:inline-flex" aria-hidden>
          <Copy className="size-3" />
          <RotateCcw className="size-3" />
          <GitBranch className="size-3" />
        </span>
      ) : null}
    </div>
  );
}

/** Desktop composer as in the real app: auto-grow area, tools row, active model pill, send. */
export function ComposerMock({ text, model, streaming, compact }: { text?: string; model: MockModel; streaming?: boolean; compact?: boolean }) {
  return (
    <div className="rounded-2xl border border-border bg-bg-elevated shadow-xs" aria-hidden>
      <div className={cn("px-3.5 pt-3 text-[13px] leading-6", compact ? "min-h-[36px]" : "min-h-[44px]", text ? "text-fg" : "text-fg-subtle")}>
        {text ?? "Ask anything…"}
        {text && !streaming ? <span className="caret" aria-hidden /> : null}
      </div>
      <div className="flex items-center gap-1.5 px-2 pb-2 pt-1">
        <span className="inline-flex size-7 items-center justify-center rounded-md text-fg-muted">
          <Plus className="size-4" />
        </span>
        <ModelPill model={model} size="sm" />
        <span className="hidden h-6 items-center gap-1 rounded-md border border-dashed border-border px-1.5 text-[11px] text-fg-muted lg:inline-flex">Web search</span>
        <span className="ml-auto inline-flex size-7 items-center justify-center rounded-md text-fg-muted">
          <Mic className="size-4" />
        </span>
        <span className={cn("inline-flex size-7 items-center justify-center rounded-full", streaming ? "bg-bg-muted text-fg" : "bg-fg text-bg")}>{streaming ? <span className="size-2.5 rounded-[2px] bg-current" /> : <ArrowUp className="size-4" />}</span>
      </div>
    </div>
  );
}

/** Phone composer: `[+] Ask anything… [mic] [send]` — one row, 16 px-equivalent text. */
export function MobileComposerMock({ text, streaming }: { text?: string; streaming?: boolean }) {
  return (
    <div className="flex items-end gap-1.5 px-2.5 pb-2 pt-1.5" aria-hidden>
      <span className="flex size-9 shrink-0 items-center justify-center rounded-full bg-bg-muted text-fg-muted">
        <Plus className="size-[18px]" />
      </span>
      <div className={cn("flex min-h-9 flex-1 items-center rounded-[18px] border border-border bg-bg-elevated px-3 text-[13px]", text ? "text-fg" : "text-fg-subtle")}>
        <span className="truncate">{text ?? "Ask anything…"}</span>
      </div>
      <span className="flex size-9 shrink-0 items-center justify-center rounded-full text-fg-muted">
        <Mic className="size-[18px]" />
      </span>
      <span className={cn("flex size-9 shrink-0 items-center justify-center rounded-full", streaming ? "bg-bg-muted text-fg" : "bg-fg text-bg")}>{streaming ? <span className="size-3 rounded-[3px] bg-current" /> : <ArrowUp className="size-[18px]" />}</span>
    </div>
  );
}

/** Mirrors `components/app/bottom-nav.tsx` (same tabs, same geometry) inside the phone frame. */
export function BottomNavMock({ active }: { active: "Chat" | "Arena" | "Models" | "Usage" | "Account" }) {
  return (
    <nav aria-hidden className="glass-strong shrink-0 border-t border-hairline pb-4">
      <ul className="grid h-[52px] grid-cols-5">
        {MOBILE_TABS.map((t) => {
          const on = t.label === active;
          return (
            <li key={t.href} className="flex flex-col items-center justify-center gap-0.5 text-[9.5px] font-medium tracking-tight">
              <span className={cn("flex h-6 w-10 items-center justify-center rounded-full", on ? "bg-accent-soft text-accent" : "text-fg-subtle")}>
                <t.icon className="size-[17px]" strokeWidth={on ? 2.2 : 1.8} />
              </span>
              <span className={on ? "text-fg" : "text-fg-subtle"}>{t.label}</span>
            </li>
          );
        })}
      </ul>
    </nav>
  );
}

export function MobileHeaderMock({ center, right, title }: { center?: React.ReactNode; right?: React.ReactNode; title?: string }) {
  return (
    <div className="flex h-11 shrink-0 items-center justify-between px-2.5 hairline-b" aria-hidden>
      <span className="flex size-8 items-center justify-center rounded-md text-fg-muted">
        <Menu className="size-[18px]" />
      </span>
      {center ?? <span className="text-[13px] font-semibold tracking-tight">{title}</span>}
      {right ?? (
        <span className="flex size-8 items-center justify-center rounded-md text-fg-muted">
          <SquarePen className="size-[17px]" />
        </span>
      )}
    </div>
  );
}

/* ------------------------------------------------------------------------------------------------
 * Desktop sidebar (mirrors components/app/sidebar.tsx)
 * ---------------------------------------------------------------------------------------------- */
const SIDEBAR_NAV = [
  { label: "Chat", icon: MessageSquare },
  { label: "Arena", icon: Swords },
  { label: "Models", icon: Boxes },
  { label: "Prompts", icon: WandSparkles },
  { label: "Presets", icon: Sparkles },
  { label: "Library", icon: Library },
  { label: "Usage", icon: BarChart3 },
] as const;

export function SidebarMock({ active = "Chat", activeConversation = RECENT_CONVERSATIONS[0], className }: { active?: (typeof SIDEBAR_NAV)[number]["label"]; activeConversation?: string | null; className?: string }) {
  return (
    <aside className={cn("flex w-[13.5rem] shrink-0 flex-col border-r border-border bg-bg-subtle p-2.5 text-[12px]", className)} aria-hidden>
      <div className="flex items-center justify-between px-1">
        <Logo size={18} className="[&_span]:text-[13px]" />
        <PanelLeft className="size-3.5 text-fg-subtle" />
      </div>
      <div className="mt-2.5 flex h-7 items-center gap-2 rounded-md bg-fg px-2 text-[11.5px] font-medium text-bg">
        <SquarePen className="size-3.5" /> New chat <kbd className="kbd ml-auto border-bg/20 bg-bg/10 text-bg/80">⌘N</kbd>
      </div>
      <div className="mt-1.5 flex h-7 items-center gap-2 rounded-md border border-border bg-bg px-2 text-fg-subtle">
        <Search className="size-3.5" /> Search <kbd className="kbd ml-auto">⌘K</kbd>
      </div>
      <ul className="mt-2.5 space-y-px">
        {SIDEBAR_NAV.map((n) => (
          <li key={n.label} className={cn("flex h-7 items-center gap-2 rounded-md px-2", n.label === active ? "bg-bg-muted font-medium text-fg" : "text-fg-muted")}>
            <n.icon className="size-3.5" /> {n.label}
          </li>
        ))}
      </ul>
      <div className="mt-3 flex items-center justify-between px-2 text-[10.5px] font-semibold uppercase tracking-[0.08em] text-fg-subtle">
        Projects <Plus className="size-3" />
      </div>
      <ul className="mt-1 space-y-px">
        {MOCK_PROJECTS.map((p) => (
          <li key={p} className="flex h-6.5 items-center gap-2 rounded-md px-2 text-fg-muted">
            <FolderOpen className="size-3.5 text-fg-subtle" /> {p}
          </li>
        ))}
      </ul>
      <div className="mt-3 px-2 text-[10.5px] font-semibold uppercase tracking-[0.08em] text-fg-subtle">Recent</div>
      <ul className="mt-1 min-h-0 flex-1 space-y-px overflow-hidden">
        {RECENT_CONVERSATIONS.map((t) => (
          <li key={t} className={cn("flex h-6.5 items-center gap-2 truncate rounded-md px-2", t === activeConversation ? "bg-bg-muted font-medium text-fg" : "text-fg-muted")}>
            <MessageSquare className="size-3.5 shrink-0 text-fg-subtle" /> <span className="truncate">{t}</span>
          </li>
        ))}
      </ul>
      <div className="mt-2 flex items-center gap-2 rounded-md px-2 py-1.5 text-fg-muted">
        <span className="flex size-5 items-center justify-center rounded-full bg-accent-soft text-[9px] font-semibold text-accent">SP</span>
        <span className="truncate">simon@…</span>
        <ChevronDown className="ml-auto size-3 text-fg-subtle" />
      </div>
    </aside>
  );
}

/* ------------------------------------------------------------------------------------------------
 * Chat — desktop and phone
 * ---------------------------------------------------------------------------------------------- */
export interface ChatMockProps {
  prompt: string;
  reply: string;
  progress: number;
  elapsedMs: number;
  ttftMs: number;
  model: MockModel;
  className?: string;
}

function AssistantTurn({ reply, progress, elapsedMs, ttftMs, model, dense }: Omit<ChatMockProps, "prompt" | "className"> & { dense?: boolean }) {
  const shown = reply.slice(0, progress);
  const done = progress >= reply.length;
  return (
    <div className="flex gap-2.5">
      <span className={cn("mt-0.5 flex shrink-0 items-center justify-center rounded-md border border-border bg-bg-elevated", dense ? "size-5" : "size-6")}>
        <ProviderIcon provider={model.provider} size={dense ? 11 : 13} />
      </span>
      <div className="min-w-0 flex-1">
        {progress === 0 ? (
          <p className="inline-flex items-center gap-1.5 text-[12.5px] text-fg-subtle">
            <span className="size-1.5 rounded-full bg-accent animate-pulse-soft" />
            Thinking…
          </p>
        ) : (
          <MockMarkdown text={shown} streaming={!done} className={dense ? "text-[12.5px] sm:text-[12.5px]" : undefined} />
        )}
        {progress > 0 ? <MessageMeta chars={progress} elapsedMs={elapsedMs} ttftMs={ttftMs} done={done} model={model} className="mt-2.5" /> : null}
      </div>
    </div>
  );
}

export function DesktopChatMock({ prompt, reply, progress, elapsedMs, ttftMs, model, className }: ChatMockProps) {
  const done = progress >= reply.length;
  return (
    <div className={cn("flex min-h-[26rem] bg-bg", className)}>
      <SidebarMock className="hidden md:flex" />
      <div className="flex min-w-0 flex-1 flex-col">
        <div className="flex h-11 items-center gap-2 px-3 hairline-b">
          <ModelPill model={model} />
          <Badge variant="accent" className="hidden sm:inline-flex">
            thinking · 16K
          </Badge>
          <ContextIndicator used="12K" total={model.context} className="ml-auto" />
          <Star className="size-3.5 text-border-strong" aria-hidden />
        </div>
        <div className="min-h-0 flex-1 space-y-5 overflow-hidden px-4 py-4 sm:px-6">
          <div className="flex justify-end">
            <p className="max-w-[85%] rounded-2xl rounded-br-md bg-bg-muted px-3.5 py-2 text-[13px] leading-6 sm:text-[13.5px]">{prompt}</p>
          </div>
          <AssistantTurn reply={reply} progress={progress} elapsedMs={elapsedMs} ttftMs={ttftMs} model={model} />
        </div>
        <div className="p-3 sm:px-6 sm:pb-4">
          <ComposerMock model={model} streaming={!done && progress > 0} compact />
        </div>
      </div>
    </div>
  );
}

/** Full-screen phone chat with header, messages, composer and bottom nav — the real mobile layout. */
export function MobileChatMock({ prompt, reply, progress, elapsedMs, ttftMs, model }: ChatMockProps) {
  const done = progress >= reply.length;
  return (
    <>
      <MobileHeaderMock center={<ModelPill model={model} size="sm" />} />
      <div className="min-h-0 flex-1 space-y-4 overflow-hidden px-3 py-3 mask-b">
        <div className="flex justify-end">
          <p className="max-w-[88%] rounded-2xl rounded-br-md bg-bg-muted px-3 py-1.5 text-[12.5px] leading-5">{prompt}</p>
        </div>
        <AssistantTurn reply={reply} progress={progress} elapsedMs={elapsedMs} ttftMs={ttftMs} model={model} dense />
      </div>
      <MobileComposerMock streaming={!done && progress > 0} />
      <BottomNavMock active="Chat" />
    </>
  );
}

/* ------------------------------------------------------------------------------------------------
 * Arena — desktop grid, phone swipeable single response, hero mini card
 * ---------------------------------------------------------------------------------------------- */
export interface ArenaMockProps {
  prompt: string;
  models: MockModel[];
  replies: string[];
  progress: number[];
  elapsedFor: (i: number) => number;
  ttftFor: (i: number) => number;
  fastest: number;
  allDone: boolean;
  /** Index the "user" votes for once everything is done (scripted). */
  winner?: number;
  className?: string;
}

const VOTES = ["Best", "Most accurate", "Best writing", "Best value"] as const;

function ArenaColumn({ m, text, progress, elapsedMs, ttftMs, isFastest, allDone, winner, dense }: { m: MockModel; text: string; progress: number; elapsedMs: number; ttftMs: number; isFastest: boolean; allDone: boolean; winner: boolean; dense?: boolean }) {
  const shown = text.slice(0, progress);
  const done = progress >= text.length;
  return (
    <div className="flex h-full min-w-0 flex-col p-3 sm:p-4">
      <div className="flex items-center gap-1.5 text-[12.5px] font-medium">
        <ProviderIcon provider={m.provider} size={13} />
        <span className="truncate">{m.name}</span>
        {done && isFastest ? (
          <Badge variant="success" className="ml-auto">
            <Zap /> fastest
          </Badge>
        ) : !done && progress > 0 ? (
          <span className="ml-auto size-1.5 rounded-full bg-accent animate-pulse-soft" aria-label="streaming" />
        ) : !done ? (
          <span className="ml-auto font-mono text-[10px] text-fg-subtle">queued</span>
        ) : null}
      </div>
      <div className="mt-2.5 min-h-0 flex-1">
        {progress === 0 ? <p className="text-[12px] text-fg-subtle animate-pulse-soft">Waiting for first token…</p> : <MockMarkdown text={shown} streaming={!done} className={dense ? "text-[12.5px] sm:text-[12.5px]" : undefined} />}
      </div>
      <div className="mt-3 border-t border-hairline pt-2.5">
        {progress > 0 ? <MessageMeta chars={progress} elapsedMs={elapsedMs} ttftMs={ttftMs} done={done} model={m} /> : <span className="font-mono text-[10.5px] text-fg-subtle">—</span>}
        <div className={cn("mt-2.5 flex flex-wrap gap-1 transition-opacity duration-300", allDone ? "opacity-100" : "pointer-events-none opacity-0")} aria-hidden={!allDone}>
          {VOTES.map((v, i) => (
            <span key={v} className={cn("inline-flex h-6 items-center gap-1 rounded-full border px-2 text-[10.5px] font-medium", winner && i === 0 ? "border-fg bg-fg text-bg" : "border-border text-fg-muted")}>
              {winner && i === 0 ? <Check className="size-3" /> : null}
              {v}
            </span>
          ))}
        </div>
      </div>
    </div>
  );
}

export function DesktopArenaMock({ prompt, models, replies, progress, elapsedFor, ttftFor, fastest, allDone, winner = 0, className }: ArenaMockProps) {
  return (
    <div className={cn("flex min-h-[26rem] bg-bg", className)}>
      <SidebarMock active="Arena" activeConversation={null} className="hidden lg:flex" />
      <div className="flex min-w-0 flex-1 flex-col">
        <div className="flex h-11 items-center gap-2 px-3 text-[12.5px] hairline-b">
          <span className="font-semibold">Arena</span>
          <Badge>{models.length} models</Badge>
          <Badge variant="outline" className="hidden sm:inline-flex">
            Blind: off
          </Badge>
          {allDone ? (
            <Badge variant="accent" className="ml-auto animate-fade-in">
              <Trophy /> Winner: {models[winner].name}
            </Badge>
          ) : (
            <span className="ml-auto font-mono text-[10.5px] text-fg-subtle">streaming…</span>
          )}
        </div>
        <div className="px-3 py-2.5 text-[12.5px] hairline-b sm:px-4">
          <span className="text-fg-subtle">Prompt · </span>
          {prompt}
        </div>
        <div className={cn("grid min-h-0 flex-1 divide-y divide-border md:divide-x md:divide-y-0", models.length === 2 ? "md:grid-cols-2" : models.length === 4 ? "md:grid-cols-2 lg:grid-cols-4" : "md:grid-cols-3")}>
          {models.map((m, i) => (
            <ArenaColumn key={m.key} m={m} text={replies[i]} progress={progress[i]} elapsedMs={elapsedFor(i)} ttftMs={ttftFor(i)} isFastest={i === fastest} allDone={allDone} winner={i === winner} />
          ))}
        </div>
      </div>
    </div>
  );
}

/** Phone Arena: sticky model tabs + a `.snap-row` carousel, one response at a time (as in the real app). */
export function MobileArenaMock({ prompt, models, replies, progress, elapsedFor, ttftFor, fastest, allDone, winner = 0 }: ArenaMockProps) {
  const ref = React.useRef<HTMLDivElement>(null);
  const [index, setIndex] = React.useState(0);
  React.useEffect(() => {
    const el = ref.current;
    if (!el) return;
    let raf = 0;
    const onScroll = () => {
      cancelAnimationFrame(raf);
      raf = requestAnimationFrame(() => setIndex(Math.max(0, Math.min(models.length - 1, Math.round(el.scrollLeft / (el.clientWidth || 1))))));
    };
    el.addEventListener("scroll", onScroll, { passive: true });
    return () => {
      el.removeEventListener("scroll", onScroll);
      cancelAnimationFrame(raf);
    };
  }, [models.length]);
  const go = (i: number) => ref.current?.scrollTo({ left: i * (ref.current.clientWidth || 0), behavior: "smooth" });

  return (
    <>
      <MobileHeaderMock title="Arena" right={<span className="px-2 text-[12px] font-medium text-accent">New</span>} />
      <div className="px-3 py-2 text-[12px] leading-5 hairline-b">
        <span className="text-fg-subtle">Prompt · </span>
        {prompt}
      </div>
      <div className="flex gap-1 overflow-x-auto px-2 py-1.5 scrollbar-none hairline-b" role="tablist" aria-label="Arena responses">
        {models.map((m, i) => (
          <button key={m.key} type="button" role="tab" aria-selected={index === i} onClick={() => go(i)} className={cn("inline-flex h-7 shrink-0 items-center gap-1.5 rounded-full px-2.5 text-[11.5px] font-medium transition-colors", index === i ? "bg-fg text-bg" : "bg-bg-muted text-fg-muted")}>
            <ProviderIcon provider={m.provider} size={11} />
            {m.name}
            {progress[i] > 0 && progress[i] < replies[i].length ? <span className="size-1.5 rounded-full bg-accent animate-pulse-soft" /> : null}
          </button>
        ))}
      </div>
      <div ref={ref} className="snap-row min-h-0 flex-1 touch-pan-x" data-no-edge-swipe>
        {models.map((m, i) => (
          <div key={m.key} className="h-full overflow-hidden">
            <ArenaColumn m={m} text={replies[i]} progress={progress[i]} elapsedMs={elapsedFor(i)} ttftMs={ttftFor(i)} isFastest={i === fastest} allDone={allDone} winner={i === winner} dense />
          </div>
        ))}
      </div>
      <div className="flex justify-center gap-1 pb-1.5" aria-hidden>
        {models.map((m, i) => (
          <span key={m.key} className={cn("size-1.5 rounded-full transition-colors", i === index ? "bg-fg" : "bg-border-strong")} />
        ))}
      </div>
      <BottomNavMock active="Arena" />
    </>
  );
}

/** Small "Arena · 3 models" card layered over the hero window. */
export function ArenaMiniCard({ models, replies, progress, elapsedFor, fastest, allDone, className }: Omit<ArenaMockProps, "prompt" | "ttftFor">) {
  return (
    <div className={cn("w-[17rem] rounded-xl border border-border bg-bg-elevated p-3 shadow-lg", className)} aria-hidden>
      <div className="flex items-center gap-1.5 text-[12px] font-semibold">
        <Swords className="size-3.5 text-accent" /> Arena
        <span className="ml-auto font-mono text-[10px] font-normal text-fg-subtle">{allDone ? "done" : "streaming"}</span>
      </div>
      <ul className="mt-2.5 space-y-2">
        {models.map((m, i) => {
          const pct = Math.min(100, Math.round((progress[i] / replies[i].length) * 100));
          const tps = progress[i] > 0 ? Math.round(approxTokens(progress[i]) / Math.max(0.1, elapsedFor(i) / 1000)) : 0;
          return (
            <li key={m.key} className="text-[11px]">
              <div className="flex items-center gap-1.5">
                <ProviderIcon provider={m.provider} size={11} />
                <span className="truncate font-medium">{m.name}</span>
                {pct >= 100 && i === fastest ? <Zap className="size-3 text-success" /> : null}
                <span className="ml-auto font-mono tabular-nums text-fg-subtle">{tps ? `${tps} tok/s` : "—"}</span>
              </div>
              <div className="mt-1 h-1 overflow-hidden rounded-full bg-bg-muted">
                <div className="h-full rounded-full bg-accent transition-[width] duration-150" style={{ width: `${pct}%` }} />
              </div>
            </li>
          );
        })}
      </ul>
    </div>
  );
}

/* ------------------------------------------------------------------------------------------------
 * Models catalog — desktop table, phone stacked rows
 * ---------------------------------------------------------------------------------------------- */
const MODEL_CHIPS = ["All", "Favorites", "Reasoning", "Vision", "Cheap", "Long context", "New"] as const;
const FAVORITES = new Set(["anthropic/claude-opus-5", "openai/gpt-5.5", "gemini/gemini-3.8-flash"]);
const TAG_LABEL: Record<NonNullable<MockModel["tags"]>[number], { label: string; variant: "accent" | "success" | "info" | "warning" | "default" }> = {
  new: { label: "New", variant: "accent" },
  fast: { label: "Fast", variant: "success" },
  cheap: { label: "Cheap", variant: "success" },
  reasoning: { label: "Reasoning", variant: "info" },
  vision: { label: "Vision", variant: "default" },
  coding: { label: "Coding", variant: "default" },
  long: { label: "Long context", variant: "warning" },
};

function ChipsMock({ active = "All", className }: { active?: (typeof MODEL_CHIPS)[number]; className?: string }) {
  return (
    <div className={cn("flex gap-1.5 overflow-x-auto scrollbar-none", className)} aria-hidden>
      {MODEL_CHIPS.map((c) => (
        <span key={c} className={cn("inline-flex h-6.5 shrink-0 items-center rounded-full border px-2.5 text-[11px] font-medium", c === active ? "border-fg bg-fg text-bg" : "border-border bg-bg-elevated text-fg-muted")}>
          {c}
        </span>
      ))}
    </div>
  );
}

export function DesktopModelsMock({ className }: { className?: string }) {
  return (
    <div className={cn("flex min-h-[26rem] bg-bg", className)}>
      <SidebarMock active="Models" activeConversation={null} className="hidden lg:flex" />
      <div className="flex min-w-0 flex-1 flex-col">
        <div className="flex h-11 items-center gap-3 px-3 hairline-b">
          <span className="text-[12.5px] font-semibold">Models</span>
          <span className="font-mono text-[10.5px] text-fg-subtle">{MOCK_MODELS.length * 6 - 2} models · 9 providers</span>
          <span className="ml-auto inline-flex h-7 w-52 items-center gap-2 rounded-md border border-border bg-bg-elevated px-2 text-[12px] text-fg-subtle">
            <Search className="size-3.5" /> cheap vision model
            <kbd className="kbd ml-auto">⌘/</kbd>
          </span>
        </div>
        <div className="px-3 py-2 hairline-b">
          <ChipsMock />
        </div>
        <table className="w-full text-[12.5px]">
          <thead>
            <tr className="text-left font-mono text-[10.5px] font-normal uppercase tracking-[0.08em] text-fg-subtle">
              <th className="px-3 py-2 font-normal">Model</th>
              <th className="hidden px-3 py-2 font-normal sm:table-cell">Context</th>
              <th className="px-3 py-2 text-right font-normal">$ / M in · out</th>
              <th className="hidden px-3 py-2 font-normal md:table-cell">Badges</th>
              <th className="w-10 px-3 py-2" />
            </tr>
          </thead>
          <tbody>
            {MOCK_MODELS.slice(0, 7).map((m, i) => (
              <tr key={m.key} className={cn("hairline-t", i === 2 && "bg-accent-soft/40")}>
                <td className="px-3 py-2">
                  <div className="flex items-center gap-2">
                    <ProviderIcon provider={m.provider} size={14} />
                    <div className="min-w-0">
                      <p className="truncate font-medium">{m.name}</p>
                      <p className="truncate font-mono text-[10.5px] text-fg-subtle">{m.key}</p>
                    </div>
                  </div>
                </td>
                <td className="hidden px-3 py-2 font-mono text-[11.5px] tabular-nums text-fg-muted sm:table-cell">{m.context}</td>
                <td className="px-3 py-2 text-right font-mono text-[11.5px] tabular-nums text-fg-muted">
                  {m.input} · {m.output}
                </td>
                <td className="hidden px-3 py-2 md:table-cell">
                  <div className="flex gap-1">
                    {(m.tags ?? []).slice(0, 2).map((t) => (
                      <Badge key={t} variant={TAG_LABEL[t].variant}>
                        {TAG_LABEL[t].label}
                      </Badge>
                    ))}
                  </div>
                </td>
                <td className="px-3 py-2 text-right">
                  <Star className={cn("inline size-3.5", FAVORITES.has(m.key) ? "fill-warning text-warning" : "text-border-strong")} aria-hidden />
                </td>
              </tr>
            ))}
          </tbody>
        </table>
        <div className="mt-auto flex items-center justify-between px-3 py-2 font-mono text-[10.5px] text-fg-subtle hairline-t">
          <span>Synced 4 min ago</span>
          <span>2 selected → Compare</span>
        </div>
      </div>
    </div>
  );
}

export function MobileModelsMock() {
  return (
    <>
      <MobileHeaderMock title="Models" right={<span className="flex size-8 items-center justify-center rounded-md text-fg-muted"><Search className="size-[17px]" /></span>} />
      <div className="px-2.5 pt-2">
        <ChipsMock active="Favorites" />
      </div>
      <ul className="min-h-0 flex-1 overflow-hidden px-2.5 pt-1 mask-b">
        {MOCK_MODELS.slice(0, 7).map((m) => (
          <li key={m.key} className="flex items-center gap-2.5 py-2.5 hairline-b">
            <span className="flex size-8 shrink-0 items-center justify-center rounded-lg bg-bg-subtle">
              <ProviderIcon provider={m.provider} size={15} />
            </span>
            <div className="min-w-0 flex-1">
              <p className="truncate text-[13px] font-medium">{m.name}</p>
              <p className="truncate font-mono text-[10.5px] text-fg-subtle">
                {m.context} ctx · {m.input} / {m.output}
              </p>
            </div>
            <Star className={cn("size-4 shrink-0", FAVORITES.has(m.key) ? "fill-warning text-warning" : "text-border-strong")} aria-hidden />
            <ChevronRight className="size-4 shrink-0 text-fg-subtle" aria-hidden />
          </li>
        ))}
      </ul>
      <BottomNavMock active="Models" />
    </>
  );
}

/* ------------------------------------------------------------------------------------------------
 * Usage analytics — desktop dashboard, phone stacked tiles
 * ---------------------------------------------------------------------------------------------- */
function Bars({ values, className, label }: { values: number[]; className?: string; label: string }) {
  const max = Math.max(...values);
  return (
    <div className={cn("flex items-end gap-[3px] border-b border-hairline", className)} role="img" aria-label={label}>
      {values.map((v, i) => (
        <div key={i} title={`${USAGE_DAY_LABELS[i]} · ${v}`} className="flex-1 rounded-t-[3px] bg-accent/80" style={{ height: `${Math.max(6, (v / max) * 100)}%` }} />
      ))}
    </div>
  );
}

function ProviderCostRows({ dense }: { dense?: boolean }) {
  const total = USAGE_BY_PROVIDER.reduce((a, b) => a + b.cost, 0);
  return (
    <ul className={cn("space-y-2", dense && "space-y-1.5")}>
      {USAGE_BY_PROVIDER.map((row) => (
        <li key={row.provider} className={cn("grid items-center gap-2 text-[12px]", dense ? "grid-cols-[5.5rem_1fr_3rem]" : "grid-cols-[7rem_1fr_3.5rem]")}>
          <span className="inline-flex items-center gap-1.5 truncate">
            <ProviderIcon provider={row.provider} size={12} />
            {PROVIDER_LABEL[row.provider]}
          </span>
          <span className="h-1.5 overflow-hidden rounded-full bg-bg-muted">
            <span className="block h-full rounded-full" style={{ width: `${(row.cost / total) * 100}%`, background: `var(--p-${row.provider})` }} />
          </span>
          <span className="text-right font-mono tabular-nums text-fg-muted">${row.cost.toFixed(2)}</span>
        </li>
      ))}
    </ul>
  );
}

function SavingsCard({ dense }: { dense?: boolean }) {
  return (
    <div className={cn("rounded-xl bg-accent-soft/60 p-3", dense && "p-2.5")}>
      <p className="inline-flex items-center gap-1.5 text-[11.5px] font-semibold text-accent">
        <Sparkles className="size-3.5" /> Savings opportunity
      </p>
      <p className="mt-1 text-[12px] font-medium">{USAGE_SAVINGS.title}</p>
      <p className="mt-0.5 text-[11.5px] leading-5 text-fg-muted">{USAGE_SAVINGS.body}</p>
    </div>
  );
}

export function DesktopUsageMock({ className }: { className?: string }) {
  return (
    <div className={cn("flex min-h-[26rem] bg-bg", className)}>
      <SidebarMock active="Usage" activeConversation={null} className="hidden lg:flex" />
      <div className="flex min-w-0 flex-1 flex-col">
        <div className="flex h-11 items-center gap-2 px-3 hairline-b">
          <span className="text-[12.5px] font-semibold">Usage</span>
          <div className="ml-auto inline-flex h-7 items-center gap-0.5 rounded-lg bg-bg-muted p-0.5 text-[11.5px]" aria-hidden>
            {["Today", "7d", "30d", "90d"].map((r) => (
              <span key={r} className={cn("rounded-md px-2 py-0.5", r === "30d" ? "bg-bg-elevated font-medium shadow-xs" : "text-fg-muted")}>
                {r}
              </span>
            ))}
          </div>
        </div>
        <div className="grid grid-cols-2 gap-px bg-hairline sm:grid-cols-4">
          {USAGE_KPIS.map((k) => (
            <div key={k.label} className="bg-bg px-3.5 py-3">
              <p className="text-[11px] font-medium text-fg-muted">{k.label}</p>
              <p className="mt-0.5 text-lg font-semibold tabular-nums tracking-tight">{k.value}</p>
              <p className="text-[10.5px] text-fg-subtle">{k.hint}</p>
            </div>
          ))}
        </div>
        <div className="grid gap-4 p-3.5 hairline-t md:grid-cols-[1.4fr_1fr]">
          <div>
            <div className="flex items-baseline justify-between">
              <p className="text-[12px] font-medium">Cost per day</p>
              <p className="font-mono text-[10.5px] text-fg-subtle">peak ${Math.max(...USAGE_COST_SERIES).toFixed(2)}</p>
            </div>
            <Bars values={USAGE_COST_SERIES} className="mt-3 h-24" label="Cost per day over the last 14 days" />
            <div className="mt-1.5 flex justify-between font-mono text-[10px] text-fg-subtle">
              <span>{USAGE_DAY_LABELS[0]}</span>
              <span>{USAGE_DAY_LABELS[USAGE_DAY_LABELS.length - 1]}</span>
            </div>
          </div>
          <div className="space-y-3">
            <p className="text-[12px] font-medium">Cost by provider</p>
            <ProviderCostRows />
            <SavingsCard dense />
          </div>
        </div>
      </div>
    </div>
  );
}

export function MobileUsageMock() {
  return (
    <>
      <MobileHeaderMock title="Usage" right={<span className="px-2 font-mono text-[11px] text-fg-muted">30d</span>} />
      <div className="min-h-0 flex-1 space-y-3 overflow-hidden px-3 pt-3 mask-b">
        <div className="grid grid-cols-2 gap-2">
          {USAGE_KPIS.map((k) => (
            <div key={k.label} className="panel px-3 py-2.5">
              <p className="text-[10.5px] font-medium text-fg-muted">{k.label}</p>
              <p className="mt-0.5 text-[17px] font-semibold tabular-nums tracking-tight">{k.value}</p>
            </div>
          ))}
        </div>
        <div className="panel p-3">
          <div className="flex items-baseline justify-between">
            <p className="text-[12px] font-medium">Requests per day</p>
            <p className="font-mono text-[10px] text-fg-subtle">peak {Math.max(...USAGE_SERIES)}</p>
          </div>
          <Bars values={USAGE_SERIES} className="mt-2.5 h-16" label="Requests per day over the last 14 days" />
        </div>
        <div className="panel p-3">
          <p className="mb-2 text-[12px] font-medium">Cost by provider</p>
          <ProviderCostRows dense />
        </div>
        <SavingsCard dense />
      </div>
      <BottomNavMock active="Usage" />
    </>
  );
}

/* ------------------------------------------------------------------------------------------------
 * Scoreboard (feature visual)
 * ---------------------------------------------------------------------------------------------- */
export function ScoreboardMock({ className }: { className?: string }) {
  return (
    <div className={cn("panel p-4", className)}>
      <div className="flex items-center gap-2 text-[12.5px] font-semibold">
        <Trophy className="size-4 text-warning" /> Your scoreboard
        <span className="ml-auto font-mono text-[10.5px] font-normal text-fg-subtle">Coding · last 30 d</span>
      </div>
      <ul className="mt-3 space-y-2.5">
        {SCOREBOARD.map((r, i) => {
          const pct = Math.round((r.wins / r.total) * 100);
          return (
            <li key={r.model.key} className="grid grid-cols-[1.25rem_1fr_3rem] items-center gap-2 text-[12.5px]">
              <span className="font-mono text-[11px] text-fg-subtle">{i + 1}</span>
              <div className="min-w-0">
                <div className="flex items-center gap-1.5">
                  <ProviderIcon provider={r.model.provider} size={12} />
                  <span className="truncate font-medium">{r.model.name}</span>
                  <span className="ml-auto font-mono text-[10.5px] text-fg-subtle">
                    {r.wins}/{r.total}
                  </span>
                </div>
                <div className="mt-1 h-1.5 overflow-hidden rounded-full bg-bg-muted">
                  <div className="h-full rounded-full" style={{ width: `${pct}%`, background: `var(--p-${r.model.provider})` }} />
                </div>
              </div>
              <span className="text-right font-mono text-[11.5px] tabular-nums">{pct}%</span>
            </li>
          );
        })}
      </ul>
    </div>
  );
}