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

{% block content %}
<h1>Practice round</h1>
<p>Practice moving PAC-MAN around the maze. Collect 6 white fruits to finish the round.</p>

<form id="form" method="post">
    <canvas id="gameCanvas" width="500" height="500" style="border:1px solid #000; background-color: black;"></canvas>

    <p style="color: white; text-align: center; margin-top: 10px;">
        Collected: <span id="fruitCount">0</span> / 6
    </p>
</form>
{% endblock %}

{% block scripts %}
<script>
document.addEventListener('DOMContentLoaded', function() {
    const canvas = document.getElementById('gameCanvas');
    const ctx = canvas.getContext('2d');

    const canvasSize = 500;
    const numRows = 13;
    const numCols = 13;
    const cellSize = canvasSize / numRows;
    const offsetX = 0;
    const offsetY = 0;

    const TARGET_FRUITS = 6;
    const FEEDBACK_MS = 100;  // how long the value bar is shown after collection

    const mazeMap = [
        "1111111111111",
        "1000000000001",
        "1011010101101",
        "1010010100101",
        "1000110110001",
        "1010000000101",
        "1010101010101",
        "1010000000101",
        "1000110110001",
        "1010010100101",
        "1011010101101",
        "1000000000001",
        "1111111111111"
    ];

    function gridToPixel(grid) {
        return {
            x: offsetX + grid.col * cellSize + cellSize / 2,
            y: offsetY + grid.row * cellSize + cellSize / 2
        };
    }

    // --- state ---
    let pacmanGrid = { row: 6, col: Number("{{ pac_column }}") };
    let pacmanState = gridToPixel(pacmanGrid);

    let fruitGrid = null;
    let fruitCount = 0;
    let trialEnded = false;
    let showingFeedback = false;

    // precompute open cells for quick spawning
    const openCells = [];
    for (let r = 0; r < numRows; r++) {
        for (let c = 0; c < numCols; c++) {
            if (mazeMap[r][c] === "0") openCells.push({ row: r, col: c });
        }
    }

    function spawnFruit() {
        if (openCells.length === 0) return;

        let cell = openCells[Math.floor(Math.random() * openCells.length)];
        let guard = 0;

        while (cell.row === pacmanGrid.row && cell.col === pacmanGrid.col && guard < 50) {
            cell = openCells[Math.floor(Math.random() * openCells.length)];
            guard++;
        }

        fruitGrid = { row: cell.row, col: cell.col };
    }

    // --- drawing ---
    function drawMaze() {
        const gap = 3;
        for (let row = 0; row < numRows; row++) {
            for (let col = 0; col < numCols; col++) {
                if (mazeMap[row][col] === "1") {
                    ctx.fillStyle = "blue";
                    ctx.fillRect(
                        offsetX + col * cellSize + gap,
                        offsetY + row * cellSize + gap,
                        cellSize - 2 * gap,
                        cellSize - 2 * gap
                    );
                }
            }
        }
    }

    function drawPacman() {
        ctx.fillStyle = "yellow";
        ctx.beginPath();
        ctx.arc(pacmanState.x, pacmanState.y, cellSize * 0.4, 0, 2 * Math.PI);
        ctx.fill();
    }

    function drawFruit() {
        if (!fruitGrid) return;

        const fruitPixel = gridToPixel(fruitGrid);
        ctx.fillStyle = "white";
        ctx.beginPath();
        ctx.moveTo(fruitPixel.x, fruitPixel.y - cellSize * 0.3);
        ctx.lineTo(fruitPixel.x - cellSize / 3, fruitPixel.y + cellSize * 0.3);
        ctx.lineTo(fruitPixel.x + cellSize / 3, fruitPixel.y + cellSize * 0.3);
        ctx.closePath();
        ctx.fill();
    }

    function drawGame() {
        ctx.clearRect(0, 0, canvas.width, canvas.height);
        drawMaze();
        drawFruit();
        drawPacman();
    }

    // same style as your ind page
    function drawValueBar(fillPercentage, color, fruitPixel) {
        const barWidth = cellSize * 3;
        const barHeight = 18;
        const border = 1;

        const startX = fruitPixel.x - barWidth / 2;
        const startY = fruitPixel.y + cellSize / 2 + 5;

        ctx.fillStyle = "#222";
        ctx.fillRect(startX, startY, barWidth, barHeight);

        const innerWidth = (barWidth - 2 * border) * (fillPercentage / 100);
        ctx.fillStyle = color;
        ctx.fillRect(startX + border, startY + border, innerWidth, barHeight - 2 * border);
    }

    function showFeedbackAndContinue() {
        if (!fruitGrid) return;
        showingFeedback = true;

        const randVal = Math.floor(Math.random() * 101); // 0..100
        const fruitPixel = gridToPixel(fruitGrid);

        drawGame();
        drawValueBar(randVal, "white", fruitPixel);

        setTimeout(() => {
            showingFeedback = false;
            spawnFruit();
            drawGame();
        }, FEEDBACK_MS);
    }

    function showFeedbackAndEnd() {
        if (!fruitGrid) return;
        showingFeedback = true;

        const randVal = Math.floor(Math.random() * 101); // 0..100
        const fruitPixel = gridToPixel(fruitGrid);

        drawGame();
        drawValueBar(randVal, "white", fruitPixel);

        setTimeout(() => {
            const form = document.getElementById('form');
            if (form) form.submit();
        }, FEEDBACK_MS);
    }

    function checkFruitCollision() {
        if (!fruitGrid || trialEnded || showingFeedback) return false;

        if (pacmanGrid.row === fruitGrid.row && pacmanGrid.col === fruitGrid.col) {
            fruitCount++;
            const fc = document.getElementById('fruitCount');
            if (fc) fc.innerText = String(fruitCount);

            if (fruitCount >= TARGET_FRUITS) {
                trialEnded = true;
                showFeedbackAndEnd();
            } else {
                showFeedbackAndContinue();
            }
            return true;
        }
        return false;
    }

    function getDeltaFromKey(key) {
        switch (key.toLowerCase()) {
            case 'arrowup': return { dRow: -1, dCol: 0 };
            case 'arrowdown': return { dRow: 1, dCol: 0 };
            case 'arrowleft': return { dRow: 0, dCol: -1 };
            case 'arrowright': return { dRow: 0, dCol: 1 };
            default: return null;
        }
    }

    document.addEventListener('keydown', function(e) {
        if (trialEnded || showingFeedback) return;

        const delta = getDeltaFromKey(e.key);
        if (!delta) return;

        e.preventDefault();

        const newRow = pacmanGrid.row + delta.dRow;
        const newCol = pacmanGrid.col + delta.dCol;

        if (newRow < 0 || newRow >= numRows || newCol < 0 || newCol >= numCols) return;
        if (mazeMap[newRow][newCol] !== "0") return;

        pacmanGrid = { row: newRow, col: newCol };
        pacmanState = gridToPixel(pacmanGrid);

        if (!checkFruitCollision()) {
            drawGame();
        }
    });

    // init
    spawnFruit();
    drawGame();
});
</script>
{% endblock %}