/* ============================================================
   Tabla de posiciones — group standings (real results)
   Live group tables built from confirmed final results, with
   FIFA tiebreakers. Columns: Pos · equipo · PJ G E P GF GC Pts
   ============================================================ */

function GroupTable({ g }) {
  const Q = window.QStore;
  const rows = Q.groupTable(g);          // ranked [{code,pj,w,d,l,gf,ga,gd,pts}]
  const complete = Q.groupComplete(g);
  const anyPlayed = rows.some((r) => r.pj > 0);

  return (
    <div className="qm-std-group">
      <div className="qm-std-head">
        <span className="g">Grupo {g}</span>
        <span className={`qm-chip ${complete ? "final" : anyPlayed ? "live" : "open"}`}>
          {complete ? "Completo" : anyPlayed ? "En curso" : "Sin jugar"}
        </span>
      </div>
      <div className="qm-std-table">
        <div className="qm-std-row qm-std-th">
          <span className="pos">#</span>
          <span className="team">Equipo</span>
          <span>PJ</span><span>G</span><span>E</span><span>P</span>
          <span>GF</span><span>GC</span><span className="pts">Pts</span>
        </div>
        {rows.map((r, i) => {
          const t = Q.team(r.code) || { flag: "🏳️", name: r.code, code: r.code };
          const qualifies = i < 2; // top 2 advance directly
          return (
            <div key={r.code} className={`qm-std-row ${qualifies ? "adv" : i === 2 ? "third" : ""}`}>
              <span className="pos">{i + 1}</span>
              <span className="team"><span className="fl">{t.flag}</span><b>{t.name}</b><small>{t.code}</small></span>
              <span>{r.pj}</span><span>{r.w}</span><span>{r.d}</span><span>{r.l}</span>
              <span>{r.gf}</span><span>{r.ga}</span><span className="pts">{r.pts}</span>
            </div>
          );
        })}
      </div>
    </div>
  );
}

function StandingsScreen() {
  const Q = useStore();
  const groups = Q.groupCodes();

  return (
    <div>
      <div className="qm-eyebrow"><Icon name="table" size={14} />Mundial 2026 · Fase de grupos</div>
      <h1 className="qm-h">Posiciones por grupo</h1>
      <p className="qm-sub">
        Se actualiza en tiempo real con los resultados confirmados. Los <b>2 primeros</b> de cada grupo
        avanzan directo; los <b>8 mejores terceros</b> completan los dieciseisavos. Desempate FIFA: puntos →
        diferencia y goles entre empatados → diferencia y goles totales.
      </p>
      <div className="qm-std-grid">
        {groups.map((g) => <GroupTable key={g} g={g} />)}
      </div>
    </div>
  );
}

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