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

{% block title %}
Pac-Man Demo - Trial {{ round_number }}
{% endblock %}

{% block content %}
<h1>Pac-Man Demo - Trial {{ round_number }}</h1>

{# ---- Instructions (sync vs control + practice) ---- #}
{% if is_practice %}
  {% if sync_condition == 'sync' %}
    <p><strong>PRACTICE TRIAL (SYNCHRONY):</strong>
      In this trial, Pac-Man will move only if you both press the <em>same key</em> at (almost) the same time.
      Please practice moving together.
    </p>
  {% else %}
    <p><strong>PRACTICE TRIAL (NO SYNCHRONY):</strong>
      In this trial, Pac-Man will move whenever either of you presses a valid key. Please practice moving together.
    </p>
  {% endif %}
  {% with target=target_color %}
  <div style="margin:8px 0 12px 0; font-size:15px;">
    <strong>For this practice round, please go together to this fruit:</strong>
    <svg width="20" height="20" style="vertical-align: middle; margin: 0 4px -3px 4px;">
      <polygon points="10,2 2,18 18,18"
               fill="{{ target }}"
               stroke="black"
               stroke-width="2" />
    </svg>
    <span style="font-weight:bold; color: '{{ target }}';">{{ target }}</span>
    fruit.
  </div>
  {% endwith %}
{% else %}
  {% if sync_condition == 'sync' %}
    <p><strong>SYNCHRONY TRIAL:</strong>
      Navigate Pac-Man together – he will only respond if you both press the same key at the same time.
    </p>
  {% else %}
    <p><strong>NO SYNCHRONY TRIAL:</strong>
      Navigate Pac-Man together – he will respond to any of your key presses.
    </p>
  {% endif %}
  {# No explicit target fruit here – they must decide themselves #}
{% endif %}

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

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

    console.log("DOM fully loaded");
    console.log("liveSend:", typeof liveSend, "liveRecv:", typeof liveRecv);

    const canvas = document.getElementById('gameCanvas');
    const ctx = canvas.getContext('2d');
    const canvasSize = 500;

    // Sync / practice flags from server
    const SYNC_CONDITION = "{{ sync_condition }}";  // 'sync' or 'control'
    const IS_PRACTICE = "{{ is_practice }}" === "True";

    // --------- Metronome (only for sync trials) ---------
    const METRO_MODE  = "{{ metronome_condition }}";   // 'fade' or 'fixed'
    const INTERVAL_MS = Math.max(1, Number("{{ metronome_value }}") || 1000);
    const PERIOD_SEC  = INTERVAL_MS / 1000;
    const FADE_BEATS  = 8;
    const CLICK_MS    = 0.05;   // 50ms
    const CLICK_GAIN  = 0.12;

    let audioCtx = null, osc = null, gain = null;
    let schedulerTimer = null;
    let nextTime = 0;          // next scheduled click time (AudioContext time)
    let running = false;
    let beatsScheduled = 0;
    const beatsLimit = (METRO_MODE === 'fade') ? FADE_BEATS : Infinity;

    function setupAudio() {
      if (!audioCtx) audioCtx = new (window.AudioContext || window.webkitAudioContext)();
      if (!osc || !gain) {
        osc = audioCtx.createOscillator();
        gain = audioCtx.createGain();
        osc.type = 'square';
        osc.frequency.value = 1000;
        gain.gain.value = 0.0; // muted; envelope will open it briefly
        osc.connect(gain);
        gain.connect(audioCtx.destination);
        osc.start();
      }
      if (audioCtx.state !== 'running') {
        audioCtx.resume().catch(()=>{});
      }
    }

    function scheduleClick(at) {
      gain.gain.setValueAtTime(0.0, at);
      gain.gain.setValueAtTime(CLICK_GAIN, at);
      gain.gain.setValueAtTime(0.0, at + CLICK_MS);
      beatsScheduled++;
    }

    function scheduler() {
      if (!running) return;
      if (!audioCtx || audioCtx.state !== 'running') {
        audioCtx && audioCtx.resume().catch(()=>{});
      }
      const lookahead = 0.1;
      const now = audioCtx ? audioCtx.currentTime : 0;

      while (running && beatsScheduled < beatsLimit && nextTime < now + lookahead) {
        scheduleClick(nextTime);
        nextTime += PERIOD_SEC;
      }

      if (beatsScheduled >= beatsLimit) {
        stopMetronome(true);
        return;
      }

      schedulerTimer = setTimeout(scheduler, 25);
    }

    function startMetronome() {
      if (running) return;
      setupAudio();
      const now = audioCtx.currentTime;
      nextTime = now;
      running = true;
      scheduler();
      console.log('Metronome started (scheduler). mode=', METRO_MODE, 'ms=', INTERVAL_MS);
    }

    function stopMetronome(faded=false) {
      running = false;
      if (schedulerTimer) { clearTimeout(schedulerTimer); schedulerTimer = null; }
      try { if (gain && audioCtx) gain.gain.setValueAtTime(0.0, audioCtx.currentTime); } catch(e){}
      console.log('Metronome stopped. beatsScheduled=', beatsScheduled, 'faded=', faded);
    }

    // --------- Grid / maze setup ---------
    const numRows = 13;
    const numCols = 13;
    const cellSize = canvasSize / numRows;
    const offsetX = 0;
    const offsetY = 0;

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

    const options = [
        { row: 3, col: Number("{{ column_number }}"), color: "{{ option1_color }}" },
        { row: 9, col: Number("{{ column_number }}"), color: "{{ option2_color }}" }
    ];

    let ghosts = [
        { row: 3, col: Number("{{ column_number }}"), direction: 1, rowMin: 2, rowMax: 6, color: "red" },
        { row: 8, col: Number("{{ column_number }}"), direction: 1, rowMin: 7, rowMax: 11, color: "white" }
    ];

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

    let showActors = false;
    let controlsEnabled = false;
    let ghostsTimer = null; 

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

    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 drawGhosts() {
        ghosts.forEach(ghost => {
            ctx.fillStyle = ghost.color;
            const pix = gridToPixel({ row: ghost.row, col: ghost.col });
            ctx.fillRect(
                pix.x - cellSize * 0.4,
                pix.y - cellSize * 0.4,
                cellSize * 0.8,
                cellSize * 0.8
            );
        });
    }

    function drawOptions() {
        options.forEach(opt => {
            ctx.fillStyle = opt.color;
            const pix = gridToPixel({ row: opt.row, col: opt.col });
            const triHeight = cellSize * 0.5;
            const triHalfBase = cellSize * 0.3;

            ctx.beginPath();
            ctx.moveTo(pix.x, pix.y - triHeight / 2);
            ctx.lineTo(pix.x - triHalfBase, pix.y + triHeight / 2);
            ctx.lineTo(pix.x + triHalfBase, pix.y + triHeight / 2);
            ctx.closePath();
            ctx.fill();
        });
    }

    function checkOptionCollision() {
      if (trialEnded || outcomeSent) return;
      for (const opt of options) {
          if (pacmanGrid.row === opt.row && pacmanGrid.col === opt.col) {
              console.log("Sending outcome: fruit");
              outcomeSent = true;          // only prevent *second* send
              liveSend({ outcome: "fruit" });
              return;
          }
      }
  }

    function checkGhostCollision() {
        if (trialEnded || outcomeSent) return;
        for (const ghost of ghosts) {
            if (pacmanGrid.row === ghost.row && pacmanGrid.col === ghost.col) {
                console.log("Sending outcome: ghost");
                outcomeSent = true;
                liveSend({ outcome: "ghost" });
                return;
            }
        }
    }

    function updateGhosts() {
        for (const ghost of ghosts) {
            let nr = ghost.row + ghost.direction;
            if (nr < ghost.rowMin || nr > ghost.rowMax) {
                ghost.direction *= -1;
                nr = ghost.row + ghost.direction;
            }
            ghost.row = nr;
        }
        drawGame();
    }

    function drawGame() {
        ctx.clearRect(0, 0, canvas.width, canvas.height);
        drawMaze();
        if (showActors) {
            drawOptions();
            drawPacman();
            drawGhosts();
            checkOptionCollision();
            checkGhostCollision();
        }
    }

    drawGame();

    // ------ Start trial depending on sync_condition ------
    if (SYNC_CONDITION === "sync") {
        // sync: play metronome for 8 beats before enabling input
        startMetronome();

        setTimeout(() => {
            showActors = true;
            controlsEnabled = true;
            ghostsTimer = setInterval(updateGhosts, 1000);
            drawGame();
        }, INTERVAL_MS * 8);

    } else {
        // control: no metronome, actors visible immediately
        showActors = true;
        controlsEnabled = true;
        ghostsTimer = setInterval(updateGhosts, 1000);
        drawGame();
    }

    document.addEventListener('keydown', function(e) {
        if (!controlsEnabled || trialEnded) return;
        const arrowToDirection = {
            'arrowup': 'w',
            'arrowdown': 's',
            'arrowleft': 'a',
            'arrowright': 'd'
        };
        const key = e.key.toLowerCase();
        if (key in arrowToDirection) {
            e.preventDefault();
            liveSend({ key: arrowToDirection[key] });
        }
    });

    function liveRecv(data) {
        console.log("Received update from server:", data);

        if (data && data.row !== undefined && data.col !== undefined) {
            pacmanGrid = { row: data.row, col: data.col };
            pacmanState = gridToPixel(pacmanGrid);
            drawGame();
        }

        if (data.outcome) {
            console.log("Trial ended with outcome:", data.outcome);
            if (!trialEnded) {
                if (SYNC_CONDITION === "sync") {
                    stopMetronome(true);
                }
                setTimeout(() => {
                    const form = document.querySelector('form');
                    if (form) form.submit();
                    trialEnded = true;
                }, 100);
            }
        }
    }
    window.liveRecv = liveRecv;
});
</script>
{% endblock %}