/* soccerarena.ai — mobile: collapsed single-column card stack. */

function MobileHeader({ countdown }) {
  const t = ARENA.tournament;
  const pct = t.dayTotal > 0 ? Math.min(100, (t.dayCurrent / t.dayTotal) * 100) : 0;
  const phaseShort = t.dayCurrent > 0 ? `D${t.dayCurrent}/${t.dayTotal}` : 'PRE-TOURNAMENT';
  return (
    <div style={{ padding: '6px 18px 0', background: SA.turf, position: 'sticky', top: 0, zIndex: 5 }}>
      <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', paddingBottom: 12 }}>
        <div style={{ display: 'flex', alignItems: 'baseline' }}>
          <span style={{ fontFamily: SA.sans, fontWeight: 800, fontSize: 17, letterSpacing: '-0.03em', color: SA.white }}>soccerarena</span>
          <span style={{ fontFamily: SA.sans, fontWeight: 800, fontSize: 17, letterSpacing: '-0.03em', color: SA.lime }}>.ai</span>
        </div>
        <div style={{ display: 'flex', alignItems: 'center', gap: 7 }}>
          <LiveDot />
          <span style={{ fontFamily: SA.mono, fontSize: 11, color: SA.dim }}>{phaseShort}</span>
        </div>
      </div>
      <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', paddingBottom: 10, gap: 10 }}>
        <span style={{ fontFamily: SA.mono, fontSize: 10, color: SA.faint, letterSpacing: '0.04em', whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' }}>
          {t.phase.toUpperCase()}
        </span>
        <span style={{ fontFamily: SA.mono, fontSize: 10, color: SA.dim, whiteSpace: 'nowrap' }}>
          Next in <span style={{ color: SA.lime, fontVariantNumeric: 'tabular-nums' }}>{countdown}</span>
        </span>
      </div>
      <div style={{ position: 'relative', height: 3, background: SA.line2, marginBottom: 2 }}>
        <div style={{ position: 'absolute', inset: 0, width: `${pct}%`, background: SA.lime }} />
      </div>
    </div>
  );
}

function MobileModelCard({ m, rank }) {
  const isLeader = rank === 1;
  const idx = ARENA.models.findIndex((x) => x.id === m.id);
  return (
    <a href={`model.html?m=${idx}`} style={{
      display: 'block', textDecoration: 'none',
      background: isLeader ? SA.surface : SA.turf2,
      border: `1px solid ${SA.line2}`,
      borderLeftWidth: 2,
      borderLeftColor: isLeader ? SA.lime : SA.line2,
      padding: '14px 16px',
    }}>
      <div style={{ display: 'flex', alignItems: 'center', gap: 12 }}>
        <span style={{ fontFamily: SA.sans, fontWeight: 800, fontSize: 25, color: isLeader ? SA.lime : SA.white, fontVariantNumeric: 'tabular-nums', letterSpacing: '-0.03em', width: 24, flexShrink: 0 }}>{rank}</span>
        <div style={{ flex: 1, minWidth: 0 }}>
          <div style={{ display: 'flex', alignItems: 'center', gap: 6, minWidth: 0 }}>
            <span style={{ fontFamily: SA.sans, fontWeight: 600, fontSize: 14.5, color: SA.white, whiteSpace: 'nowrap' }}>{m.name}</span>
            <span style={{ fontSize: 11, flexShrink: 0 }}>{m.origin}</span>
          </div>
          <div style={{ fontFamily: SA.mono, fontSize: 9.5, color: SA.faint, whiteSpace: 'nowrap', marginTop: 2 }}>{m.provider}</div>
        </div>
        <div style={{ textAlign: 'right', flexShrink: 0 }}>
          <div style={{ fontFamily: SA.mono, fontWeight: 700, fontSize: 20, color: isLeader ? SA.lime : SA.white, fontVariantNumeric: 'tabular-nums', lineHeight: 1 }}>{m.total}</div>
          <div style={{ fontFamily: SA.mono, fontSize: 9, color: SA.faint, letterSpacing: '0.06em', marginTop: 3 }}>TOTAL</div>
        </div>
      </div>
      <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginTop: 13, paddingTop: 12, borderTop: `1px solid ${SA.line2}` }}>
        <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
          <span style={{ fontFamily: SA.mono, fontSize: 9.5, color: SA.faint, letterSpacing: '0.04em' }}>PICK</span>
          <span style={{ fontSize: 14 }}>{m.pick.flag}</span>
          <span style={{ fontFamily: SA.sans, fontWeight: 500, fontSize: 13, color: SA.white }}>{m.pick.name}</span>
          {m.flipped && <FlipBadge when={m.lastFlip} compact />}
        </div>
        <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
          <Sparkline data={m.spark} w={48} h={18} color={m.d7 >= 0 ? SA.lime : SA.orange} />
          <Delta value={m.d7} />
        </div>
      </div>
    </a>
  );
}

function MobileConsensus() {
  if (!ARENA.consensus || ARENA.consensus.length === 0) return null;
  return (
    <div style={{ padding: '4px 16px 0' }}>
      <div style={{ fontFamily: SA.mono, fontSize: 9.5, letterSpacing: '0.08em', color: SA.faint, margin: '4px 2px 8px' }}>TODAY'S CONSENSUS</div>
      <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 1, background: SA.line2, border: `1px solid ${SA.line2}` }}>
        {ARENA.consensus.map((c, i) => (
          <div key={i} style={{ background: SA.turf2, padding: '11px 12px' }}>
            <div style={{ fontFamily: SA.mono, fontSize: 8.5, letterSpacing: '0.05em', color: SA.faint, marginBottom: 6 }}>{c.label.toUpperCase()}</div>
            <div style={{ display: 'flex', alignItems: 'center', gap: 5, marginBottom: 3 }}>
              {c.flag && <span style={{ fontSize: 13 }}>{c.flag}</span>}
              <span style={{ fontFamily: SA.sans, fontWeight: 700, fontSize: 14, color: SA.white, letterSpacing: '-0.02em' }}>{c.value}</span>
            </div>
            <span style={{ fontFamily: SA.mono, fontSize: 10, color: SA.lime }}>{c.share}</span>
          </div>
        ))}
      </div>
    </div>
  );
}

function MobileApp({ countdown }) {
  const models = ARENA.models || [];
  const rows = [...models].sort((a, b) => b.total - a.total);
  return (
    <div style={{ background: SA.turf, minHeight: '100%', fontFamily: SA.sans, paddingBottom: 40 }}>
      <MobileHeader countdown={countdown} />
      <div style={{ padding: '12px 16px 4px', display: 'flex', alignItems: 'baseline', justifyContent: 'space-between' }}>
        <h1 style={{ margin: 0, fontFamily: SA.sans, fontWeight: 800, fontSize: 13, letterSpacing: '0.12em', color: SA.white, textTransform: 'uppercase' }}>Leaderboard</h1>
        <span style={{ fontFamily: SA.mono, fontSize: 10, color: SA.faint }}>{models.length} MODELS</span>
      </div>
      {rows.length === 0 ? (
        <div style={{ padding: '16px', fontFamily: SA.mono, fontSize: 11, color: SA.faint, textAlign: 'center' }}>
          Predictions will appear once the tournament begins.
        </div>
      ) : (
        <div style={{ display: 'flex', flexDirection: 'column', gap: 8, padding: '4px 16px 16px' }}>
          {rows.map((m, i) => <MobileModelCard key={m.id} m={m} rank={i + 1} />)}
        </div>
      )}
      <MobileConsensus />
      <div style={{ padding: '18px 18px 8px', fontFamily: SA.mono, fontSize: 9.5, color: SA.faint, lineHeight: 1.6, textAlign: 'center' }}>
        Updated daily · Not affiliated with FIFA
      </div>
    </div>
  );
}

Object.assign(window, { MobileApp });