// ═══════════════ MATCHS PAGE (LIVE) ═══════════════
const MatchsPage = () => {
  const { data: upcoming, loading: lu } = useApi('/public/upcoming', []);
  const { data: results, loading: lr } = useApi('/public/matches', []);
  const [pronoMatch, setPronoMatch] = React.useState(null);

  const upcomingList = (upcoming || []).filter(m => !m.winner);
  const resultsList = (results || []).filter(m => m.winner);
  const featured = upcomingList[0] || null;

  return (
    <div className="page-frame grain" data-screen-label="Matchs">
      <CZFHeader active="matchs" />
      <main style={{ padding: '2.5rem 2.5rem 3rem', position: 'relative' }}>
        <div className="eyebrow" style={{ marginBottom: '.65rem' }}>À l'affiche</div>
        {lu
          ? <Loading />
          : featured
            ? <FeaturedMatch m={featured} onPronostiquer={() => setPronoMatch(featured)} />
            : <Empty title="AUCUN MATCH À VENIR" sub="Les prochains matchs apparaîtront ici dès qu'ils seront planifiés." />}

        <div style={{ display: 'grid', gridTemplateColumns: '1.4fr 1fr', gap: '2rem', marginTop: '2.5rem' }}>
          <section>
            <div className="section-head"><h2>Prochains matchs</h2><span className="sub">{upcomingList.length} planifié{upcomingList.length > 1 ? 's' : ''}</span></div>
            {upcomingList.length === 0
              ? <Empty title="—" sub="Aucun match planifié pour le moment." />
              : (
                <div style={{ display: 'flex', flexDirection: 'column', gap: '.75rem' }}>
                  {upcomingList.slice(0, 6).map((m, i) => <UpcomingRow key={i} m={m} onClick={() => setPronoMatch(m)} />)}
                </div>
              )}
          </section>
          <section>
            <div className="section-head"><h2>Résultats</h2><span className="sub">{resultsList.length}</span></div>
            {lr
              ? <Loading />
              : resultsList.length === 0
                ? <Empty title="—" sub="Aucun résultat enregistré." />
                : (
                  <div style={{ display: 'flex', flexDirection: 'column', gap: '.55rem' }}>
                    {resultsList.slice(0, 10).map((r, i) => <ResultRow key={i} r={r} />)}
                  </div>
                )}
          </section>
        </div>

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

const teamFaceDiv = (name, allTeams) => {
  // For now we infer division by lookup later; safe default
  return null;
};

const FeaturedMatch = ({ m, onPronostiquer }) => {
  const isLive = !!m.is_live;
  const t1 = m.team1, t2 = m.team2;
  const tag1 = (t1 || '?').split(/\s+/).map(s => s[0]).join('').toUpperCase().slice(0,3);
  const tag2 = (t2 || '?').split(/\s+/).map(s => s[0]).join('').toUpperCase().slice(0,3);
  return (
    <div style={{
      background: 'linear-gradient(180deg, var(--char-2), var(--char))',
      border: '1px solid var(--border)', borderRadius: 5, position: 'relative', overflow: 'hidden',
    }}>
      <div style={{
        position: 'absolute', inset: 0, pointerEvents: 'none',
        background: 'radial-gradient(ellipse 30% 80% at 50% 50%, rgba(230,57,70,.15), transparent 70%)',
      }} />
      <div style={{
        display: 'grid', gridTemplateColumns: '1fr auto 1fr', alignItems: 'center',
        padding: '1.5rem 1.5rem 1.25rem', gap: '1rem', position: 'relative',
      }}>
        <TeamFace2 name={t1} tag={tag1} side="left" />
        <div style={{ textAlign: 'center', minWidth: 180, position: 'relative' }}>
          <div style={{
            display: 'inline-flex', alignItems: 'center', gap: '.35rem',
            padding: '.3rem .75rem', borderRadius: 99,
            background: isLive ? 'var(--red)' : 'rgba(60,40,30,.4)',
            color: isLive ? '#fff' : 'var(--muted)',
            border: isLive ? 'none' : '1px solid var(--border)',
            fontFamily: 'var(--fc)', fontSize: '.62rem', fontWeight: 800, letterSpacing: '.18em', textTransform: 'uppercase',
            marginBottom: '.55rem',
            boxShadow: isLive ? '0 0 16px rgba(230,57,70,.4)' : 'none',
          }}>
            <span style={{ width: 6, height: 6, borderRadius: '50%', background: isLive ? '#fff' : 'var(--muted-2)' }} />
            {isLive ? 'En direct' : 'À venir'}
          </div>
          <div style={{ fontFamily: 'var(--fd)', fontSize: '4.5rem', color: 'var(--bone)', letterSpacing: '.08em', lineHeight: .85 }}>VS</div>
          <div style={{ fontFamily: 'var(--fc)', fontSize: '.78rem', color: 'var(--bone)', letterSpacing: '.1em', textTransform: 'uppercase', marginTop: '.5rem', fontWeight: 600 }}>
            {m.date || '—'}
          </div>
          <div style={{ fontFamily: 'var(--fc)', fontSize: '.72rem', color: 'var(--gold)', letterSpacing: '.14em', textTransform: 'uppercase', marginTop: '.15rem', fontWeight: 700 }}>
            {m.phase || 'Poules'}{m.week ? ` · J${m.week}` : ''} · {m.bo_type || 'BO1'}
          </div>
        </div>
        <TeamFace2 name={t2} tag={tag2} side="right" />
      </div>
      <div style={{
        padding: '.75rem 1.5rem', borderTop: '1px solid var(--border)',
        background: 'rgba(0,0,0,.35)', display: 'flex', alignItems: 'center', justifyContent: 'space-between',
        position: 'relative', zIndex: 1,
      }}>
        <div style={{ display: 'flex', alignItems: 'center', gap: '.6rem' }}>
          <Icon.Mic style={{ color: 'var(--gold)' }} />
          <span style={{ fontFamily: 'var(--fc)', fontSize: '.75rem', color: 'var(--cream)', letterSpacing: '.04em' }}>{m.cast || 'Cast à confirmer'}</span>
        </div>
        <div style={{ display: 'flex', gap: '.5rem' }}>
          <a className="btn btn-red" onClick={onPronostiquer} style={{ padding: '.45rem .9rem', cursor: 'pointer' }}>Pronostiquer <Icon.ChevronR /></a>
        </div>
      </div>
    </div>
  );
};

const TeamFace2 = ({ name, tag, side }) => {
  const isRight = side === 'right';
  return (
    <div style={{
      display: 'flex', alignItems: 'center', gap: '1.1rem',
      flexDirection: isRight ? 'row-reverse' : 'row',
    }}>
      <div style={{
        width: 92, height: 92, borderRadius: 5, flexShrink: 0,
        background: 'var(--paper)', color: 'var(--paper-ink)',
        display: 'flex', alignItems: 'center', justifyContent: 'center',
        fontFamily: 'var(--fd)', fontSize: '2.6rem', letterSpacing: '.04em',
        boxShadow: '0 4px 16px rgba(0,0,0,.5)',
      }}>{tag}</div>
      <div style={{ textAlign: isRight ? 'right' : 'left' }}>
        <div style={{ fontFamily: 'var(--fd)', fontSize: '2.1rem', color: 'var(--bone)', letterSpacing: '.05em', lineHeight: 1 }}>{(name || '?').toUpperCase()}</div>
      </div>
    </div>
  );
};

const UpcomingRow = ({ m, onClick }) => (
  <div onClick={onClick} style={{
    background: 'var(--char)', border: '1px solid var(--border)', borderRadius: 4,
    padding: '.8rem 1rem', display: 'flex', alignItems: 'center', gap: '1rem',
    position: 'relative', overflow: 'hidden', cursor: onClick ? 'pointer' : 'default',
  }}>
    <div style={{ minWidth: 110 }}>
      <div style={{ fontFamily: 'var(--fc)', fontSize: '.62rem', letterSpacing: '.14em', color: 'var(--gold)', textTransform: 'uppercase' }}>{m.phase || 'Poules'}</div>
      <div style={{ fontFamily: 'var(--fc)', fontSize: '.78rem', fontWeight: 600, color: 'var(--bone)', marginTop: 2 }}>{m.date || '—'}</div>
    </div>
    <div style={{ flex: 1, display: 'flex', alignItems: 'center', justifyContent: 'center', gap: '.85rem' }}>
      <MiniTeamLocal name={m.team1} />
      <div style={{ fontFamily: 'var(--fd)', fontSize: '1rem', color: 'var(--muted)', letterSpacing: '.1em' }}>VS</div>
      <MiniTeamLocal name={m.team2} />
    </div>
    <div style={{ display: 'flex', alignItems: 'center', gap: '.5rem' }}>
      <span style={{ fontFamily: 'var(--fc)', fontSize: '.62rem', color: 'var(--muted)', letterSpacing: '.12em' }}>{m.bo_type || 'BO1'}</span>
      <Icon.ChevronR style={{ color: 'var(--muted)' }} />
    </div>
  </div>
);

const MiniTeamLocal = ({ name }) => {
  const tag = (name || '?').split(/\s+/).map(s => s[0]).join('').toUpperCase().slice(0,3);
  return (
    <div style={{ display: 'flex', alignItems: 'center', gap: '.5rem' }}>
      <div style={{
        width: 28, height: 28, borderRadius: 3, flexShrink: 0,
        background: 'var(--paper)', color: 'var(--paper-ink)',
        display: 'flex', alignItems: 'center', justifyContent: 'center',
        fontFamily: 'var(--fd)', fontSize: '.75rem', letterSpacing: '.04em',
      }}>{tag}</div>
      <span style={{ fontFamily: 'var(--fc)', fontSize: '.85rem', fontWeight: 700, color: 'var(--bone)', letterSpacing: '.04em' }}>{name || '?'}</span>
    </div>
  );
};

const ResultRow = ({ r }) => {
  const s1 = r.score ? parseInt(r.score.split('-')[0]) : null;
  const s2 = r.score ? parseInt(r.score.split('-')[1]) : null;
  const win = r.winner === r.team1;
  return (
    <div style={{
      background: 'var(--char)', border: '1px solid var(--border)', borderRadius: 3,
      padding: '.6rem .85rem', display: 'flex', alignItems: 'center', gap: '.75rem',
    }}>
      <div style={{ minWidth: 76, lineHeight: 1.1 }}>
        <div style={{ fontFamily: 'var(--fc)', fontSize: '.62rem', fontWeight: 700, letterSpacing: '.14em', color: 'var(--gold)', textTransform: 'uppercase' }}>{r.phase || 'Poules'}</div>
        <div style={{ fontFamily: 'var(--fc)', fontSize: '.66rem', color: 'var(--muted)', marginTop: 2, letterSpacing: '.05em' }}>{r.date || '—'}</div>
      </div>
      <div style={{ flex: 1, minWidth: 0, textAlign: 'right' }}>
        <div style={{
          fontFamily: 'var(--fc)', fontSize: win ? '.95rem' : '.85rem', fontWeight: win ? 700 : 500,
          color: win ? 'var(--bone)' : 'var(--muted)', letterSpacing: '.03em',
        }}>{r.team1}</div>
      </div>
      <div style={{ display: 'flex', alignItems: 'center', gap: '.4rem', minWidth: 70, justifyContent: 'center' }}>
        <div style={{ fontFamily: 'var(--fd)', fontSize: win ? '1.5rem' : '1.05rem',
          color: win ? 'var(--bone)' : 'var(--muted)', letterSpacing: '.03em', lineHeight: 1 }}>{s1 ?? '?'}</div>
        <div style={{ fontFamily: 'var(--fc)', fontSize: '.7rem', color: 'var(--muted-2)', fontWeight: 800, letterSpacing: '.1em' }}>—</div>
        <div style={{ fontFamily: 'var(--fd)', fontSize: !win ? '1.5rem' : '1.05rem',
          color: !win ? 'var(--bone)' : 'var(--muted)', letterSpacing: '.03em', lineHeight: 1 }}>{s2 ?? '?'}</div>
      </div>
      <div style={{ flex: 1, minWidth: 0 }}>
        <div style={{
          fontFamily: 'var(--fc)', fontSize: !win ? '.95rem' : '.85rem', fontWeight: !win ? 700 : 500,
          color: !win ? 'var(--bone)' : 'var(--muted)', letterSpacing: '.03em',
        }}>{r.team2}</div>
      </div>
    </div>
  );
};

// ── Pronostiquer Modal ──
const PronoModal = ({ m, onClose }) => {
  const [pick, setPick] = React.useState(null);
  const [score, setScore] = React.useState(null);
  const [pseudo, setPseudo] = React.useState(() => localStorage.getItem('czf_pseudo') || '');
  const [sent, setSent] = React.useState(false);
  const [submitting, setSubmitting] = React.useState(false);
  const bo = m.bo_type || 'BO1';
  const scoreOptions = bo === 'BO3' ? ['2-0','2-1','1-2','0-2']
                      : bo === 'BO5' ? ['3-0','3-1','3-2','2-3','1-3','0-3']
                      : ['1-0','0-1'];

  const submit = async () => {
    if (!pick || !score || !pseudo.trim() || submitting) return;
    setSubmitting(true);
    try {
      localStorage.setItem('czf_pseudo', pseudo.trim());
      let sid = localStorage.getItem('czf_session');
      if (!sid) { sid = 'czf-' + Math.random().toString(36).slice(2); localStorage.setItem('czf_session', sid); }
      await postApi('/bet', {
        match_id: m.match_id || `${m.team1}-${m.team2}`,
        team_predicted: pick, predicted_score: score,
        session_id: sid, pseudo: pseudo.trim(),
      });
      setSent(true);
      setTimeout(onClose, 1400);
    } catch (e) {
      alert('Erreur : ' + e.message);
      setSubmitting(false);
    }
  };

  return (
    <div style={{
      position: 'fixed', inset: 0, zIndex: 600,
      background: 'rgba(0,0,0,.75)', backdropFilter: 'blur(4px)',
      display: 'flex', alignItems: 'center', justifyContent: 'center', padding: '1.5rem',
    }} onClick={onClose}>
      <div onClick={e => e.stopPropagation()} style={{
        background: 'linear-gradient(180deg, var(--char-2), var(--char))',
        border: '1px solid var(--border-2)', borderRadius: 6,
        width: '100%', maxWidth: 540, padding: '1.5rem 1.75rem', position: 'relative',
        boxShadow: '0 24px 60px rgba(0,0,0,.8)',
      }}>
        <button onClick={onClose} style={{
          position: 'absolute', top: 12, right: 12, width: 28, height: 28, borderRadius: 2,
          background: 'transparent', border: '1px solid var(--border-2)', color: 'var(--cream-2)',
          fontFamily: 'var(--fc)', fontSize: '1rem', cursor: 'pointer',
        }}>×</button>
        {sent ? (
          <div style={{ textAlign: 'center', padding: '2rem 0' }}>
            <div style={{ fontFamily: 'var(--fd)', fontSize: '2rem', color: 'var(--ok)' }}>✓ PRONOSTIC ENREGISTRÉ</div>
            <div style={{ fontFamily: 'var(--fc)', fontSize: '.85rem', color: 'var(--cream-2)', marginTop: '.5rem' }}>Bonne chance !</div>
          </div>
        ) : (
          <>
            <div className="eyebrow" style={{ marginBottom: '.4rem' }}>Pronostiquer</div>
            <div style={{ fontFamily: 'var(--fd)', fontSize: '1.6rem', color: 'var(--bone)', letterSpacing: '.05em', marginBottom: '.3rem' }}>
              {m.team1?.toUpperCase()} <span style={{ color: 'var(--muted)' }}>vs</span> {m.team2?.toUpperCase()}
            </div>
            <div style={{ fontFamily: 'var(--fc)', fontSize: '.72rem', color: 'var(--gold)', letterSpacing: '.14em', textTransform: 'uppercase', marginBottom: '1.25rem' }}>
              {m.phase || 'Poules'} · {bo} · {m.date || '—'}
            </div>
            <div style={{ fontFamily: 'var(--fc)', fontSize: '.62rem', fontWeight: 700, letterSpacing: '.18em', textTransform: 'uppercase', color: 'var(--muted)', marginBottom: '.5rem' }}>1. Qui gagne ?</div>
            <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: '.6rem', marginBottom: '1.25rem' }}>
              {[m.team1, m.team2].map(t => (
                <button key={t} onClick={() => setPick(t)} style={{
                  background: pick === t ? 'rgba(212,168,75,.15)' : 'rgba(0,0,0,.2)',
                  border: `1.5px solid ${pick === t ? 'var(--gold)' : 'var(--border)'}`,
                  borderRadius: 4, padding: '.85rem 1rem', cursor: 'pointer',
                  display: 'flex', alignItems: 'center', gap: '.65rem', fontFamily: 'inherit',
                }}>
                  <div style={{
                    width: 38, height: 38, borderRadius: 3,
                    background: 'var(--paper)', color: 'var(--paper-ink)',
                    display: 'flex', alignItems: 'center', justifyContent: 'center',
                    fontFamily: 'var(--fd)', fontSize: '1rem', letterSpacing: '.04em',
                  }}>{(t || '?').split(/\s+/).map(w => w[0]).join('').slice(0,3)}</div>
                  <span style={{ fontFamily: 'var(--fd)', fontSize: '1.1rem', color: 'var(--bone)', letterSpacing: '.04em', flex: 1, textAlign: 'left' }}>{t?.toUpperCase()}</span>
                  {pick === t && <span style={{ color: 'var(--gold)', fontSize: '1.2rem' }}>★</span>}
                </button>
              ))}
            </div>
            <div style={{ fontFamily: 'var(--fc)', fontSize: '.62rem', fontWeight: 700, letterSpacing: '.18em', textTransform: 'uppercase', color: 'var(--muted)', marginBottom: '.5rem' }}>
              2. Score exact <span style={{ color: 'var(--gold)' }}>(+2 pts bonus)</span>
            </div>
            <div style={{ display: 'flex', gap: '.4rem', flexWrap: 'wrap', marginBottom: '1.25rem' }}>
              {scoreOptions.map(s => (
                <button key={s} onClick={() => setScore(s)} style={{
                  fontFamily: 'var(--fc)', fontSize: '.78rem', fontWeight: 700, letterSpacing: '.04em',
                  padding: '.4rem .75rem', borderRadius: 2, cursor: 'pointer',
                  background: score === s ? 'var(--gold)' : 'transparent',
                  color: score === s ? '#1a1308' : 'var(--cream-2)',
                  border: `1px solid ${score === s ? 'var(--gold)' : 'var(--border)'}`,
                }}>{s}</button>
              ))}
            </div>
            <div style={{ fontFamily: 'var(--fc)', fontSize: '.62rem', fontWeight: 700, letterSpacing: '.18em', textTransform: 'uppercase', color: 'var(--muted)', marginBottom: '.5rem' }}>3. Ton pseudo Discord</div>
            <input value={pseudo} onChange={e => setPseudo(e.target.value)} placeholder="PseudoDiscord" style={{
              fontFamily: 'var(--fc)', fontSize: '.9rem',
              background: 'rgba(0,0,0,.3)', border: '1px solid var(--border)',
              color: 'var(--bone)', padding: '.55rem .85rem', borderRadius: 3, outline: 'none', width: '100%',
            }} />
            <button onClick={submit} disabled={!pick || !score || !pseudo.trim() || submitting}
              className={pick && score && pseudo.trim() ? 'btn btn-red' : 'btn btn-ghost'}
              style={{
                width: '100%', marginTop: '1.25rem', justifyContent: 'center', padding: '.7rem',
                opacity: pick && score && pseudo.trim() ? 1 : .5,
                cursor: pick && score && pseudo.trim() && !submitting ? 'pointer' : 'not-allowed',
              }}>
              {submitting ? 'Envoi…' : 'Valider le pronostic'}
            </button>
          </>
        )}
      </div>
    </div>
  );
};

Object.assign(window, { MatchsPage });