// Componente Lobby de Salas de Bingo
function LobbyPreview({ onSelectRoom }) {
  const rooms = [
    {
      id: "room-75-classic",
      name: "Sala Clásica 75",
      type: "75 Bolas",
      players: 14,
      maxPlayers: 50,
      pricePerCard: "$1.00",
      jackpot: "$250.00",
      status: "En Juego (Bola 22)",
      statusColor: "var(--accent-gold)",
      badge: "Popular"
    },
    {
      id: "room-turbo",
      name: "Turbo Express",
      type: "75 Bolas Rápido (3s/bola)",
      players: 8,
      maxPlayers: 20,
      pricePerCard: "$0.50",
      jackpot: "$80.00",
      status: "Inicia en 45s",
      statusColor: "var(--accent-green)",
      badge: "Rápida"
    },
    {
      id: "room-vip",
      name: "Sala Diamante VIP",
      type: "75 Bolas Alta Apuesta",
      players: 5,
      maxPlayers: 15,
      pricePerCard: "$10.00",
      jackpot: "$1,200.00",
      status: "Abierta",
      statusColor: "var(--accent-cyan)",
      badge: "VIP"
    }
  ];

  return (
    <div>
      <div className="hero-banner">
        <h1 className="hero-title">Lobby de Salas Multijugador</h1>
        <p className="hero-description">
          Vista previa del catálogo de salas preparadas para sincronizarse vía Supabase Realtime Channels. Cada sala soportará múltiples jugadores conectados, pozos acumulados y rondas automáticas.
        </p>
      </div>

      <div className="grid-3col">
        {rooms.map((room) => (
          <div key={room.id} className="app-card" style={{ display: 'flex', flexDirection: 'column', justifyContent: 'space-between' }}>
            <div>
              <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: '12px' }}>
                <span className="brand-badge" style={{ margin: 0, backgroundColor: 'var(--primary)', color: '#fff' }}>
                  {room.badge}
                </span>
                <span style={{ fontSize: '0.8rem', color: room.statusColor, fontWeight: '700' }}>
                  ● {room.status}
                </span>
              </div>

              <h3 style={{ fontSize: '1.25rem', fontWeight: '800', marginBottom: '4px' }}>
                {room.name}
              </h3>
              <p style={{ fontSize: '0.85rem', color: 'var(--text-muted)', marginBottom: '16px' }}>
                {room.type}
              </p>

              <div style={{ background: 'var(--bg-surface-elevated)', padding: '14px', borderRadius: 'var(--radius-md)', marginBottom: '16px' }}>
                <div style={{ display: 'flex', justifyContent: 'space-between', marginBottom: '8px', fontSize: '0.88rem' }}>
                  <span style={{ color: 'var(--text-muted)' }}>Premio / Pozo:</span>
                  <span style={{ color: 'var(--accent-gold)', fontWeight: '800', fontFamily: 'var(--font-numbers)' }}>{room.jackpot}</span>
                </div>
                <div style={{ display: 'flex', justifyContent: 'space-between', marginBottom: '8px', fontSize: '0.88rem' }}>
                  <span style={{ color: 'var(--text-muted)' }}>Precio Cartón:</span>
                  <span style={{ fontWeight: '700', fontFamily: 'var(--font-numbers)' }}>{room.pricePerCard}</span>
                </div>
                <div style={{ display: 'flex', justifyContent: 'space-between', fontSize: '0.88rem' }}>
                  <span style={{ color: 'var(--text-muted)' }}>Jugadores:</span>
                  <span style={{ color: 'var(--text-main)', fontWeight: '600' }}>{room.players} / {room.maxPlayers}</span>
                </div>
              </div>
            </div>

            <button 
              className="btn btn-primary" 
              style={{ width: '100%' }}
              onClick={() => alert(`Conectando a la sala ${room.name}... (Listo para asociar a tabla de Supabase)`)}
            >
              <i className="fa-solid fa-right-to-bracket"></i>
              Unirse a Sala
            </button>
          </div>
        ))}
      </div>
    </div>
  );
}

window.LobbyPreview = LobbyPreview;