<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Animals at War - Game</title>
    <link rel="stylesheet" href="/static/css/style.css">
    <script src="https://cdn.socket.io/4.7.2/socket.io.min.js"></script>
</head>
<body>
    <div id="game-container" class="container">
        <div id="status-bar">
            <div id="player-info">
                <span id="my-nickname"></span> | <span id="opponent-nickname">Connecting...</span>
            </div>
            <div id="turn-info">Waiting for players...</div>
        </div>

        <div id="game-board">
            <!-- Grid will be generated by JS -->
        </div>

        <div id="controls">
            <button id="btn-end-turn" class="btn btn-primary" disabled>End Turn</button>
        </div>

        <div id="error-msg" class="error"></div>
    </div>

    <script>
        const urlParams = new URLSearchParams(window.location.search);
        const room_id = "{{ room_id }}";
        const socket = io();

        const nicknameInput = document.getElementById('my-nickname');
        const opponentNickname = document.getElementById('opponent-nickname');
        const turnInfo = document.getElementById('turn-info');
        const errorMsg = document.getElementById('error-msg');
        const board = document.getElementById('game-board');

        // Reconnection logic
        const playerToken = localStorage.getItem('player_token');
        const savedNickname = prompt("Enter your nickname to join/reconnect:") || "Guest";
        localStorage.setItem('nickname', savedNickname);

        // Initialize connection
        socket.on('connect', () => {
            console.log("Connected to server");
            if (playerToken && room_id) {
                // Attempt to rejoin existing room
                socket.emit('join_game', {
                    room_id: room_id,
                    player_token: playerToken,
                    nickname: savedNickname
                });
            } else {
                // First time joining via link (if token not in localStorage)
                // In a real app, the link would contain the token
                // For this demo, we'll try to join as a new player if no token exists
                socket.emit('join_game', {
                    room_id: room_id, // Note: backend uses room_id
                    nickname: savedNickname
                });
            }
        });

        socket.on('game_joined', (data) => {
            console.log("Joined room:", data.room_id);
            // Initialize board...
        });

        socket.on('player_joined', (data) => {
            opponentNickname.innerText = data.nickname;
        });

        socket.on('error', (data) => {
            errorMsg.innerText = data.message;
        });

        // Placeholder for board generation
        for (let i = 0; i < 100; i++) {
            const cell = document.createElement('div');
            cell.className = 'cell';
            board.appendChild(cell);
        }
    </script>
</body>
</html>
