// Multiplayer lobby — PeerJS peer-to-peer, no server required
const { useState: useLobby, useEffect: useLobbyE, useRef: useLobbyR } = React;

function genCode() {
  const chars = '0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZ';
  return Array.from({ length: 6 }, () => chars[Math.floor(Math.random() * chars.length)]).join('');
}

function LobbyScreen({ onBack, onHostReady, onGuestReady }) {
  const [mode, setMode] = useLobby(null);       // null | 'host' | 'join'
  const [roomCode, setRoomCode] = useLobby('');
  const [inputCode, setInputCode] = useLobby('');
  const [status, setStatus] = useLobby('idle'); // idle|waiting|connecting|connected|error
  const [errMsg, setErrMsg] = useLobby('');
  const peerRef = useLobbyR(null);
  const connectedRef = useLobbyR(false);

  function destroyPeer() {
    if (peerRef.current) { try { peerRef.current.destroy(); } catch (e) {} peerRef.current = null; }
  }

  // Only destroy peer on unmount if we never connected — once connected, the
  // peer must stay alive for the DataConnection to remain open in the Game screen.
  useLobbyE(() => () => { if (!connectedRef.current) destroyPeer(); }, []);

  function hostGame() {
    setMode('host');
    setStatus('waiting');
    const code = genCode();
    setRoomCode(code);
    const peer = new window.Peer(code);
    peerRef.current = peer;
    peer.on('error', (e) => { setStatus('error'); setErrMsg(e.type || String(e)); });
    peer.on('connection', (conn) => {
      conn.on('open', () => { connectedRef.current = true; setStatus('connected'); onHostReady(conn); });
      conn.on('error', () => { setStatus('error'); setErrMsg('Connection lost'); });
    });
  }

  function joinGame() {
    const code = inputCode.trim().toUpperCase();
    if (!code) return;
    setStatus('connecting');
    const peer = new window.Peer();
    peerRef.current = peer;
    peer.on('open', () => {
      const conn = peer.connect(code, { reliable: true });
      conn.on('open', () => { connectedRef.current = true; setStatus('connected'); onGuestReady(conn); });
      conn.on('error', (e) => { setStatus('error'); setErrMsg(String(e)); });
    });
    peer.on('error', (e) => { setStatus('error'); setErrMsg(e.type || String(e)); });
  }

  function reset() {
    destroyPeer();
    setMode(null); setStatus('idle'); setErrMsg(''); setRoomCode(''); setInputCode('');
  }

  return (
    <div className="menu">
      <div className="grid-floor" />
      <div className="menu-inner">
        <div className="menu-hero">
          <div className="kicker">· online multiplayer ·</div>
          <div className="logo-big" style={{ fontSize: 'clamp(52px,10vw,110px)' }}>Rommé</div>
          <div className="tagline">Two browsers, one table, zero mercy.</div>
        </div>

        {status === 'error' && (
          <div className="menu-section" style={{ textAlign: 'center', color: 'var(--danger)', display: 'flex', flexDirection: 'column', gap: 12 }}>
            <div>Connection error: <span style={{ fontFamily: '"JetBrains Mono"', fontSize: 12 }}>{errMsg || 'unknown'}</span></div>
            <button className="btn" onClick={reset}>Try again</button>
          </div>
        )}

        {status !== 'error' && !mode && (
          <div className="menu-section" style={{ display: 'flex', flexDirection: 'column', gap: 12 }}>
            <button className="cta" onClick={hostGame}>🎲 Host a game</button>
            <button className="cta" style={{ background: 'rgba(255,255,255,.07)', boxShadow: 'none', border: '1px solid rgba(255,255,255,.15)', color: 'var(--ink-hi)' }} onClick={() => setMode('join')}>
              🔗 Join a game
            </button>
          </div>
        )}

        {mode === 'host' && status !== 'error' && (
          <div className="menu-section" style={{ textAlign: 'center', display: 'flex', flexDirection: 'column', gap: 10 }}>
            <div className="section-title">Share this code with your friend</div>
            <div style={{ fontSize: 52, fontFamily: '"JetBrains Mono"', letterSpacing: '.18em', color: 'var(--neon-cyan)', padding: '10px 0', fontWeight: 700 }}>
              {roomCode}
            </div>
            <div style={{ color: 'var(--ink-lo)', fontFamily: '"JetBrains Mono"', fontSize: 11, textTransform: 'uppercase', letterSpacing: '.2em' }}>
              {status === 'waiting' ? '⏳ Waiting for player 2…' : '✓ Connected — starting…'}
            </div>
          </div>
        )}

        {mode === 'join' && status === 'idle' && (
          <div className="menu-section" style={{ display: 'flex', flexDirection: 'column', gap: 12 }}>
            <div className="section-title">Enter room code</div>
            <input
              autoFocus
              style={{ background: 'rgba(0,0,0,.35)', border: '2px solid rgba(62,244,255,.3)', borderRadius: 12, padding: '16px', color: 'var(--neon-cyan)', fontFamily: '"JetBrains Mono"', fontSize: 28, textAlign: 'center', letterSpacing: '.25em', textTransform: 'uppercase', outline: 'none', width: '100%', caretColor: 'var(--neon-cyan)' }}
              value={inputCode}
              onChange={e => setInputCode(e.target.value.toUpperCase().replace(/[^0-9A-Z]/g, '').slice(0, 6))}
              onKeyDown={e => e.key === 'Enter' && inputCode.length >= 4 && joinGame()}
              placeholder="XXXXXX"
              maxLength={6}
            />
            <button className="cta" disabled={inputCode.length < 4} onClick={joinGame}>Connect →</button>
          </div>
        )}

        {status === 'connecting' && (
          <div className="menu-section" style={{ textAlign: 'center', color: 'var(--ink-mid)', fontFamily: '"JetBrains Mono"', fontSize: 12, letterSpacing: '.2em', textTransform: 'uppercase' }}>
            Connecting…
          </div>
        )}

        <div style={{ display: 'flex', justifyContent: 'center', marginTop: 4 }}>
          <button className="btn ghost" onClick={() => { reset(); onBack(); }}>← Back to menu</button>
        </div>

        <div style={{ textAlign: 'center', fontFamily: '"JetBrains Mono"', fontSize: 10, color: 'var(--ink-lo)', letterSpacing: '.2em', textTransform: 'uppercase' }}>
          · Peer-to-peer via PeerJS · No server required ·
        </div>
      </div>
    </div>
  );
}

window.LobbyScreen = LobbyScreen;