"use client";
import * as React from "react";
import { Brain, Check, ChevronDown, ChevronRight, Coins, Copy, ExternalLink, Eye, Globe, Loader2, Trophy, Wrench, X, Zap } from "lucide-react";
import type { PolyModel } from "@/lib/client/types";
import { Markdown } from "@/components/markdown/markdown";
import { ProviderIcon } from "@/components/brand/provider-icon";
import { Badge } from "@/components/ui/badge";
import { Tooltip } from "@/components/ui/tooltip";
import { PROVIDERS } from "@/lib/client/providers";
import { liveMetrics } from "@/lib/arena/metrics";
import { blindLabel, type Criterion } from "@/lib/arena/scoring";
import { cn, formatMs, formatTokens } from "@/lib/utils";
import { isFinal, type ColumnState } from "./types";
import { MetricsStrip, STATUS_META, StatusDot } from "./metrics-strip";
import { VotePanel } from "./vote-panel";
import { BlindAvatar, Flip } from "./blind";

export { STATUS_META, StatusDot };

interface Props {
  column: ColumnState;
  model?: PolyModel;
  /** Display position (0-based) — drives the Blind Arena letter. */
  index: number;
  /** Blind Arena with identity still hidden. */
  hidden?: boolean;
  /** Reveal flip in progress. */
  flipping?: boolean;
  onReveal?: () => void;
  winners: { fastest: string | null; cheapest: string | null };
  isWinner?: boolean;
  criteria: Criterion[];
  /** Criterion ids this response has won. */
  won: ReadonlySet<string>;
  onVote: (responseId: string, criterionId: string, on: boolean) => void;
  onAddCriterion?: (label: string) => void;
  onRemoveCriterion?: (id: string) => void;
  voteBusy?: boolean;
  /** Prompt (+ system prompt, attachments) token estimate for live cost. */
  inputTokens: number;
  /** Shared clock from the parent (`useTick`). */
  now: number;
  wrapCode?: boolean;
  showReasoning?: boolean;
  showCosts?: boolean;
  /** Sync-scroll plumbing (optional). */
  bodyRef?: (el: HTMLDivElement | null) => void;
  onBodyScroll?: (el: HTMLDivElement) => void;
  className?: string;
  style?: React.CSSProperties;
}

export const ArenaColumn = React.memo(function ArenaColumn({ column: c, model, index, hidden, flipping, onReveal, winners, isWinner, criteria, won, onVote, onAddCriterion, onRemoveCriterion, voteBusy, inputTokens, now, wrapCode, showReasoning = true, showCosts = true, bodyRef, onBodyScroll, className, style }: Props) {
  const provider = model?.provider ?? c.response?.provider ?? c.modelKey.split("/")[0];
  const realName = model?.displayName ?? c.modelKey.split("/").slice(1).join("/");
  const name = hidden ? blindLabel(index) : realName;
  const live = c.status === "waiting" || c.status === "thinking" || c.status === "streaming";
  const final = isFinal(c.status);
  const metrics = React.useMemo(() => liveMetrics(c, model, inputTokens, now), [c, model, inputTokens, now]);
  const [copied, setCopied] = React.useState(false);

  // Keep the body pinned to the bottom while streaming unless the user scrolled up.
  const scrollEl = React.useRef<HTMLDivElement | null>(null);
  const pinned = React.useRef(true);
  React.useEffect(() => {
    const el = scrollEl.current;
    if (el && live && pinned.current) el.scrollTop = el.scrollHeight;
  }, [c.text, c.reasoning, live]);

  const copy = async () => {
    await navigator.clipboard.writeText(c.text).catch(() => {});
    setCopied(true);
    setTimeout(() => setCopied(false), 1400);
  };

  const status = STATUS_META[c.status];

  return (
    <section className={cn("flex min-w-0 flex-col overflow-hidden rounded-xl border bg-bg-elevated transition-[border-color,box-shadow]", isWinner ? "border-accent/60 shadow-glow" : "border-border", className)} style={style} aria-label={`${name} response`}>
      {/* Header */}
      <header className="flex items-center gap-2 border-b border-border px-3 py-2">
        <Flip flipping={Boolean(flipping)}>
          <span className="flex size-7 shrink-0 items-center justify-center rounded-md border border-border bg-bg-subtle">{hidden ? <BlindAvatar index={index} size={18} /> : <ProviderIcon provider={provider} size={15} />}</span>
        </Flip>
        <div className="min-w-0 flex-1">
          <Flip flipping={Boolean(flipping)} className="flex w-full">
            <div className="flex min-w-0 items-center gap-1.5">
              <span className="truncate text-[13px] font-semibold leading-5">{name}</span>
              {!hidden && model?.capabilities.reasoning ? <Brain className="size-3.5 shrink-0 text-fg-subtle" aria-label="Reasoning model" /> : null}
            </div>
          </Flip>
          <div className="flex items-center gap-1.5 text-[11.5px] text-fg-muted">
            <StatusDot status={c.status} />
            <span>{status.label}</span>
            {live ? <span className="tabular-nums text-fg-subtle">· {(metrics.elapsedMs / 1000).toFixed(1)} s</span> : null}
            {!hidden ? <span className="truncate text-fg-subtle">· {PROVIDERS[provider as keyof typeof PROVIDERS]?.shortName ?? provider}</span> : <span className="text-fg-subtle">· identity hidden</span>}
          </div>
        </div>
        <div className="flex shrink-0 items-center gap-1">
          {isWinner ? (
            <Badge variant="accent" className="gap-1">
              <Trophy /> Winner
            </Badge>
          ) : null}
          {winners.fastest === c.modelKey ? (
            <Tooltip content="Fastest time to first token">
              <Badge variant="success" className="hidden gap-1 sm:inline-flex">
                <Zap /> Fastest
              </Badge>
            </Tooltip>
          ) : null}
          {winners.cheapest === c.modelKey && showCosts ? (
            <Tooltip content="Lowest estimated cost">
              <Badge variant="info" className="hidden gap-1 sm:inline-flex">
                <Coins /> Cheapest
              </Badge>
            </Tooltip>
          ) : null}
          {hidden && onReveal && final ? (
            <Tooltip content="Reveal this model">
              <button onClick={onReveal} className="tap rounded p-1 text-fg-subtle transition-colors hover:bg-bg-muted hover:text-fg [&_svg]:size-3.5" aria-label="Reveal model identity">
                <Eye />
              </button>
            </Tooltip>
          ) : null}
          {c.text ? (
            <Tooltip content={copied ? "Copied" : "Copy response"}>
              <button onClick={copy} className="tap rounded p-1 text-fg-subtle transition-colors hover:bg-bg-muted hover:text-fg [&_svg]:size-3.5" aria-label="Copy response">
                {copied ? <Check className="text-success" /> : <Copy />}
              </button>
            </Tooltip>
          ) : null}
        </div>
      </header>

      {/* Body */}
      <div
        ref={(el) => {
          scrollEl.current = el;
          bodyRef?.(el);
        }}
        onScroll={(e) => {
          const el = e.currentTarget;
          pinned.current = el.scrollHeight - el.scrollTop - el.clientHeight < 48;
          onBodyScroll?.(el);
        }}
        className="min-h-[140px] max-h-[min(58dvh,720px)] flex-1 space-y-2.5 overflow-y-auto overscroll-contain px-3.5 py-3 scrollbar-thin md:max-h-[min(62vh,720px)]"
      >
        {(c.reasoning || c.status === "thinking") && showReasoning ? <ReasoningBlock text={c.reasoning} streaming={live && !c.text} /> : null}

        {c.serverTools.length ? (
          <div className="flex flex-wrap gap-1.5">
            {dedupe(c.serverTools).map((t, i) => (
              <Badge key={i} variant="info" className="gap-1">
                {t.name === "web_search" ? <Globe /> : <Wrench />} {t.name.replace(/_/g, " ")} {t.status === "started" ? <Loader2 className="animate-spin" /> : null}
              </Badge>
            ))}
          </div>
        ) : null}

        {c.status === "waiting" ? (
          <div className="flex items-center gap-2 py-1 text-[13px] text-fg-muted">
            <span className="inline-flex gap-1">
              <i className="size-1.5 animate-pulse-soft rounded-full bg-fg-subtle" />
              <i className="size-1.5 animate-pulse-soft rounded-full bg-fg-subtle [animation-delay:200ms]" />
              <i className="size-1.5 animate-pulse-soft rounded-full bg-fg-subtle [animation-delay:400ms]" />
            </span>
            Waiting for {name}…
          </div>
        ) : null}

        {c.text ? <Markdown content={c.text} wrap={wrapCode} streaming={c.status === "streaming"} /> : null}

        {final && !c.text && !c.error ? <p className="text-[13px] italic text-fg-subtle">{c.status === "stopped" ? "Stopped before any output." : "The model returned an empty response."}</p> : null}

        {c.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">{c.error.message}</div>
              <div className="font-mono text-[11px] opacity-80">{c.error.code}</div>
            </div>
          </div>
        ) : null}

        {c.citations.length ? <Citations items={c.citations} /> : null}
      </div>

      {/* Footer: live metrics + votes */}
      {c.status !== "idle" ? (
        <footer className="border-t border-border bg-bg-subtle/50 px-3 py-2">
          <MetricsStrip metrics={metrics} showCosts={showCosts} fastest={winners.fastest === c.modelKey} cheapest={winners.cheapest === c.modelKey} />
          {final && c.responseId ? <VotePanel className="mt-2" criteria={criteria} won={won} busy={voteBusy} onToggle={(id, on) => onVote(c.responseId!, id, on)} onAddCriterion={onAddCriterion} onRemoveCriterion={onRemoveCriterion} /> : null}
          {final && c.status === "error" && !c.responseId ? <p className="mt-1.5 text-[11.5px] text-fg-subtle">Latency {formatMs(metrics.elapsedMs)}</p> : null}
        </footer>
      ) : null}
    </section>
  );
});

function ReasoningBlock({ text, streaming }: { text: string; streaming: boolean }) {
  const [open, setOpen] = React.useState(streaming);
  React.useEffect(() => {
    if (!streaming) {
      // collapse automatically once the answer starts
      // eslint-disable-next-line react-hooks/set-state-in-effect
      setOpen(false);
    }
  }, [streaming]);
  const ref = React.useRef<HTMLDivElement>(null);
  React.useEffect(() => {
    if (open && streaming && ref.current) ref.current.scrollTop = ref.current.scrollHeight;
  }, [text, open, streaming]);
  return (
    <div className="rounded-lg border border-border bg-bg-subtle/60">
      <button onClick={() => setOpen((o) => !o)} className="flex min-h-9 w-full items-center gap-2 px-3 py-1.5 text-left text-[12.5px] text-fg-muted hover:text-fg" aria-expanded={open}>
        <Brain className={cn("size-3.5", streaming && "animate-pulse-soft text-accent")} />
        <span className="font-medium">{streaming ? "Thinking…" : "Reasoning"}</span>
        {!streaming && text ? <span className="text-fg-subtle">· ≈ {formatTokens(Math.round(text.length / 4))} tok</span> : null}
        <span className="ml-auto">{open ? <ChevronDown className="size-3.5" /> : <ChevronRight className="size-3.5" />}</span>
      </button>
      {open ? (
        <div ref={ref} className="max-h-56 overflow-y-auto border-t border-border px-3 py-2 text-[13px] leading-relaxed text-fg-muted scrollbar-thin">
          {text ? <Markdown content={text} className="text-[13px] text-fg-muted [&_p]:text-fg-muted" /> : <span className="text-fg-subtle">Reasoning summary will appear here when the provider exposes it.</span>}
        </div>
      ) : null}
    </div>
  );
}

function Citations({ items }: { items: { url?: string; title?: string; snippet?: string }[] }) {
  const unique = React.useMemo(() => {
    const seen = new Set<string>();
    return items.filter((c) => {
      const k = c.url ?? c.title ?? "";
      if (!k || seen.has(k)) return false;
      seen.add(k);
      return true;
    });
  }, [items]);
  if (!unique.length) return null;
  return (
    <div className="flex flex-wrap gap-1.5 pt-1">
      {unique.slice(0, 10).map((c, i) => (
        <a key={i} href={c.url} target="_blank" rel="noopener noreferrer nofollow" className="inline-flex max-w-[240px] items-center gap-1 rounded-md border border-border bg-bg-subtle px-2 py-1 text-[11.5px] text-fg-muted hover:border-border-strong hover:text-fg" title={c.snippet}>
          <ExternalLink className="size-3 shrink-0" />
          <span className="truncate">{c.title || safeHost(c.url)}</span>
        </a>
      ))}
    </div>
  );
}

function safeHost(url?: string): string {
  try {
    return url ? new URL(url).hostname : "source";
  } catch {
    return "source";
  }
}

function dedupe(list: { name: string; status: string }[]) {
  const map = new Map<string, { name: string; status: string }>();
  for (const t of list) map.set(t.name, t);
  return [...map.values()];
}