// Players tab — uses pixel-art head cuts (assets/heads/<slug>.png), falls back to sprite portraits.
// Bios are loaded once from /bios.txt — edit that file to update player descriptions.
const { useState: useStatePlayers, useEffect: useEffectPlayers } = React;

// Cached per-page-load. Maps slug -> bio string.
let _biosPromise = null;
function loadBios() {
  if (_biosPromise) return _biosPromise;
  _biosPromise = fetch('bios.txt?v=' + Date.now())
    .then(r => r.ok ? r.text() : '')
    .then(text => {
      const map = {};
      const blocks = text.split(/\r?\n\r?\n/);
      for (const block of blocks) {
        const lines = block.split(/\r?\n/).filter(l => l && !l.trim().startsWith('#'));
        if (lines.length < 2) continue;
        const slug = lines[0].trim().toLowerCase();
        const bio = lines.slice(1).join(' ').trim();
        if (slug && bio) map[slug] = bio;
      }
      return map;
    })
    .catch(() => ({}));
  return _biosPromise;
}

function HeadImg({ slug, name }) {
  const [src, setSrc] = useStatePlayers(`assets/heads/${slug}.png`);
  return (
    <img
      src={src}
      alt={name}
      onError={() => setSrc(`assets/sprites/${slug}/portrait.png`)}
    />
  );
}

function PlayersTab() {
  const [active, setActive] = useStatePlayers(null);
  const { TEAMS, PLAYERS } = window.LEA30;
  const teamOrder = ['orange', 'yellow', 'green', 'blue'];

  return (
    <div>
      <div className="section-title">CREW</div>
      {teamOrder.map(tk => {
        const team = TEAMS[tk];
        const list = PLAYERS.filter(p => p.team === tk);
        return (
          <div key={tk} className="team-block" style={{ '--team-col': team.color }}>
            <div className="team-header">
              <div className="team-pip" />
              <div className="team-name">{team.label}</div>
              <div className="team-count">{list.length} PLAYERS</div>
            </div>
            <div className="player-grid">
              {list.map(p => (
                <button
                  key={p.slug}
                  className="player-card"
                  style={{ '--team-col': team.color }}
                  onClick={() => setActive(p)}
                >
                  <div className="player-portrait">
                    <HeadImg slug={p.slug} name={p.name} />
                  </div>
                  <div className="player-name">{p.name.toUpperCase()}</div>
                </button>
              ))}
            </div>
          </div>
        );
      })}
      {active && <PlayerModal player={active} onClose={() => setActive(null)} />}
    </div>
  );
}

function PlayerModal({ player, onClose }) {
  const team = window.LEA30.TEAMS[player.team];
  const [bio, setBio] = useStatePlayers(null);
  useEffectPlayers(() => {
    let cancelled = false;
    loadBios().then(map => {
      if (!cancelled) setBio(map[player.slug] || '');
    });
    return () => { cancelled = true; };
  }, [player.slug]);

  return (
    <div className="modal-bg" onClick={onClose}>
      <div className="modal" style={{ '--team-col': team.color }} onClick={e => e.stopPropagation()}>
        <button className="modal-close" onClick={onClose}>×</button>
        <div className="team-tag">{team.label} TEAM</div>
        <h2>{player.name}</h2>
        <div className="modal-portrait">
          <HeadImg slug={player.slug} name={player.name} />
        </div>
        <div
          className="modal-bio"
          style={{
            marginTop: 16,
            padding: '0 4px',
            fontFamily: 'var(--body, system-ui)',
            fontSize: 13,
            lineHeight: 1.5,
            color: 'var(--ink-2)',
            textAlign: 'center',
            minHeight: 40,
          }}
        >
          {bio === null ? '' : (bio || ' ')}
        </div>
      </div>
    </div>
  );
}

window.PlayersTab = PlayersTab;
window.HeadImg = HeadImg;