"use client";
import * as React from "react";
import Link from "next/link";
import { ArrowLeft, Coins, Info, Menu, Swords, Trophy } from "lucide-react";
import { useApp } from "@/components/app/store";
import { ProviderIcon } from "@/components/brand/provider-icon";
import { Button } from "@/components/ui/button";
import { ChipRow } from "@/components/ui/segmented";
import { Skeleton } from "@/components/ui/misc";
import { Tooltip } from "@/components/ui/tooltip";
import { useApi } from "@/lib/client/api";
import { PROVIDERS } from "@/lib/client/providers";
import { CATEGORIES, criterionById, type ScoreboardRow, type TaskCategory } from "@/lib/arena/scoring";
import { cn, formatMs, formatUsd } from "@/lib/utils";

type Filter = "all" | TaskCategory | "value";

const FILTERS: { value: Filter; label: string; icon?: React.ReactNode }[] = [{ value: "all", label: "All" }, ...CATEGORIES.map((c) => ({ value: c.value as Filter, label: c.label })), { value: "value", label: "Cost efficiency", icon: <Coins /> }];

interface ScoreboardResponse {
  rows: ScoreboardRow[];
  sessions: number;
  votes: number;
}

/** Personal Arena scoreboard: win rate per model from your own votes. Mobile-first ranking list. */
export function ScoreboardView() {
  const { modelsByKey, setSidebarOpen, preferences } = useApp();
  const [filter, setFilter] = React.useState<Filter>("all");
  const query = filter === "all" ? "" : filter === "value" ? "?criterion=value" : `?category=${filter}`;
  const { data, isLoading, error } = useApi<ScoreboardResponse>(`/api/arena/scoreboard${query}`);
  const rows = React.useMemo(() => (data?.rows ?? []).filter((r) => r.sessions > 0), [data]);
  const ranked = React.useMemo(() => rows.filter((r) => r.decided > 0), [rows]);
  const unranked = React.useMemo(() => rows.filter((r) => r.decided === 0), [rows]);
  const nameOf = (k: string) => modelsByKey.get(k)?.displayName ?? k.split("/").slice(1).join("/");

  return (
    <div className="flex h-full min-h-0 flex-col">
      <header className="flex h-12 shrink-0 items-center gap-2 border-b border-border px-2 sm:px-4">
        <Button variant="ghost" size="icon-sm" className="md:hidden" onClick={() => setSidebarOpen(true)} aria-label="Open sidebar">
          <Menu />
        </Button>
        <Button asChild variant="ghost" size="icon-sm" aria-label="Back to Arena">
          <Link href="/app/arena">
            <ArrowLeft />
          </Link>
        </Button>
        <span className="flex size-7 items-center justify-center rounded-md bg-accent-soft text-accent">
          <Trophy className="size-4" />
        </span>
        <div className="min-w-0 leading-tight">
          <h1 className="text-[14px] font-semibold tracking-tight">Scoreboard</h1>
          <p className="hidden truncate text-[11.5px] text-fg-muted sm:block">Which models win your comparisons.</p>
        </div>
        <Button asChild variant="outline" size="sm" className="ml-auto">
          <Link href="/app/arena">
            <Swords /> <span className="hidden sm:inline">New comparison</span>
            <span className="sm:hidden">Arena</span>
          </Link>
        </Button>
      </header>

      <main className="min-h-0 flex-1 overflow-y-auto scrollbar-thin">
        <div className="mx-auto w-full max-w-3xl px-3 py-4 sm:px-5">
          <ChipRow value={filter} onChange={setFilter} options={FILTERS} className="-mx-3 px-3 pb-1 sm:mx-0 sm:px-0" />
          <p className="mt-2 flex items-start gap-1.5 text-[12px] text-fg-muted">
            <Info className="mt-0.5 size-3.5 shrink-0" />
            <span>
              {filter === "value" ? "Ranked by “Best value” votes only." : filter === "all" ? "Ranked by the share of decided comparisons each model won (most criteria; ties → fastest)." : `Only comparisons classified as ${FILTERS.find((f) => f.value === filter)?.label.toLowerCase()} prompts.`}
              {data ? ` ${data.sessions} session${data.sessions === 1 ? "" : "s"} · ${data.votes} vote${data.votes === 1 ? "" : "s"}.` : ""}
            </span>
          </p>

          {error ? (
            <p className="mt-6 rounded-lg border border-danger/30 bg-danger-soft px-3 py-2 text-[13px] text-danger">Could not load the scoreboard: {(error as Error).message}</p>
          ) : isLoading && !data ? (
            <ul className="mt-4 space-y-2">
              {[0, 1, 2, 3].map((i) => (
                <Skeleton key={i} className="h-[76px]" />
              ))}
            </ul>
          ) : !ranked.length ? (
            <EmptyScoreboard hasSessions={rows.length > 0} filtered={filter !== "all"} />
          ) : (
            <ol className="mt-4 space-y-2" aria-label="Ranking">
              {ranked.map((r, i) => (
                <RankRow key={r.modelKey} rank={i + 1} row={r} name={nameOf(r.modelKey)} showCosts={preferences.showCosts} filter={filter} />
              ))}
            </ol>
          )}

          {unranked.length && ranked.length ? (
            <details className="mt-5 text-[12.5px] text-fg-muted">
              <summary className="cursor-pointer select-none">
                {unranked.length} model{unranked.length === 1 ? "" : "s"} without a decided comparison
              </summary>
              <ul className="mt-2 flex flex-wrap gap-1.5">
                {unranked.map((r) => (
                  <li key={r.modelKey} className="inline-flex items-center gap-1.5 rounded-md border border-border px-2 py-1">
                    <ProviderIcon provider={r.provider} size={12} /> {nameOf(r.modelKey)} <span className="text-fg-subtle">· {r.sessions}</span>
                  </li>
                ))}
              </ul>
            </details>
          ) : null}
        </div>
      </main>
    </div>
  );
}

function RankRow({ rank, row: r, name, showCosts, filter }: { rank: number; row: ScoreboardRow; name: string; showCosts: boolean; filter: Filter }) {
  const pct = Math.round(r.winRate * 100);
  const top = rank === 1;
  const crit = Object.entries(r.criteria)
    .sort((a, b) => b[1] - a[1])
    .slice(0, 3);
  return (
    <li className={cn("rounded-xl border bg-bg-elevated p-3 sm:p-3.5", top ? "border-accent/50 shadow-glow" : "border-border")}>
      <div className="flex items-center gap-3">
        <span className={cn("flex size-8 shrink-0 items-center justify-center rounded-lg text-[13px] font-semibold tabular-nums", top ? "bg-accent text-accent-fg" : "bg-bg-muted text-fg-muted")} aria-label={`Rank ${rank}`}>
          {rank}
        </span>
        <span className="flex size-8 shrink-0 items-center justify-center rounded-lg border border-border bg-bg-subtle">
          <ProviderIcon provider={r.provider} size={16} />
        </span>
        <div className="min-w-0 flex-1">
          <div className="flex items-baseline gap-2">
            <h3 className="truncate text-[14px] font-semibold tracking-tight">{name}</h3>
            <span className="truncate text-[11.5px] text-fg-subtle">{PROVIDERS[r.provider as keyof typeof PROVIDERS]?.shortName ?? r.provider}</span>
          </div>
          <div className="mt-1.5 flex items-center gap-2">
            <div className="h-2 min-w-0 flex-1 overflow-hidden rounded-full bg-bg-muted" role="progressbar" aria-valuenow={pct} aria-valuemin={0} aria-valuemax={100} aria-label="Win rate">
              <div className={cn("h-full rounded-full transition-[width] duration-500", top ? "bg-accent" : "bg-fg/70")} style={{ width: `${Math.max(2, pct)}%` }} />
            </div>
            <span className="w-10 shrink-0 text-right text-[13px] font-semibold tabular-nums">{pct}%</span>
          </div>
        </div>
      </div>
      <dl className="mt-2.5 grid grid-cols-3 gap-2 text-[11.5px] tabular-nums sm:grid-cols-4">
        <Stat label={filter === "value" ? "Value wins" : "Wins"} value={`${r.wins} / ${r.decided}`} hint={`${r.sessions} session${r.sessions === 1 ? "" : "s"}`} />
        <Stat label="Votes" value={String(r.votes)} hint={crit.length ? crit.map(([id, n]) => `${criterionById(id).short} ${n}`).join(" · ") : undefined} />
        <Stat label="Avg TTFT" value={formatMs(r.avgTtftMs)} />
        {showCosts ? <Stat label="Avg cost" value={r.avgCostUsd === null ? "—" : formatUsd(r.avgCostUsd, { precise: r.avgCostUsd < 0.01 })} hint="per response" className="hidden sm:block" /> : null}
      </dl>
    </li>
  );
}

function Stat({ label, value, hint, className }: { label: string; value: string; hint?: string; className?: string }) {
  return (
    <div className={cn("min-w-0", className)}>
      <dt className="text-[10.5px] uppercase tracking-wide text-fg-subtle">{label}</dt>
      <dd className="truncate font-medium text-fg">{value}</dd>
      {hint ? (
        <Tooltip content={hint}>
          <dd className="truncate text-[10.5px] text-fg-subtle">{hint}</dd>
        </Tooltip>
      ) : null}
    </div>
  );
}

function EmptyScoreboard({ hasSessions, filtered }: { hasSessions: boolean; filtered: boolean }) {
  return (
    <section className="mt-6 rounded-xl border border-dashed border-border px-5 py-8 text-center sm:px-8">
      <span className="mx-auto flex size-10 items-center justify-center rounded-lg bg-bg-muted text-fg-muted">
        <Trophy className="size-5" />
      </span>
      <h2 className="mt-3 text-balance text-[16px] font-semibold tracking-tight">{filtered ? "No decided comparison in this filter yet" : hasSessions ? "Vote to build your ranking" : "Your ranking starts with a comparison"}</h2>
      <p className="mx-auto mt-1.5 max-w-md text-[13px] leading-5 text-fg-muted">
        Run the same prompt through several models in the Arena, then vote on criteria such as Best answer, Most accurate or Best value. Each decided comparison counts as a win for the model that took the most criteria (ties go to the fastest). The win rate is wins over
        the comparisons a model took part in that received a vote.
      </p>
      <Button asChild variant="accent" size="sm" className="mt-4">
        <Link href="/app/arena">
          <Swords /> Open the Arena
        </Link>
      </Button>
    </section>
  );
}