/* soccerarena.ai — desktop: consensus + matches + footer + app shell. */

function ConsensusPanel() {
  if (!ARENA.consensus || ARENA.consensus.length === 0) return null;
  return (
    <section style={{ background: SA.turf2, borderTop: `1px solid ${SA.line2}`, borderBottom: `1px solid ${SA.line2}` }}>
      <div style={{ padding: '16px 28px', maxWidth: 1280, margin: '0 auto' }}>
        <div style={{ fontFamily: SA.mono, fontSize: 10, letterSpacing: '0.1em', color: SA.faint, marginBottom: 12 }}>
          TODAY'S CONSENSUS · AGGREGATED ACROSS {ARENA.models.length} MODELS
        </div>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, minmax(0,1fr))', gap: 1, background: SA.line2 }}>
          {ARENA.consensus.map((c, i) => (
            <div key={i} style={{ background: SA.turf2, padding: '4px 22px 4px 0', display: 'flex', gap: 13, alignItems: 'flex-start', minWidth: 0 }}>
              <span style={{ fontSize: 16, lineHeight: 1, marginTop: 3, filter: 'grayscale(0.2)' }}>{c.emoji}</span>
              <div style={{ minWidth: 0 }}>
                <div style={{ fontFamily: SA.mono, fontSize: 10, letterSpacing: '0.05em', color: SA.faint, marginBottom: 7, whiteSpace: 'nowrap' }}>{c.label.toUpperCase()}</div>
                <div style={{ display: 'flex', alignItems: 'center', gap: 7, marginBottom: 5 }}>
                  {c.flag && <span style={{ fontSize: 18 }}>{c.flag}</span>}
                  <span style={{ fontFamily: SA.sans, fontWeight: 700, fontSize: 18, color: SA.white, letterSpacing: '-0.02em', lineHeight: 1.05, whiteSpace: 'nowrap' }}>{c.value}</span>
                </div>
                <div style={{ display: 'flex', flexDirection: 'column', gap: 2 }}>
                  <span style={{ fontFamily: SA.mono, fontSize: 11, color: SA.lime, fontVariantNumeric: 'tabular-nums', whiteSpace: 'nowrap' }}>{c.share}</span>
                  <span style={{ fontFamily: SA.sans, fontSize: 11, color: SA.faint, whiteSpace: 'nowrap' }}>{c.sub}</span>
                </div>
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

function useRelativeTime(kickoffAt) {
  const [label, setLabel] = React.useState(() => computeLabel(kickoffAt));
  React.useEffect(() => {
    const id = setInterval(() => setLabel(computeLabel(kickoffAt)), 30000);
    return () => clearInterval(id);
  }, [kickoffAt]);
  return label;
}

function computeLabel(isoString) {
  if (!isoString) return '';
  const diff = new Date(isoString).getTime() - Date.now();
  if (diff <= 0) return 'live';
  const h = Math.floor(diff / 3600000);
  const m = Math.floor((diff % 3600000) / 60000);
  if (h < 24) return `${h}h ${m}m`;
  const d = new Date(isoString);
  return d.toLocaleDateString('en-US', { month: 'short', day: 'numeric', timeZone: 'UTC' });
}

function MatchPredictions() {
  const matches = (ARENA.matches || []).slice(0, 4);
  return (
    <section style={{ padding: '22px 0' }}>
      <div style={{ maxWidth: 1280, margin: '0 auto', padding: '0 28px' }}>
        <div style={{ display: 'flex', alignItems: 'baseline', justifyContent: 'space-between', marginBottom: 14 }}>
          <h2 style={{ margin: 0, fontFamily: SA.sans, fontWeight: 800, fontSize: 15, letterSpacing: '0.14em', color: SA.white, textTransform: 'uppercase' }}>
            Opening Fixtures
          </h2>
          <a href="fixtures.html" style={{ fontFamily: SA.mono, fontSize: 11, color: SA.lime, textDecoration: 'none', letterSpacing: '0.04em', whiteSpace: 'nowrap' }}>View all fixtures →</a>
        </div>
        {matches.length === 0 ? (
          <div style={{ padding: '20px 0', fontFamily: SA.mono, fontSize: 12, color: SA.faint }}>
            No upcoming fixtures scheduled.
          </div>
        ) : (
          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(2, 1fr)', gap: 1, background: SA.line2, border: `1px solid ${SA.line2}` }}>
            {matches.map((mt, i) => <MatchCard key={mt.id || i} mt={mt} idx={i} />)}
          </div>
        )}
      </div>
    </section>
  );
}

function MatchCard({ mt, idx }) {
  const [hover, setHover] = React.useState(false);
  const relTime = useRelativeTime(mt.kickoffAt);
  const label = (n, kind) => n > 0
    ? <span style={{ fontFamily: SA.mono, fontSize: 11, color: kind === 'home' ? SA.lime : kind === 'away' ? SA.white : SA.dim, fontVariantNumeric: 'tabular-nums' }}>
        {n} {kind === 'home' ? mt.home.code : kind === 'away' ? mt.away.code : 'DRAW'}
      </span>
    : null;
  return (
    <a href={`fixture.html?f=${idx}`} onMouseEnter={() => setHover(true)} onMouseLeave={() => setHover(false)}
      style={{ display: 'block', background: hover ? SA.surface : SA.turf, padding: '16px 20px', transition: 'background 120ms', textDecoration: 'none' }}>
      <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginBottom: 14 }}>
        <span style={{ fontFamily: SA.mono, fontSize: 10, color: SA.faint, letterSpacing: '0.06em' }}>{mt.group.toUpperCase()}</span>
        <div style={{ display: 'flex', alignItems: 'center', gap: 8, fontFamily: SA.mono, fontSize: 11 }}>
          <span style={{ color: SA.white, fontVariantNumeric: 'tabular-nums' }}>{mt.kickoff}</span>
          <span style={{ color: SA.faint }}>· in {relTime}</span>
        </div>
      </div>
      <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginBottom: 16 }}>
        <div style={{ display: 'flex', alignItems: 'center', gap: 9 }}>
          <span style={{ fontSize: 21 }}>{mt.home.flag}</span>
          <span style={{ fontFamily: SA.sans, fontWeight: 600, fontSize: 16, color: SA.white }}>{mt.home.name}</span>
        </div>
        <span style={{ fontFamily: SA.mono, fontSize: 11, color: SA.faint }}>vs</span>
        <div style={{ display: 'flex', alignItems: 'center', gap: 9 }}>
          <span style={{ fontFamily: SA.sans, fontWeight: 600, fontSize: 16, color: SA.white }}>{mt.away.name}</span>
          <span style={{ fontSize: 21 }}>{mt.away.flag}</span>
        </div>
      </div>
      <SplitBar split={mt.split} height={6} />
      <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginTop: 9 }}>
        {label(mt.split.home, 'home')}
        {label(mt.split.draw, 'draw')}
        {label(mt.split.away, 'away')}
      </div>
      <div style={{ marginTop: 13, paddingTop: 11, borderTop: `1px solid ${SA.line2}`, display: 'flex', justifyContent: 'flex-end' }}>
        <span style={{ fontFamily: SA.sans, fontWeight: 600, fontSize: 12, color: hover ? SA.lime : SA.dim, transition: 'color 120ms' }}>Match detail →</span>
      </div>
    </a>
  );
}

function DeskFooter() {
  return (
    <footer style={{ borderTop: `1px solid ${SA.line2}`, background: SA.turf }}>
      <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', flexWrap: 'wrap', gap: 10, maxWidth: 1280, margin: '0 auto', padding: '16px 28px 20px' }}>
        <div style={{ display: 'flex', gap: 18, fontFamily: SA.mono, fontSize: 11 }}>
          <a href="fixtures.html" style={{ color: SA.dim, textDecoration: 'none' }}>All Fixtures</a>
          <a href="methodology.html" style={{ color: SA.dim, textDecoration: 'none' }}>Methodology</a>
          <span style={{ color: SA.faint }}>Updated daily at 09:00 UTC · Predictions locked at kickoff</span>
        </div>
        <span style={{ fontFamily: SA.mono, fontSize: 11, color: SA.faint, letterSpacing: '0.02em' }}>
          Not affiliated with FIFA
        </span>
      </div>
    </footer>
  );
}

function DesktopApp({ countdown }) {
  return (
    <div style={{ background: SA.turf, color: SA.white, minHeight: '100%', fontFamily: SA.sans }}>
      <DeskHeader countdown={countdown} />
      <Leaderboard />
      <ConsensusPanel />
      <MatchPredictions />
      <DeskFooter />
    </div>
  );
}

Object.assign(window, { ConsensusPanel, MatchPredictions, DeskFooter, DesktopApp });