"use client";
import * as React from "react";
import { Brain, EyeOff, Trophy, X } from "lucide-react";
import { ProviderIcon } from "@/components/brand/provider-icon";
import { Badge } from "@/components/ui/badge";
import { SimpleMarkdown } from "@/components/markdown/simple-markdown";
import { useIsMobile, useSnapCarousel } from "@/lib/client/hooks";
import type { ArenaShareSnapshot } from "@/lib/arena/export";
import type { LiveMetrics } from "@/lib/arena/metrics";
import { providerName } from "@/lib/client/providers";
import { cn } from "@/lib/utils";
import { ModelTabs } from "./model-tabs";
import { MetricsStrip } from "./metrics-strip";
import { ComparisonTable } from "./comparison-table";
import { WinnerCard } from "./winner-card";
import type { ColumnStatus } from "./types";

function statusOf(s: string): ColumnStatus {
  return s === "complete" ? "done" : s === "error" ? "error" : "stopped";
}

function metricsOf(r: ArenaShareSnapshot["responses"][number]): LiveMetrics {
  const out = r.usage?.outputTokens ?? null;
  const gen = typeof r.latencyMs === "number" ? Math.max(1, r.latencyMs - (r.ttftMs ?? 0)) : null;
  return { status: statusOf(r.status), elapsedMs: r.latencyMs ?? 0, ttftMs: r.ttftMs, inputTokens: r.usage?.inputTokens ?? null, outputTokens: out, reasoningTokens: r.usage?.reasoningTokens ?? null, cachedTokens: null, tokensPerSecond: out && gen ? Math.round((out / gen) * 1000) : null, costUsd: r.costUsd, exact: true };
}

const GRID: Record<number, string> = { 1: "md:grid-cols-1", 2: "md:grid-cols-2", 3: "md:grid-cols-2 xl:grid-cols-3", 4: "md:grid-cols-2" };

/** Public, read-only rendering of a shared Arena snapshot: swipe carousel on phones, grid on desktop. */
export function SharedArenaView({ snapshot: s }: { snapshot: ArenaShareSnapshot }) {
  const isMobile = useIsMobile();
  const responses = s.responses;
  const { ref, index, scrollTo } = useSnapCarousel<HTMLDivElement>(responses.length);
  const winnerKey = s.winner?.responseId ?? null;
  const metrics = React.useMemo(() => responses.map(metricsOf), [responses]);

  const tabs = responses.map((r, i) => ({ key: r.id, name: r.displayName, provider: r.provider, status: statusOf(r.status), tokensPerSecond: metrics[i].tokensPerSecond, isWinner: r.id === winnerKey, blindIndex: i }));
  const rows = responses.map((r, i) => ({ key: r.id, name: r.displayName, provider: r.provider, blindIndex: i, metrics: metrics[i], criteriaWon: r.criteriaWon, isWinner: r.id === winnerKey }));

  return (
    <div className="space-y-4">
      {isMobile ? (
        <>
          <div className="sticky top-14 z-30 -mx-4 bg-bg/95 px-4 py-2 backdrop-blur-sm">
            <ModelTabs items={tabs} active={index} onSelect={(i) => scrollTo(i)} />
          </div>
          <div ref={ref} className="snap-row" aria-roledescription="carousel" data-no-edge-swipe>
            {responses.map((r, i) => (
              <div key={r.id} className="px-0.5">
                <ResponseCard r={r} metrics={metrics[i]} isWinner={r.id === winnerKey} />
              </div>
            ))}
          </div>
          <p className="text-center text-[11.5px] text-fg-subtle">
            Swipe to compare · {index + 1} / {responses.length}
          </p>
        </>
      ) : (
        <div className={cn("grid grid-cols-1 gap-3", GRID[responses.length] ?? "md:grid-cols-2")}>
          {responses.map((r, i) => (
            <ResponseCard key={r.id} r={r} metrics={metrics[i]} isWinner={r.id === winnerKey} />
          ))}
        </div>
      )}

      {s.winner ? <WinnerCard winner={{ ...s.winner, votes: s.winner.criteriaWon.length }} name={responses.find((r) => r.id === s.winner!.responseId)?.displayName ?? s.winner.modelKey} provider={responses.find((r) => r.id === s.winner!.responseId)?.provider ?? null} /> : null}
      <ComparisonTable rows={rows} />
    </div>
  );
}

function ResponseCard({ r, metrics, isWinner }: { r: ArenaShareSnapshot["responses"][number]; metrics: LiveMetrics; isWinner: boolean }) {
  return (
    <article className={cn("flex min-w-0 flex-col overflow-hidden rounded-xl border bg-bg-elevated", isWinner ? "border-accent/60 shadow-glow" : "border-border")} aria-label={`${r.displayName} response`}>
      <header className="flex items-center gap-2 border-b border-border px-3 py-2">
        <span className="flex size-7 shrink-0 items-center justify-center rounded-md border border-border bg-bg-subtle">
          <ProviderIcon provider={r.provider} size={15} />
        </span>
        <div className="min-w-0 flex-1">
          <p className="truncate text-[13px] font-semibold leading-5">{r.displayName}</p>
          <p className="truncate text-[11.5px] text-fg-muted">{providerName(r.provider)}</p>
        </div>
        {isWinner ? (
          <Badge variant="accent" className="gap-1">
            <Trophy /> Winner
          </Badge>
        ) : null}
        {r.criteriaWon.length && !isWinner ? <Badge variant="outline">{r.criteriaWon.length} vote{r.criteriaWon.length === 1 ? "" : "s"}</Badge> : null}
      </header>
      <div className="min-w-0 flex-1 space-y-2.5 px-3.5 py-3 text-[14.5px] leading-6 md:max-h-[min(62vh,720px)] md:overflow-y-auto md:scrollbar-thin">
        {r.reasoning ? (
          <details className="group rounded-lg border border-border bg-bg-subtle/60">
            <summary className="flex cursor-pointer select-none items-center gap-2 px-3 py-2 text-[12.5px] text-fg-muted marker:content-none [&::-webkit-details-marker]:hidden">
              <Brain className="size-3.5" aria-hidden /> Reasoning
              <span className="ml-auto text-[11px] text-fg-subtle group-open:hidden">Show</span>
              <span className="ml-auto hidden text-[11px] text-fg-subtle group-open:inline">Hide</span>
            </summary>
            <div className="border-t border-border px-3 py-2 text-[13px] leading-6 text-fg-muted">
              <SimpleMarkdown className="text-[13px]">{r.reasoning}</SimpleMarkdown>
            </div>
          </details>
        ) : null}
        {r.error ? (
          <div className="flex items-start gap-2 rounded-lg border border-danger/30 bg-danger-soft px-3 py-2 text-[13px] text-danger">
            <X className="mt-0.5 size-4 shrink-0" />
            <div className="min-w-0">
              <div className="font-medium break-words">{r.error.message}</div>
              <div className="font-mono text-[11px] opacity-80">{r.error.code}</div>
            </div>
          </div>
        ) : null}
        {r.content ? <SimpleMarkdown>{r.content}</SimpleMarkdown> : !r.error ? <p className="text-[13px] italic text-fg-subtle">{r.status === "stopped" ? "Stopped before any output." : "Empty response."}</p> : null}
      </div>
      <footer className="border-t border-border bg-bg-subtle/50 px-3 py-2">
        <MetricsStrip metrics={metrics} />
      </footer>
    </article>
  );
}

export function BlindNotice() {
  return (
    <p className="inline-flex items-center gap-1.5 rounded-md bg-bg-muted px-2 py-1 text-[11.5px] text-fg-muted">
      <EyeOff className="size-3.5" /> Blind Arena — identities were hidden until the vote
    </p>
  );
}