// Plantel.jsx — Plantel actual (fichas) + Salón de la fama (pestaña)
const { useState } = React;

function JugadorCard({ j, active, onClick }) {
  return (
    <div className={'jugador' + (active ? ' fiche-active' : '')} onClick={onClick} style={{cursor:'pointer'}}>
      <div className="jugador-photo" style={j.foto_posicion ? {backgroundPosition: j.foto_posicion} : {}}>
        {j.foto
          ? <img src={j.foto} alt={j.nombre} style={j.foto_posicion ? {objectPosition: j.foto_posicion} : {}}/>
          : <div className="placeholder">{j.nombre[0]}</div>
        }
      </div>
    </div>
  );
}

function JugadorFiche({ j, onClose }) {
  if (!j) return null;

  React.useEffect(() => {
    document.body.style.overflow = 'hidden';
    return () => { document.body.style.overflow = ''; };
  }, []);

  const num = j.num ? String(j.num).padStart(2, '0') : '—';
  return (
    <div className="jugador-modal" onClick={onClose}>
      <div className="jugador-fiche" onClick={e => e.stopPropagation()}>
        <button className="jugador-fiche-close" onClick={onClose}>×</button>
        <div className="jugador-fiche-photo">
          {j.foto
            ? <img src={j.foto} alt={j.nombre}/>
            : <div className="placeholder-fi">{j.nombre[0]}</div>
          }
        </div>
        <div className="jugador-fiche-body">
          <div className="jugador-fiche-apodo">"{j.apodo}"</div>
          <div className="jugador-fiche-nombre">{j.nombre}</div>
          <div className="jugador-fiche-meta">
            <div><div className="label">NÚMERO</div><div className="fiche-val">{num}</div></div>
            <div><div className="label">POSICIÓN</div><div className="fiche-val">{j.pos}</div></div>
            <div><div className="label">ORIGEN</div><div className="fiche-val">{j.origen}</div></div>
            <div><div className="label">EN EL CLUB DESDE</div><div className="fiche-val">{j.desde || '—'}</div></div>
          </div>
        </div>
      </div>
    </div>
  );
}

function Plantel() {
  const data = window.JBN_DATA;
  const [active, setActive] = useState(null);
  const [tab, setTab] = useState('plantel');

  function toggle(j) {
    setActive(prev => (prev && prev.nombre === j.nombre) ? null : j);
  }

  function switchTab(t) {
    setTab(t);
    setActive(null);
  }

  return (
    <section id="plantel" className="section">
      <div className="wrap">
        <div className="section-tag">
          <span className="num">03</span>
          <span>EL PLANTEL · 2026</span>
          <span className="rule"></span>
        </div>

        <div className="plantel-head">
          <h2 className="h-xxl">LOS QUE SE PONEN LA <em className="editorial-italic" style={{color:'var(--verde)'}}>verde</em></h2>
          <p className="lead">Once nombres en cancha. Algunos están desde el primer partido en 2012, otros se sumaron después. Todos cargan la J.</p>
        </div>

        <div className="tabs">
          <button className={'tab' + (tab === 'plantel' ? ' active' : '')} onClick={() => switchTab('plantel')}>Plantel 2026</button>
          <button className={'tab' + (tab === 'salon'   ? ' active' : '')} onClick={() => switchTab('salon')}>Salón de la fama</button>
        </div>

        {tab === 'plantel' && (
          <>
            <div className="plantel-grid">
              {data.actuales.map((j, i) => (
                <JugadorCard
                  key={i}
                  j={j}
                  active={active && active.nombre === j.nombre}
                  onClick={() => toggle(j)}
                />
              ))}
            </div>
            {active && <JugadorFiche j={active} onClose={() => setActive(null)}/>}
          </>
        )}

        {tab === 'salon' && (
          <div className="salon-tab-content">
            <div className="salon-head">
              <div>
                <div className="eyebrow" style={{color:'var(--dorado)'}}>SALÓN DE LA FAMA · LOS DIEZ</div>
                <h3 style={{marginTop:12, fontFamily:'var(--f-impact)', fontSize:'clamp(52px,7vw,96px)', lineHeight:.88, letterSpacing:'-.03em', textTransform:'uppercase', color:'var(--tinta)'}}>
                  LOS QUE <em className="editorial-italic" style={{color:'var(--dorado)'}}>cargaron</em><br/>EL CLUB EN HOMBROS
                </h3>
              </div>
            </div>
            <div className="salon-grid">
              {data.salon.map((s, i) => (
                <div className="salon-card" key={i}>
                  <div className="salon-photo">
                    {s.foto
                      ? <img src={s.foto} alt={s.nombre}/>
                      : <div className="placeholder" style={{display:'flex',alignItems:'center',justifyContent:'center',background:'#1a1a1a',height:'100%',color:'var(--dorado)',fontFamily:'var(--f-display)',fontSize:64}}>{s.nombre[0]}</div>
                    }
                    <div className="salon-num">{String(s.num).padStart(2,'0')}</div>
                  </div>
                  <div className="salon-info">
                    <div className="apodo">"{s.apodo}"</div>
                    <div className="nombre">{s.nombre}</div>
                    <div className="meta">{s.pos} · {s.origen} · DESDE {s.desde}</div>
                  </div>
                </div>
              ))}
            </div>
          </div>
        )}
      </div>
    </section>
  );
}

function PlantelPreview({ onFull }) {
  const data = window.JBN_DATA;
  const [active, setActive] = React.useState(null);
  const preview = data.actuales.slice(0, 6);

  function toggle(j) {
    setActive(prev => (prev && prev.nombre === j.nombre) ? null : j);
  }

  return (
    <section id="plantel" className="section">
      <div className="wrap">
        <div className="section-tag">
          <span className="num">03</span>
          <span>EL PLANTEL · 2026</span>
          <span className="rule"></span>
        </div>
        <div className="plantel-head">
          <h2 className="h-xxl">LOS QUE SE PONEN LA <em className="editorial-italic" style={{color:'var(--verde)'}}>verde</em></h2>
          <p className="lead">Once nombres en cancha. Algunos están desde el primer partido en 2012, otros se sumaron después. Todos cargan la J.</p>
        </div>
        <div className="plantel-grid" style={{gridTemplateColumns:'repeat(3,1fr)'}}>
          {preview.map((j, i) => (
            <JugadorCard key={i} j={j} active={active && active.nombre === j.nombre} onClick={() => toggle(j)}/>
          ))}
        </div>
        <div style={{marginTop:40, textAlign:'center'}}>
          <button className="plantel-ver-btn" onClick={onFull}>
            VER PLANTEL COMPLETO →
          </button>
        </div>
        {active && <JugadorFiche j={active} onClose={() => setActive(null)}/>}
      </div>
    </section>
  );
}

Object.assign(window, { Plantel, JugadorCard, JugadorFiche, PlantelPreview });