/* ============================================================
   Leaderboard screen — list view
   ============================================================ */

function MiniPreds({ uid, count = 3 }) {
  const Q = window.QStore;
  if (!uid) return null;
  const marks = Q.last4(uid, count); // last `count` finished matches, oldest→newest
  if (!marks.length) return null;
  return (
    <div className="qm-preds">
      {marks.map((m, i) => {
        const match = Q.db.matches.find((x) => x.id === m.matchId);
        const pred = Q.prediction(m.matchId, uid);
        const home = Q.team(match.home), away = Q.team(match.away);
        const res = Q.db.results[m.matchId];
        // una predicción ausente cuenta como 0-0 por defecto (ver QStore.outcome)
        const label = pred ? `${pred.homeGoals}–${pred.awayGoals}` : "0–0";
        const o = Q.outcome(uid, match); // pts ya incluye el x2 de partidos destacados
        const ptsLabel = (m.kind === "exact" || m.kind === "result") ? `+${o.pts}` : "0";
        // partido en juego: el marcador es el parcial (liveHome/liveAway), no el final
        const sh = m.live ? res.liveHome : res.homeGoals;
        const sa = m.live ? res.liveAway : res.awayGoals;
        const title =
          `${home.name} ${sh}–${sa} ${away.name}` +
          (pred ? ` · pronóstico ${pred.homeGoals}–${pred.awayGoals} · ${OUT_LABEL[m.kind]}`
                : ` · sin pronóstico (cuenta como 0–0) · ${OUT_LABEL[m.kind]}`) +
          (m.live ? " · 🔴 EN VIVO (provisional)" : "");
        return (
          <span key={i} className={`qm-pred ${m.kind}`} title={title}
            style={m.live ? { outline: "1.5px solid var(--accent)", outlineOffset: 1, borderRadius: 7 } : undefined}>
            <i className="fl">{home.flag}{away.flag}</i>
            <b>{label}</b>
            <em className="mk" style={m.live ? { color: "var(--accent)" } : undefined}>{m.live ? `🔴${ptsLabel}` : ptsLabel}</em>
          </span>
        );
      })}
    </div>
  );
}

function LbRow({ row, me, predsCount }) {
  const top = row.rank <= 3 ? `top${row.rank}` : "";
  const medal = row.rank === 1 ? "🥇" : row.rank === 2 ? "🥈" : row.rank === 3 ? "🥉" : null;
  return (
    <div className={`qm-lb-row ${row.user.userId === me ? "me" : ""} ${top}`}>
      <div className="qm-lb-rank">
        {medal ? <span className="qm-medal">{medal}</span> : <span className="pos">{row.rank}</span>}
        <Move delta={row.delta} />
      </div>
      <div className="qm-lb-id">
        <div className="nm"><span className="txt" title={row.user.name}>{row.user.name}</span>{row.user.userId === me && <span className="you">TÚ</span>}</div>
        <div className="ar">{row.user.area}</div>
      </div>
      <MiniPreds uid={row.user.userId} count={predsCount} />
      <div className="qm-lb-pts">
        <div className="p">{row.pts}{row.live && <span title="Incluye puntos provisionales de un partido en juego" style={{ color: "var(--accent)", fontSize: 11, marginLeft: 3, verticalAlign: "super" }}>🔴</span>}</div>
        <div className="pl">pts</div>
      </div>
    </div>
  );
}

function LeaderboardScreen() {
  const Q = useStore();
  const me = Q.db.currentUserId;
  const rows = Q.standings();
  const myRow = rows.find((r) => r.user.userId === me);
  const totalPlayers = rows.length;
  const lastResult = Q.db.matches.find((m) => m.id === Q.db.lastScored);
  const anyLive = rows.some((r) => r.live);
  const lbRef = useRef(null);
  const predsCount = usePredsCount(lbRef);

  return (
    <div>
      <div className="qm-eyebrow"><img src="assets/asterisk.png" alt="" />Ranking general</div>
      <h1 className="qm-h">Ranking Quantia</h1>
      <p className="qm-sub">
        {totalPlayers} participantes · El movimiento ▲▼ refleja el cambio desde
        {lastResult ? ` ${Q.team(lastResult.home).name}–${Q.team(lastResult.away).name}` : " el último resultado"}.
        Cada fila muestra el pronóstico de los últimos partidos finalizados.
      </p>

      {anyLive && (
        <div className="qm-card" style={{ display: "flex", alignItems: "center", gap: 10, padding: "12px 14px", marginTop: 14, borderColor: "rgba(221,49,86,.35)", background: "rgba(221,49,86,.06)", fontSize: 13 }}>
          <span style={{ fontSize: 16 }}>🔴</span>
          <span><b>Hay partidos en juego.</b> Los puntos con 🔴 son provisionales y pueden cambiar cuando el partido finalice.</span>
        </div>
      )}

      {/* my position summary */}
      {myRow && (
        <div className="qm-card" style={{ display: "flex", alignItems: "center", gap: 14, padding: 16, marginTop: 18, background: "linear-gradient(100deg, rgba(221,49,86,.07), rgba(95,56,170,.06))", borderColor: "rgba(221,49,86,.3)" }}>
          <Avatar name={myRow.user.name} size={44} gold={myRow.rank === 1} />
          <div style={{ flex: 1, minWidth: 0 }}>
            <div style={{ fontFamily: "var(--font-head)", fontWeight: 800, fontSize: 16 }}>Tu posición</div>
            <div style={{ fontSize: 13, color: "var(--fg-3)", marginTop: 2, display: "flex", alignItems: "center", gap: 8 }}>
              Puesto #{myRow.rank} de {totalPlayers} <Move delta={myRow.delta} />
            </div>
          </div>
          <div style={{ textAlign: "right" }}>
            <div style={{ fontFamily: "var(--font-head)", fontWeight: 900, fontSize: 28, color: "var(--accent)", lineHeight: 1 }}>{myRow.pts}{myRow.live && <span title="Incluye puntos provisionales de un partido en juego" style={{ fontSize: 13, marginLeft: 2, verticalAlign: "super" }}>🔴</span>}</div>
            <div style={{ fontSize: 10, color: "var(--fg-3)", fontWeight: 700, textTransform: "uppercase", letterSpacing: ".06em" }}>puntos</div>
          </div>
        </div>
      )}

      <div className="qm-lb" ref={lbRef}>
        {rows.map((r) => <LbRow key={r.user.userId} row={r} me={me} predsCount={predsCount} />)}
      </div>
    </div>
  );
}

Object.assign(window, { LeaderboardScreen, LbRow, MiniPreds });