argument.es/frontend.tsx

import React, { useState, useEffect, useRef } from "react";
import { createRoot } from "react-dom/client";
import "./frontend.css";

// ── Types ────────────────────────────────────────────────────────────────────

type Model = { id: string; name: string };
type TaskInfo = {
  model: Model;
  startedAt: number;
  finishedAt?: number;
  result?: string;
  error?: string;
};
type VoteInfo = {
  voter: Model;
  startedAt: number;
  finishedAt?: number;
  votedFor?: Model;
  error?: boolean;
};
type RoundState = {
  num: number;
  phase: "prompting" | "answering" | "voting" | "done";
  prompter: Model;
  promptTask: TaskInfo;
  prompt?: string;
  contestants: [Model, Model];
  answerTasks: [TaskInfo, TaskInfo];
  votes: VoteInfo[];
  scoreA?: number;
  scoreB?: number;
  viewerVotesA?: number;
  viewerVotesB?: number;
  viewerVotingEndsAt?: number;
};
type GameState = {
  lastCompleted: RoundState | null;
  active: RoundState | null;
  scores: Record<string, number>;
  viewerScores: Record<string, number>;
  done: boolean;
  isPaused: boolean;
  autoPaused?: boolean;
  generation: number;
};
type StateMessage = {
  type: "state";
  data: GameState;
  totalRounds: number;
  viewerCount: number;
  version?: string;
};
type ViewerCountMessage = {
  type: "viewerCount";
  viewerCount: number;
};
type ServerMessage = StateMessage | ViewerCountMessage;

// ── Credit / Propose ─────────────────────────────────────────────────────────

type CreditInfo = {
  token: string;
  username: string;
  expiresAt: number;
  tier: string;
  questionsLeft: number | null;
};

const CREDIT_STORAGE_KEY = "argumentes_credito";

const PROPOSE_TIERS = [
  { id: "basico",    label: "10 preguntas",  price: "0,99€" },
  { id: "pro",       label: "200 preguntas", price: "9,99€" },
  { id: "ilimitado", label: "Ilimitadas",    price: "19,99€" },
] as const;

type ProposeTierId = (typeof PROPOSE_TIERS)[number]["id"];

function loadCredit(): CreditInfo | null {
  try {
    const raw = localStorage.getItem(CREDIT_STORAGE_KEY);
    if (!raw) return null;
    const c = JSON.parse(raw) as CreditInfo;
    if (!c.token || !c.expiresAt || c.expiresAt < Date.now()) {
      localStorage.removeItem(CREDIT_STORAGE_KEY);
      return null;
    }
    return c;
  } catch {
    return null;
  }
}

async function submitRedsysForm(data: {
  tpvUrl: string;
  merchantParams: string;
  signature: string;
  signatureVersion: string;
}) {
  const form = document.createElement("form");
  form.method = "POST";
  form.action = data.tpvUrl;
  for (const [name, value] of Object.entries({
    Ds_SignatureVersion: data.signatureVersion,
    Ds_MerchantParameters: data.merchantParams,
    Ds_Signature: data.signature,
  })) {
    const input = document.createElement("input");
    input.type = "hidden";
    input.name = name;
    input.value = value;
    form.appendChild(input);
  }
  document.body.appendChild(form);
  form.submit();
}

// ── Model colors & logos ─────────────────────────────────────────────────────

const MODEL_COLORS: Record<string, string> = {
  "Gemini 3.1 Pro": "#4285F4",
  "Kimi K2": "#00E599",
  "DeepSeek 3.2": "#4D6BFE",
  "GLM-5": "#1F63EC",
  "GPT-5.2": "#10A37F",
  "Opus 4.6": "#D97757",
  "Sonnet 4.6": "#D97757",
  "Grok 4.1": "#FFFFFF",
  "MiniMax 2.5": "#FF3B30",
};

function getColor(name: string): string {
  return MODEL_COLORS[name] ?? "#A1A1A1";
}

function getLogo(name: string): string | null {
  if (name.includes("Gemini")) return "/assets/logos/gemini.svg";
  if (name.includes("Kimi")) return "/assets/logos/kimi.svg";
  if (name.includes("DeepSeek")) return "/assets/logos/deepseek.svg";
  if (name.includes("GLM")) return "/assets/logos/glm.svg";
  if (name.includes("GPT")) return "/assets/logos/openai.svg";
  if (name.includes("Opus") || name.includes("Sonnet"))
    return "/assets/logos/claude.svg";
  if (name.includes("Grok")) return "/assets/logos/grok.svg";
  if (name.includes("MiniMax")) return "/assets/logos/minimax.svg";
  return null;
}

// ── Helpers ──────────────────────────────────────────────────────────────────

function Dots() {
  return (
    <span className="dots">
      <span>.</span>
      <span>.</span>
      <span>.</span>
    </span>
  );
}

function ModelTag({ model, small }: { model: Model; small?: boolean }) {
  const logo = getLogo(model.name);
  const color = getColor(model.name);
  return (
    <span
      className={`model-tag ${small ? "model-tag--sm" : ""}`}
      style={{ color }}
    >
      {logo && <img src={logo} alt="" className="model-tag__logo" />}
      {model.name}
    </span>
  );
}

// ── Prompt ───────────────────────────────────────────────────────────────────

function PromptCard({ round }: { round: RoundState }) {
  if (round.phase === "prompting" && !round.prompt) {
    return (
      <div className="prompt">
        <div className="prompt__by">
          <ModelTag model={round.prompter} small /> está escribiendo una pregunta
          <Dots />
        </div>
        <div className="prompt__text prompt__text--loading">
          <Dots />
        </div>
      </div>
    );
  }

  if (round.promptTask.error) {
    return (
      <div className="prompt">
        <div className="prompt__text prompt__text--error">
          Error al generar la pregunta
        </div>
      </div>
    );
  }

  return (
    <div className="prompt">
      <div className="prompt__by">
        Pregunta de <ModelTag model={round.prompter} small />
      </div>
      <div className="prompt__text">{round.prompt}</div>
    </div>
  );
}

// ── Contestant ───────────────────────────────────────────────────────────────

function ContestantCard({
  task,
  voteCount,
  totalVotes,
  isWinner,
  showVotes,
  voters,
  viewerVotes,
  totalViewerVotes,
}: {
  task: TaskInfo;
  voteCount: number;
  totalVotes: number;
  isWinner: boolean;
  showVotes: boolean;
  voters: VoteInfo[];
  viewerVotes?: number;
  totalViewerVotes?: number;
}) {
  const color = getColor(task.model.name);
  const pct = totalVotes > 0 ? Math.round((voteCount / totalVotes) * 100) : 0;
  const showViewerVotes = showVotes && totalViewerVotes !== undefined && totalViewerVotes > 0;
  const viewerPct = showViewerVotes && totalViewerVotes > 0
    ? Math.round(((viewerVotes ?? 0) / totalViewerVotes) * 100)
    : 0;

  return (
    <div
      className={`contestant ${isWinner ? "contestant--winner" : ""}`}
      style={{ "--accent": color } as React.CSSProperties}
    >
      <div className="contestant__head">
        <ModelTag model={task.model} />
        {isWinner && <span className="win-tag">GANA</span>}
      </div>

      <div className="contestant__body">
        {!task.finishedAt ? (
          <p className="answer answer--loading">
            <Dots />
          </p>
        ) : task.error ? (
          <p className="answer answer--error">{task.error}</p>
        ) : (
          <p className="answer">&ldquo;{task.result}&rdquo;</p>
        )}
      </div>

      {showVotes && (
        <div className="contestant__foot">
          <div className="vote-bar">
            <div
              className="vote-bar__fill"
              style={{ width: `${pct}%`, background: color }}
            />
          </div>
          <div className="vote-meta">
            <span className="vote-meta__count" style={{ color }}>
              {voteCount}
            </span>
            <span className="vote-meta__label">
              voto{voteCount !== 1 ? "s" : ""}
            </span>
            <span className="vote-meta__dots">
              {voters.map((v, i) => {
                const logo = getLogo(v.voter.name);
                return logo ? (
                  <img
                    key={i}
                    src={logo}
                    alt={v.voter.name}
                    title={v.voter.name}
                    className="voter-dot"
                  />
                ) : (
                  <span
                    key={i}
                    className="voter-dot voter-dot--letter"
                    style={{ color: getColor(v.voter.name) }}
                    title={v.voter.name}
                  >
                    {v.voter.name[0]}
                  </span>
                );
              })}
            </span>
          </div>
          {showViewerVotes && (
            <>
              <div className="vote-bar viewer-vote-bar">
                <div
                  className="vote-bar__fill viewer-vote-bar__fill"
                  style={{ width: `${viewerPct}%` }}
                />
              </div>
              <div className="vote-meta viewer-vote-meta">
                <span className="vote-meta__count viewer-vote-meta__count">
                  {viewerVotes ?? 0}
                </span>
                <span className="vote-meta__label">
                  voto{(viewerVotes ?? 0) !== 1 ? "s" : ""} del público
                </span>
                <span className="viewer-vote-meta__icon">👥</span>
              </div>
            </>
          )}
        </div>
      )}
    </div>
  );
}

// ── Arena ─────────────────────────────────────────────────────────────────────

function Arena({
  round,
  total,
  viewerVotingSecondsLeft,
  myVote,
  onVote,
}: {
  round: RoundState;
  total: number | null;
  viewerVotingSecondsLeft: number;
  myVote: "A" | "B" | null;
  onVote: (side: "A" | "B") => void;
}) {
  const [contA, contB] = round.contestants;
  const showVotes = round.phase === "voting" || round.phase === "done";
  const isDone = round.phase === "done";

  let votesA = 0,
    votesB = 0;
  for (const v of round.votes) {
    if (v.votedFor?.name === contA.name) votesA++;
    else if (v.votedFor?.name === contB.name) votesB++;
  }
  const totalVotes = votesA + votesB;
  const votersA = round.votes.filter((v) => v.votedFor?.name === contA.name);
  const votersB = round.votes.filter((v) => v.votedFor?.name === contB.name);
  const totalViewerVotes = (round.viewerVotesA ?? 0) + (round.viewerVotesB ?? 0);

  const showCountdown = round.phase === "voting" && viewerVotingSecondsLeft > 0;

  const phaseText =
    round.phase === "prompting"
      ? "Generando pregunta"
      : round.phase === "answering"
        ? "Respondiendo"
        : round.phase === "voting"
          ? "Votando los jueces"
          : "Completado";

  return (
    <div className="arena">
      <div className="arena__meta">
        <span className="arena__round">
          Round {round.num}
          {total ? <span className="dim">/{total}</span> : null}
        </span>
        <span className="arena__phase">
          {phaseText}
          {showCountdown && (
            <span className="vote-countdown">{viewerVotingSecondsLeft}s</span>
          )}
        </span>
      </div>
      {showCountdown && (
        <div className="vote-panel">
          <span className="vote-panel__label">¿Cuál es más gracioso?</span>
          <div className="vote-panel__buttons">
            <button
              className={`vote-btn ${myVote === "A" ? "vote-btn--active" : ""}`}
              onClick={() => onVote("A")}
            >
              <ModelTag model={contA} />
            </button>
            <button
              className={`vote-btn ${myVote === "B" ? "vote-btn--active" : ""}`}
              onClick={() => onVote("B")}
            >
              <ModelTag model={contB} />
            </button>
          </div>
        </div>
      )}

      <PromptCard round={round} />

      {round.phase !== "prompting" && (
        <div className="showdown">
          <ContestantCard
            task={round.answerTasks[0]}
            voteCount={votesA}
            totalVotes={totalVotes}
            isWinner={isDone && votesA > votesB}
            showVotes={showVotes}
            voters={votersA}
            viewerVotes={round.viewerVotesA}
            totalViewerVotes={totalViewerVotes}
          />
          <ContestantCard
            task={round.answerTasks[1]}
            voteCount={votesB}
            totalVotes={totalVotes}
            isWinner={isDone && votesB > votesA}
            showVotes={showVotes}
            voters={votersB}
            viewerVotes={round.viewerVotesB}
            totalViewerVotes={totalViewerVotes}
          />
        </div>
      )}

      {isDone && votesA === votesB && totalVotes > 0 && (
        <div className="tie-label">Empate</div>
      )}
    </div>
  );
}

// ── Game Over ────────────────────────────────────────────────────────────────

function GameOver({ scores }: { scores: Record<string, number> }) {
  const sorted = Object.entries(scores).sort((a, b) => b[1] - a[1]);
  const champion = sorted[0];

  return (
    <div className="game-over">
      <div className="game-over__label">Fin del Juego</div>
      {champion && champion[1] > 0 && (
        <div className="game-over__winner">
          <span className="game-over__crown">👑</span>
          <span
            className="game-over__name"
            style={{ color: getColor(champion[0]) }}
          >
            {getLogo(champion[0]) && <img src={getLogo(champion[0])!} alt="" />}
            {champion[0]}
          </span>
          <span className="game-over__sub">es la IA más graciosa</span>
        </div>
      )}
    </div>
  );
}

// ── Standings ────────────────────────────────────────────────────────────────

function LeaderboardSection({
  label,
  scores,
  competing,
}: {
  label: string;
  scores: Record<string, number>;
  competing: Set<string>;
}) {
  const sorted = Object.entries(scores).sort((a, b) => b[1] - a[1]);
  const maxScore = sorted[0]?.[1] || 1;

  return (
    <div className="lb-section">
      <div className="lb-section__head">
        <span className="lb-section__label">{label}</span>
      </div>
      <div className="lb-section__list">
        {sorted.map(([name, score], i) => {
          const pct = maxScore > 0 ? Math.round((score / maxScore) * 100) : 0;
          const color = getColor(name);
          const active = competing.has(name);
          return (
            <div
              key={name}
              className={`lb-entry ${active ? "lb-entry--active" : ""}`}
            >
              <div className="lb-entry__top">
                <span className="lb-entry__rank">
                  {i === 0 && score > 0 ? "👑" : i + 1}
                </span>
                <ModelTag model={{ id: name, name }} small />
                <span className="lb-entry__score">{score}</span>
              </div>
              <div className="lb-entry__bar">
                <div
                  className="lb-entry__fill"
                  style={{ width: `${pct}%`, background: color }}
                />
              </div>
            </div>
          );
        })}
      </div>
    </div>
  );
}

function PlayerLeaderboard({ scores }: { scores: Record<string, number> }) {
  const sorted = Object.entries(scores).sort((a, b) => b[1] - a[1]).slice(0, 7);
  const maxScore = sorted[0]?.[1] || 1;
  return (
    <div className="lb-section">
      <div className="lb-section__head">
        <span className="lb-section__label">Jugadores</span>
        <a href="/pregunta" className="standings__link">Jugar</a>
      </div>
      <div className="lb-section__list">
        {sorted.map(([name, score], i) => {
          const pct = Math.round((score / maxScore) * 100);
          return (
            <div key={name} className="lb-entry lb-entry--active">
              <div className="lb-entry__top">
                <span className="lb-entry__rank">
                  {i === 0 && score > 0 ? "🏆" : i + 1}
                </span>
                <span className="lb-entry__name">{name}</span>
                <span className="lb-entry__score">{score}</span>
              </div>
              <div className="lb-entry__bar">
                <div
                  className="lb-entry__fill"
                  style={{ width: `${pct}%`, background: "var(--accent)" }}
                />
              </div>
            </div>
          );
        })}
      </div>
    </div>
  );
}

function Standings({
  scores,
  viewerScores,
  playerScores,
  activeRound,
}: {
  scores: Record<string, number>;
  viewerScores: Record<string, number>;
  playerScores: Record<string, number>;
  activeRound: RoundState | null;
}) {
  const competing = activeRound
    ? new Set([
        activeRound.contestants[0].name,
        activeRound.contestants[1].name,
      ])
    : new Set<string>();

  return (
    <aside className="standings">
      <div className="standings__head">
        <span className="standings__title">Clasificación</span>
        <div className="standings__links">
          <a href="/history" className="standings__link">
            Historial
          </a>
          <a href="https://argument.es" target="_blank" rel="noopener noreferrer" className="standings__link">
            Web
          </a>
        </div>
      </div>
      <LeaderboardSection
        label="Jueces IA"
        scores={scores}
        competing={competing}
      />
      <LeaderboardSection
        label="Público"
        scores={viewerScores}
        competing={competing}
      />
      {Object.keys(playerScores).length > 0 && (
        <PlayerLeaderboard scores={playerScores} />
      )}
    </aside>
  );
}

// ── Propose Question (inline widget) ─────────────────────────────────────────

function ProposeQuestion() {
  const params = new URLSearchParams(window.location.search);
  const creditOkOrder = params.get("credito_ok");
  const isKo = params.get("ko") === "1";

  const [credit, setCredit] = useState<CreditInfo | null>(null);
  const [loaded, setLoaded] = useState(false);
  const [verifying, setVerifying] = useState(false);
  const [verifyError, setVerifyError] = useState(false);
  const [selectedTier, setSelectedTier] = useState<ProposeTierId | null>(null);
  const [username, setUsername] = useState("");
  const [buying, setBuying] = useState(false);
  const [buyError, setBuyError] = useState<string | null>(null);
  const [text, setText] = useState("");
  const [submitting, setSubmitting] = useState(false);
  const [submitError, setSubmitError] = useState<string | null>(null);
  const [sent, setSent] = useState(false);
  const [koDismissed, setKoDismissed] = useState(false);

  useEffect(() => {
    setCredit(loadCredit());
    setLoaded(true);
  }, []);

  useEffect(() => {
    if (!creditOkOrder || !loaded || credit) return;
    setVerifying(true);
    let attempts = 0;

    async function poll() {
      if (attempts >= 15) { setVerifying(false); setVerifyError(true); return; }
      attempts++;
      try {
        const res = await fetch(`/api/credito/estado?order=${encodeURIComponent(creditOkOrder!)}`);
        if (res.ok) {
          const data = await res.json() as {
            found: boolean; status?: string; token?: string;
            username?: string; expiresAt?: number; tier?: string;
            questionsLeft?: number | null;
          };
          if (data.found && data.status === "active" && data.token && data.expiresAt) {
            const newCredit: CreditInfo = {
              token: data.token, username: data.username ?? "",
              expiresAt: data.expiresAt, tier: data.tier ?? "",
              questionsLeft: data.questionsLeft ?? null,
            };
            localStorage.setItem(CREDIT_STORAGE_KEY, JSON.stringify(newCredit));
            setCredit(newCredit);
            setVerifying(false);
            history.replaceState(null, "", "/");
            return;
          }
        }
      } catch { /* retry */ }
      setTimeout(poll, 2000);
    }
    poll();
  }, [creditOkOrder, loaded, credit]);

  async function handleBuyCredit(e: React.FormEvent) {
    e.preventDefault();
    if (!selectedTier) return;
    setBuyError(null);
    setBuying(true);
    try {
      const res = await fetch("/api/credito/iniciar", {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({ tier: selectedTier, username: username.trim() }),
      });
      if (!res.ok) throw new Error(await res.text());
      await submitRedsysForm(await res.json());
    } catch (err) {
      setBuyError(err instanceof Error ? err.message : "Error al procesar el pago");
      setBuying(false);
    }
  }

  async function handleSubmitQuestion(e: React.FormEvent) {
    e.preventDefault();
    if (!credit) return;
    setSubmitError(null);
    setSubmitting(true);
    try {
      const res = await fetch("/api/pregunta/enviar", {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({ text: text.trim(), token: credit.token }),
      });
      if (!res.ok) {
        if (res.status === 401) {
          localStorage.removeItem(CREDIT_STORAGE_KEY);
          setCredit(null);
          throw new Error("Acceso expirado o sin preguntas disponibles.");
        }
        throw new Error(await res.text() || `Error ${res.status}`);
      }
      const data = await res.json() as { ok: boolean; questionsLeft: number | null };
      const updated: CreditInfo = { ...credit, questionsLeft: data.questionsLeft };
      localStorage.setItem(CREDIT_STORAGE_KEY, JSON.stringify(updated));
      setCredit(updated);
      setText("");
      setSent(true);
      setTimeout(() => setSent(false), 3000);
    } catch (err) {
      setSubmitError(err instanceof Error ? err.message : "Error al enviar");
    } finally {
      setSubmitting(false);
    }
  }

  if (!loaded) return null;

  const tierInfo = selectedTier ? PROPOSE_TIERS.find(t => t.id === selectedTier) : null;
  const exhausted = credit !== null && credit.questionsLeft !== null && credit.questionsLeft <= 0;

  // Verifying payment
  if (verifying || (creditOkOrder && !credit)) {
    return (
      <div className="propose">
        <div className="propose__head">
          <span className="propose__title">Verificando pago</span>
          {!verifyError && <div className="propose__spinner" />}
        </div>
        {verifyError && (
          <p className="propose__msg propose__msg--error">
            No se pudo confirmar. Recarga si el pago se completó.
          </p>
        )}
      </div>
    );
  }

  // Active credit — question form
  if (credit) {
    const badge = credit.questionsLeft === null
      ? "Ilimitadas"
      : `${credit.questionsLeft} restante${credit.questionsLeft !== 1 ? "s" : ""}`;
    return (
      <div className="propose">
        <div className="propose__head">
          <span className="propose__title">Propón una pregunta · {credit.username}</span>
          <span className={`propose__badge ${exhausted ? "propose__badge--empty" : ""}`}>{badge}</span>
        </div>
        {sent && <p className="propose__msg propose__msg--ok">✓ ¡Enviada! Se usará en el próximo sorteo.</p>}
        {!exhausted ? (
          <form onSubmit={handleSubmitQuestion}>
            <div className="propose__row">
              <textarea
                className="propose__textarea"
                value={text}
                onChange={e => setText(e.target.value)}
                placeholder='"La peor cosa que puedes encontrar en ___"'
                rows={2}
                maxLength={200}
              />
              <button className="propose__btn" type="submit" disabled={submitting || text.trim().length < 10}>
                {submitting ? "…" : "Enviar"}
              </button>
            </div>
            <div className="propose__hint">
              {text.length}/200 · mín. 10 ·{" "}
              <button type="button" className="propose__link-btn" onClick={() => {
                localStorage.removeItem(CREDIT_STORAGE_KEY);
                setCredit(null);
              }}>
                cerrar sesión
              </button>
            </div>
            {submitError && <p className="propose__msg propose__msg--error">{submitError}</p>}
          </form>
        ) : (
          <div className="propose__row">
            <p className="propose__msg propose__msg--error" style={{ flex: 1 }}>Has agotado tus preguntas.</p>
            <button className="propose__btn" onClick={() => {
              localStorage.removeItem(CREDIT_STORAGE_KEY);
              setCredit(null);
            }}>Nuevo plan</button>
          </div>
        )}
      </div>
    );
  }

  // Tier selection
  return (
    <div className="propose">
      <div className="propose__head">
        <span className="propose__title">Propón preguntas al juego</span>
      </div>
      {isKo && !koDismissed && (
        <p className="propose__msg propose__msg--error">
          El pago no se completó.{" "}
          <button type="button" className="propose__link-btn" onClick={() => setKoDismissed(true)}>
            ×
          </button>
        </p>
      )}
      <div className="propose__tiers">
        {PROPOSE_TIERS.map(tier => (
          <button
            key={tier.id}
            type="button"
            className={`propose__tier ${selectedTier === tier.id ? "propose__tier--selected" : ""}`}
            onClick={() => setSelectedTier(tier.id)}
          >
            <span className="propose__tier__price">{tier.price}</span>
            <span className="propose__tier__label">{tier.label}</span>
          </button>
        ))}
      </div>
      {selectedTier && (
        <form onSubmit={handleBuyCredit} className="propose__row propose__row--mt">
          <input
            type="text"
            className="propose__input"
            value={username}
            onChange={e => setUsername(e.target.value)}
            placeholder="Tu nombre en el marcador"
            maxLength={30}
            required
            autoFocus
          />
          <button type="submit" className="propose__btn" disabled={buying || !username.trim()}>
            {buying ? "…" : `Pagar ${tierInfo?.price}`}
          </button>
        </form>
      )}
      {buyError && <p className="propose__msg propose__msg--error">{buyError}</p>}
    </div>
  );
}

// ── Connecting ───────────────────────────────────────────────────────────────

function ConnectingScreen() {
  return (
    <div className="connecting">
      <div className="connecting__logo">
        <img src="/assets/logo.svg" alt="argument.es" />
      </div>
      <div className="connecting__sub">
        Conectando
        <Dots />
      </div>
    </div>
  );
}

// ── App ──────────────────────────────────────────────────────────────────────

function App() {
  const [state, setState] = useState<GameState | null>(null);
  const [totalRounds, setTotalRounds] = useState<number | null>(null);
  const [viewerCount, setViewerCount] = useState(0);
  const [connected, setConnected] = useState(false);
  const [viewerVotingSecondsLeft, setViewerVotingSecondsLeft] = useState(0);
  const [myVote, setMyVote] = useState<"A" | "B" | null>(null);
  const lastVotedRoundRef = useRef<number | null>(null);
  const [playerScores, setPlayerScores] = useState<Record<string, number>>({});

  useEffect(() => {
    async function fetchPlayerScores() {
      try {
        const res = await fetch("/api/jugadores");
        if (res.ok) setPlayerScores(await res.json());
      } catch {
        // ignore
      }
    }
    fetchPlayerScores();
    const interval = setInterval(fetchPlayerScores, 60_000);
    return () => clearInterval(interval);
  }, []);

  // Countdown timer for viewer voting
  useEffect(() => {
    const endsAt = state?.active?.viewerVotingEndsAt;
    if (!endsAt || state?.active?.phase !== "voting") {
      setViewerVotingSecondsLeft(0);
      return;
    }

    function tick() {
      const remaining = Math.max(0, Math.ceil((endsAt! - Date.now()) / 1000));
      setViewerVotingSecondsLeft(remaining);
    }
    tick();
    const interval = setInterval(tick, 1000);
    return () => clearInterval(interval);
  }, [state?.active?.viewerVotingEndsAt, state?.active?.phase]);

  // Reset my vote when a new round starts
  useEffect(() => {
    const roundNum = state?.active?.num ?? null;
    if (roundNum !== null && roundNum !== lastVotedRoundRef.current) {
      setMyVote(null);
      lastVotedRoundRef.current = roundNum;
    }
  }, [state?.active?.num]);

  async function handleVote(side: "A" | "B") {
    setMyVote(side);
    try {
      await fetch("/api/vote", {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({ side }),
      });
    } catch {
      // ignore network errors
    }
  }

  useEffect(() => {
    const wsProtocol = window.location.protocol === "https:" ? "wss:" : "ws:";
    const wsUrl = `${wsProtocol}//${window.location.host}/ws`;
    let ws: WebSocket;
    let reconnectTimer: ReturnType<typeof setTimeout>;

    let knownVersion: string | null = null;
    function connect() {
      ws = new WebSocket(wsUrl);
      ws.onopen = () => setConnected(true);
      ws.onclose = () => {
        setConnected(false);
        reconnectTimer = setTimeout(connect, 2000);
      };
      ws.onmessage = (e) => {
        const msg: ServerMessage = JSON.parse(e.data);
        if (msg.type === "state") {
          if (msg.version) {
            if (!knownVersion) knownVersion = msg.version;
            else if (knownVersion !== msg.version) return location.reload();
          }
          setState(msg.data);
          setTotalRounds(msg.totalRounds);
          setViewerCount(msg.viewerCount);
        } else if (msg.type === "viewerCount") {
          setViewerCount(msg.viewerCount);
        }
      };
    }

    connect();
    return () => {
      clearTimeout(reconnectTimer);
      ws?.close();
    };
  }, []);

  if (!connected || !state) return <ConnectingScreen />;

  const isNextPrompting =
    state.active?.phase === "prompting" && !state.active.prompt;
  const displayRound =
    isNextPrompting && state.lastCompleted ? state.lastCompleted : state.active;

  return (
    <div className="app">
      <div className="layout">
        <main className="main">
          <header className="header">
            <a href="/" className="logo">
              <img src="/assets/logo.svg" alt="argument.es" />
            </a>
            <div style={{ display: "flex", gap: "8px", alignItems: "center" }}>
              {state.isPaused && (
                <div
                  className="viewer-pill"
                  style={{ color: "var(--text-muted)", borderColor: "var(--border)" }}
                >
                  {state.autoPaused ? "Esperando espectadores…" : "En pausa"}
                </div>
              )}
              <div className="viewer-pill" aria-live="polite">
                <span className="viewer-pill__dot" />
                {viewerCount} espectador{viewerCount === 1 ? "" : "es"} conectado{viewerCount === 1 ? "" : "s"}
              </div>
            </div>
          </header>

          {state.done ? (
            <GameOver scores={state.scores} />
          ) : displayRound ? (
            <Arena
              round={displayRound}
              total={totalRounds}
              viewerVotingSecondsLeft={viewerVotingSecondsLeft}
              myVote={myVote}
              onVote={handleVote}
            />
          ) : (
            <div className="waiting">
              Iniciando
              <Dots />
            </div>
          )}

          {isNextPrompting && state.lastCompleted && (
            <div className="next-toast">
              <ModelTag model={state.active!.prompter} small /> está escribiendo
              la siguiente pregunta
              <Dots />
            </div>
          )}

          <ProposeQuestion />

          <footer className="site-footer">
            <p>IAs compiten respondiendo preguntas absurdas — los jueces votan, tú también puedes.</p>
            <p>
              por{" "}
              <a href="https://cloudhost.es" target="_blank" rel="noopener noreferrer">
                Cloud Host
              </a>
              {" "}— La web simplificada, la nube gestionada
            </p>
          </footer>
        </main>

        <Standings
          scores={state.scores}
          viewerScores={state.viewerScores ?? {}}
          playerScores={playerScores}
          activeRound={state.active}
        />
      </div>
    </div>
  );
}

// ── Mount ────────────────────────────────────────────────────────────────────

const root = createRoot(document.getElementById("root")!);
root.render(<App />);