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

{% block title %}{% endblock %}

{% block content %}

<style>

.top-bar {
    display: flex;
    justify-content: space-between;
    font-size: 22px;
    margin-bottom: 30px;
    background-color: #d4edda;
    color: #155724;
    padding: 15px 20px;
    border-radius: 8px;
    font-weight: bold;
}
.decode-row {
    text-align: center;
    margin-bottom: 35px;
    font-size: 22px;
}

.decode-number {
    font-weight: bold;
    margin: 0 15px;
    font-size: 28px;
}

#answer-input {
    width: 120px;
    text-align: center;
    font-size: 20px;
    padding: 6px;
}


.key-grid {
    display: grid;
    grid-template-columns: repeat(8, 1fr);
    gap: 14px;
    margin-top: 30px;
}

.key-cell {
    padding: 14px;
    text-align: center;
    font-weight: bold;
    font-size: 20px;
    border: 1px solid #bbb;
    background-color: #f8f9fa;

    white-space: nowrap;
}

    .otree-timer {
    display: none !important;
}

    #feedback {
    margin-top: 20px;
    font-size: 24px;       /* make text bigger */
    font-weight: bold;
    padding: 12px;
    border-radius: 8px;
}

#feedback.incorrect {
    background-color: #f8d7da;  /* light red background */
    color: #721c24;             /* dark red text */
    border: 1px solid #f5c6cb;
}

#feedback.correct {
    background-color: #d4edda;  /* light green background for correct (optional) */
    color: #155724;
    border: 1px solid #c3e6cb;
}
</style>

<!-- ================= TOP BAR ================= -->

<div class="top-bar">
    <div><strong>Practice Period</strong></div>
    <div>
        Time Remaining:
        <span id="timer">{{ task_time }}</span>
    </div>
    <div>
        # Correct:
        <span id="correct-count">{{ EffortPractice }}</span>
    </div>
</div>

<!-- ================= DECODE ROW ================= -->

<div class="decode-row">
    <span style="font-weight: bold; font-size: 30px;">Decode:</span>
    <span class="decode-number" id="question" style="font-size: 30px; font-weight: bold;">
        {{ question }}
    </span>
                    <p style="LINE-HEIGHT:2pt"><br></p>
                    <p style="LINE-HEIGHT:2pt"><br></p>

    <div style="margin-bottom: 15px; font-size: 20px; font-weight: bold; color: #333;">
        Type the letter corresponding to the number. Uppercase or lowercase letters are both accepted.
    </div>
                    <p style="LINE-HEIGHT:0.5pt"><br></p>


    <input id="answer-input"
       type="text"
       maxlength="1"
       autocomplete="off"
       autocapitalize="characters"
       style="text-transform:uppercase;">
</div>

<!-- ================= DECODING KEY ================= -->

<div>
    <div style="margin-bottom:10px; font-weight:bold;font-size:24px;">
        DECODING KEY:
    </div>

<div class="key-grid" id="key-grid">
    {% for pair in task_pairs %}
        <div class="key-cell">
            {{ pair.1 }} = {{ pair.0 }}
        </div>
    {% endfor %}
</div>
</div>

<div id="feedback" style="margin-top:20px;"></div>

{% endblock %}

{% block scripts %}
{{ super() }}

<script>

let timeLeft = {{ task_time }};
let ended = false;
let waitingForReply = false;

const timerElement = document.getElementById('timer');
const answerInput = document.getElementById('answer-input');
const correctCount = document.getElementById('correct-count');
const feedback = document.getElementById('feedback');

/* ================= TIMER ================= */

function formatTime(seconds) {
    const minutes = Math.floor(seconds / 60);
    const secs = seconds % 60;
    return String(minutes).padStart(2, '0') + ':' +
           String(secs).padStart(2, '0');
}

timerElement.textContent = formatTime(timeLeft);

const timer = setInterval(() => {
    timeLeft--;
    timerElement.textContent = formatTime(timeLeft);
    if (timeLeft <= 0) endTask();
}, 1000);

function endTask() {
    if (ended) return;
    ended = true;
    clearInterval(timer);
    answerInput.disabled = true;
    liveSend({'type': 'end'});
}


/* ================= AUTO SUBMIT ON ONE LETTER ================= */

answerInput.addEventListener('input', function () {

    if (ended || waitingForReply) return;

    let ans = answerInput.value.trim().toUpperCase();

    ans = ans.replace(/[^A-Z]/g, '').slice(0, 1);
    answerInput.value = ans;

    // Display typed letter
    if (ans.length === 1) {

        waitingForReply = true;
        answerInput.disabled = true;

        liveSend({
            type: 'answer_submit',
            answer: ans
        });
    }
});


/* ================= BLOCK ENTER KEY ================= */

answerInput.addEventListener('input', function () {

    if (ended || waitingForReply) return;

    let ans = answerInput.value.trim().toUpperCase();

    ans = ans.replace(/[^A-Z]/g, '').slice(0, 1);
    answerInput.value = ans;

    if (ans.length === 1) {

        waitingForReply = true;
        answerInput.disabled = true;

        liveSend({
            type: 'answer_submit',
            answer: ans
        });
    }
});


/* ================= LIVE RECEIVE ================= */

function liveRecv(data) {

    /* ===== CORRECT / INCORRECT RESPONSE ===== */

    if (data.type === 'correct' || data.type === 'incorrect') {

        // Update question
        document.getElementById('question').innerText = data.question;

        // Update key grid
        const grid = document.getElementById('key-grid');
        grid.innerHTML = '';

        data.task_pairs.forEach(pair => {
            grid.innerHTML += `<div class="key-cell">${pair[1]} = ${pair[0]}</div>`;
        });

        // Update feedback
        if (data.type === 'incorrect') {
            feedback.textContent = 'Incorrect. Try again!';
            feedback.classList.add('incorrect');
            feedback.classList.remove('correct');
        } else {
            feedback.textContent = 'Correct!';
            feedback.classList.add('correct');
            feedback.classList.remove('incorrect');
        }

        // Update correct counter
        if (data.EffortPractice !== undefined) {
            correctCount.textContent = data.EffortPractice;
        }

        // Clear input but keep typed letter visible
        setTimeout(function(){

    answerInput.value = '';
    answerInput.disabled = false;
    waitingForReply = false;
    answerInput.focus();

}, 1000);

    }   // <-- FIXED: properly close the correct/incorrect block


    /* ===== TASK END ===== */

    if (data.type === 'end') {
        setTimeout(() => document.querySelector('form').submit(), 500);
    }
}

answerInput.focus();

</script>

{% endblock %}