/* Courtside public board. Renders entirely from the state JSON embedded in the page,
   then keeps it fresh over a WebSocket. No framework, no build step. */
(() => {
  const app = document.getElementById('app');
  let state = JSON.parse(document.getElementById('state').textContent);
  const myTeam = app.dataset.team || null;
  const display = app.dataset.display === '1';
  const seenAlerts = new Set();
  const esc = s => String(s ?? '').replace(/[&<>"']/g, c => ({ '&': '&amp;', '<': '&lt;', '>': '&gt;', '"': '&quot;', "'": '&#39;' }[c]));
  const name = t => t ? esc(t.name) : '<span class="tbd">TBD</span>';
  const isMine = m => myTeam && (m.a?.id === myTeam || m.b?.id === myTeam);
  const phaseLabel = { checkin: 'Registration open', closed: 'Registration closed', live: 'Live', final: 'Final' };
  const score = m => m.status === 'final' ? m.sets.map(s => `${s[0]}–${s[1]}`).join(', ')
    : m.status === 'forfeit' ? 'forfeit' : m.live ? `${m.live[0]}–${m.live[1]}` : m.status === 'live' ? '0–0' : '';
  const rulesLine = r => `${r.teamSize}s · to ${r.pointsTo}, win by ${r.winBy}${r.cap ? `, cap ${r.cap}` : ''}${r.bestOf > 1 ? `, best of ${r.bestOf}` : ''}`;

  function render() {
    const s = state;
    const mine = myTeam ? [...s.teams, ...s.withdrawn].find(t => t.id === myTeam) : null;
    const parts = [];
    if (!display) parts.push(`<section class="hero compact"><div class="eyebrow">${esc(s.date ?? '')} · <span class="pill ${s.phase}">${phaseLabel[s.phase]}</span></div><h1>${esc(s.name)}</h1><p class="lede">${rulesLine(s.rules)}${s.avgMatchMin ? ` · matches running ~${s.avgMatchMin} min` : ''}</p></section>`);
    else parts.push(`<div class="display-head"><h1>${esc(s.name)}</h1><span class="pill ${s.phase}">${phaseLabel[s.phase]}</span></div>`);
    if (s.banner) parts.push(`<div class="banner">${esc(s.banner)}</div>`);
    if (s.champion) parts.push(`<section class="champion"><div class="eyebrow">Champion</div><h2>${esc(s.champion)}</h2></section>`);
    if (mine) parts.push(renderMyTeam(mine));
    if (s.phase === 'live') { parts.push(renderCourts()); parts.push(renderUpNext()); }
    if (s.phase === 'closed' && !s.pools.length) parts.push(`<section class="card"><h2>Schedule coming</h2><p>Registration is closed with ${s.teams.length} teams. The organizer is generating pools now; this page will update on its own.</p></section>`);
    if (s.bracket.length) parts.push(renderBracket());
    if (s.pools.length) parts.push(renderPools());
    if (!s.pools.length && !s.bracket.length) parts.push(renderRoster());
    if (s.withdrawn.length && !display) parts.push(`<p class="muted small">Withdrawn: ${s.withdrawn.map(t => esc(t.name)).join(', ')}</p>`);
    app.innerHTML = parts.join('');
    notifyMine();
  }

  function renderMyTeam(t) {
    const s = state;
    const my = [...s.pools.flatMap(p => p.matches), ...s.bracket].filter(isMine);
    const live = my.find(m => m.status === 'live');
    const next = s.upNext.find(isMine) ?? my.find(m => m.status === 'on_deck' || (m.status === 'pending' && m.a && m.b));
    const played = my.filter(m => m.status === 'final' || m.status === 'forfeit');
    const w = played.filter(m => m.winner === t.id).length;
    let now;
    if (t.status === 'withdrawn') now = `<p>Your team has withdrawn from the tournament.</p>`;
    else if (live) now = `<p class="big">You're on <b>Court ${live.court}</b> now vs ${name(live.a?.id === t.id ? live.b : live.a)}</p>`;
    else if (next) now = `<p class="big">Next: vs ${name(next.a?.id === t.id ? next.b : next.a)}${next.court ? ` on <b>Court ${next.court}</b>` : ''}${next.etaMin != null ? ` <span class="muted">in about ${next.etaMin} min</span>` : ''}</p>`;
    else if (s.phase === 'final') now = `<p>Tournament over. Thanks for playing.</p>`;
    else if (s.phase === 'live') now = `<p>No match scheduled yet. Waiting on results from other courts.</p>`;
    else now = `<p>Waiting for play to start.</p>`;
    return `<section class="card mine"><div class="eyebrow">Your team</div><h2>${esc(t.name)}</h2>${now}<p class="muted">${played.length ? `Record ${w}–${played.length - w}` : 'No results yet'}${t.poolId ? ` · Pool ${esc(t.poolId)}` : ''}</p>
      ${my.length ? `<ul class="plain sched">${my.map(m => `<li class="${m.status}"><span>${m.stage === 'pool' ? `Pool ${m.round}` : (m.label ?? `Bracket R${m.round}`)}</span><span>vs ${name(m.a?.id === t.id ? m.b : m.a)}</span><span class="mono">${score(m) || (m.court ? `Court ${m.court}` : '')}${m.status === 'final' || m.status === 'forfeit' ? (m.winner === t.id ? ' W' : ' L') : ''}</span></li>`).join('')}</ul>` : ''}
      ${!display && 'Notification' in window && Notification.permission === 'default' ? `<button type="button" class="button" id="notify">Alert me when we're up</button>` : ''}
    </section>`;
  }

  function renderCourts() {
    return `<section class="courts">${state.courts.map(c => {
      const m = c.match;
      if (c.status === 'paused') return `<div class="court paused"><div class="lbl">Court ${c.court}</div><div class="teams"><div class="t">Paused</div></div></div>`;
      if (!m) return `<div class="court idle"><div class="lbl">Court ${c.court}</div><div class="teams"><div class="t muted">Open</div></div></div>`;
      return `<div class="court ${isMine(m) ? 'mine' : ''}"><div class="lbl">Court ${c.court} · ${m.stage === 'pool' ? `Pool ${esc(m.a && state.teams.find(t => t.id === m.a.id)?.poolId || '')} R${m.round}` : (m.label ?? `Bracket R${m.round}`)}</div>
        <div class="teams"><div class="t">${name(m.a)}</div><div class="s mono">${score(m) || '0–0'}</div><div class="t">${name(m.b)}</div></div></div>`;
    }).join('')}</section>`;
  }

  function renderUpNext() {
    if (!state.upNext.length) return '';
    return `<section class="queue"><div class="eyebrow">Up next</div>${state.upNext.map((u, i) => `<div class="qrow ${isMine(u) ? 'mine' : ''}"><span class="k">${i === 0 ? 'On deck' : 'Then'}</span><span>${name(u.a)} vs ${name(u.b)}</span><span class="eta mono">Court ${u.court} · ~${u.etaMin} min</span></div>`).join('')}</section>`;
  }

  function renderPools() {
    return `<section class="pools">${state.pools.map(p => `<div class="card pool"><h2>Pool ${esc(p.id)}</h2>
      <table><thead><tr><th>Team</th><th class="num">W</th><th class="num">L</th><th class="num">Pts</th><th class="num">+/−</th></tr></thead><tbody>
      ${p.standings.map((r, i) => `<tr class="${r.status === 'withdrawn' ? 'withdrawn' : ''} ${r.teamId === myTeam ? 'mine' : ''}"><td>${i + 1}. ${esc(r.name)}${r.decidedBy ? `<span class="tb" title="Tie broken by ${r.decidedBy}">*</span>` : ''}</td><td class="num">${r.w}</td><td class="num">${r.l}</td><td class="num">${r.pf}–${r.pa}</td><td class="num">${r.pointDiff > 0 ? '+' : ''}${r.pointDiff}</td></tr>`).join('')}
      </tbody></table>
      <details${display ? '' : ''}><summary>Matches</summary><ul class="plain matches">${p.matches.map(m => `<li class="${m.status} ${isMine(m) ? 'mine' : ''}"><span>R${m.round}</span><span class="${m.winner && m.winner === m.a?.id ? 'won' : ''}">${name(m.a)}</span><span class="mono">${score(m) || (m.court ? `C${m.court}` : '·')}</span><span class="${m.winner && m.winner === m.b?.id ? 'won' : ''}">${name(m.b)}</span></li>`).join('')}</ul></details>
    </div>`).join('')}</section>`;
  }

  function renderBracket() {
    const groups = [['bracket', 'Bracket'], ['losers', 'Losers bracket'], ['final', 'Finals']];
    return `<section class="card bracketwrap"><h2>${state.bracket.some(m => m.stage === 'losers') ? 'Double elimination' : 'Bracket'}</h2>${groups.map(([stage, title]) => {
      const ms = state.bracket.filter(m => m.stage === stage && !(m.conditional && m.status !== 'final' && !m.a));
      if (!ms.length) return '';
      const rounds = [...new Set(ms.map(m => m.round))].sort((a, b) => a - b);
      return `<div class="bstage"><h3>${title}</h3><div class="bracket">${rounds.map(r => `<div class="round"><div class="rlbl">${roundName(stage, r, rounds.length, ms)}</div>${ms.filter(m => m.round === r).map(m => `<div class="bm ${m.status} ${isMine(m) ? 'mine' : ''}">${m.label ? `<div class="mlbl">${esc(m.label)}</div>` : ''}<div class="${m.winner && m.winner === m.a?.id ? 'won' : ''}">${name(m.a)}<span class="mono">${m.sets[0] ? m.sets.map(s => s[0]).join(' ') : ''}</span></div><div class="${m.winner && m.winner === m.b?.id ? 'won' : ''}">${name(m.b)}<span class="mono">${m.sets[0] ? m.sets.map(s => s[1]).join(' ') : ''}</span></div>${m.status === 'live' ? `<div class="mlbl live">Court ${m.court}${m.live ? ` · ${m.live[0]}–${m.live[1]}` : ''}</div>` : m.status === 'forfeit' ? '<div class="mlbl">forfeit</div>' : ''}</div>`).join('')}</div>`).join('')}</div></div>`;
    }).join('')}</section>`;
  }
  function roundName(stage, r, total, ms) {
    if (stage === 'final') return r === 1 ? 'Grand final' : 'Reset';
    if (stage === 'losers') return `LB round ${r}`;
    const left = total - r;
    const inRound = ms.filter(m => m.round === r && m.label !== '3rd place').length;
    return left === 0 ? 'Final' : left === 1 ? 'Semifinals' : left === 2 ? 'Quarterfinals' : `Round of ${inRound * 2}`;
  }

  function renderRoster() {
    return `<section class="card"><h2>Teams (${state.teams.length})</h2><ol class="plain cols">${state.teams.map(t => `<li class="${t.id === myTeam ? 'mine' : ''}">${esc(t.name)} <span class="muted">(${t.players})</span></li>`).join('')}</ol></section>`;
  }

  // ---- alerts for the team page ----
  function notifyMine() {
    if (!myTeam) return;
    for (const a of state.recentAlerts) {
      const key = `${a.kind}:${a.match ?? a.at}`;
      if (seenAlerts.has(key)) continue;
      seenAlerts.add(key);
      if (!(a.kind === 'broadcast' || a.teams.includes(myTeam))) continue;
      if (Date.now() - a.at > 10 * 60 * 1000) continue; // stale on first load
      toast(a.text);
      try { navigator.vibrate?.([200, 100, 200]); } catch {}
      if ('Notification' in window && Notification.permission === 'granted') { try { new Notification('Courtside', { body: a.text, tag: key }); } catch {} }
    }
  }
  function toast(text) {
    const el = document.createElement('div'); el.className = 'toast'; el.textContent = text;
    document.body.appendChild(el); setTimeout(() => el.remove(), 8000);
  }
  document.addEventListener('click', e => {
    if (e.target.id === 'notify') Notification.requestPermission().then(render);
  });
  // first paint: skip toasts for alerts that already happened
  for (const a of state.recentAlerts) seenAlerts.add(`${a.kind}:${a.match ?? a.at}`);

  // ---- live updates ----
  let retry = 1000;
  function connect() {
    const ws = new WebSocket(`${location.protocol === 'https:' ? 'wss' : 'ws'}://${location.host}/ws/${state.slug}`);
    ws.onmessage = ev => { state = JSON.parse(ev.data); retry = 1000; render(); };
    ws.onclose = () => { setTimeout(connect, retry); retry = Math.min(retry * 2, 15000); };
    ws.onerror = () => ws.close();
  }
  render();
  connect();
  // belt and braces: a full refresh every 2 minutes in case a proxy drops the socket silently
  setInterval(() => fetch(`/t/${state.slug}/state.json`).then(r => r.json()).then(s => { state = s; render(); }).catch(() => {}), 120000);
  if (display) setInterval(() => document.documentElement.scrollTo({ top: (Date.now() / 1000 | 0) % 2 ? 0 : document.body.scrollHeight, behavior: 'smooth' }), 15000);
})();