// ============================================================
// screens/Matchmaking.jsx — pick an opponent
// ============================================================
function MatchmakingScreen({ onPick, playerSquadRating, squadSize }) {
  // Slice each opponent roster down to the positions the current formation needs,
  // and recompute the rating from the cards that will actually take the pitch.
  const formation = window.FORMATIONS[squadSize];
  const opts = window.OPPONENTS
    .map(o => window.sliceOpponentToFormation(o, formation))
    .filter(Boolean);

  return (
    <div style={{ padding: '40px 32px 80px', maxWidth: 1200, margin: '0 auto' }}>
      <h1 style={{ fontFamily: 'var(--font-display)', fontSize: 42, margin: 0, color: '#fff', fontWeight: 600 }}>Choose your opponent</h1>
      <div style={{ color: '#6a7380', fontSize: 13, marginBottom: 32, marginTop: 4 }}>
        Your squad rating is <strong style={{ color: '#ffc43d' }}>{playerSquadRating}</strong> — pick a match.
      </div>

      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fill, minmax(320px, 1fr))', gap: 16 }}>
        {opts.map(opp => {
          const team = window.TEAMS[opp.teamKey];
          const diff = opp.rating - playerSquadRating;
          const label = diff < -3 ? 'Underdog' : diff > 3 ? 'Favorite' : 'Even';
          const evenColor = squadSize === 11 ? '#3ea9ff' : '#ffc43d';
          const labelColor = diff < -3 ? '#58d07a' : diff > 3 ? '#ff5a3c' : evenColor;
          return (
            <div key={opp.id} onClick={() => onPick(opp)} style={{
              padding: 20, background: '#0e1114', borderRadius: 12,
              border: '1px solid #1a1f26', cursor: 'pointer', transition: 'all 0.2s',
              position: 'relative', overflow: 'hidden',
            }}
              onMouseEnter={e => { e.currentTarget.style.borderColor = team.color; e.currentTarget.style.boxShadow = `0 0 30px ${team.color}33`; }}
              onMouseLeave={e => { e.currentTarget.style.borderColor = '#1a1f26'; e.currentTarget.style.boxShadow = 'none'; }}
            >
              <div style={{ position: 'absolute', top: 0, left: 0, right: 0, height: 3, background: team.color }} />
              <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start', marginBottom: 12 }}>
                <div>
                  <div style={{ fontFamily: 'var(--font-display)', fontSize: 22, color: '#fff', fontWeight: 600 }}>{opp.name}</div>
                  <div style={{ fontSize: 10, color: team.color, letterSpacing: '0.14em', textTransform: 'uppercase', fontWeight: 600, marginTop: 2 }}>{team.city}</div>
                </div>
                <div style={{
                  fontSize: 9, color: labelColor, padding: '3px 8px', border: `1px solid ${labelColor}44`,
                  borderRadius: 3, letterSpacing: '0.12em', textTransform: 'uppercase', fontWeight: 700,
                }}>{label}</div>
              </div>
              <div style={{ display: 'flex', alignItems: 'baseline', gap: 8, marginBottom: 10 }}>
                <div style={{ fontFamily: 'var(--font-display)', fontSize: 38, color: '#fff', lineHeight: 1, fontWeight: 700 }}>{opp.rating}</div>
                <div style={{ fontSize: 10, color: '#5a6169', letterSpacing: '0.1em', textTransform: 'uppercase', fontWeight: 600 }}>Squad OVR</div>
              </div>
              <div style={{ fontSize: 11, color: '#8a9099', letterSpacing: '0.04em' }}>
                {opp.cards.slice(0, 3).map(id => window.CARDS.find(c=>c.id===id)?.name.split(' ').slice(-1)[0]).filter(Boolean).join(' · ')} · …
              </div>
            </div>
          );
        })}
      </div>
    </div>
  );
}
window.MatchmakingScreen = MatchmakingScreen;