// screens.jsx — Tabla de posiciones + Reglas. Exported to window.
const { useState: useStateS } = React;

function MedalRank({ rank }) {
  const cls = rank === 1 ? "rk rk1" : rank === 2 ? "rk rk2" : rank === 3 ? "rk rk3" : "rk";
  return <div className={cls}>{rank}</div>;
}

function StandingsScreen({ state, scoring }) {
  const rows = window.computeStandings(state, scoring);
  const [open, setOpen] = useStateS(null);
  const leader = rows[0];

  return (
    <div className="screen">
      <div className="hero hero-blue">
        <window.Eyebrow color="rgba(255,255,255,.7)">Quiniela familiar · Mundial 26</window.Eyebrow>
        <h1 className="hero-title">Tabla de<br />posiciones</h1>
        <div className="leader-strip">
          <window.Icon name="trophy" size={26} />
          <div>
            <div className="leader-name">{leader.name}</div>
            <div className="leader-sub">Lidera con {leader.total} pts</div>
          </div>
          <div className="leader-pts">{leader.total}</div>
        </div>
      </div>

      <div className="list">
        <div className="list-head">
          <span>#</span>
          <span className="lh-name">Jugador</span>
          <span className="lh-ec">✔/●</span>
          <span className="lh-pts">Pts</span>
        </div>
        {rows.map((r) => {
          const isOpen = open === r.id;
          return (
            <div key={r.id} className={"prow-wrap" + (r.rank === 1 ? " is-leader" : "")}>
              <button className="prow" onClick={() => setOpen(isOpen ? null : r.id)}>
                <MedalRank rank={r.rank} />
                <div className="prow-name">
                  <span className="pn-main">{r.name}{r.padrino && <em className="padrino">padrino</em>}</span>
                  <span className="pn-sub">{r.full}</span>
                </div>
                <div className="prow-ec">
                  <span className="ec-x">{r.exact}</span>
                  <span className="ec-o">{r.result}</span>
                </div>
                <div className="prow-pts">{r.total}</div>
              </button>
              {isOpen && (
                <div className="prow-detail">
                  <div className="pd-grid">
                    <div><span>{r.base}</span><label>Acumulado</label></div>
                    <div><span>+{r.matchPts}</span><label>Partidos</label></div>
                    <div className="pd-total"><span>{r.total}</span><label>Total</label></div>
                  </div>
                  <div className="pd-tags">
                    <span className="tag tag-exact">{r.exact} exactos</span>
                    <span className="tag tag-result">{r.result} aciertos</span>
                    <span className="tag tag-miss">{r.miss} fallos</span>
                  </div>
                </div>
              )}
            </div>
          );
        })}
      </div>
      <div className="legend">
        <span><b className="dot-x"></b>Marcador exacto</span>
        <span><b className="dot-o"></b>Resultado correcto</span>
      </div>
    </div>
  );
}

function RulesScreen({ scoring }) {
  const S = scoring;
  return (
    <div className="screen">
      <div className="hero hero-ink">
        <window.Eyebrow color="rgba(255,255,255,.7)">Cómo se juega</window.Eyebrow>
        <h1 className="hero-title">Reglas y<br />puntuación</h1>
      </div>
      <div className="rules">
        <div className="rule-card rule-exact">
          <div className="rule-pts">{S.exact}</div>
          <div className="rule-body">
            <h3>Marcador exacto</h3>
            <p>Pegas el resultado tal cual. Aplica también a empates exactos (ej. dijiste 2-2 y quedó 2-2).</p>
          </div>
        </div>
        <div className="rule-card rule-result">
          <div className="rule-pts">{S.result}</div>
          <div className="rule-body">
            <h3>Resultado correcto</h3>
            <p>Aciertas quién gana (o que hay empate) pero no el marcador exacto.</p>
          </div>
        </div>
        <div className="rule-card rule-miss">
          <div className="rule-pts">0</div>
          <div className="rule-body">
            <h3>Fallaste</h3>
            <p>El ganador no coincide con tu pronóstico.</p>
          </div>
        </div>

        <div className="rule-note">
          <window.Icon name="info" size={20} />
          <p>La persona encargada carga los pronósticos y los resultados de cada partido. Los puntos y la clasificación se calculan solos. El pago es en Bs al final del torneo.</p>
        </div>
      </div>
    </div>
  );
}

Object.assign(window, { StandingsScreen, RulesScreen });