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

{% block title %}
    {% if participant.language == 'en' %}
        FUNI - Part 2
    {% elif participant.language == 'de' %}
        FUNI - 2. Teil
    {% endif %}
{% endblock %}

{% block content %}
<style>
    :root {
        --primary-dark: #153268;
        --primary-medium: #005f9b;
        --primary-light: #0091c8;
        --primary-lighter: #50a5d2;
        --neutral-dark: #3b3b3a;
        --neutral-lightest: #ececed;
    }
    body {
        font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
        background-color: var(--neutral-lightest);
        color: var(--neutral-dark);
        line-height: 1.6;
    }
    .header {
        background: linear-gradient(135deg, var(--primary-dark) 0%, var(--primary-medium) 100%);
        color: white;
        padding: 20px 25px;
        border-radius: 8px;
        margin-bottom: 24px;
        box-shadow: 0 4px 6px rgba(0,0,0,0.1);
    }

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

    .header h1 {
        margin: 0;
        font-size: 22px;
        font-weight: 600;
    }
    .card {
        background: white;
        border-radius: 8px;
        padding: 30px;
        margin-bottom: 20px;
        box-shadow: 0 2px 4px rgba(0,0,0,0.08);
        border-left: 4px solid var(--primary-light);
    }
    h2 {
        color: var(--primary-dark);
        border-bottom: 2px solid var(--primary-light);
        padding-bottom: 8px;
        margin-top: 0;
        margin-bottom: 20px;
        font-size: 17px;
    }
    .task-area {
        text-align: center;
        width: 100%;
        padding: 10px 0;
        position: relative;
    }
    .timer {
        position: absolute;
        top: 16px;
        right: 20px;
        font-weight: bold;
        background-color: var(--neutral-lightest);
        padding: 6px 12px;
        border-radius: 5px;
        font-size: 14px;
        color: var(--primary-dark);
        box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}
    .btn-custom {
        background-color: var(--primary-medium);
        border-color: var(--primary-medium);
        color: white;
        padding: 10px 28px;
        border-radius: 6px;
        font-size: 15px;
        font-weight: 500;
        cursor: pointer;
        transition: all 0.3s ease;
        border: none;
        box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    }
    .btn-custom:hover {
        background-color: var(--primary-dark);
        transform: translateY(-2px);
        box-shadow: 0 4px 8px rgba(0,0,0,0.15);
    }
    .letter-game-table {
        border-collapse: separate;
        border-spacing: 20px;
        margin: 0 auto;
    }
    .letter-game-table td {
        text-align: center;
        vertical-align: top;
        padding: 0;
    }
    .letter-display {
        font-size: 28px;
        font-weight: bold;
        color: var(--primary-dark);
        margin-bottom: 15px;
    }
    .answer-input {
        font-size: 20px;
        height: 50px;
        width: 80px;
        text-align: center;
        border: 2px solid #ccc;
        border-radius: 4px;
    }
    .answer-input:focus {
        outline: none;
        border-color: var(--primary-medium);
    }
    .alert-danger {
        background-color: #f8d7da;
        border: 1px solid #f5c6cb;
        color: #721c24;
        padding: 12px 20px;
        border-radius: 4px;
    }
    /* Encoding table */
    .encoding-table-wrapper {
        width: 100%;
    }
    .encoding-table-inner {
        width: 100%;
        border-collapse: collapse;
        font-size: 12px;
        table-layout: fixed;
    }
    .encoding-table-inner td {
        text-align: center;
        padding: 8px 2px;
        border: 1px solid #dee2e6;
        height: 40px;
        word-break: break-all;
    }
    .encoding-table-inner tr:first-child td {
        background: var(--primary-dark);
        color: white;
        font-weight: 700;
        font-size: 13px;
        height: 40px;
    }
    .encoding-table-inner tr:last-child td {
        background: white;
        color: var(--neutral-dark);
        font-weight: 600;
        font-size: 11px;
        height: 40px;
    }
    .button-section {
        text-align: center;
        margin-top: 24px;
    }
    .otree-btn-next {
        background-color: var(--primary-medium) !important;
        border: none !important;
        color: white !important;
        padding: 12px 30px !important;
        border-radius: 6px !important;
        font-size: 16px !important;
        font-weight: 500 !important;
        cursor: pointer !important;
        transition: all 0.3s ease !important;
        box-shadow: 0 2px 4px rgba(0,0,0,0.1) !important;
    }
    .otree-btn-next:hover {
        background-color: var(--primary-dark) !important;
        transform: translateY(-2px);
        box-shadow: 0 4px 8px rgba(0,0,0,0.15) !important;
    }
</style>

<div class="header">
    <h1>{% if participant.language == 'en' %}Phase 2{% else %}Phase 2{% endif %}</h1>
</div>

<div class="card" style="position: relative;">
    <h2>
        {% if participant.language == 'en' %}Encoding Task{% else %}Kodieraufgabe{% endif %}
    </h2>

     <span class="timer">
        {% if participant.language == 'en' %}Elapsed Time:{% elif participant.language == 'de' %}Vergangene Zeit:{% endif %}
        <span id="elapsedtimer">00:00</span>
    </span>

    <div style="width: fit-content; margin: 0 auto;">
        <div class="task-area">
            <div class="col-12 text-center">
                <p>
                    {% if participant.language == 'en' %}
                        Number of completed words:
                    {% elif participant.language == 'de' %}
                        Anzahl fertige Wörter:
                    {% endif %}
                    <strong id="sets-completed">0</strong>
                </p>
            </div>

            <!-- Start Container -->
            <div id="start-container" class="text-center" style="padding: 40px;">
                <h3>
                    {% if participant.language == 'en' %}
                        Ready to start?
                    {% elif participant.language == 'de' %}
                        Bereit loszulegen?
                    {% endif %}
                </h3>
                <p>
                    {% if participant.language == 'en' %}
                        Click the button below to start the task.
                    {% elif participant.language == 'de' %}
                        Klicken Sie auf den untenstehenden Button, um mit der Aufgabe loszulegen.
                    {% endif %}
                </p>
                <button type="button" onclick="startTask()" class="btn-custom btn-lg">
                    {% if participant.language == 'en' %}
                        Start Task
                    {% elif participant.language == 'de' %}
                        Aufgabe starten
                    {% endif %}
                </button>
            </div>

            <!-- Task Container (hidden initially) -->
            <div id="task-container" style="display: none;">
                <!-- Letters Display -->
                <div id="letters-display" class="text-center mb-4">
                    <table class="letter-game-table">
                        <tr>
                            <td>
                                <div class="letter-display" id="letter-0"></div>
                                <input type="number" class="answer-input" id="answer-0" min="1" placeholder="?">
                            </td>
                            <td>
                                <div class="letter-display" id="letter-1"></div>
                                <input type="number" class="answer-input" id="answer-1" min="1" placeholder="?">
                            </td>
                            <td>
                                <div class="letter-display" id="letter-2"></div>
                                <input type="number" class="answer-input" id="answer-2" min="1" placeholder="?">
                            </td>
                        </tr>
                    </table>
                </div>

                <!-- Error Message Display -->
                <div id="error-message" style="display: none; margin: 20px 0; background-color: #fdecea; border-left: 4px solid #c0392b; padding: 12px 16px; border-radius: 4px; color: #c0392b; font-size: 14px; font-weight: 600;">
                    {% if participant.language == 'en' %}
                        Some answers are incorrect.
                    {% elif participant.language == 'de' %}
                        Einige Antworten sind falsch.
                    {% endif %}
                </div>

                <!-- Submit Button -->
                <div class="text-center">
                    <button type="button" onclick="submitAnswers()" id="submit-button" class="btn-custom btn-lg">OK</button>
                </div>
            </div>
        </div>

        <!-- Time Up Container -->
        <div id="timeup-container" style="display: none;" class="text-center">
            <h3>
                {% if participant.language == 'en' %}
                    Time is up!
                {% elif participant.language == 'de' %}
                    Die Zeit ist um!
                {% endif %}
            </h3>
            <p>
                {% if participant.language == 'en' %}
                    You have completed the encoding task.
                {% elif participant.language == 'de' %}
                    Sie haben die Verschlüsselungsaufgabe abgeschlossen.
                {% endif %}
            </p>
            <p>
                {% if participant.language == 'en' %}
                    Total number of encoded words:
                {% elif participant.language == 'de' %}
                    Gesamtzahl der fertig codierten Wörter:
                {% endif %}
                <strong id="final-sets">0</strong>
            </p>
            <p>
                {% if participant.language == 'en' %}
                    Points earned in Phase 1:
                {% elif participant.language == 'de' %}
                    Erspielte Punkte in Phase 1:
                {% endif %}
                <strong id="total_points_bf_reduction">0</strong>
            </p>
            <div>
                {% if participant.language == 'en' %}
                    <p>Click "Continue" now to proceed to Phase 3.</p>
                {% else %}
                    <p>Klicken Sie jetzt auf Weiter, um zu Phase 3 zu gelangen.</p>
                {% endif %}
            </div>
            <div class="button-section">
                <button class="otree-btn-next btn btn-primary">
                    {% if participant.language == 'en' %}Continue{% else %}Weiter{% endif %}
                </button>
            </div>
        </div>
    </div>
</div>

<!-- Encoding Table -->
<div class="card">
    <h2>
        {% if participant.language == 'en' %}Encryption Table{% else %}Verschlüsselungstabelle{% endif %}
    </h2>
    <div class="encoding-table-wrapper">
        <table class="encoding-table-inner">
            <tr>
                {% for letter, number in encoding_table.items %}
                <td>{{ letter }}</td>
                {% endfor %}
            </tr>
            <tr>
                {% for letter, number in encoding_table.items %}
                <td>{{ number }}</td>
                {% endfor %}
            </tr>
        </table>
    </div>
</div>

{% endblock %}

{% block scripts %}
<script>
    let timerInterval = null;
    let currentLetters = [];
    let setsCompleted = js_vars.total_sets_completed || 0;
    let startTime = null;
    let elapsedTimerInterval = null;

    // ── Resume after page refresh ─────────────────────────────────────────────
    document.addEventListener('DOMContentLoaded', function() {
        const savedStartTime = js_vars.task_start_time;
        if (savedStartTime) {
            startTime = new Date(savedStartTime).getTime();
            const elapsed = (Date.now() - startTime) / 1000;

            document.getElementById('sets-completed').textContent = setsCompleted;

            if (elapsed >= js_vars.task_duration) {
                // Time already up — show timeup screen, do NOT start any intervals
                document.getElementById('start-container').style.display = 'none';
                document.getElementById('task-container').style.display = 'none';
                document.getElementById('timeup-container').style.display = 'block';
            } else {
                // Resume normally
                document.getElementById('start-container').style.display = 'none';
                document.getElementById('task-container').style.display = 'block';
                startElapsedTimer();
                startTimer();
                liveSend({ type: 'resume_task' });  // ← does NOT reset server start time
            }
        }
    });

    function liveRecv(data) {
        console.log("Received data:", data);

        if (data.type === 'new_letters') {
            displayNewLetters(data.letters);
            document.getElementById('error-message').style.display = 'none';
            if (data.start_time) {
                // Fresh start
                startTimer();
                startElapsedTimer();
            } else if (data.resume) {
                // Page was refreshed — do not increment counter
            } else {
                // Word completed — increment counter
                setsCompleted++;
                document.getElementById('sets-completed').textContent = setsCompleted;
            }
        } else if (data.type === 'encoding_error') {
            // Show error message
            handleEncodingError(data);
        } else if (data.type === 'time_up') {
            handleTimeUp(data);
        }
    }

    function startTask() {
        console.log("Starting task...");
        document.getElementById('start-container').style.display = 'none';
        document.getElementById('task-container').style.display = 'block';
        startTime = Date.now();
        liveSend({type: 'start_task'});
    }

    function startElapsedTimer() {
        if (!startTime) startTime = Date.now();
        elapsedTimerInterval = setInterval(() => {
            const elapsedMs = Date.now() - startTime;
            const elapsedSeconds = Math.floor(elapsedMs / 1000);
            const minutes = Math.floor(elapsedSeconds / 60);
            const seconds = elapsedSeconds % 60;

            document.getElementById('elapsedtimer').textContent =
                minutes + ':' + (seconds < 10 ? '0' : '') + seconds;
        }, 1000);
    }

    function displayNewLetters(letters) {
        console.log("Displaying new letters:", letters);
        currentLetters = letters;

        // Display letters
        for (let i = 0; i < 3; i++) {
            document.getElementById('letter-' + i).innerHTML =
                '<h1 style="font-size: 60px; margin: 20px 0;">' + letters[i] + '</h1>';
            const input = document.getElementById('answer-' + i);
            input.value = '';
            input.disabled = false;
            input.style.borderColor = '';
        }

        // Hide error message
        document.getElementById('error-message').style.display = 'none';

        // Reset submit button
        document.getElementById('submit-button').disabled = true;

        // Focus first input
        document.getElementById('answer-0').focus();
    }

    function handleEncodingError(data) {
        console.log("Handling encoding error");

        // Show error message
        document.getElementById('error-message').style.display = 'block';

        // Re-enable inputs for correction
        for (let i = 0; i < 3; i++) {
            const input = document.getElementById('answer-' + i);
            input.disabled = false;
        }

        // Re-enable submit button
        document.getElementById('submit-button').disabled = false;

        // Focus on first input
        document.getElementById('answer-0').focus();
    }

    function submitAnswers() {
        console.log("Submitting answers...");
        const answers = [
            document.getElementById('answer-0').value,
            document.getElementById('answer-1').value,
            document.getElementById('answer-2').value
        ];

        // Disable inputs while processing
        for (let i = 0; i < 3; i++) {
            document.getElementById('answer-' + i).disabled = true;
        }
        document.getElementById('submit-button').disabled = true;

        liveSend({
            type: 'submit_encoding',
            answers: answers
        });
    }

    function startTimer() {
        timerInterval = setInterval(() => {
            liveSend({type: 'check_time'});
        }, 1000);
    }

    function updateTimer(remainingSeconds) {
        const minutes = Math.floor(remainingSeconds / 60);
        const seconds = Math.floor(remainingSeconds % 60);
        document.getElementById('elapsedtimer').textContent =
            minutes + ':' + (seconds < 10 ? '0' : '') + seconds;
    }

    function handleTimeUp(data) {
        console.log("Time is up!");
        clearInterval(timerInterval);
        clearInterval(elapsedTimerInterval);
        timerInterval = null;
        elapsedTimerInterval = null;
        document.getElementById('task-container').style.display = 'none';
        document.getElementById('timeup-container').style.display = 'block';
        document.getElementById('final-sets').textContent = data.total_sets;
        document.getElementById('total_points_bf_reduction').textContent = data.payoff_points || 0;
    }

    // Check if all inputs are filled
    document.addEventListener('input', function(e) {
        if (e.target.classList.contains('answer-input')) {
            const allFilled =
                document.getElementById('answer-0').value !== '' &&
                document.getElementById('answer-1').value !== '' &&
                document.getElementById('answer-2').value !== '';
            document.getElementById('submit-button').disabled = !allFilled;
        }
    });

    // Prevent copying into the boxes + allow only numbers
    document.querySelectorAll('.answer-input').forEach(input => {
        input.addEventListener('contextmenu', function(e) {
            e.preventDefault();
        });
        input.addEventListener('keydown', function(e) {
            // Block Ctrl+V/C/X
            if (e.ctrlKey && (e.key === 'v' || e.key === 'c' || e.key === 'x')) {
                e.preventDefault();
                return;
            }
            // Allow control keys
            const allowed = ['Backspace', 'Delete', 'Tab', 'ArrowLeft', 'ArrowRight',
                             'ArrowUp', 'ArrowDown', 'Enter'];
            if (allowed.includes(e.key)) return;
            // Block anything that is not a digit
            if (!/^\d$/.test(e.key)) {
                e.preventDefault();
            }
        });
        ['paste', 'copy', 'cut', 'drop'].forEach(event => {
            input.addEventListener(event, function(e) {
                e.preventDefault();
            });
        });
        // Strip any non-numeric characters that slip through (e.g. mobile keyboards)
        input.addEventListener('input', function() {
            this.value = this.value.replace(/[^0-9]/g, '');
        });
    });

    // Allow Enter key to submit
    document.addEventListener('keypress', function(e) {
        if (e.target.classList.contains('answer-input') && e.key === 'Enter') {
            e.preventDefault();
            const allFilled =
                document.getElementById('answer-0').value !== '' &&
                document.getElementById('answer-1').value !== '' &&
                document.getElementById('answer-2').value !== '';
            if (allFilled) {
                submitAnswers();
            }
        }
    });
</script>
{% endblock %}