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

{% block title %}
    {% endblock %}

{% block content %}
<style>
    #pvt-stage {
        background-color: #000;
        color: white;
        height: 500px;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        border-radius: 8px;
        position: relative;
        cursor: none; 
    }

    #pvt-box {
        width: 300px;
        height: 150px;
        border: 4px solid #FF0000; 
        display: flex;
        align-items: center;
        justify-content: center;
        position: relative;
    }

    #timer-display {
        font-family: 'Courier New', Courier, monospace;
        font-size: 60px;
        font-weight: bold;
        color: #FFFF00; 
        visibility: hidden; 
    }

    .info-overlay {
        position: absolute;
        top: 20px;
        color: #666;
        font-size: 14px;
    }
</style>

<div id="pvt-stage">
    <div class="info-overlay" id="status-text">請準備...</div>
    
    <div id="pvt-box">
        <div id="timer-display">000</div>
    </div>

    <div style="margin-top: 30px; color: #555;">
        When the numbers appear, please press the [Spacebar] immediately.

    </div>
</div>

{% if is_post_test %}
    <input type="hidden" name="pvt_post_results" id="pvt_results">
{% else %}
    <input type="hidden" name="pvt_pre_results" id="pvt_results">
{% endif %}

<script>
    let pvtData = [];
    let startTime, timerInterval, timeoutId;
    let canReact = false;
    let isKeyDown = false;
    let isProcessing = false; // 新增：防止在 1 秒顯示結果期間重複觸發

    const testDuration = 180000; 
    const timerDisplay = document.getElementById('timer-display');
    const statusText = document.getElementById('status-text');
    const resultsInput = document.getElementById('pvt_results');
    const STORAGE_KEY = "{% if is_post_test %}pvt_post_state{% else %}pvt_pre_state{% endif %}";

    let endEpoch = null;
    let hardStopTicker = null;

    function saveState() {
        try {
            sessionStorage.setItem(STORAGE_KEY, JSON.stringify({ endEpoch, pvtData }));
        } catch (e) {}
    }

    function loadState() {
        try {
            const raw = sessionStorage.getItem(STORAGE_KEY);
            if (!raw) return false;
            const obj = JSON.parse(raw);
            if (!obj || !obj.endEpoch) return false;
            endEpoch = obj.endEpoch;
            pvtData = Array.isArray(obj.pvtData) ? obj.pvtData : [];
            return true;
        } catch (e) { return false; }
    }

    function clearState() {
        try { sessionStorage.removeItem(STORAGE_KEY); } catch (e) {}
    }

    function isTimeUp() {
        return endEpoch !== null && Date.now() >= endEpoch;
    }

    function startHardStopWatcher() {
        if (hardStopTicker) clearInterval(hardStopTicker);
        hardStopTicker = setInterval(() => {
            if (isTimeUp()) endTask();
        }, 200);
    }

    function startTrial() {
        if (isTimeUp()) {
            endTask();
            return;
        }

        // 重設狀態
        isProcessing = false; 
        canReact = false;
        clearTimeout(timeoutId);    // 確保舊的排程被清除
        clearInterval(timerInterval); // 確保舊的計時被清除

        timerDisplay.style.visibility = 'hidden';
        timerDisplay.textContent = "000";
        statusText.textContent = "Waiting...";

        const isi = Math.floor(Math.random() * 3000) + 1000;
        timeoutId = setTimeout(showStimulus, isi);
    }

    function showStimulus() {
        if (isTimeUp()) {
            endTask();
            return;
        }

        if (isKeyDown) {
            handleReaction(); // 如果刺激出現時按著，視為 false start hold
            return;
        }

        canReact = true;
        timerDisplay.style.visibility = 'visible';
        startTime = Date.now();

        // 清除可能的舊計時器，防止數字亂跳
        clearInterval(timerInterval); 
        timerInterval = setInterval(() => {
            if (isTimeUp()) {
                endTask();
                return;
            }
            timerDisplay.textContent = Date.now() - startTime;
        }, 13);
    }

    function handleReaction() {
        if (isTimeUp() || isProcessing) return; // 如果正在處理下一題，不予理會

        isProcessing = true; // 進入鎖定狀態，直到 startTrial 重啟
        clearTimeout(timeoutId);
        clearInterval(timerInterval);

        if (!canReact) {
            // 太早按的情況
            timerDisplay.style.visibility = 'hidden';
            statusText.textContent = "Too early! Please press Spacebar after the numbers appear.";
            pvtData.push({rt: -1, timestamp: Date.now(), type: 'false_start'});
            saveState();
            setTimeout(startTrial, 1000);
        } else {
            // 正常反應的情況
            const rt = Date.now() - startTime;
            canReact = false;
            timerDisplay.textContent = rt;
            pvtData.push({rt: rt, timestamp: Date.now(), type: 'valid'});
            saveState();
            statusText.textContent = ` ${rt} ms`;
            setTimeout(startTrial, 1000);
        }
    }

    function endTask() {
        if (statusText.textContent === "Test completed.") return;
        clearTimeout(timeoutId);
        clearInterval(timerInterval);
        if (hardStopTicker) clearInterval(hardStopTicker);

        resultsInput.value = JSON.stringify(pvtData);
        statusText.textContent = "Test completed.";
        clearState();

        setTimeout(() => {
            document.getElementById('form').submit();
        }, 1000);
    }

    document.addEventListener('keydown', (e) => {
        if (e.code === 'Space') {
            e.preventDefault();
            if (e.repeat || isKeyDown) return;
            isKeyDown = true;
            handleReaction();
        }
    });

    document.addEventListener('keyup', (e) => {
        if (e.code === 'Space') {
            isKeyDown = false;
        }
    });

    window.onload = () => {
        const restored = loadState();
        if (!restored) {
            endEpoch = Date.now() + testDuration;
            pvtData = [];
            saveState();
        }
        startHardStopWatcher();
        startTrial();
    };

    window.addEventListener("beforeunload", saveState);
</script>

{% endblock %}