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

{% block content %}
<h3 style="text-align: center;">Practice Puzzle 1</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: type="button" prevents form submission -->
    <button id="submit-button" type="button">Submit</button>
</div>

<!-- Use oTree's built-in next_button, wrapped in a div that is hidden until the puzzle is solved -->
<div id="next_button_div" style="display: none; text-align: center; margin-top: 20px;">
    {% next_button %}
</div>

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

    // 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., "5+", "3+", or just "3" 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 input background transparent so the cell's background color shows
                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 a 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. Let's try a more difficult puzzle next.
                </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();

        // When the user clicks "Submit", check the puzzle without moving on.
        document.getElementById("submit-button").onclick = function () {
            checkSolution();
        };
    });
</script>

<hr><br>

<div style="text-align: center;">
    <button type="button" class="btn btn-info" onclick="toggleInstructions()">Show/Hide Example Puzzle Walkthrough</button>
</div>

<div id="example-instructions" style="display: none; margin-top: 20px;">

    <h4>Puzzle Example:</h4>
    <p>Let’s walk through this example step by step.</p>
    <p>There are many different strategies to solve a Ken-Ken puzzle. This example just shows one way to think
        through the puzzle for purposes to show you how to solve the puzzle.</p>
    <p>Remember that in a 3×3 Ken‐Ken, each row and column must contain the numbers 1, 2, and 3 exactly once.</p>

    <!-- Carousel -->
    <div id="carouselExampleControls" class="carousel slide border border-dark p-2">
        <div class="carousel-inner">

            <div class="carousel-item active">
                <img class="d-block w-100" src="{{ static 'KenKen1.png' }}" alt="KenKen1">
            </div>

            <div class="carousel-item">
                <img class="d-block w-100" src="{{ static 'KenKen2.png' }}" alt="KenKen2">
            </div>

            <div class="carousel-item">
                <img class="d-block w-100" src="{{ static 'KenKen3.png' }}" alt="KenKen3">
            </div>

            <div class="carousel-item">
                <img class="d-block w-100" src="{{ static 'KenKen4.png' }}" alt="KenKen4">
            </div>

            <div class="carousel-item">
                <img class="d-block w-100" src="{{ static 'KenKen5.png' }}" alt="KenKen5">
            </div>

        </div>
        <a class="carousel-control-prev" href="#carouselExampleControls" role="button" data-slide="prev">
            <span class="carousel-control-prev-icon" aria-hidden="true"></span>
            <span class="sr-only">Previous</span>
        </a>
        <a class="carousel-control-next" href="#carouselExampleControls" role="button" data-slide="next">
            <span class="carousel-control-next-icon" aria-hidden="true"></span>
            <span class="sr-only">Next</span>
        </a>
    </div>
</div>

<!-- Toggle Script -->
<script>
    function toggleInstructions() {
        const inst = document.getElementById("example-instructions");
        inst.style.display = inst.style.display === "none" ? "block" : "none";
    }

    // Prevent auto-sliding
    document.addEventListener("DOMContentLoaded", function () {
        $('#carouselExampleControls').carousel({
            interval: false
        });
    });
</script>

<!-- Bootstrap JS (if not already included) -->
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>

<!-- Optional Styling for Carousel Arrows -->
<style>
    .carousel-control-prev-icon,
    .carousel-control-next-icon {
        filter: invert(1) brightness(2);
    }
</style>

{% endblock %}