{% extends "global/Page.html" %}
{% load otree %}

{% block title %}KenKen Puzzle{% endblock %}

{% block content %}
<h2 id="puzzle-title" style="text-align: center; margin-bottom: 20px;">Puzzle Number 1</h2>

<div id="puzzle-container" style="width: fit-content; margin: auto; padding: 20px;"></div>
<div style="text-align: center; margin-top: 20px;">
    <button id="reset-button" type="button">Reset</button>
    <button id="submit-button" type="button">Submit</button>
</div>
<div id="points-container" style="text-align: center; margin-top: 20px;"></div>
<div style="text-align: center; margin-top: 20px;">
    <button id="next-button" type="button" style="display: none; margin: 0 auto; display: inline-block;">Next Puzzle</button>
</div>


<link rel="stylesheet" href="/static/kenken.css">
<script src="{% static 'otree/js/live.js' %}"></script>
<script>
    let puzzleNumber = {{ puzzle_number }};
    let puzzleData = {{ puzzle_data|safe }};
    let puzzleState = {};

    const resetButton = document.getElementById('reset-button');
    const submitButton = document.getElementById('submit-button');
    const nextButton = document.getElementById('next-button');
    const pointsContainer = document.getElementById('points-container');

    function renderPuzzle(data, feedback = null) {
        document.getElementById('puzzle-title').textContent = `Puzzle Number ${puzzleNumber}`;
        puzzleData = data;
        const container = document.getElementById('puzzle-container');
        container.innerHTML = '';
        const size = data.size;
        const cages = data.cages;

        const targetGrid = Array.from({ length: size }, () => Array(size).fill(null));
        cages.forEach(cage => {
            const target = `${cage.target}${cage.operator || ''}`;
            const [firstCell] = cage.cells;
            targetGrid[firstCell[0]][firstCell[1]] = target;
        });

        for (let row = 0; row < size; row++) {
            const rowDiv = document.createElement('div');
            rowDiv.style.display = 'flex';

            for (let col = 0; col < size; col++) {
                const cell = document.createElement('div');
                cell.id = `cell-${row}-${col}`;
                cell.style.border = '1px solid black';
                cell.style.width = '120px';
                cell.style.height = '120px';
                cell.style.display = 'flex';
                cell.style.justifyContent = 'center';
                cell.style.alignItems = 'center';
                cell.style.position = 'relative';
                cell.style.cursor = 'pointer';

                if (feedback && feedback[row][col] !== null) {
                    // Color cells based on correctness
                    cell.style.backgroundColor = feedback[row][col] ? 'lightgreen' : 'lightcoral';
                }

                const targetDiv = document.createElement('div');
                targetDiv.style.position = 'absolute';
                targetDiv.style.top = '5px';
                targetDiv.style.left = '5px';
                targetDiv.style.fontSize = '24px';
                targetDiv.textContent = targetGrid[row][col] || '';
                cell.appendChild(targetDiv);

                const input = document.createElement('input');
                input.type = 'text';
                input.style.width = '100%';
                input.style.height = '100%';
                input.style.border = 'none';
                input.style.textAlign = 'center';
                input.style.fontSize = '24px';

                const cellKey = `${row}-${col}`;
                if (puzzleState[cellKey]) {
                    input.value = puzzleState[cellKey];
                }

                input.addEventListener('input', (e) => {
                    const value = e.target.value;
                    // Only allow digits 1-9 or empty
                    if (/^[1-9]?$/.test(value)) {
                        puzzleState[cellKey] = value;
                        liveSend({ type: 'update', update: { row, col, value } });
                    } else {
                        e.target.value = '';
                        delete puzzleState[cellKey];
                    }
                });

                // Disable inputs if feedback is shown (puzzle locked)
                if (feedback) {
                    input.disabled = true;
                }

                cell.appendChild(input);
                rowDiv.appendChild(cell);
            }
            container.appendChild(rowDiv);
        }

        // Draw heavier cage borders
        cages.forEach(cage => {
            cage.cells.forEach(([row, col]) => {
                const cell = document.getElementById(`cell-${row}-${col}`);
                const neighbors = cage.cells.filter(([r, c]) => Math.abs(r - row) + Math.abs(c - col) === 1);

                if (!neighbors.some(([r, c]) => r === row - 1 && c === col)) {
                    cell.style.borderTop = '5px solid black';
                }
                if (!neighbors.some(([r, c]) => r === row + 1 && c === col)) {
                    cell.style.borderBottom = '5px solid black';
                }
                if (!neighbors.some(([r, c]) => r === row && c === col - 1)) {
                    cell.style.borderLeft = '5px solid black';
                }
                if (!neighbors.some(([r, c]) => r === row && c === col + 1)) {
                    cell.style.borderRight = '5px solid black';
                }
            });
        });
    }

    // Reset button logic
    resetButton.addEventListener('click', () => {
        liveSend({ type: 'reset' });
        puzzleState = {};
        renderPuzzle(puzzleData);
    });

    // Submit button logic
    submitButton.addEventListener('click', () => {
        liveSend({ type: 'submit' });
        // Hide reset once we submit
        resetButton.style.display = 'none';
        submitButton.style.display = 'none';
    });

    // Next puzzle logic
    nextButton.addEventListener('click', () => {
        nextButton.style.display = 'none';
        pointsContainer.innerHTML = '';
    });

    // Live receive callback
    liveRecv = (data) => {
        if (data.feedback) {
            // Show puzzle feedback, puzzle is locked
            renderPuzzle(puzzleData, data.feedback);

            pointsContainer.innerHTML = `\n
            <p><strong>Points for correct boxes:</strong> ${data.points}</p>\n
            <p><strong>Bonus for solving the grid:</strong> ${data.bonus_points}</p>\n
            <p><strong>Total Points:</strong> ${data.total_points}</p>\n            `;

            // If there's another puzzle, enable Next Puzzle
            if (data.next_puzzle) {
                nextButton.style.display = 'block';
                nextButton.onclick = () => {
                    puzzleNumber = data.puzzle_number;
                    liveSend({ type: 'next_puzzle' });
                    puzzleState = {};
                    // Render new puzzle
                    renderPuzzle(data.next_puzzle);
                    // Show reset button again
                    resetButton.style.display = 'inline-block';
                    submitButton.style.display = 'inline-block';
                };
            } else {
                nextButton.style.display = 'none';
            }
        }
    };

    // Initial render
    renderPuzzle(puzzleData);
</script>
{% endblock %}