"use client";
import * as React from "react";
import { Trophy } from "lucide-react";
import { ProviderIcon } from "@/components/brand/provider-icon";
import type { LiveMetrics } from "@/lib/arena/metrics";
import { criterionById, type Criterion } from "@/lib/arena/scoring";
import { cn, formatMs, formatTokens, formatUsd } from "@/lib/utils";
import { STATUS_META, StatusDot, formatTps } from "./metrics-strip";
import { BlindAvatar } from "./blind";

export interface ComparisonRow {
  key: string;
  name: string;
  provider: string | null;
  /** Blind: identity hidden, show letter avatar. */
  hidden?: boolean;
  blindIndex: number;
  metrics: LiveMetrics;
  criteriaWon: string[];
  isWinner: boolean;
}

interface Props {
  rows: ComparisonRow[];
  showCosts?: boolean;
  customCriteria?: Criterion[];
  className?: string;
}

type Col = { id: string; label: string; get: (r: ComparisonRow) => string; best?: (rows: ComparisonRow[]) => string | null };

function bestBy(rows: ComparisonRow[], get: (r: ComparisonRow) => number | null, dir: "min" | "max"): string | null {
  const cands = rows.map((r) => ({ key: r.key, v: get(r) })).filter((x): x is { key: string; v: number } => typeof x.v === "number" && Number.isFinite(x.v));
  if (cands.length < 2) return null;
  cands.sort((a, b) => (dir === "min" ? a.v - b.v : b.v - a.v));
  return cands[0].v === cands[1].v ? null : cands[0].key;
}

/**
 * End-of-run comparison. Table from `md` up; stacked metric rows on phones (never a 4-column table on a phone).
 */
export function ComparisonTable({ rows, showCosts = true, customCriteria = [], className }: Props) {
  const cols = React.useMemo<Col[]>(() => {
    const list: Col[] = [
      { id: "status", label: "Status", get: (r) => STATUS_META[r.metrics.status].label },
      { id: "ttft", label: "TTFT", get: (r) => formatMs(r.metrics.ttftMs), best: (rs) => bestBy(rs, (r) => r.metrics.ttftMs, "min") },
      { id: "total", label: "Total", get: (r) => formatMs(r.metrics.elapsedMs), best: (rs) => bestBy(rs, (r) => r.metrics.elapsedMs, "min") },
      { id: "tps", label: "Speed", get: (r) => formatTps(r.metrics.tokensPerSecond), best: (rs) => bestBy(rs, (r) => r.metrics.tokensPerSecond, "max") },
      { id: "in", label: "Input", get: (r) => formatTokens(r.metrics.inputTokens) },
      { id: "out", label: "Output", get: (r) => formatTokens(r.metrics.outputTokens) },
    ];
    if (showCosts) list.push({ id: "cost", label: "Cost", get: (r) => (r.metrics.costUsd === null ? "—" : `${r.metrics.exact ? "" : "≈ "}${formatUsd(r.metrics.costUsd, { precise: r.metrics.costUsd < 0.01 })}`), best: (rs) => bestBy(rs, (r) => r.metrics.costUsd, "min") });
    list.push({ id: "votes", label: "Criteria won", get: (r) => (r.criteriaWon.length ? r.criteriaWon.map((id) => criterionById(id, customCriteria).short).join(", ") : "—") });
    return list;
  }, [showCosts, customCriteria]);
  const bests = React.useMemo(() => Object.fromEntries(cols.map((c) => [c.id, c.best ? c.best(rows) : null])), [cols, rows]);

  if (!rows.length) return null;
  return (
    <section className={cn("panel p-3 sm:p-4", className)} aria-label="Comparison">
      <h3 className="text-[13px] font-semibold tracking-tight">Comparison</h3>
      <p className="mt-0.5 text-[12px] text-fg-muted">Best value per column is highlighted. Costs are estimates from list prices unless the provider reports them.</p>

      {/* Phone: metric rows, models inline */}
      <dl className="mt-3 space-y-2.5 md:hidden">
        {cols.map((c) => (
          <div key={c.id} className="border-t border-hairline pt-2 first:border-t-0 first:pt-0">
            <dt className="text-[10.5px] uppercase tracking-wide text-fg-subtle">{c.label}</dt>
            <dd className="mt-1 grid grid-cols-2 gap-x-3 gap-y-1">
              {rows.map((r) => (
                <div key={r.key} className="flex min-w-0 items-center gap-1.5 text-[12px] tabular-nums">
                  <Identity row={r} size={12} />
                  <span className={cn("truncate", bests[c.id] === r.key ? "font-semibold text-success" : "text-fg")}>{c.get(r)}</span>
                </div>
              ))}
            </dd>
          </div>
        ))}
      </dl>

      {/* Desktop: table */}
      <div className="mt-3 hidden overflow-x-auto md:block">
        <table className="w-full text-[12.5px] tabular-nums">
          <thead>
            <tr className="text-left text-[10.5px] uppercase tracking-wide text-fg-subtle">
              <th className="pb-2 pr-3 font-medium">Model</th>
              {cols.map((c) => (
                <th key={c.id} className="pb-2 pr-3 font-medium">
                  {c.label}
                </th>
              ))}
            </tr>
          </thead>
          <tbody>
            {rows.map((r) => (
              <tr key={r.key} className="border-t border-hairline">
                <td className="py-2 pr-3">
                  <span className="flex min-w-0 items-center gap-2 font-medium">
                    <Identity row={r} size={14} />
                    <span className="truncate">{r.name}</span>
                    {r.isWinner ? <Trophy className="size-3.5 shrink-0 text-accent" aria-label="Arena winner" /> : null}
                  </span>
                </td>
                {cols.map((c) => (
                  <td key={c.id} className={cn("py-2 pr-3", bests[c.id] === r.key ? "font-semibold text-success" : "text-fg")}>
                    {c.id === "status" ? (
                      <span className="inline-flex items-center gap-1.5">
                        <StatusDot status={r.metrics.status} /> {c.get(r)}
                      </span>
                    ) : (
                      c.get(r)
                    )}
                  </td>
                ))}
              </tr>
            ))}
          </tbody>
        </table>
      </div>
    </section>
  );
}

function Identity({ row, size }: { row: ComparisonRow; size: number }) {
  if (row.hidden) return <BlindAvatar index={row.blindIndex} size={size + 4} />;
  return <ProviderIcon provider={row.provider} size={size} />;
}