// views/table.jsx — Group stage table. All 12 groups of the 2026 draw.
// Standings are derived deterministically from FIFA rank so the page is
// self-consistent without needing 12 hand-authored tables.
function seededStandings(teams, clock) {
  const T = window.WCL_TEAMS;
  // played: 0 before tournament, 2 mid (live), 3 after
  const played = clock.phase === 'pre' ? 0 : clock.phase === 'post' ? 3 : 2;
  const rows = teams.map((code, i) => {
    const fifa = T[code]?.fifa || 80;
    // strength: lower fifa rank = stronger
    const strength = 1 / Math.log(fifa + 3);
    return { code, fifa, strength, seed: i };
  }).sort((a, b) => b.strength - a.strength);

  return rows.map((r, rank) => {
    if (played === 0) return { code: r.code, mp: 0, w: 0, d: 0, l: 0, gf: 0, ga: 0, pts: 0, gd: 0 };
    // deterministic results by rank within group
    const profile = [
      { w: 2, d: 0, l: 0, gf: 5, ga: 1 },
      { w: 1, d: 1, l: 0, gf: 3, ga: 2 },
      { w: 0, d: 1, l: 1, gf: 2, ga: 3 },
      { w: 0, d: 0, l: 2, gf: 1, ga: 5 },
    ][rank] || { w: 0, d: 0, l: 2, gf: 0, ga: 4 };
    let { w, d, l, gf, ga } = profile;
    if (played === 3) { // add a 3rd match scaled by rank
      const add = [{ w: 1, d: 0, l: 0, gf: 2, ga: 0 }, { w: 0, d: 1, l: 0, gf: 1, ga: 1 }, { w: 1, d: 0, l: 0, gf: 2, ga: 1 }, { w: 0, d: 0, l: 1, gf: 0, ga: 2 }][rank];
      w += add.w; d += add.d; l += add.l; gf += add.gf; ga += add.ga;
    }
    return { code: r.code, mp: w + d + l, w, d, l, gf, ga, gd: gf - ga, pts: w * 3 + d };
  });
}

function TableView({ onRoute, clock }) {
  const ck = clock || window.WCL_CLOCK.compute('live');
  const groups = window.WCL_2026.groups;

  return (
    <div>
      <div className="page-head">
        <div>
          <div className="breadcrumb" style={{ display: 'flex', gap: 6, color: 'var(--foreground-muted)', fontSize: 12, marginBottom: 8 }}>
            <a className="link" onClick={() => onRoute('home')}>Home</a><I.ChevR size={12} /><span>Group table</span>
          </div>
          <h1 className="type-h1" style={{ margin: 0 }}>Group stage table</h1>
          <div className="sub">12 groups of four · top 2 + 8 best third-placed advance to the Round of 32 · {ck.phase === 'pre' ? 'kicks off June 11' : ck.phase === 'post' ? 'group stage complete' : 'after Matchday 2'}.</div>
        </div>
        <div style={{ display: 'flex', gap: 8 }}>
          <button className="btn btn-secondary btn-sm" onClick={() => onRoute('matches')}><I.Calendar size={14} /> Fixtures</button>
          <button className="btn btn-secondary btn-sm" onClick={() => onRoute('bracket')}><I.Bracket size={14} /> Knockout</button>
        </div>
      </div>

      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fill, minmax(420px, 1fr))', gap: 14 }}>
        {groups.map(g => {
          const rows = seededStandings(g.teams, ck);
          return (
            <section className="panel" key={g.id}>
              <div className="panel-head">
                <h3>Group {g.id}{g.host ? <span className="subtle" style={{ fontWeight: 400, fontSize: 12, marginLeft: 8 }}>host group</span> : null}</h3>
                <span className="subtle" style={{ fontSize: 11 }}>{ck.phase === 'pre' ? 'not started' : 'MD ' + rows[0].mp}</span>
              </div>
              <table className="table" style={{ tableLayout: 'fixed' }}>
                <thead>
                  <tr>
                    <th style={{ width: 20 }}>#</th>
                    <th>Team</th>
                    <th style={{ width: 30, textAlign: 'right' }}>MP</th>
                    <th style={{ width: 30, textAlign: 'right' }}>W</th>
                    <th style={{ width: 30, textAlign: 'right' }}>D</th>
                    <th style={{ width: 30, textAlign: 'right' }}>L</th>
                    <th style={{ width: 38, textAlign: 'right' }}>GD</th>
                    <th style={{ width: 36, textAlign: 'right' }}>PTS</th>
                  </tr>
                </thead>
                <tbody>
                  {rows.map((t, i) => (
                    <tr key={t.code} onClick={() => onRoute('team', { code: t.code })} style={{ cursor: 'pointer' }}>
                      <td className="mono" style={{ color: i < 2 ? 'var(--pitch)' : i === 2 ? 'var(--trophy)' : 'var(--foreground-muted)' }}>{i + 1}</td>
                      <td className="strong" style={{ overflow: 'hidden' }}><TeamRow code={t.code} /></td>
                      <td className="mono" style={{ textAlign: 'right' }}>{t.mp}</td>
                      <td className="mono" style={{ textAlign: 'right' }}>{t.w}</td>
                      <td className="mono" style={{ textAlign: 'right' }}>{t.d}</td>
                      <td className="mono" style={{ textAlign: 'right' }}>{t.l}</td>
                      <td className="mono" style={{ textAlign: 'right' }}>{(t.gd > 0 ? '+' : '') + t.gd}</td>
                      <td className="mono strong" style={{ textAlign: 'right' }}>{t.pts}</td>
                    </tr>
                  ))}
                </tbody>
              </table>
            </section>
          );
        })}
      </div>

      <div style={{ display: 'flex', gap: 18, marginTop: 14, fontSize: 12, color: 'var(--foreground-muted)', flexWrap: 'wrap' }}>
        <span><span style={{ display: 'inline-block', width: 10, height: 10, borderRadius: 3, background: 'var(--pitch)', marginRight: 6, verticalAlign: '-1px' }} />Qualify (top 2)</span>
        <span><span style={{ display: 'inline-block', width: 10, height: 10, borderRadius: 3, background: 'var(--trophy)', marginRight: 6, verticalAlign: '-1px' }} />Best-third contender</span>
      </div>
    </div>
  );
}
Object.assign(window, { TableView });