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

{% block title %}
    Part 1
{% endblock %}

{% block content %}
<style>
    /* Experimental Instructions Area */
    .instruction-card {
        background-color: #f8f9fa;
        border-left: 5px solid #FF0000;
        padding: 20px;
        margin-bottom: 25px;
        border-radius: 4px;
        box-shadow: 0 2px 4px rgba(0,0,0,0.05);
    }
    
    /* Main PVT Stage */
    #pvt-stage {
        background-color: #000;
        color: white;
        height: 450px;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        border-radius: 8px;
        position: relative;
        opacity: 0.5;
        pointer-events: none; 
        transition: opacity 0.3s;
    }

    #pvt-stage.active {
        opacity: 1;
        pointer-events: auto;
    }

    #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; 
    }

    #mode-label {
        position: absolute;
        top: 20px;
        padding: 5px 15px;
        border-radius: 20px;
        font-weight: bold;
        background: #6c757d; 
    }

    .btn-start-practice {
        margin: 20px 0;
        padding: 10px 40px;
        font-size: 1.2rem;
    }
</style>

<div class="instruction-card">
    <p>In this part, we will measure your reaction time. In the following interface, you will see a red frame on a black background in the center of the screen.</p>
    
    <p>After a random time interval (1-4 seconds), a yellow millisecond timer will appear inside the frame. When the numbers appear, please press the [Spacebar] as quickly as possible to stop the timer.</p>

    <p>This test will last for three minutes.</p>

    <div style="background-color: #fff3cd; border: 1px solid #ffeeba; padding: 10px; border-radius: 4px; margin-bottom: 15px;">
        <p style="color: #856404; margin-bottom: 0;">
             Below is a demonstration of the task. Press the red button, then try the interface once.
        </p>
    </div>

    <div id="setup-area" style="text-align: center;">
        <button type="button" id="ready-btn" class="btn btn-danger btn-start-practice">
            I understand the instructions. Start the demo.
        </button>
    </div>
</div>

<div id="pvt-stage">
    <div id="mode-label">Mode: Preparing</div>
    
    <div id="pvt-box">
        <div id="timer-display">000</div>
    </div>

    <div id="hint-msg" style="margin-top: 25px; color: #888;">
        Please click the button above to start...
    </div>

    <button type="button" id="next-btn" class="btn btn-primary" style="display:none; margin-top: 20px;">
        Start the trial
    </button>
</div>

<script>
    let startTime, timerInterval, timeoutId;
    let canReact = false;
    let isStarted = false; 

    const timerDisplay = document.getElementById('timer-display');
    const modeLabel = document.getElementById('mode-label');
    const hintMsg = document.getElementById('hint-msg');
    const pvtStage = document.getElementById('pvt-stage');
    const readyBtn = document.getElementById('ready-btn');
    const nextBtn = document.getElementById('next-btn');

    const storageKey = "pvt_practice_done_{{ participant.code }}";

    readyBtn.addEventListener('click', () => {
        isStarted = true;
        readyBtn.disabled = true;
        readyBtn.style.display = 'none';
        
        pvtStage.classList.add('active');
        modeLabel.textContent = "Mode: Practice";
        modeLabel.style.background = "#dc3545";
        
        startTrial();
    });

    function startTrial() {
        canReact = false;
        timerDisplay.style.visibility = 'hidden';
        timerDisplay.textContent = "000";
        hintMsg.textContent = "Practice: Please watch the red frame and prepare to press Spacebar...";

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

    function showStimulus() {
        canReact = true;
        timerDisplay.style.visibility = 'visible';
        startTime = Date.now();
        timerInterval = setInterval(() => {
            timerDisplay.textContent = Date.now() - startTime;
        }, 13);
    }

    function showNextStep(rt) {
        localStorage.setItem(storageKey, "1");

        modeLabel.textContent = "Practice Finished";
        modeLabel.style.background = "#28a745";
        // 這裡更新為妳要求的提示文字
        hintMsg.textContent = "The demo has finished. Press the button below to start the trial.";

        canReact = false;
        clearTimeout(timeoutId);
        clearInterval(timerInterval);
        nextBtn.style.display = "block";
    }

    function handleReaction() {
        if (!isStarted) return; 

        if (!canReact) {
            clearTimeout(timeoutId);
            alert("Too early! Please press Spacebar after the numbers appear.");
            startTrial();
            return;
        }

        const rt = Date.now() - startTime;
        clearInterval(timerInterval);
        canReact = false;
        timerDisplay.textContent = rt;

        setTimeout(() => showNextStep(rt), 400);
    }

    document.addEventListener('keydown', (e) => {
        if (e.code === 'Space') {
            e.preventDefault();
            if (localStorage.getItem(storageKey) === "1") return;
            handleReaction();
        }
    });

    nextBtn.addEventListener('click', () => {
        const form = document.querySelector('form');
        if (form) {
            form.submit();
        } else {
            const hiddenForm = document.createElement('form');
            hiddenForm.method = 'POST';
            document.body.appendChild(hiddenForm);
            hiddenForm.submit();
        }
    });

    window.onload = () => {
        if (localStorage.getItem(storageKey) === "1") {
            readyBtn.style.display = 'none';
            pvtStage.classList.add('active');
            modeLabel.textContent = "Practice Already Finished";
            modeLabel.style.background = "#28a745";
            // 這裡也同步更新為妳要求的提示文字
            hintMsg.textContent = "The demo has finished. Press the button below to start the trial.";
            nextBtn.style.display = "block";
        }
    };
</script>
{% endblock %}