// ═══════════════ PRONOSTICS PAGE (LIVE) ═══════════════
const PronoPage = () => {
  const { data: standings } = useApi('/public/stats', []);
  const { data: upcoming } = useApi('/public/upcoming', []);
  const { data: leaderboard } = useApi('/public/leaderboard', []);
  const [divFilter, setDivFilter] = React.useState('Yordle');
  const { data: bracket } = useApi(`/public/bracket?division=${divFilter}`, null);
  const [pronoMatch, setPronoMatch] = React.useState(null);

  const teams = (standings || []).filter(t => t.division === divFilter)
    .sort((a, b) => (b.wins || 0) - (a.wins || 0));
  const upcomingMatches = (upcoming || []).slice(0, 5);
  const board = leaderboard || [];

  return (
    <div className="page-frame grain" data-screen-label="Pronostics">
      <CZFHeader active="prono" />
      <main style={{ padding: '2.5rem 2.5rem 3rem', position: 'relative' }}>
        <div style={{ display: 'flex', alignItems: 'flex-end', justifyContent: 'space-between', marginBottom: '1.5rem' }}>
          <div>
            <div className="eyebrow" style={{ marginBottom: '.6rem' }}>Pronostique · Score · Tableau</div>
            <h1 className="display" style={{ fontSize: '3.2rem' }}>PRONOSTICS</h1>
            <div style={{ display: 'flex', alignItems: 'center', gap: '.85rem', marginTop: '.65rem' }}>
              <span style={{ fontFamily: 'var(--fc)', fontSize: '.85rem', color: 'var(--cream-2)' }}>Prédis le vainqueur et le score</span>
              <PointPill v="+1" label="Bon vainqueur" c="var(--ok)" />
              <PointPill v="+3" label="Score exact" c="var(--gold)" />
            </div>
          </div>
          <div style={{ display: 'flex', gap: '.4rem' }}>
            {['Yordle','Ixtal','Targon'].map(d => (
              <button key={d} className={`filter-btn ${divFilter === d ? 'on' : ''}`} onClick={() => setDivFilter(d)}
                style={divFilter === d ? { background: DIV_COLOR[d], color: '#0E0A06', borderColor: DIV_COLOR[d] } : {}}>{d}</button>
            ))}
          </div>
        </div>

        <div className="section-head"><h2>Phase de poules</h2><span className="sub">Classement {divFilter}</span></div>
        {teams.length === 0
          ? <Empty title="AUCUNE ÉQUIPE EN POULE" sub={`Aucune équipe enregistrée en ${divFilter} pour le moment.`} />
          : <PouleTable teams={teams} division={divFilter} />}

        <div className="section-head" style={{ marginTop: '2rem' }}><h2>Tableau éliminatoire</h2><span className="sub">{divFilter}</span></div>
        {!bracket || !bracket.playoffs
          ? <Empty title="BRACKET NON CONFIGURÉ" sub={`Les playoffs ${divFilter} seront générés à la fin de la phase de poules. Configurable via /admin bracket-setup.`} />
          : <BracketBoard bracket={bracket} />}

        <div style={{ display: 'grid', gridTemplateColumns: '1.5fr 1fr', gap: '1.5rem', marginTop: '2rem' }}>
          <div>
            <div className="section-head"><h2>Voter</h2><span className="sub">{upcomingMatches.length} match{upcomingMatches.length > 1 ? 's' : ''}</span></div>
            {upcomingMatches.length === 0
              ? <Empty title="AUCUN MATCH À VENIR" sub="Les matchs apparaîtront ici dès qu'ils seront planifiés." />
              : (
                <div style={{ display: 'flex', flexDirection: 'column', gap: '.85rem' }}>
                  {upcomingMatches.map((m, i) => (
                    <div key={i} onClick={() => setPronoMatch(m)} style={{
                      background: 'var(--char)', border: '1px solid var(--border)', borderRadius: 4,
                      padding: '1rem 1.15rem', cursor: 'pointer',
                    }}>
                      <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginBottom: '.65rem' }}>
                        <div style={{ fontFamily: 'var(--fc)', fontSize: '.65rem', color: 'var(--gold)', letterSpacing: '.16em', textTransform: 'uppercase', fontWeight: 700 }}>{m.phase || 'Poules'}{m.week ? ` · J${m.week}` : ''}</div>
                        <div style={{ fontFamily: 'var(--fc)', fontSize: '.72rem', color: 'var(--cream-2)' }}>{m.date} · <strong style={{ color: 'var(--bone)' }}>{m.bo_type || 'BO1'}</strong></div>
                      </div>
                      <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
                        <div style={{ fontFamily: 'var(--fd)', fontSize: '1.3rem', color: 'var(--bone)', letterSpacing: '.04em' }}>{m.team1?.toUpperCase()}</div>
                        <div style={{ fontFamily: 'var(--fd)', fontSize: '1rem', color: 'var(--muted)' }}>VS</div>
                        <div style={{ fontFamily: 'var(--fd)', fontSize: '1.3rem', color: 'var(--bone)', letterSpacing: '.04em' }}>{m.team2?.toUpperCase()}</div>
                      </div>
                      <button className="btn btn-red" style={{ width: '100%', marginTop: '.85rem', justifyContent: 'center', padding: '.45rem' }}>
                        Pronostiquer <Icon.ChevronR />
                      </button>
                    </div>
                  ))}
                </div>
              )}
          </div>

          <div>
            <div className="section-head"><h2>Classement</h2><span className="sub">Top pronostiqueurs</span></div>
            <div className="card-paper grain" style={{ overflow: 'hidden' }}>
              <div style={{ padding: '1rem 1.25rem', background: 'var(--paper-ink)', color: 'var(--paper)', display: 'flex', alignItems: 'center', gap: '.6rem' }}>
                <Icon.Trophy style={{ color: 'var(--gold)' }} />
                <div style={{ fontFamily: 'var(--fd)', fontSize: '1.2rem', letterSpacing: '.06em', flex: 1 }}>TOP PRONOSTIQUEURS</div>
              </div>
              {board.length === 0 ? (
                <div style={{ padding: '2rem', textAlign: 'center', fontFamily: 'var(--fc)', fontSize: '.8rem', color: 'var(--paper-mut)' }}>
                  Aucun pronostic enregistré pour l'instant.
                </div>
              ) : (
                board.slice(0, 10).map((u, i) => (
                  <div key={i} style={{
                    display: 'flex', alignItems: 'center', gap: '.75rem', padding: '.65rem 1.25rem',
                    borderBottom: '1px solid rgba(0,0,0,.05)',
                    background: i === 0 ? 'rgba(230,57,70,.04)' : 'transparent',
                  }}>
                    <div style={{ fontFamily: 'var(--fd)', fontSize: '1.1rem',
                      color: i === 0 ? 'var(--red-2)' : i === 1 ? 'var(--gold-deep)' : 'var(--paper-mut)',
                      minWidth: 24, textAlign: 'center' }}>#{i + 1}</div>
                    <div style={{
                      width: 32, height: 32, borderRadius: '50%',
                      background: 'var(--paper-ink)', color: 'var(--paper)',
                      display: 'flex', alignItems: 'center', justifyContent: 'center',
                      fontFamily: 'var(--fd)', fontSize: '.95rem',
                    }}>{(u.pseudo || '?')[0].toUpperCase()}</div>
                    <div style={{ flex: 1, minWidth: 0 }}>
                      <div style={{ fontFamily: 'var(--fc)', fontSize: '.85rem', fontWeight: 700, color: 'var(--paper-ink)' }}>{u.pseudo}</div>
                      <div style={{ fontFamily: 'var(--fc)', fontSize: '.65rem', color: 'var(--paper-mut)', marginTop: 1 }}>
                        {u.correct_bets || 0} / {u.total_bets || 0} bons
                      </div>
                    </div>
                    <div style={{ fontFamily: 'var(--fd)', fontSize: '1.4rem', color: 'var(--paper-ink)' }}>
                      {u.total_points || 0}<span style={{ fontFamily: 'var(--fc)', fontSize: '.6rem', color: 'var(--paper-mut)', letterSpacing: '.12em', marginLeft: 4 }}>PTS</span>
                    </div>
                  </div>
                ))
              )}
            </div>
          </div>
        </div>

        {pronoMatch && <PronoModal m={pronoMatch} onClose={() => setPronoMatch(null)} />}
      </main>
    </div>
  );
};

const PointPill = ({ v, label, c }) => (
  <span style={{
    display: 'inline-flex', alignItems: 'center', gap: '.4rem',
    padding: '.25rem .55rem .25rem .35rem', borderRadius: 99,
    background: 'rgba(255,255,255,.04)', border: '1px solid var(--border-2)',
  }}>
    <span style={{
      fontFamily: 'var(--fd)', fontSize: '.8rem', color: c, lineHeight: 1,
      padding: '0 .35rem', borderRadius: 2,
      background: c === 'var(--ok)' ? 'rgba(74,222,128,.12)' : 'rgba(212,168,75,.15)',
    }}>{v}</span>
    <span style={{ fontFamily: 'var(--fc)', fontSize: '.68rem', fontWeight: 700, letterSpacing: '.1em', textTransform: 'uppercase', color: 'var(--cream)' }}>{label}</span>
  </span>
);

const PouleTable = ({ teams, division }) => {
  const c = DIV_COLOR[division];
  const divKey = division[0].toLowerCase();
  return (
    <div style={{ background: 'var(--char)', border: '1px solid var(--border)', borderRadius: 4, overflow: 'hidden' }}>
      <div style={{
        padding: '.65rem .9rem', background: `linear-gradient(90deg, ${c}22, transparent)`,
        borderBottom: `2px solid ${c}66`,
        display: 'flex', alignItems: 'center', justifyContent: 'space-between',
      }}>
        <span className={`chip chip-${divKey}`}>{division}</span>
        <span style={{ fontFamily: 'var(--fc)', fontSize: '.62rem', fontWeight: 700, letterSpacing: '.14em', textTransform: 'uppercase', color: 'var(--muted)' }}>{teams.length} équipe{teams.length > 1 ? 's' : ''}</span>
      </div>
      <div style={{
        display: 'grid', gridTemplateColumns: '24px 30px 1fr 32px 32px 38px',
        padding: '.45rem .85rem',
        fontFamily: 'var(--fc)', fontSize: '.55rem', fontWeight: 700, letterSpacing: '.18em',
        textTransform: 'uppercase', color: 'var(--muted)', borderBottom: '1px solid var(--border)',
      }}>
        <span>#</span><span></span><span>Équipe</span>
        <span style={{ textAlign: 'center' }}>W</span>
        <span style={{ textAlign: 'center' }}>L</span>
        <span style={{ textAlign: 'right' }}>Pts</span>
      </div>
      {teams.map((t, i) => {
        const wins = t.wins || 0;
        const losses = t.losses || 0;
        const pts = wins * 3 + (t.total_points_yordle || 0);
        const qualified = i < 2;
        const tag = (t.team_name || '?').split(/\s+/).map(s => s[0]).join('').toUpperCase().slice(0,3);
        return (
          <div key={t.team_name} style={{
            display: 'grid', gridTemplateColumns: '24px 30px 1fr 32px 32px 38px', alignItems: 'center',
            padding: '.5rem .85rem', borderBottom: i < teams.length - 1 ? '1px solid var(--border)' : 'none',
            background: qualified ? `${c}06` : 'transparent', position: 'relative',
          }}>
            {qualified && <div style={{ position: 'absolute', left: 0, top: 0, bottom: 0, width: 2, background: c }} />}
            <span style={{ fontFamily: 'var(--fd)', fontSize: '1rem', color: qualified ? 'var(--bone)' : 'var(--muted)' }}>{i + 1}</span>
            <div style={{
              width: 22, height: 22, borderRadius: 2,
              background: 'var(--paper)', color: 'var(--paper-ink)',
              display: 'flex', alignItems: 'center', justifyContent: 'center',
              fontFamily: 'var(--fd)', fontSize: '.62rem', letterSpacing: '.04em',
            }}>{tag}</div>
            <span style={{ fontFamily: 'var(--fc)', fontSize: '.82rem', fontWeight: qualified ? 700 : 500, color: qualified ? 'var(--bone)' : 'var(--cream-2)' }}>
              {t.team_name}{qualified && <span style={{ marginLeft: 6, fontFamily: 'var(--fc)', fontSize: '.55rem', fontWeight: 700, letterSpacing: '.14em', color: c, textTransform: 'uppercase' }}>· qualifié</span>}
            </span>
            <span style={{ fontFamily: 'var(--fc)', fontSize: '.78rem', color: 'var(--ok)', textAlign: 'center', fontWeight: 700 }}>{wins}</span>
            <span style={{ fontFamily: 'var(--fc)', fontSize: '.78rem', color: 'var(--muted)', textAlign: 'center' }}>{losses}</span>
            <span style={{ fontFamily: 'var(--fd)', fontSize: '1.05rem', color: 'var(--bone)', textAlign: 'right' }}>{pts}</span>
          </div>
        );
      })}
    </div>
  );
};

const BracketBoard = ({ bracket }) => {
  const semis = bracket.playoffs?.semifinals || [];
  const final = bracket.playoffs?.final || {};
  return (
    <div style={{ background: 'var(--char)', border: '1px solid var(--border)', borderRadius: 4, padding: '1.5rem 2rem', display: 'flex', alignItems: 'stretch', gap: '2.5rem' }}>
      <div style={{ flex: 1, display: 'flex', flexDirection: 'column', gap: '.85rem' }}>
        <div className="eyebrow">Demis</div>
        {semis.map((s, i) => (
          <div key={s.id || i} style={{
            background: 'linear-gradient(180deg, var(--char-2), var(--char))',
            border: '1px solid var(--border-2)', borderRadius: 4, padding: '.85rem 1rem',
          }}>
            {['team1','team2'].map((k, j) => (
              <div key={k} style={{
                display: 'flex', alignItems: 'center', gap: '.65rem',
                padding: '.45rem 0',
                borderBottom: j === 0 ? '1px dashed var(--border)' : 'none',
              }}>
                <div style={{
                  width: 28, height: 28, borderRadius: 3,
                  background: 'var(--paper)', color: 'var(--paper-ink)',
                  display: 'flex', alignItems: 'center', justifyContent: 'center',
                  fontFamily: 'var(--fd)', fontSize: '.8rem',
                }}>{(s[k] || '?').split(/\s+/).map(w => w[0]).join('').slice(0,2) || '?'}</div>
                <span style={{ fontFamily: 'var(--fc)', fontSize: '.92rem', fontWeight: 700, color: 'var(--bone)', flex: 1 }}>{s[k] || '?'}</span>
                {s.winner === s[k] && <span style={{ color: 'var(--gold)' }}>★</span>}
              </div>
            ))}
          </div>
        ))}
      </div>
      <div style={{ flex: 1, display: 'flex', flexDirection: 'column', justifyContent: 'center' }}>
        <div className="eyebrow" style={{ marginBottom: '.5rem' }}>Finale</div>
        <div style={{
          background: 'linear-gradient(135deg, rgba(230,57,70,.18), rgba(212,168,75,.06))',
          border: '1px solid var(--red-deep)', borderRadius: 4, padding: '1.25rem 1.5rem', textAlign: 'center',
        }}>
          <div style={{ display: 'flex', justifyContent: 'space-around', alignItems: 'center', marginBottom: '.75rem' }}>
            <div style={{ width: 56, height: 56, borderRadius: 4, background: 'var(--paper)', color: 'var(--paper-ink)', display: 'flex', alignItems: 'center', justifyContent: 'center', fontFamily: 'var(--fd)', fontSize: '1.4rem', opacity: .6 }}>
              {(final.team1 || '?').split(/\s+/).map(w => w[0]).join('').slice(0,2) || '?'}
            </div>
            <div style={{ fontFamily: 'var(--fd)', fontSize: '1rem', color: 'var(--muted)', letterSpacing: '.1em' }}>VS</div>
            <div style={{ width: 56, height: 56, borderRadius: 4, background: 'var(--paper)', color: 'var(--paper-ink)', display: 'flex', alignItems: 'center', justifyContent: 'center', fontFamily: 'var(--fd)', fontSize: '1.4rem', opacity: .6 }}>
              {(final.team2 || '?').split(/\s+/).map(w => w[0]).join('').slice(0,2) || '?'}
            </div>
          </div>
          <Icon.Trophy style={{ color: 'var(--gold)', width: 24, height: 24 }} />
          <div style={{ fontFamily: 'var(--fd)', fontSize: '1.6rem', color: 'var(--bone)', letterSpacing: '.06em', marginTop: '.35rem' }}>FINALE</div>
        </div>
      </div>
    </div>
  );
};

Object.assign(window, { PronoPage });