<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Multiplayer Chess</title>
    <script src="/socket.io/socket.io.js"></script>
    <link href="https://fonts.googleapis.com/css2?family=Noto+Color+Emoji&family=Inter:wght@400;600;700&display=swap" rel="stylesheet">
    <style>
        * { margin: 0; padding: 0; box-sizing: border-box; }
        body { 
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            min-height: 100vh;
            display: flex;
            flex-direction: column;
            align-items: center;
            padding: 20px;
        }
        h1 { color: white; text-shadow: 2px 2px 4px rgba(0,0,0,0.3); margin-bottom: 10px; }
        
        /* Lobby */
        #lobby { 
            background: white; 
            padding: 40px; 
            border-radius: 15px; 
            box-shadow: 0 10px 40px rgba(0,0,0,0.3);
            max-width: 500px;
            width: 90%;
            margin: 20px auto;
        }
        #lobby h2 { color: #333; margin-bottom: 30px; }
        .lobby-section { margin: 20px 0; padding: 20px; border: 2px dashed #ddd; border-radius: 10px; }
        .lobby-section h3 { color: #666; margin-bottom: 15px; font-size: 18px; }
        .lobby-section p { color: #999; margin-bottom: 10px; font-size: 14px; }
        input[type="text"] { padding: 12px; font-size: 16px; border: 2px solid #ddd; border-radius: 8px; width: 200px; margin: 10px; text-transform: uppercase; }
        #roomCodeDisplay { background: #f0f0f0; padding: 15px; border-radius: 8px; margin: 15px 0; font-size: 24px; font-weight: bold; letter-spacing: 3px; color: #333; }
        #statusMessage { margin: 15px 0; padding: 12px; border-radius: 8px; font-weight: bold; }
        .status-waiting { background: #fff3cd; color: #856404; }
        .status-playing { background: #d4edda; color: #155724; }
        .status-error { background: #f8d7da; color: #721c24; }
        
        /* Game Area */
        #gameArea { 
            display: none;
            width: 100%;
            max-width: 1200px;
        }
        #gameArea.active {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            min-height: 80vh;
        }
        
        #gameInfo { 
            background: rgba(255,255,255,0.95); 
            padding: 15px; 
            border-radius: 10px; 
            margin: 10px auto; 
            max-width: 600px;
            width: 90%;
            box-shadow: 0 4px 6px rgba(0,0,0,0.2);
        }
        #playerInfo { display: flex; justify-content: space-around; margin: 10px 0; font-size: 18px; flex-wrap: wrap; }
        .player-tag { padding: 10px 20px; border-radius: 8px; font-weight: bold; margin: 5px; }
        .player-white { background: #f0d9b5; color: #333; }
        .player-black { background: #b58863; color: white; }
        #status { font-size: 20px; font-weight: bold; color: #333; margin: 10px 0; }
        #moveInfo { font-size: 14px; color: #666; margin: 5px 0; }
        #roomCodeShare { margin: 10px 0; padding: 10px; background: #e3f2fd; border-radius: 8px; }
        
        /* Board */
        #board { 
            display: grid; 
            grid-template-columns: repeat(8, 70px); 
            grid-template-rows: repeat(8, 70px); 
            margin: 20px auto; 
            border: 5px solid #8B4513; 
            box-shadow: 0 15px 35px rgba(0,0,0,0.5);
            background: #deb887;
            transition: transform 0.5s ease;
            position: relative;
        }
        #board.flipped { transform: rotate(180deg); }
        #board.flipped .square { transform: rotate(180deg); }
        
        .square { 
            width: 70px; 
            height: 70px; 
            display: flex; 
            align-items: center; 
            justify-content: center; 
            cursor: pointer; 
            user-select: none; 
            position: relative; 
            transition: all 0.2s;
        }
        .square .coord-label { position: absolute; font-size: 10px; font-weight: bold; opacity: 0.3; top: 2px; left: 3px; pointer-events: none; }
        .piece { 
            font-family: 'Segoe UI Symbol', 'Noto Sans', 'DejaVu Sans', Arial, sans-serif !important;
            font-size: 50px; 
            font-weight: bold;
            color: #333;
            text-shadow: -1px -1px 0 #fff, 1px -1px 0 #fff, -1px 1px 0 #fff, 1px 1px 0 #fff;
            cursor: grab; 
            user-select: none;
            z-index: 10;
        }
        .piece:active { cursor: grabbing; }
        .light { background-color: #f0d9b5; }
        .dark { background-color: #b58863; }
        .selected { background-color: #ffeb3b !important; box-shadow: inset 0 0 15px #ffd700; }
        .valid { background-color: #4caf50 !important; opacity: 0.8; }
        .valid::after { content: '●'; font-size: 20px; color: rgba(0,0,0,0.3); position: absolute; }
        .capture { background-color: #f44336 !important; opacity: 0.85; }
        .capture::after { content: '✕'; font-size: 30px; color: rgba(255,255,255,0.7); position: absolute; }
        .check { background-color: #ff5722 !important; animation: pulse 1s infinite; }
        .checkmate { background-color: #d32f2f !important; animation: flash 0.5s infinite; }
        .lastMove { background-color: #ffe082 !important; }
        
        /* Controls */
        #controls { margin: 15px auto; text-align: center; max-width: 600px; }
        
        /* Buttons */
        button { 
            background: #4caf50; 
            color: white; 
            padding: 12px 25px; 
            font-size: 16px; 
            border: none; 
            border-radius: 8px; 
            cursor: pointer; 
            margin: 5px;
            box-shadow: 0 4px 6px rgba(0,0,0,0.3);
            transition: all 0.3s;
            font-weight: bold;
        }
        button:hover { background: #45a049; transform: translateY(-2px); }
        button:disabled { background: #ccc; cursor: not-allowed; transform: none; }
        .secondary-btn { background: #2196F3; }
        .secondary-btn:hover { background: #0b7dda; }
        #flipBoardBtn { background: #9c27b0; }
        #flipBoardBtn:hover { background: #7b1fa2; }
        .leave-btn { background: #f44336; }
        .leave-btn:hover { background: #da190b; }
        
        /* Promotion Modal */
        #promotionModal {
            display: none;
            position: fixed;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            background: white;
            padding: 30px;
            border-radius: 15px;
            box-shadow: 0 10px 40px rgba(0,0,0,0.5);
            z-index: 1000;
        }
        #promotionModal h3 { margin-bottom: 20px; color: #333; }
        .promoChoice {
            font-size: 60px;
            margin: 10px;
            cursor: pointer;
            padding: 15px;
            border-radius: 10px;
            transition: all 0.2s;
            display: inline-block;
        }
        .promoChoice:hover { background: #f0f0f0; transform: scale(1.1); }
        #overlay { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.7); z-index: 999; }
        
        @keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.6; } }
        @keyframes flash { 0%, 100% { background-color: #d32f2f; } 50% { background-color: #ff1744; } }
        
        /* Responsive */
        @media (max-width: 768px) {
            #board { 
                grid-template-columns: repeat(8, 50px); 
                grid-template-rows: repeat(8, 50px); 
            }
            .square { width: 50px; height: 50px; }
            .piece { font-size: 36px; }
        }
    </style>
</head>
<body>
    <h1>♟️ Multiplayer Chess - Full FIDE Rules ♟️</h1>
    
    <!-- Lobby -->
    <div id="lobby">
        <h2>Welcome to Chess! ♟️</h2>
        
        <!-- Play vs Bot -->
        <div class="lobby-section">
            <h3>🤖 Play vs Bot</h3>
            <p>Practice against AI</p>
            <button onclick="startBotGame()">Play vs Bot</button>
        </div>
        
        <!-- Quick Match -->
        <div class="lobby-section">
            <h3>⚔️ Quick Match</h3>
            <p>Find random opponent</p>
            <button onclick="quickMatch()">Find Opponent</button>
        </div>
        
        <!-- Create Room -->
        <div class="lobby-section">
            <h3>🏠 Create Room</h3>
            <p>Invite friends</p>
            <button class="secondary-btn" onclick="createGame()">Create Room</button>
        </div>
        
        <!-- Join Room -->
        <div class="lobby-section">
            <h3>🔗 Join Room</h3>
            <input type="text" id="joinRoomInput" placeholder="ENTER CODE" maxlength="6">
            <button class="secondary-btn" onclick="joinGame()">Join Room</button>
        </div>
        
        <!-- Live Rooms -->
        <div class="lobby-section" style="border-color: #2196f3; background: linear-gradient(135deg, #e3f2fd 0%, #bbdefb 100%);">
            <h3>📊 Live Rooms <span id="roomCount" style="color:#2196f3;">0</span></h3>
            <div id="liveRooms" style="max-height: 220px; overflow-y: auto; font-size: 14px;">
                <p style="color:#999; text-align:center;">🔄 Loading...</p>
            </div>
        </div>
        
        <div id="statusMessage"></div>
        <div id="roomCodeDisplay" style="display:none;"></div>
    </div>
    
    <!-- Game Area -->
    <div id="gameArea">
        <div id="gameInfo">
            <div id="playerInfo">
                <span class="player-tag player-white">White: <span id="whitePlayer">♔</span></span>
                <span class="player-tag player-black">Black: <span id="blackPlayer">♚</span></span>
            </div>
            <div id="status">White's turn</div>
            <div id="moveInfo">Move 1 | 50-move: 0 | Castling: KQkq</div>
            <div id="roomCodeShare" style="display:none;">
                Room: <strong id="currentRoomCode"></strong>
                <button onclick="copyRoomCode()">📋 Copy</button>
            </div>
        </div>
        
        <div id="board"></div>
        
        <div id="controls">
            <button id="newGameBtn" onclick="newGame()" style="display:none;">🔄 New Game</button>
            <button id="flipBoardBtn" onclick="toggleBoardFlip()">🔄 Flip Board</button>
            <button onclick="offerDraw()">🤝 Offer Draw</button>
            <button class="leave-btn" onclick="leaveGame()">❌ Leave</button>
        </div>
    </div>

    <div id="overlay"></div>
    <div id="promotionModal">
        <h3>Promote Pawn To:</h3>
        <div id="promotionChoices"></div>
    </div>

    <script>
        const socket = io();
        let myColor = null;
        let currentRoomCode = null;
        let multiplayerMode = false;
        let botMode = false;
        let boardFlipped = false;
        let botThinking = false;
        
        const boardEl = document.getElementById('board');
        const statusEl = document.getElementById('status');
        const moveInfoEl = document.getElementById('moveInfo');
        const promoModal = document.getElementById('promotionModal');
        const overlay = document.getElementById('overlay');
        
        let board = Array.from({length: 8}, () => Array(8).fill(''));
        let selected = null;
        let currentPlayer = 'w';
        let kings = { w: null, b: null };
        let gameOver = false;
        let moveHistory = [];
        let positionHistory = [];
        let halfMoveClock = 0;
        let fullMoveNumber = 1;
        let lastMove = null;
        let enPassantTarget = null;
        let castlingRights = { w: {k: true, q: true}, b: {k: true, q: true} };
        let pendingPromotion = null;

        const pieces = {
            w: { K: '♔', Q: '♕', R: '♖', B: '♗', N: '♘', P: '♙' },
            b: { K: '♚', Q: '♛', R: '♜', B: '♝', N: '♞', P: '♟' }
        };

        const initialSetup = [
            ['♜','♞','♝','♛','♚','♝','♞','♜'],
            ['♟','♟','♟','♟','♟','♟','♟','♟'],
            ['','','','','','','',''],
            ['','','','','','','',''],
            ['','','','','','','',''],
            ['','','','','','','',''],
            ['♙','♙','♙','♙','♙','♙','♙','♙'],
            ['♖','♘','♗','♕','♔','♗','♘','♖']
        ];

        const pieceValues = { P: 100, N: 320, B: 330, R: 500, Q: 900, K: 20000 };

        // Socket Events
        socket.on('game-created', (data) => {
            showStatus(`Room created: ${data.roomCode}`, 'waiting');
            document.getElementById('roomCodeDisplay').textContent = data.roomCode;
            document.getElementById('roomCodeDisplay').style.display = 'block';
            myColor = data.color;
            currentRoomCode = data.roomCode;
        });
        
        socket.on('opponent-joined', () => {
            showStatus('Opponent joined! Starting...', 'playing');
            setTimeout(() => startGame(), 1000);
        });
        
        socket.on('game-joined', (data) => {
            myColor = data.color;
            currentRoomCode = data.roomCode;
            showStatus('Joined! Starting...', 'playing');
            setTimeout(() => startGame(), 1000);
        });
        
        socket.on('match-found', (data) => {
            myColor = data.color;
            currentRoomCode = data.roomCode;
            showStatus('Opponent found! Starting...', 'playing');
            setTimeout(() => startGame(), 1000);
        });
        
        socket.on('searching', (data) => {
            showStatus(data.message, 'waiting');
        });
        
        socket.on('game-start', () => {
            console.log('Game started!');
        });
        
        socket.on('opponent-move', (move) => {
            applyOpponentMove(move);
        });
        
        socket.on('opponent-disconnected', () => {
            alert('Opponent disconnected. You win!');
            leaveGame();
        });
        
        socket.on('error', (data) => {
            showStatus(data.message, 'error');
        });

        // Game Mode Functions
        function startBotGame() {
            botMode = true;
            multiplayerMode = false;
            myColor = 'w';
            showStatus('Starting bot game...', 'playing');
            setTimeout(() => startGame(), 500);
        }
        
        function quickMatch() {
            multiplayerMode = true;
            botMode = false;
            socket.emit('quick-match');
        }
        
        function createGame() {
            multiplayerMode = true;
            botMode = false;
            socket.emit('create-game');
        }
        
        function joinGame() {
            const code = document.getElementById('joinRoomInput').value.toUpperCase().trim();
            if (code.length === 6) {
                multiplayerMode = true;
                botMode = false;
                socket.emit('join-game', code);
            } else {
                showStatus('Enter valid 6-character code', 'error');
            }
        }
        
        function copyRoomCode() {
            navigator.clipboard.writeText(currentRoomCode);
            alert('Room code copied: ' + currentRoomCode);
        }
        
        function showStatus(message, type) {
            const statusEl = document.getElementById('statusMessage');
            statusEl.textContent = message;
            statusEl.className = `status-${type}`;
            statusEl.style.display = 'block';
        }
        
        function startGame() {
            document.getElementById('lobby').style.display = 'none';
            const gameArea = document.getElementById('gameArea');
            gameArea.classList.add('active');
            document.getElementById('newGameBtn').style.display = botMode ? 'inline-block' : 'none';
            
            if (botMode) {
                document.getElementById('whitePlayer').textContent = 'You ♔';
                document.getElementById('blackPlayer').textContent = 'Bot ♚';
            } else if (multiplayerMode) {
                document.getElementById('whitePlayer').textContent = myColor === 'w' ? 'You ♔' : 'Opponent ♔';
                document.getElementById('blackPlayer').textContent = myColor === 'b' ? 'You ♚' : 'Opponent ♚';
                document.getElementById('currentRoomCode').textContent = currentRoomCode;
                document.getElementById('roomCodeShare').style.display = 'block';
                if (myColor === 'b') flipBoard();
            }
            initBoard();
        }
        
        function newGame() {
            if (confirm('Start new game vs bot?')) {
                initBoard();
            }
        }
        
        function leaveGame() {
            location.reload();
        }
        
        function toggleBoardFlip() {
            flipBoard();
        }
        
        function flipBoard() {
            boardFlipped = !boardFlipped;
            boardEl.classList.toggle('flipped', boardFlipped);
        }

        function initBoard() {
            board = initialSetup.map(row => [...row]);
            updateKings();
            currentPlayer = 'w';
            gameOver = false;
            selected = null;
            moveHistory = [];
            positionHistory = [];
            halfMoveClock = 0;
            fullMoveNumber = 1;
            lastMove = null;
            enPassantTarget = null;
            castlingRights = { w: {k: true, q: true}, b: {k: true, q: true} };
            pendingPromotion = null;
            botThinking = false;
            savePosition();
            
            boardEl.innerHTML = '';
            for (let r = 0; r < 8; r++) {
                for (let c = 0; c < 8; c++) {
                    const square = document.createElement('div');
                    const file = String.fromCharCode(97 + c);
                    const rank = 8 - r;
                    square.className = `square ${((r + c) % 2 === 1) ? 'light' : 'dark'}`;
                    square.dataset.row = r;
                    square.dataset.col = c;
                    
                    const coordLabel = document.createElement('span');
                    coordLabel.className = 'coord-label';
                    coordLabel.textContent = file + rank;
                    square.appendChild(coordLabel);
                    
                    square.addEventListener('dragover', handleDragOver);
                    square.addEventListener('drop', handleDrop);
                    square.addEventListener('click', handleClick);
                    boardEl.appendChild(square);
                }
            }
            render();
        }

        // BOT AI
        function botMove() {
            if (gameOver || currentPlayer !== 'b' || botThinking) return;
            
            botThinking = true;
            statusEl.textContent = '🤖 Bot thinking...';
            statusEl.style.color = '#2196f3';
            
            setTimeout(() => {
                const allMoves = [];
                for (let r = 0; r < 8; r++) {
                    for (let c = 0; c < 8; c++) {
                        if (getPieceColor(board[r][c]) === 'b') {
                            const moves = getValidMoves(r, c);
                            moves.forEach(move => {
                                allMoves.push({ from: {r, c}, to: move });
                            });
                        }
                    }
                }
                
                if (allMoves.length === 0) {
                    botThinking = false;
                    return;
                }
                
                let bestMove = null;
                let bestScore = -Infinity;
                
                for (const move of allMoves) {
                    const score = evaluateMove(move.from.r, move.from.c, move.to.row, move.to.col);
                    if (score > bestScore) {
                        bestScore = score;
                        bestMove = move;
                    }
                }
                
                if (bestMove) {
                    executeMove(bestMove.from.r, bestMove.from.c, bestMove.to.row, bestMove.to.col);
                }
                
                botThinking = false;
            }, 800);
        }

        function evaluateMove(fr, fc, tr, tc) {
            let score = Math.random() * 10;
            if (board[tr][tc]) {
                const capturedType = getPieceType(board[tr][tc]);
                score += pieceValues[capturedType] || 0;
            }
            if (tr >= 3 && tr <= 4 && tc >= 3 && tc <= 4) {
                score += 30;
            }
            const type = getPieceType(board[fr][fc]);
            if (type === 'N' || type === 'B') {
                if (fr === 0) score += 20;
            }
            return score;
        }

        function getPieceType(piece) {
            const types = { '♙':'P', '♟':'P', '♘':'N', '♞':'N', '♗':'B', '♝':'B', '♖':'R', '♜':'R', '♕':'Q', '♛':'Q', '♔':'K', '♚':'K' };
            return types[piece] || '';
        }

        function getPieceColor(piece) {
            if (!piece) return null;
            return ['♔','♕','♖','♗','♘','♙'].includes(piece) ? 'w' : 'b';
        }

        function updateKings() {
            kings = { w: null, b: null };
            for (let r = 0; r < 8; r++) {
                for (let c = 0; c < 8; c++) {
                    if (board[r][c] === '♔') kings.w = {r, c};
                    if (board[r][c] === '♚') kings.b = {r, c};
                }
            }
        }

        function savePosition() {
            const pos = board.map(row => row.join('')).join('|') + `|${currentPlayer}|${JSON.stringify(castlingRights)}|${enPassantTarget}`;
            positionHistory.push(pos);
        }

        function isThreefoldRepetition() {
            const currentPos = positionHistory[positionHistory.length - 1];
            return positionHistory.filter(p => p === currentPos).length >= 3;
        }

        function hasInsufficientMaterial() {
            const pieces = [];
            for (let r = 0; r < 8; r++) {
                for (let c = 0; c < 8; c++) {
                    if (board[r][c]) pieces.push(getPieceType(board[r][c]));
                }
            }
            if (pieces.length === 2) return true;
            if (pieces.length === 3 && (pieces.includes('N') || pieces.includes('B'))) return true;
            return false;
        }

        function isSquareAttacked(row, col, byColor) {
            for (let r = 0; r < 8; r++) {
                for (let c = 0; c < 8; c++) {
                    if (getPieceColor(board[r][c]) === byColor) {
                        const moves = getRawMoves(r, c, byColor);
                        if (moves.some(m => m.row === row && m.col === col)) return true;
                    }
                }
            }
            return false;
        }

        function isInCheck(color) {
            const king = kings[color];
            if (!king) return false;
            return isSquareAttacked(king.r, king.c, color === 'w' ? 'b' : 'w');
        }

        function hasLegalMoves(color) {
            for (let r = 0; r < 8; r++) {
                for (let c = 0; c < 8; c++) {
                    if (getPieceColor(board[r][c]) === color && getValidMoves(r, c).length > 0) {
                        return true;
                    }
                }
            }
            return false;
        }

        function isCheckmate(color) {
            return isInCheck(color) && !hasLegalMoves(color);
        }

        function isStalemate(color) {
            return !isInCheck(color) && !hasLegalMoves(color);
        }

        function render() {
            document.querySelectorAll('.square').forEach(sq => {
                const r = parseInt(sq.dataset.row);
                const c = parseInt(sq.dataset.col);
                const existingPiece = sq.querySelector('.piece');
                
                sq.classList.remove('selected', 'valid', 'capture', 'check', 'checkmate', 'lastMove');
                
                if (board[r][c]) {
                    const pieceColor = getPieceColor(board[r][c]);
                    const canDrag = !gameOver && pieceColor === currentPlayer && 
                        (!multiplayerMode || pieceColor === myColor) && 
                        !(botMode && pieceColor === 'b');
                    
                    if (existingPiece && existingPiece.textContent === board[r][c]) {
                        existingPiece.draggable = canDrag;
                        existingPiece.style.cursor = canDrag ? 'grab' : 'default';
                    } else {
                        if (existingPiece) existingPiece.remove();
                        const piece = document.createElement('span');
                        piece.className = 'piece';
                        piece.draggable = canDrag;
                        piece.style.cursor = canDrag ? 'grab' : 'default';
                        piece.dataset.row = r;
                        piece.dataset.col = c;
                        piece.textContent = board[r][c];
                        if (canDrag) piece.addEventListener('dragstart', handleDragStart);
                        sq.appendChild(piece);
                    }
                } else {
                    if (existingPiece) existingPiece.remove();
                }
                
                if (selected && selected.row === r && selected.col === c) sq.classList.add('selected');
                if (lastMove && ((lastMove.from.r === r && lastMove.from.c === c) || (lastMove.to.r === r && lastMove.to.c === c))) {
                    sq.classList.add('lastMove');
                }
            });

            const inCheck = isInCheck(currentPlayer);
            const mate = isCheckmate(currentPlayer);
            const stale = isStalemate(currentPlayer);
            const draw50 = halfMoveClock >= 100;
            const drawRep = isThreefoldRepetition();
            const drawMat = hasInsufficientMaterial();
            
            if (mate) {
                const winner = currentPlayer === 'w' ? 'Black' : 'White';
                statusEl.textContent = `🏆 ${winner} WINS by CHECKMATE! 🏆`;
                statusEl.style.color = '#4caf50';
                gameOver = true;
                const king = kings[currentPlayer];
                if (king) document.querySelector(`[data-row="${king.r}"][data-col="${king.c}"]`)?.classList.add('checkmate');
                if (multiplayerMode) socket.emit('game-over', { roomCode: currentRoomCode, result: 'checkmate' });
            } else if (stale) {
                statusEl.textContent = `½-½ DRAW by STALEMATE`;
                statusEl.style.color = '#ff9800';
                gameOver = true;
            } else if (draw50) {
                statusEl.textContent = `½-½ DRAW by 50-MOVE RULE`;
                statusEl.style.color = '#ff9800';
                gameOver = true;
            } else if (drawRep) {
                statusEl.textContent = `½-½ DRAW by THREEFOLD REPETITION`;
                statusEl.style.color = '#ff9800';
                gameOver = true;
            } else if (drawMat) {
                statusEl.textContent = `½-½ DRAW by INSUFFICIENT MATERIAL`;
                statusEl.style.color = '#ff9800';
                gameOver = true;
            } else if (inCheck) {
                statusEl.textContent = `⚠️ ${currentPlayer === 'w' ? 'White' : 'Black'} in CHECK! ⚠️`;
                statusEl.style.color = '#f44336';
                const king = kings[currentPlayer];
                if (king) document.querySelector(`[data-row="${king.r}"][data-col="${king.c}"]`)?.classList.add('check');
            } else {
                if (botMode) {
                    if (currentPlayer === 'w') {
                        statusEl.textContent = '🟢 Your turn';
                        statusEl.style.color = '#333';
                    } else {
                        statusEl.textContent = '🤖 Bot thinking...';
                        statusEl.style.color = '#2196f3';
                    }
                } else if (multiplayerMode) {
                    statusEl.textContent = currentPlayer === myColor ? '🟢 Your turn' : "⏳ Opponent's turn";
                    statusEl.style.color = '#333';
                } else {
                    statusEl.textContent = `${currentPlayer === 'w' ? 'White' : 'Black'}'s turn`;
                    statusEl.style.color = '#333';
                }
            }
            
            moveInfoEl.textContent = `Move ${fullMoveNumber} | 50-move: ${halfMoveClock} | Castling: ${getCastlingStr()}`;
            
            if (botMode && currentPlayer === 'b' && !gameOver && !botThinking) {
                setTimeout(botMove, 300);
            }
        }

        function getCastlingStr() {
            let str = '';
            if (castlingRights.w.k) str += 'K';
            if (castlingRights.w.q) str += 'Q';
            if (castlingRights.b.k) str += 'k';
            if (castlingRights.b.q) str += 'q';
            return str || 'none';
        }

        function handleClick(e) {
            if (gameOver || botThinking) return;
            if ((multiplayerMode && currentPlayer !== myColor) || (botMode && currentPlayer === 'b')) return;
            
            const r = parseInt(e.currentTarget.dataset.row);
            const c = parseInt(e.currentTarget.dataset.col);
            
            if (selected) {
                if (selected.row === r && selected.col === c) {
                    selected = null;
                    render();
                } else {
                    attemptMove(selected.row, selected.col, r, c);
                }
            } else if (board[r][c] && getPieceColor(board[r][c]) === currentPlayer) {
                selected = { row: r, col: c };
                showValidMoves(r, c);
                render();
            }
        }

        function handleDragStart(e) {
            if (gameOver || botThinking) return e.preventDefault();
            if ((multiplayerMode && currentPlayer !== myColor) || (botMode && currentPlayer === 'b')) return e.preventDefault();
            
            const r = parseInt(e.target.dataset.row);
            const c = parseInt(e.target.dataset.col);
            const piece = board[r][c];
            if (!piece || getPieceColor(piece) !== currentPlayer) return e.preventDefault();
            
            selected = { row: r, col: c };
            e.dataTransfer.setData('text/plain', `${r},${c}`);
            e.dataTransfer.effectAllowed = 'move';
            setTimeout(() => showValidMoves(r, c), 0);
        }

        function handleDragOver(e) {
            e.preventDefault();
            e.dataTransfer.dropEffect = 'move';
        }

        function handleDrop(e) {
            e.preventDefault();
            if (gameOver || !selected || botThinking) return;
            if ((multiplayerMode && currentPlayer !== myColor) || (botMode && currentPlayer === 'b')) return;
            
            const toRow = parseInt(e.currentTarget.dataset.row);
            const toCol = parseInt(e.currentTarget.dataset.col);
            attemptMove(selected.row, selected.col, toRow, toCol);
        }

        function attemptMove(fr, fc, tr, tc) {
            if (isValidMove(fr, fc, tr, tc)) {
                executeMove(fr, fc, tr, tc);
            }
            selected = null;
            render();
        }

        function executeMove(fr, fc, tr, tc) {
            const piece = board[fr][fc];
            const type = getPieceType(piece);
            const capturedPiece = board[tr][tc];
            
            if (type === 'P' || capturedPiece) {
                halfMoveClock = 0;
            } else {
                halfMoveClock++;
            }
            
            if (type === 'P' && enPassantTarget && tr === enPassantTarget.r && tc === enPassantTarget.c) {
                board[fr][tc] = '';
            }
            
            if (type === 'K' && Math.abs(tc - fc) === 2) {
                if (tc === 6) {
                    board[fr][5] = board[fr][7];
                    board[fr][7] = '';
                } else if (tc === 2) {
                    board[fr][3] = board[fr][0];
                    board[fr][0] = '';
                }
            }
            
            board[tr][tc] = piece;
            board[fr][fc] = '';
            
            if (type === 'K') {
                castlingRights[currentPlayer].k = false;
                castlingRights[currentPlayer].q = false;
            }
            if (type === 'R') {
                if (fc === 0) castlingRights[currentPlayer].q = false;
                if (fc === 7) castlingRights[currentPlayer].k = false;
            }
            
            enPassantTarget = null;
            if (type === 'P' && Math.abs(tr - fr) === 2) {
                enPassantTarget = { r: (fr + tr) / 2, c: tc };
            }
            
            if (type === 'P' && (tr === 0 || tr === 7)) {
                pendingPromotion = { fromR: fr, fromC: fc, toR: tr, toC: tc };
                showPromotionModal(tr, tc);
                return;
            }
            
            completeMove(fr, fc, tr, tc);
        }

        // ✅ FIXED: Now includes currentPlayer in transmitted data
        function completeMove(fr, fc, tr, tc) {
    updateKings();
    lastMove = { from: { r: fr, c: fc }, to: { r: tr, c: tc } };

    // 1) toggle turn first so gameState represents the next side to move
    if (currentPlayer === 'b') fullMoveNumber++;
    currentPlayer = currentPlayer === 'w' ? 'b' : 'w';

    // 2) send the updated state including currentPlayer
    if (multiplayerMode) {
        const move = {
            from: { r: fr, c: fc },
            to: { r: tr, c: tc },
            piece: board[tr][tc],
            gameState: {
                board: board.map(row => [...row]),
                castlingRights: JSON.parse(JSON.stringify(castlingRights)),
                enPassantTarget,
                halfMoveClock,
                fullMoveNumber,
                currentPlayer
            }
        };
        socket.emit('move', { roomCode: currentRoomCode, move });
    }

    savePosition();
    render();
}


        // ✅ FIXED: Now uses received currentPlayer
        function applyOpponentMove(move) {
    const { from, to } = move;
    const piece = board[from.r][from.c];
    const type = getPieceType(piece);

    if (type === 'P' && enPassantTarget && to.r === enPassantTarget.r && to.c === enPassantTarget.c) {
        board[from.r][to.c] = '';
    }

    if (type === 'K' && Math.abs(to.c - from.c) === 2) {
        if (to.c === 6) {
            board[from.r][5] = board[from.r][7];
            board[from.r][7] = '';
        } else if (to.c === 2) {
            board[from.r][3] = board[from.r][0];
            board[from.r][0] = '';
        }
    }

    board[to.r][to.c] = board[from.r][from.c];
    board[from.r][from.c] = '';

    castlingRights  = move.gameState.castlingRights;
    enPassantTarget = move.gameState.enPassantTarget;
    halfMoveClock   = move.gameState.halfMoveClock;
    fullMoveNumber  = move.gameState.fullMoveNumber;
    currentPlayer   = move.gameState.currentPlayer;  // ✅ critical fix

    lastMove = { from: move.from, to: move.to };
    updateKings();
    savePosition();
    render();
}

        function showPromotionModal(r, c) {
            const color = getPieceColor(board[r][c]);
            const choices = ['Q', 'R', 'B', 'N'];
            const choicesDiv = document.getElementById('promotionChoices');
            choicesDiv.innerHTML = '';
            
            choices.forEach(type => {
                const span = document.createElement('span');
                span.className = 'promoChoice';
                span.textContent = pieces[color][type];
                span.onclick = () => promotePawn(r, c, type);
                choicesDiv.appendChild(span);
            });
            
            overlay.style.display = 'block';
            promoModal.style.display = 'block';
        }

        function promotePawn(r, c, type) {
            const color = getPieceColor(board[r][c]);
            board[r][c] = pieces[color][type];
            overlay.style.display = 'none';
            promoModal.style.display = 'none';
            
            const move = pendingPromotion;
            pendingPromotion = null;
            completeMove(move.fromR, move.fromC, move.toR, move.toC);
        }

        function addSliderMoves(r, c, directions, moves, forColor) {
            for (const [dr, dc] of directions) {
                let nr = r + dr, nc = c + dc;
                while (nr >= 0 && nr < 8 && nc >= 0 && nc < 8) {
                    if (!board[nr][nc]) {
                        moves.push({row: nr, col: nc});
                    } else {
                        if (getPieceColor(board[nr][nc]) !== forColor) moves.push({row: nr, col: nc});
                        break;
                    }
                    nr += dr; nc += dc;
                }
            }
        }

        function getRawMoves(r, c, forColor = null) {
            const piece = board[r][c];
            if (!piece) return [];
            const type = getPieceType(piece);
            const color = forColor || getPieceColor(piece);
            const moves = [];
            const isValidPos = (pr, pc) => pr >= 0 && pr < 8 && pc >= 0 && pc < 8;

            switch (type) {
                case 'P':
                    const dir = color === 'w' ? -1 : 1;
                    const startRow = color === 'w' ? 6 : 1;
                    if (!board[r + dir]?.[c]) {
                        moves.push({row: r + dir, col: c});
                        if (r === startRow && !board[r + 2 * dir]?.[c]) moves.push({row: r + 2 * dir, col: c});
                    }
                    for (const dc of [-1, 1]) {
                        const nr = r + dir, nc = c + dc;
                        if (isValidPos(nr, nc)) {
                            if (board[nr][nc] && getPieceColor(board[nr][nc]) !== color) moves.push({row: nr, col: nc});
                            if (enPassantTarget && nr === enPassantTarget.r && nc === enPassantTarget.c) moves.push({row: nr, col: nc});
                        }
                    }
                    break;
                case 'N':
                    [[2,1],[2,-1],[-2,1],[-2,-1],[1,2],[1,-2],[-1,2],[-1,-2]].forEach(([dr, dc]) => {
                        const nr = r + dr, nc = c + dc;
                        if (isValidPos(nr, nc) && getPieceColor(board[nr][nc]) !== color) moves.push({row: nr, col: nc});
                    });
                    break;
                case 'B':
                    addSliderMoves(r, c, [[1,1],[1,-1],[-1,1],[-1,-1]], moves, color);
                    break;
                case 'R':
                    addSliderMoves(r, c, [[0,1],[0,-1],[1,0],[-1,0]], moves, color);
                    break;
                case 'Q':
                    addSliderMoves(r, c, [[0,1],[0,-1],[1,0],[-1,0],[1,1],[1,-1],[-1,1],[-1,-1]], moves, color);
                    break;
                case 'K':
                    [[0,1],[0,-1],[1,0],[-1,0],[1,1],[1,-1],[-1,1],[-1,-1]].forEach(([dr, dc]) => {
                        const nr = r + dr, nc = c + dc;
                        if (isValidPos(nr, nc) && getPieceColor(board[nr][nc]) !== color) moves.push({row: nr, col: nc});
                    });
                    if (forColor === currentPlayer && !isInCheck(color)) {
                        const row = color === 'w' ? 7 : 0;
                        if (castlingRights[color].k && !board[row][5] && !board[row][6] && 
                            !isSquareAttacked(row, 5, color === 'w' ? 'b' : 'w') && !isSquareAttacked(row, 6, color === 'w' ? 'b' : 'w')) {
                            moves.push({row, col: 6});
                        }
                        if (castlingRights[color].q && !board[row][1] && !board[row][2] && !board[row][3] &&
                            !isSquareAttacked(row, 2, color === 'w' ? 'b' : 'w') && !isSquareAttacked(row, 3, color === 'w' ? 'b' : 'w')) {
                            moves.push({row, col: 2});
                        }
                    }
                    break;
            }
            return moves;
        }

        function getValidMoves(r, c) {
            const piece = board[r][c];
            if (!piece || getPieceColor(piece) !== currentPlayer) return [];
            const rawMoves = getRawMoves(r, c, currentPlayer);
            
            return rawMoves.filter(move => {
                const oldBoard = board.map(row => [...row]);
                const oldKings = {...kings};
                const oldEnPassant = enPassantTarget;
                
                const movingPiece = board[r][c];
                board[move.row][move.col] = movingPiece;
                board[r][c] = '';
                
                if (getPieceType(movingPiece) === 'P' && oldEnPassant && move.row === oldEnPassant.r && move.col === oldEnPassant.c) {
                    board[r][move.col] = '';
                }
                
                updateKings();
                const safe = !isInCheck(currentPlayer);
                
                board = oldBoard;
                kings = oldKings;
                enPassantTarget = oldEnPassant;
                
                return safe;
            });
        }

        function showValidMoves(r, c) {
            const moves = getValidMoves(r, c);
            document.querySelectorAll('.square').forEach(sq => {
                const tr = parseInt(sq.dataset.row), tc = parseInt(sq.dataset.col);
                const move = moves.find(m => m.row === tr && m.col === tc);
                if (move) sq.classList.add(board[tr][tc] || (enPassantTarget && tr === enPassantTarget.r && tc === enPassantTarget.c) ? 'capture' : 'valid');
            });
        }

        function isValidMove(fr, fc, tr, tc) {
            return getValidMoves(fr, fc).some(m => m.row === tr && m.col === tc);
        }

        function offerDraw() {
            if (gameOver) return;
            if (confirm(`${currentPlayer === 'w' ? 'Black' : 'White'}, do you accept the draw offer?`)) {
                statusEl.textContent = '½-½ DRAW by AGREEMENT';
                statusEl.style.color = '#ff9800';
                gameOver = true;
            }
        }

        // Live Rooms Update
        function updateLiveRooms() {
            const roomsDiv = document.getElementById('liveRooms');
            const countSpan = document.getElementById('roomCount');
            
            fetch('/rooms')
                .then(res => {
                    if (!res.ok) throw new Error(`HTTP ${res.status}`);
                    return res.json();
                })
                .then(data => {
                    countSpan.textContent = data.activeRooms || 0;
                    
                    if (!data || data.activeRooms === undefined) {
                        roomsDiv.innerHTML = '<p style="color:#f44336;">❌ Unavailable</p>';
                        return;
                    }
                    
                    if (data.activeRooms === 0) {
                        roomsDiv.innerHTML = '<p style="color:#666; text-align:center;">📭 No active rooms<br><small>Create one above! 👆</small></p>';
                        return;
                    }
                    
                    roomsDiv.innerHTML = Object.entries(data.rooms || {}).map(([code, info]) => `
                        <div style="padding:12px; margin:6px 0; border-radius:8px; background:#f8f9fa; border-left:4px solid ${info.status === 'full' ? '#4caf50' : '#ff9800'}; cursor:pointer; transition:all 0.2s;"
                             onclick="document.getElementById('joinRoomInput').value='${code}'; document.getElementById('joinRoomInput').focus();">
                            <div style="font-weight:600; font-size:16px;">${code}</div>
                            <div style="color:#666; font-size:14px;">
                                ${info.players}/2 players 
                                <span style="color:${info.status === 'full' ? '#4caf50' : '#ff9800'}; font-weight:600;">
                                    ${info.status.toUpperCase()}
                                </span>
                            </div>
                        </div>
                    `).join('');
                })
                .catch(err => {
                    console.error('Live rooms error:', err);
                    roomsDiv.innerHTML = '<p style="color:#f44336;">❌ Cannot load</p>';
                });
        }

        setInterval(updateLiveRooms, 3000);
        updateLiveRooms();
    </script>
</body>
</html>