<!DOCTYPE html>
<html>

<head>
    <style>
        body {
            font-family: sans-serif;
            display: flex;
            flex-direction: column;
            align-items: center;
            background-color: #2c2c2c;
            color: #f0f0f0;
        }

        h2 {
            margin-bottom: 5px;
        }

        .info {
            margin-bottom: 15px;
            text-align: center;
        }

        .board {
            display: grid;
            grid-template-columns: repeat(8, 45px);
            grid-template-rows: repeat(8, 45px);
            border: 5px solid #4a4a4a;
        }

        .square {
            width: 45px;
            height: 45px;
            display: flex;
            justify-content: center;
            align-items: center;
            font-size: 35px;
            cursor: pointer;
            user-select: none;
        }

        .white {
            background-color: #eeeed2;
            color: black;
        }

        .black {
            background-color: #769656;
            color: black;
        }

        .selected {
            background-color: #bbcb2b !important;
        }

        .controls {
            margin-top: 20px;
            display: flex;
            flex-direction: column;
            gap: 10px;
            background: #3c3c3c;
            padding: 15px;
            border-radius: 8px;
        }

        input,
        button {
            padding: 8px;
            border-radius: 4px;
            border: none;
        }

        button {
            background-color: #769656;
            color: white;
            cursor: pointer;
            font-weight: bold;
        }

        button:hover {
            background-color: #567636;
        }

        #status {
            margin-top: 10px;
            font-weight: bold;
            color: #ffd700;
            height: 20px;
        }
    </style>
</head>

<body>
    <h2>Chess MCP</h2>
    <div class="info">
        <div>Game ID: {{ game_id }}</div>
        <div style="font-size: 1.1em; margin-top: 5px;">You are: <strong>{{ user_side }}</strong></div>
        <div style="color: #aaa;">To Move: {{ display_turn }}</div>
    </div>

    <div id="board" class="board"></div>

    <div class="controls">
        <div>
            <label>Move (UCI): <input type="text" id="uciInput" placeholder="e.g. e2e4"></label>
        </div>
        <div>
            <label><input type="checkbox" id="chkClaimWin"> Claim Checkmate/Win</label>
        </div>
        <button onclick="submitMove()">Submit Move</button>
    </div>
    <div id="status"></div>

    <script>
        const fen = "{{ fen }}";
        const gameId = "{{ game_id }}";
        const isWhitePerspective = "{{ is_white_perspective }}" === "True";

        function renderBoard() {
            const boardEl = document.getElementById('board');
            boardEl.innerHTML = '';

            const rows = fen.split(' ')[0].split('/');

            // FEN rows are Rank 8 down to Rank 1
            // If White Perspective: Render Row 0 (Rank 8) to Row 7 (Rank 1)
            // If Black Perspective: Render Row 7 (Rank 1) to Row 0 (Rank 8) ? 
            // Actually, we just need to iterate the grid differently.

            // Let's create a 2D array first for easier manipulation
            let grid = [];
            for (let r = 0; r < 8; r++) {
                let rowArr = [];
                const rankStr = rows[r];
                for (let i = 0; i < rankStr.length; i++) {
                    const char = rankStr[i];
                    if (isNaN(char)) {
                        rowArr.push(char);
                    } else {
                        const empties = parseInt(char);
                        for (let k = 0; k < empties; k++) {
                            rowArr.push(null);
                        }
                    }
                }
                grid.push(rowArr);
            }

            // Render Loops
            // White: r=0 (Rank 8) -> r=7 (Rank 1). c=0 (File a) -> c=7 (File h)
            // Black: r=7 (Rank 1) -> r=0 (Rank 8). c=7 (File h) -> c=0 (File a)

            const startR = isWhitePerspective ? 0 : 7;
            const endR = isWhitePerspective ? 8 : -1;
            const stepR = isWhitePerspective ? 1 : -1;

            const startC = isWhitePerspective ? 0 : 7;
            const endC = isWhitePerspective ? 8 : -1;
            const stepC = isWhitePerspective ? 1 : -1;

            for (let r = startR; r !== endR; r += stepR) {
                for (let c = startC; c !== endC; c += stepC) {
                    createSquare(r, c, grid[r][c]);
                }
            }
        }

        const pieceMap = {
            'r': '♜', 'n': '♞', 'b': '♝', 'q': '♛', 'k': '♚', 'p': '♟',
            'R': '♖', 'N': '♘', 'B': '♗', 'Q': '♕', 'K': '♔', 'P': '♙'
        };

        let selectedSq = null;

        function createSquare(row, col, pieceChar) {
            const div = document.createElement('div');
            // Color logic: (row+col)%2==0 is Light.
            // But 'row' index from FEN (0=Rank8) matches standard odd/even check?
            // Rank 8 (index 0) + File a (index 0) = 0 -> Light. Correct (a8 is light).
            const isLight = (row + col) % 2 === 0;
            div.className = 'square ' + (isLight ? 'white' : 'black');

            // Store logical coordinates for click handling
            div.dataset.row = row;
            div.dataset.col = col;

            if (pieceChar) {
                div.textContent = pieceMap[pieceChar] || pieceChar;
            }

            div.onclick = () => onSquareClick(row, col, div);
            document.getElementById('board').appendChild(div);
        }

        function onSquareClick(row, col, divElement) {
            const file = String.fromCharCode(97 + col);
            const rank = 8 - row;
            const coord = file + rank;

            // Clear previous selection highlight
            document.querySelectorAll('.selected').forEach(el => el.classList.remove('selected'));

            if (!selectedSq) {
                // Select From
                selectedSq = coord;
                divElement.classList.add('selected');
                document.getElementById('status').innerText = "Selected: " + coord;
            } else {
                // Select To
                const move = selectedSq + coord;
                document.getElementById('uciInput').value = move;
                selectedSq = null; // Reset selection
                document.getElementById('status').innerText = "Ready to submit: " + move;
            }
        }

        function submitMove() {
            const move = document.getElementById('uciInput').value;
            if (!move) {
                alert("Please enter or select a move");
                return;
            }

            const claimWin = document.getElementById('chkClaimWin').checked;

            // Post Message to MCP Host
            window.parent.postMessage({
                type: 'tool',
                payload: {
                    toolName: 'finishTurn',
                    params: {
                        game_id: gameId,
                        move: move,
                        claim_win: claimWin
                    }
                }
            }, '*');

            document.getElementById('status').innerText = "Submitted: " + move + "...";
            // Disable button to prevent double submit
            document.querySelector('button').disabled = true;
        }

        renderBoard();
    </script>
</body>

</html>