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

{% block content %}
<h3 style="text-align: center;">Practice Puzzle 2 </h3>
<div id="instructions" style="text-align: center;">
    <p>Please complete the puzzle below. Once you fill in all boxes, click "Submit" to check your answers.</p>
</div>

<!-- Feedback/Instructional messages will be displayed here -->
<div id="message" style="text-align: center; margin-top: 10px;"></div>

<!-- Container for the puzzle grid -->
<div id="puzzle-container" style="width: fit-content; margin: auto; padding: 20px;"></div>

<!-- Buttons -->
<div style="text-align: center; margin-top: 20px;">
    <!-- Plain HTML button that does NOT submit the form -->
    <button id="submit-button" type="button">Submit</button>
</div>

<!-- Wrap oTree's built-in next button in a hidden div -->
<div id="next_button_div" style="display: none; text-align: center; margin-top: 20px;">
    {% next_button %}
</div>

<script>
    // --------------------------
    // Puzzle data (4×4 practice puzzle)
    // --------------------------
    const puzzleData = {
        "size": 4,
        "cages": [
            {"cells": [[0, 0]], "target": 2, "operator": null},
            {"cells": [[0, 1], [0, 2]], "target": 7, "operator": "+"},
            {"cells": [[0, 3], [1, 3]], "target": 2, "operator": "-"},
            {"cells": [[1, 0], [1, 1]], "target": 3, "operator": "-"},
            {"cells": [[1, 2], [2, 2]], "target": 5, "operator": "+"},
            {"cells": [[2, 0], [3, 0]], "target": 4, "operator": "+"},
            {"cells": [[2, 1]], "target": 2, "operator": null},
            {"cells": [[2, 3], [3, 3]], "target": 2, "operator": "-"},
            {"cells": [[3, 1], [3, 2]], "target": 5, "operator": "+"}
        ],
        "solution": [
            [2, 3, 4, 1],
            [4, 1, 2, 3],
            [1, 2, 3, 4],
            [3, 4, 1, 2]
        ]
    };

    // Create the puzzle grid
    function createPuzzle() {
        const container = document.getElementById("puzzle-container");
        container.innerHTML = ""; // Clear any previous grid

        const size = puzzleData.size;
        const cages = puzzleData.cages;

        // Store the "label" (target+operator) only in the first cell of each cage
        const targetGrid = Array.from({ length: size }, () => Array(size).fill(null));
        cages.forEach(cage => {
            // e.g., "7+" or "2" if operator is null
            const label = cage.operator ? cage.target + cage.operator : cage.target;
            const [firstR, firstC] = cage.cells[0];
            targetGrid[firstR][firstC] = label;
        });

        // Build the grid (size × size)
        for (let r = 0; r < size; r++) {
            const rowDiv = document.createElement("div");
            rowDiv.style.display = "flex";

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

                // If this cell is the top-left cell of a cage, show the target+operator
                if (targetGrid[r][c] !== null) {
                    const labelDiv = document.createElement("div");
                    labelDiv.textContent = targetGrid[r][c];
                    labelDiv.style.position = "absolute";
                    labelDiv.style.top = "5px";
                    labelDiv.style.left = "5px";
                    labelDiv.style.fontSize = "24px";
                    cellDiv.appendChild(labelDiv);
                }

                // Input box for user entry
                const input = document.createElement("input");
                input.type = "text";
                input.style.width = "100%";
                input.style.height = "100%";
                input.style.border = "none";
                input.style.fontSize = "24px";
                input.style.textAlign = "center";
                input.maxLength = 1;
                // Set background transparent so the cell's background color is visible
                input.style.backgroundColor = "transparent";

                // Restrict input to digits 1-9
                input.addEventListener("input", function () {
                    if (!/^[1-9]$/.test(this.value)) {
                        this.value = "";
                    }
                });

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

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

                // Check top
                if (!neighbors.some(([nr, nc]) => nr === row - 1 && nc === col)) {
                    thisCell.style.borderTop = "5px solid black";
                }
                // Check bottom
                if (!neighbors.some(([nr, nc]) => nr === row + 1 && nc === col)) {
                    thisCell.style.borderBottom = "5px solid black";
                }
                // Check left
                if (!neighbors.some(([nr, nc]) => nr === row && nc === col - 1)) {
                    thisCell.style.borderLeft = "5px solid black";
                }
                // Check right
                if (!neighbors.some(([nr, nc]) => nr === row && nc === col + 1)) {
                    thisCell.style.borderRight = "5px solid black";
                }
            });
        });
    }

    // Check submitted answers, color cells green/red, and display message.
    // If all answers are correct, reveal the oTree next button.
    function checkSolution() {
        const size = puzzleData.size;
        const correctSolution = puzzleData.solution;
        let allCorrect = true;

        for (let r = 0; r < size; r++) {
            for (let c = 0; c < size; c++) {
                const correctVal = correctSolution[r][c];
                const cellDiv = document.getElementById(`cell-${r}-${c}`);
                const input = cellDiv.querySelector("input");
                const userVal = parseInt(input.value, 10);

                if (userVal === correctVal) {
                    cellDiv.style.backgroundColor = "lightgreen";
                } else {
                    cellDiv.style.backgroundColor = "lightcoral";
                    allCorrect = false;
                }
            }
        }

        const messageDiv = document.getElementById("message");
        const nextButtonDiv = document.getElementById("next_button_div");

        if (allCorrect) {
            messageDiv.innerHTML = `
                <strong>
                  Nice Job! You've correctly solved the puzzle. Please proceed to the next page to continue.
                </strong>
            `;
            // Hide the submit button since the puzzle is solved
            document.getElementById("submit-button").style.display = "none";
            // Reveal the next button (oTree's built-in next button)
            nextButtonDiv.style.display = "block";
        } else {
            messageDiv.innerHTML = `
                <strong>One or more of your answers are incorrect. Try again.</strong>
            `;
        }
    }

    // On page load, draw puzzle & set up button handler
    window.addEventListener("load", function () {
        createPuzzle();

        // "Submit" button checks correctness without moving on
        document.getElementById("submit-button").onclick = function () {
            checkSolution();
        };
    });
</script>
{% endblock %}