// =============================================================================
// CHAMPIONS SCREEN — detailed list with deck previews
// =============================================================================
const { useState } = React;

function ChampionsScreen({ state, actions }) {
  const { CHAMPIONS:ZC, getCard, MYTHIC_CARDS:ZM } = window.GAME_DATA;
  const [expanded, setExpanded] = useState(null);

  return (
    <div className="page">
      <div className="eyebrow-row">
        <span className="eyebrow">◆ <strong>DESAFÍOS</strong> / 5 CAMPEONES · 5 MAZOS LEGENDARIOS</span>
      </div>
      <div className="section-title">Maestros de proveedor</div>
      <div style={{fontFamily:'var(--font-mono)', fontSize:'13px', color:'var(--fg-3)', marginBottom:'32px', maxWidth:'720px', lineHeight:1.55}}>
        Cada maestro defiende un mazo de 5 cartas top-trumps. Best of 5 rondas:
        elige un stat por ronda. El ganador se queda con esa ronda. Al derrotar
        a un maestro: <strong style={{color:'var(--accent-violet)'}}>1× carta MÍTICA</strong> + créditos.
      </div>

      <div style={{display:'grid', gap:'16px'}}>
        {ZC.map((champ, i) => {
          const defeated = state.defeatedChamps.includes(champ.id);
          const locked = i > 0 && !state.defeatedChamps.includes(ZC[i-1].id);
          const isOpen = expanded === champ.id;
          return (
            <div key={champ.id} className={`panel ${defeated?'defeated':''} ${locked?'locked':''}`}
                 style={{
                   borderColor: defeated ? 'var(--accent-lime)' : locked ? 'var(--border-hairline)' : 'var(--accent-orange)',
                   opacity: locked ? 0.5 : 1,
                 }}>
              <div style={{display:'grid', gridTemplateColumns:'200px 1fr auto', gap:'24px', padding:'24px', alignItems:'center'}}>
                <div style={{
                  height:'160px',
                  background: `radial-gradient(circle at center, ${defeated?'var(--accent-lime-glow)':'var(--accent-orange-glow)'} 0%, transparent 70%), var(--bg-inset)`,
                  border:'1px solid ' + (defeated?'var(--accent-lime)':'var(--accent-orange)'),
                  display:'grid', placeItems:'center', position:'relative', overflow:'hidden',
                }}>
                  <ChampionSigil champion={champ} size={130} />
                  <span style={{position:'absolute', top:'8px', right:'8px', fontFamily:'var(--font-mono)', fontSize:'9px', color: defeated?'var(--accent-lime)':'var(--accent-orange)', letterSpacing:'0.12em'}}>
                    [{champ.sigil}]
                  </span>
                </div>
                <div style={{display:'flex', flexDirection:'column', gap:'8px'}}>
                  <div style={{fontFamily:'var(--font-mono)', fontSize:'11px', color: defeated?'var(--accent-lime)':locked?'var(--fg-4)':'var(--accent-orange)', textTransform:'uppercase', letterSpacing:'0.12em'}}>
                    BOSS {String(champ.difficulty).padStart(2,'0')}/05 · {defeated?'DERROTADO':locked?'BLOQUEADO':'DISPONIBLE'}
                  </div>
                  <div style={{fontFamily:'var(--font-sans)', fontWeight:700, fontSize:'28px', color:'var(--fg-1)', textTransform:'uppercase', letterSpacing:'-0.02em', lineHeight:1}}>
                    {champ.name}
                  </div>
                  <div style={{fontFamily:'var(--font-mono)', fontSize:'12px', color:'var(--fg-3)', textTransform:'uppercase', letterSpacing:'0.12em'}}>
                    {champ.title}
                  </div>
                  <div className="champ-quote" style={{marginTop:'4px', borderLeftColor: defeated?'var(--accent-lime)':'var(--accent-orange)'}}>
                    "{champ.quote}"
                  </div>
                  <div style={{display:'flex', gap:'16px', marginTop:'8px', flexWrap:'wrap'}}>
                    <div>
                      <div className="eyebrow" style={{fontSize:'9px'}}>RECOMPENSA</div>
                      <div style={{fontFamily:'var(--font-mono)', fontSize:'14px', color:'var(--accent-cyan)', fontWeight:700}}>
                        +{champ.reward.credits.toLocaleString()} CRD
                      </div>
                    </div>
                    <div>
                      <div className="eyebrow" style={{fontSize:'9px'}}>MÍTICA</div>
                      <div style={{fontFamily:'var(--font-mono)', fontSize:'14px', color:'var(--accent-violet)', fontWeight:700}}>
                        {ZM[champ.reward.card].name}
                      </div>
                    </div>
                    <div>
                      <div className="eyebrow" style={{fontSize:'9px'}}>DIFICULTAD</div>
                      <div className="diff-pips" style={{marginTop:'4px'}}>
                        {[...Array(5)].map((_, j) => (
                          <span key={j} className={`diff-pip ${j < champ.difficulty ? 'on' : ''}`}></span>
                        ))}
                      </div>
                    </div>
                  </div>
                </div>
                <div style={{display:'flex', flexDirection:'column', gap:'8px', alignItems:'flex-end'}}>
                  <button className="btn ghost" onClick={() => setExpanded(isOpen ? null : champ.id)} style={{fontSize:'10px', padding:'6px 12px'}}>
                    {isOpen ? '▾ OCULTAR MAZO' : '▸ VER MAZO (5)'}
                  </button>
                  {!defeated && !locked && (
                    <button className="btn orange" onClick={() => actions.battle(champ.id)}>
                      ▶ DESAFIAR
                    </button>
                  )}
                  {defeated && (
                    <button className="btn lime" onClick={() => actions.battle(champ.id)}>
                      ↻ REVANCHA
                    </button>
                  )}
                  {locked && (
                    <button className="btn ghost" disabled>
                      ◇ DERROTA ANTES A: {ZC[i-1].name.split(' ').slice(-1)[0]}
                    </button>
                  )}
                </div>
              </div>
              {isOpen && (
                <div style={{padding:'16px 24px 24px', borderTop:'1px dashed var(--border-hairline)'}}>
                  <div className="eyebrow" style={{marginBottom:'12px'}}>◈ MAZO DEL CAMPEÓN · 5 CARTAS</div>
                  <div className="cards-row stagger" style={{justifyContent:'flex-start'}}>
                    {champ.deck.map(cid => (
                      <TopTrumpsCard key={cid} card={getCard(cid)} />
                    ))}
                  </div>
                </div>
              )}
            </div>
          );
        })}
      </div>
    </div>
  );
}

window.ChampionsScreen = ChampionsScreen;