"use client";
import * as React from "react";
import { Coins, Timer, Trophy, Type } from "lucide-react";
import { ProviderIcon } from "@/components/brand/provider-icon";
import { Badge } from "@/components/ui/badge";
import { criterionById, type Criterion, type WinnerResult } from "@/lib/arena/scoring";
import { formatDelta } from "@/lib/arena/metrics";
import { cn } from "@/lib/utils";
import { BlindAvatar } from "./blind";

interface Props {
  winner: WinnerResult;
  name: string;
  provider: string | null;
  /** Blind Arena, identity still hidden → neutral avatar and letter label. */
  hidden?: boolean;
  blindIndex?: number;
  customCriteria?: Criterion[];
  showCosts?: boolean;
  className?: string;
}

/**
 * Arena Winner card: shown once every response is final and at least one vote exists.
 * Most criteria won; ties go to the fastest first token. Deltas compare the winner with the mean of the others.
 */
export function WinnerCard({ winner, name, provider, hidden, blindIndex = 0, customCriteria = [], showCosts = true, className }: Props) {
  const criteria = winner.criteriaWon.map((id) => criterionById(id, customCriteria));
  const d = winner.deltas;
  const better = (v: number | null) => (v === null ? null : v < 0);
  return (
    <section className={cn("animate-pop overflow-hidden rounded-xl border border-accent/40 bg-accent-soft/40 p-3.5 sm:p-4", className)} aria-label="Arena winner">
      <div className="flex items-start gap-3">
        <span className="flex size-10 shrink-0 items-center justify-center rounded-xl bg-accent text-accent-fg shadow-glow">
          <Trophy className="size-5" />
        </span>
        <div className="min-w-0 flex-1">
          <p className="text-[11px] font-medium uppercase tracking-[0.12em] text-accent">Arena winner</p>
          <div className="mt-0.5 flex min-w-0 items-center gap-2">
            {hidden ? <BlindAvatar index={blindIndex} size={20} /> : <ProviderIcon provider={provider} size={16} />}
            <h3 className="truncate text-[16px] font-semibold tracking-tight">{name}</h3>
          </div>
          <p className="mt-1 text-[12.5px] text-fg-muted">
            Won {criteria.length} of your criteri{criteria.length === 1 ? "on" : "a"}
            {winner.tieBreak === "fastest" ? " — tie broken by time to first token" : winner.tieBreak === "order" ? " — tie broken by order" : ""}.
          </p>
          <ul className="mt-2 flex flex-wrap gap-1.5" aria-label="Criteria won">
            {criteria.map((c) => (
              <li key={c.id}>
                <Badge variant="accent">{c.label}</Badge>
              </li>
            ))}
          </ul>
        </div>
      </div>
      {d.others > 0 ? (
        <dl className="mt-3 grid grid-cols-3 gap-2 border-t border-accent/20 pt-3 text-[12px] tabular-nums">
          {showCosts ? <Delta icon={<Coins />} label="Δ cost" value={formatDelta(d.costUsd, "usd")} good={better(d.costUsd)} hint="vs. others" /> : null}
          <Delta icon={<Timer />} label="Δ TTFT" value={formatDelta(d.ttftMs, "ms")} good={better(d.ttftMs)} hint="vs. others" />
          <Delta icon={<Type />} label="Δ output" value={formatDelta(d.outputTokens, "tokens")} good={null} hint="vs. others" />
        </dl>
      ) : null}
    </section>
  );
}

function Delta({ icon, label, value, good, hint }: { icon: React.ReactNode; label: string; value: string; good: boolean | null; hint: string }) {
  return (
    <div className="min-w-0">
      <dt className="flex items-center gap-1 text-[10.5px] uppercase tracking-wide text-fg-subtle [&_svg]:size-3">
        {icon}
        {label}
      </dt>
      <dd className={cn("truncate text-[13px] font-semibold", good === true ? "text-success" : good === false ? "text-warning" : "text-fg")}>{value}</dd>
      <dd className="truncate text-[10.5px] text-fg-subtle">{hint}</dd>
    </div>
  );
}