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

{% block content %}
<h1>Individual-Round: Trial {{ round_number }}</h1>
<p>Collect the two kinds of fruits - presented one at a time at random positions.</p>

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

    <p id="fruitCounter" style="color: white; text-align: center; margin-top: 10px;">
        Collected: <span id="fruitCount">0</span> / 20
    </p>

    <!-- Hidden fields to submit counts at the end -->
    <input type="hidden" name="fruit1Count" id="fruit1CountField" value="0">
    <input type="hidden" name="fruit2Count" id="fruit2CountField" value="0">
</form>
{% endblock %}

{% block scripts %}
<script>
document.addEventListener('DOMContentLoaded', function() {
    // 🔹 Mark this page as INDIVIDUAL phase for the Twilio window
    try {
        localStorage.setItem('pacman_phase', 'individual');
    } catch (e) {
        console.warn('Could not set pacman_phase in localStorage', e);
    }

    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 duration = Number("{{ display_value }}");
    const presentation_no = Number("{{ presentation_no }}");

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

    let fruitColors = [];
    let startWithOption1 = Math.random() < 0.5; // fixed alternation logic - start with 1 or 2

    for (let i = 0; i < presentation_no/2; i++) {
        if (startWithOption1) {
            fruitColors.push("{{ option1_color }}");
            fruitColors.push("{{ option2_color }}");
        } else {
            fruitColors.push("{{ option2_color }}");
            fruitColors.push("{{ option1_color }}");
        }
    }

    let fruitCount = 0;
    let fruit1Count = 0;
    let fruit2Count = 0;

    // New streams (these must be provided by vars_for_template)
    let option1Values = JSON.parse('{{ option1_stream|safe }}'); // array
    let option2Values = JSON.parse('{{ option2_stream|safe }}'); // array

    console.log(option1Values, option2Values);

    document.getElementById('fruitCount').innerText = fruitCount;
    let fruitGrid = null;
    let currentFruitColor = null;

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

    function spawnFruit() {
        if (fruitColors.length === 0) return;
        currentFruitColor = fruitColors.pop();
        let attempts = 0;
        let found = false;
        while (!found && attempts < 1000) {
            const r = Math.floor(Math.random() * numRows);
            const c = Math.floor(Math.random() * numCols);
            if (mazeMap[r][c] === "0") {
                fruitGrid = { row: r, col: c };
                found = true;
            }
            attempts++;
        }
    }
    spawnFruit();

    let pacmanGrid = { row: 6, col: Number("{{ pac_column }}") };
    let pacmanState = gridToPixel(pacmanGrid);
    let trialEnded = false;

    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 || !currentFruitColor) return;
        ctx.fillStyle = currentFruitColor;
        const fruitPixel = gridToPixel(fruitGrid);
        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();
    }
    drawGame();

    // Draw a small feedback bar just below the fruit.
    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 showFeedback() {
        let targetValue;

        if (currentFruitColor === "{{ option1_color }}") {
            targetValue = Number(option1Values[fruit1Count]);
        } else {
            targetValue = Number(option2Values[fruit2Count]);
        }

        let fillPercentage = Math.max(0, Math.min(100, targetValue));

        console.log(targetValue, fillPercentage);

        const fruitPixel = gridToPixel(fruitGrid);
        drawValueBar(fillPercentage, currentFruitColor, fruitPixel);

        setTimeout(drawGame, duration);
    }

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

        if (pacmanGrid.row === fruitGrid.row && pacmanGrid.col === fruitGrid.col) {
            showFeedback();

            // Update counters by which option-color was collected
            if (currentFruitColor === "{{ option1_color }}") {
                fruit1Count++;
            } else {
                fruit2Count++;
            }

            fruitCount++;
            document.getElementById('fruitCount').innerText = fruitCount;

            if (fruitCount >= presentation_no) {
                trialEnded = true;

                setTimeout(() => {
                    // write counts into hidden fields before submitting
                    const f1 = document.getElementById('fruit1CountField');
                    const f2 = document.getElementById('fruit2CountField');
                    if (f1) f1.value = fruit1Count;
                    if (f2) f2.value = fruit2Count;

                    const form = document.getElementById('form');
                    if (form) {
                        form.submit();
                    } else {
                        console.log("No form found. Ending trial manually.");
                    }
                }, duration + 200);
            } else {
                spawnFruit();
            }

            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) {
        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();
    });
});
</script>
{% endblock %}