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

{% block title %}Puzzle Challenge{% endblock %}

{% block content %}
<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;">Next Puzzle</button>
    <button id="continue-button" type="button" style="display: none;">Continue</button>
</div>

<link rel="stylesheet" href="/static/kenken.css">
<script src="{% static 'otree/js/live.js' %}"></script>

<script>
    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 continueButton = document.getElementById('continue-button');
    const pointsContainer = document.getElementById('points-container');

    function renderPuzzle(data, feedback = null) {
        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) {
                    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;
                    if (/^[1-9]?$/.test(value)) {
                        puzzleState[cellKey] = value;
                        liveSend({ type: 'update', update: { row, col, value } });
                    } else {
                        e.target.value = '';
                        delete puzzleState[cellKey];
                    }
                });

                if (feedback) {
                    input.disabled = true;
                }

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

        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';
                }
            });
        });
    }

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

    submitButton.addEventListener('click', () => {
        liveSend({ type: 'submit' });
        resetButton.style.display = 'none';
        submitButton.style.display = 'none';
    });

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

    continueButton.addEventListener('click', () => {
        document.querySelector('form').submit();
    });

    liveRecv = (data) => {
        if (data.feedback) {
            renderPuzzle(puzzleData, data.feedback);
            pointsContainer.innerHTML = `
                <p><strong>Points for correct blocks:</strong> ${data.points}</p>
                <p><strong>Bonus for solving the grid:</strong> ${data.bonus_points}</p>
                <p><strong>Points this round:</strong> ${data.round_points ?? '—'}</p>
            `;

            if (data.next_puzzle) {
                nextButton.style.display = 'block';
                continueButton.style.display = 'none';
                nextButton.onclick = () => {
                    puzzleState = {};
                    renderPuzzle(data.next_puzzle);
                    resetButton.style.display = 'inline-block';
                    submitButton.style.display = 'inline-block';
                    nextButton.style.display = 'none';
                    pointsContainer.innerHTML = '';
                };
            } else {
                nextButton.style.display = 'none';
                continueButton.style.display = 'inline-block';
            }
        }

        if (data.end) {
            nextButton.style.display = 'none';
            continueButton.style.display = 'inline-block';
        }
    };

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