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

{% 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;
}

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

#feedback.incorrect {
    background-color: #f8d7da;
    color: #721c24;
    border: 1px solid #f5c6cb;
}

#feedback.correct {
    background-color: #d4edda;
    color: #155724;
    border: 1px solid #c3e6cb;
}

.otree-timer {
    display: none !important;
}
</style>

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

<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:2pt"><br></p>

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

<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"></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 CHECK 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;

    if (ans.length === 1) {
        waitingForReply = true;
        answerInput.disabled = true;

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

// Prevent Enter key from submitting
answerInput.addEventListener('keydown', function(e) {
    if (e.key === 'Enter') {
        e.preventDefault();
    }
});

// ================= LIVE RECEIVE =================
function liveRecv(data) {
    if (data.type === 'correct' || data.type === 'incorrect') {
        document.getElementById('question').innerText = data.question;

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

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

        if (data.effort !== undefined) {
            correctCount.textContent = data.effort;
        }

        setTimeout(function() {
            answerInput.value = '';
            answerInput.disabled = false;
            waitingForReply = false;
            answerInput.focus();
        }, 1000);
    }

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

answerInput.focus();
</script>
{% endblock %}