/* screens/Live.jsx — live accuracy tracker. window.LiveScreen */
function UpcomingTile({ match, result }) {
  const home = window.WC.team(match.home), away = window.WC.team(match.away);
  const pick = !result || !result.o ? null : result.o === 'H' ? home.name : result.o === 'A' ? away.name : 'Draw';
  return (
    <div className="tile" data-up="1">
      <div className="tile__head">
        <span><b style={{ color: 'var(--ink-mut)' }}>{match.group}{match.md}</b> · {match.date}</span>
        <span className="row" style={{ gap: 4, color: 'var(--ink-faint)' }}><IconClock size={11} /> Upcoming</span>
      </div>
      <div className="tile__row">
        <div className="tile__side"><Flag code={match.home} /><span className="tile__nm">{home.name}</span></div>
        <span className="tile__vs">v</span>
        <div className="tile__side tile__side--away"><Flag code={match.away} /><span className="tile__nm">{away.name}</span></div>
      </div>
      <div className="tile__verline" style={{ borderTopStyle: 'solid' }}>
        <span className="tile__pick">Your pick: <b style={{ color: pick ? 'var(--gold)' : 'var(--ink-faint)' }}>{pick || 'No pick'}</b></span>
        <span className="muted" style={{ fontSize: 11 }}>awaiting kick-off</span>
      </div>
    </div>
  );
}

/* actual: { actualResults, actualKO, actualBracket } from WCLogic.computeActual(realScores)
   realScores: { [matchId]: { hs, as, o } } — only matches with a real_scores row, played = true */
function LiveScreen({ store, actual, realScores }) {
  const { results } = store.state;
  const L = window.WCLogic;

  const actualResults = (actual && actual.actualResults) || L.ACTUAL_RESULTS;

  const acc = L.groupAccuracyReal(results, realScores);

  // per group correct
  const perGroup = window.WC.groupOrder.map((g) => {
    const fx = window.WC.fixtures.filter((f) => f.group === g && realScores[f.id]);
    let c = 0;
    fx.forEach((f) => {
      const p = results[f.id], a = actualResults[f.id];
      if (p && a && p.o === a.o) c++;
    });
    return { g, c, n: fx.length };
  });
  const bestGroup = perGroup.filter(x => x.n).sort((a, b) => (b.c / b.n) - (a.c / a.n))[0];

  const fixtures = window.WC.fixtures;
  const played = fixtures.filter((f) => realScores[f.id]);
  const upcoming = fixtures.filter((f) => !realScores[f.id]);

  return (
    <div className="page">
      <header className="phead">
        <div>
          <div className="eyebrow row" style={{ gap: 8 }}><span className="pill pill--live" style={{ padding: '2px 8px' }}>Live</span> Tournament in progress</div>
          <h1 className="section-h">Your accuracy, live</h1>
          <p className="muted phead__sub">Every result is checked against your prediction the moment a match goes final. Played matches lock; upcoming ones still show your call.</p>
        </div>
      </header>

      <div className="livehead">
        <div className="livehead__main">
          <div className="livehead__score display tnum">
            {acc.correct}<span className="livehead__slash">/{acc.played}</span>
          </div>
          <div className="livehead__sub">group-stage matches called correctly</div>
          <div className="livehead__bar"><i data-level={L.accuracyClass(acc.pct)} style={{ width: acc.pct + '%' }} /></div>
        </div>
        <div className="livehead__stats">
          <div className="lstat"><AccuracyBadge pct={acc.pct} size="lg" /><span>accuracy</span></div>
          <div className="lstat"><b className="tnum">{acc.played}</b><span>played</span></div>
          <div className="lstat"><b className="tnum">{72 - acc.played}</b><span>to go</span></div>
          {bestGroup && <div className="lstat"><b>Group {bestGroup.g}</b><span>your best · {bestGroup.c}/{bestGroup.n}</span></div>}
        </div>
      </div>

      {played.length > 0 && <>
        <div className="livesec"><h2 className="livesec__h">Final results <span className="muted">· {played.length}</span></h2></div>
        <div className="livegrid">
          {played.map((f) => (
            <MatchTile key={f.id} match={f} result={results[f.id]} locked actual={actualResults[f.id]} onSet={() => { }} />
          ))}
        </div>
      </>}

      {upcoming.length > 0 && <>
        <div className="livesec"><h2 className="livesec__h">Upcoming <span className="muted">· {upcoming.length}</span></h2></div>
        <div className="livegrid">
          {upcoming.slice(0, 12).map((f) => (
            <UpcomingTile key={f.id} match={f} result={results[f.id]} />
          ))}
        </div>
        {upcoming.length > 12 && <div className="muted" style={{ textAlign: 'center', marginTop: 16, fontSize: 13 }}>+ {upcoming.length - 12} more scheduled</div>}
      </>}
    </div>
  );
}
window.LiveScreen = LiveScreen; window.UpcomingTile = UpcomingTile;