const { useState, useEffect } = React;

window.RoomLobby = function RoomLobby({ socket, onBack, onJoin }) {
  const [roomList, setRoomList] = useState([]);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    socket.emit('getRoomList');
    const interval = setInterval(() => {
      socket.emit('getRoomList');
    }, 3000);

    socket.on('roomList', (list) => {
      setRoomList(list);
      setLoading(false);
    });

    socket.on('roomJoined', (data) => onJoin(data));

    return () => {
      clearInterval(interval);
      socket.off('roomList');
      socket.off('roomJoined');
    };
  }, [socket, onJoin]);

  const handleJoin = (roomId) => {
    socket.emit('joinRoom', { roomId });
  };

  return (
    <div className="min-h-screen flex items-center justify-center relative lobby-bg p-4">
      <div className="absolute inset-0 bg-black/40 backdrop-blur-[1px]"></div>
      <div className="relative z-10 bg-gray-900/95 border border-gray-700/80 p-6 sm:p-10 rounded-2xl max-w-md w-full shadow-2xl backdrop-blur-md flex flex-col h-[75vh]">
        
        <div className="flex justify-between items-center mb-6">
          <h2 className="text-2xl sm:text-3xl font-bold text-yellow-500 drop-shadow-md">🏠 房间大厅</h2>
          <button onClick={onBack} className="text-gray-400 hover:text-white font-bold transition-colors">
             &times; 返回首页
          </button>
        </div>
        
        <div className="flex-1 overflow-y-auto space-y-3 custom-scrollbar pr-2">
          {loading ? (
            <div className="text-center text-gray-500 mt-20 flex flex-col items-center justify-center">
              <div className="w-12 h-12 border-4 border-gray-700 border-t-yellow-500 rounded-full animate-spin mb-4"></div>
              <div className="font-bold text-gray-400">正在寻找宴会...</div>
           </div>
          ) : roomList.length === 0 ? (
            <div className="text-center text-gray-500 mt-10 flex flex-col items-center">
               <span className="text-4xl mb-2">💨</span>
               大厅空空如也，暂无公开的待开局房间
            </div>
          ) : (
            roomList.map(r => {
              const maxP = r.mode === '5-8' ? 8 : r.mode;
              const isFull = r.currentPlayers >= maxP;
              return (
              <div key={r.roomId} className="bg-gray-800 border border-gray-600 p-4 rounded-xl flex justify-between items-center hover:border-yellow-500 transition-colors shadow-lg">
                <div>
                  <div className="text-white font-bold text-lg mb-1">公开酒局</div>
                  <div className="text-gray-400 text-xs sm:text-sm">
                    房间号: <span className="text-yellow-400 font-mono">{r.roomId}</span> | {r.mode === '5-8' ? '5-8人混战' : `${r.mode}人局`} | 入席: {r.currentPlayers}/{maxP}
                  </div>
                </div>
                <button 
                  onClick={() => handleJoin(r.roomId)} 
                  disabled={isFull}
                  className={`px-4 py-2 font-bold rounded-lg shadow-lg transition-all ${
                    isFull 
                      ? 'bg-gray-700 text-gray-500 cursor-not-allowed' 
                      : 'bg-blue-600 hover:bg-blue-500 active:scale-95 text-white'
                  }`}
                >
                  {isFull ? '已满' : '入席'}
                </button>
              </div>
            )})
          )}
        </div>
        
        <button onClick={() => socket.emit('getRoomList')} className="mt-5 w-full py-3 bg-gray-700 hover:bg-gray-600 active:scale-95 text-white font-bold rounded-xl shadow-lg transition-all">
           刷新列表
        </button>
      </div>
    </div>
  );
};