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

{% block title %}Recall Phase{% endblock %}

{% block content %}
<div style="text-align:center; margin-top:10%;">
    <div style="font-size:1.4em; margin-bottom:20px;">
        {{ cue_label }}: <strong id="cue-display" style="font-size:1.3em;"></strong>
    </div>
    <div>
        <input type="text" id="answer-input" autocomplete="off"
               style="font-size:1.2em; padding:8px; width:260px; text-align:center;"
               placeholder="{{ placeholder }}">
    </div>
    {% if not is_control %}
    <div style="margin-top:15px; font-size:1.1em; color:#555;">
        Time remaining: <span id="countdown" style="font-weight:bold; color:#c0392b;"></span>s
    </div>
    {% endif %}
    <div style="margin-top:10px; color:#c0392b; font-size:0.95em; min-height:1.2em;" id="warning"></div>
    <div style="margin-top:10px;">
        <button id="next-btn" type="button" class="btn btn-primary">Next</button>
    </div>
    <div style="color:gray; margin-top:12px; font-size:0.95em;" id="progress"></div>
</div>

<!-- Populated by JS before final form submission -->
<input type="hidden" name="recall_answers" id="recall_answers_hidden" value="{}">
{{ formfield_errors 'recall_answers' }}

<!-- Hidden oTree next button used only for final page submission -->
<div style="display:none">{% next_button %}</div>

<script>
    var cues = {{ shuffled_cues|json }};
    var IS_CONTROL = {% if is_control %}true{% else %}false{% endif %};
    var current = 0;
    var answers = {};
    var countdownTimer = null;
    var TIME_LIMIT = 8;

    function startQuestion() {
        document.getElementById('cue-display').textContent = cues[current].cue;
        document.getElementById('answer-input').value = '';
        document.getElementById('answer-input').focus();
        document.getElementById('warning').textContent = '';
        document.getElementById('progress').textContent =
            'Question ' + (current + 1) + ' of ' + cues.length;
        if (!IS_CONTROL) {
            startCountdown();
        }
    }

    function startCountdown() {
        var timeLeft = TIME_LIMIT;
        document.getElementById('countdown').textContent = timeLeft;
        clearInterval(countdownTimer);
        countdownTimer = setInterval(function () {
            timeLeft--;
            document.getElementById('countdown').textContent = timeLeft;
            if (timeLeft <= 0) {
                clearInterval(countdownTimer);
                saveAndAdvance();
            }
        }, 1000);
    }

    function saveAndAdvance() {
        clearInterval(countdownTimer);
        answers[cues[current].idx] = document.getElementById('answer-input').value;
        current++;
        if (current < cues.length) {
            startQuestion();
        } else {
            document.getElementById('recall_answers_hidden').value = JSON.stringify(answers);
            document.forms[0].submit();
        }
    }

    document.getElementById('next-btn').addEventListener('click', function () {
        if (IS_CONTROL) {
            var val = document.getElementById('answer-input').value.trim();
            var cue = cues[current].cue; // e.g. "A or a?"
            var match = cue.match(/^([A-Z]) or ([a-z])\?$/);
            if (match) {
                var upper = match[1];
                var lower = match[2];
                if (val !== '' && val !== upper && val !== lower) {
                    document.getElementById('warning').textContent =
                        'Please type "' + upper + '", "' + lower + '", or leave it empty.';
                    return;
                }
            }
        }
        saveAndAdvance();
    });

    startQuestion();
</script>
{% endblock %}