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

    css/* Help active banner */
    .help-banner {
        display: none;
        background: linear-gradient(135deg, #27ae60, #2ecc71);
        color: white; padding: 10px 16px; border-radius: 6px;
        margin-bottom: 16px; font-size: 14px; font-weight: 600; text-align: center;
    }
    .help-banner.active { display: block; }
    .help-bar-outer { height: 8px; background: rgba(255,255,255,0.3);
                      border-radius: 4px; margin-top: 6px; overflow: hidden; }
    .help-bar-inner { height: 100%; background: white;
                      border-radius: 4px; transition: width 1s linear; }
    .letter-cell { display: none; }
    .letter-cell.active { display: table-cell; }

    /* 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>Phase 4</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;">
                {% if help_reduction_secs > 0 %}
                <!-- Help banner -->
                <div class="help-banner" id="helpBanner">
                    {% if participant.language == 'en' %}
                        🎯 Help active: block length reduced to 5 letters
                    {% else %}
                        🎯 Hilfe aktiv: Blocklänge auf 5 Buchstaben reduziert
                    {% endif %}
                        (<span id="helpSecsRemaining">{{ help_reduction_secs }}</span>s
                    {% if participant.language == 'en' %}remaining){% else %}verbleibend){% endif %}
                    <div class="help-bar-outer"><div class="help-bar-inner" id="helpBar" style="width:100%"></div></div>
                </div>

                <div style="background-color: #e8f4eb; border-left: 4px solid #27ae60;
                            padding: 10px 14px; border-radius: 4px; margin-bottom: 16px; font-size: 13px;">
                    {% if participant.language == 'en' %}
                        Your partner helped you: block length is reduced from 6 to <strong>5 letters</strong>
                        for the first <strong>{{ help_reduction_secs }} seconds</strong>.
                    {% else %}
                        Ihr*e Mitspieler*in hat Ihnen geholfen: Blocklänge für die ersten
                        <strong>{{ help_reduction_secs }} Sekunden</strong> auf <strong>5 Buchstaben</strong> reduziert.
                    {% endif %}
                </div>
                {% endif %}

                <!-- Letters Display -->
                <div id="letters-display" class="text-center mb-4">
                    <table class="letter-game-table">
                        <tr>
                            <td class="letter-cell" id="cell-0">
                                <div class="letter-display" id="letter-0"></div>
                                <input type="number" class="answer-input" id="answer-0" min="1" placeholder="?">
                            </td>
                            <td class="letter-cell" id="cell-1">
                                <div class="letter-display" id="letter-1"></div>
                                <input type="number" class="answer-input" id="answer-1" min="1" placeholder="?">
                            </td>
                            <td class="letter-cell" id="cell-2">
                                <div class="letter-display" id="letter-2"></div>
                                <input type="number" class="answer-input" id="answer-2" min="1" placeholder="?">
                            </td>
                            <td class="letter-cell" id="cell-3">
                                <div class="letter-display" id="letter-3"></div>
                                <input type="number" class="answer-input" id="answer-3" min="1" placeholder="?">
                            </td>
                            <td class="letter-cell" id="cell-4">
                                <div class="letter-display" id="letter-4"></div>
                                <input type="number" class="answer-input" id="answer-4" min="1" placeholder="?">
                            </td>
                            <td class="letter-cell" id="cell-5">
                                <div class="letter-display" id="letter-5"></div>
                                <input type="number" class="answer-input" id="answer-5" 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 the end of the experiment.</p>
                {% else %}
                    <p>Klicken Sie jetzt auf weiter, um zum Ende des Experiments 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 elapsedTimerInterval = null;
    let setsCompleted      = js_vars.total_sets_completed || 0;
    let startTime          = null;
    let currentBlockLength = 6;
    const taskDuration     = js_vars.task_duration;
    const helpReductionSecs = js_vars.help_reduction_secs || 0;

    // ── Resume after refresh ──────────────────────────────────────────────────
    document.addEventListener('DOMContentLoaded', function() {
        document.getElementById('sets-completed').textContent = setsCompleted;

        if (js_vars.time_is_up) {
            document.getElementById('start-container').style.display = 'none';
            document.getElementById('task-container').style.display  = 'none';
            document.getElementById('timeup-container').style.display = 'block';
            return;
        }

        const saved = js_vars.task_start_time;
        if (saved) {
            startTime = new Date(saved).getTime();
            const elapsed = (Date.now() - startTime) / 1000;
            document.getElementById('start-container').style.display = 'none';

            if (elapsed >= taskDuration) {
                document.getElementById('timeup-container').style.display = 'block';
            } else {
                document.getElementById('task-container').style.display = 'block';
                updateHelpBanner(elapsed);
                startElapsedTimer();
                startTimer();
                liveSend({ type: 'resume_task' });
            }
        }
    });

    function liveRecv(data) {
        if (data.type === 'new_letters') {
            displayNewLetters(data.letters, data.block_length || 6);
            document.getElementById('error-message').style.display = 'none';
            if (data.start_time) {
                startTimer();
                startElapsedTimer();
            } else if (!data.resume) {
                setsCompleted++;
                document.getElementById('sets-completed').textContent = setsCompleted;
            }
        } else if (data.type === 'encoding_error') {
            handleEncodingError(data);
        } else if (data.type === 'time_remaining') {
            if (data.elapsed !== undefined) updateHelpBanner(data.elapsed);
        } else if (data.type === 'time_up') {
            handleTimeUp(data);
        }
    }

    function startTask() {
        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;
            updateHelpBanner(elapsedSeconds);
        }, 1000);
    }

    function updateHelpBanner(elapsed) {
        const banner = document.getElementById('helpBanner');
        if (!banner || helpReductionSecs === 0) return;
        const secsRemaining = Math.max(helpReductionSecs - elapsed, 0);
        const pct = Math.max((secsRemaining / helpReductionSecs) * 100, 0);
        if (secsRemaining > 0) {
            banner.classList.add('active');
            document.getElementById('helpBar').style.width = pct + '%';
            document.getElementById('helpSecsRemaining').textContent = Math.floor(secsRemaining);
        } else {
            banner.classList.remove('active');
        }
    }

    function displayNewLetters(letters, blockLength) {
        currentBlockLength = blockLength || letters.length;
        for (let i = 0; i < 6; i++) {
            const cell = document.getElementById('cell-' + i);
            if (i < currentBlockLength) {
                cell.classList.add('active');
                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;
            } else {
                cell.classList.remove('active');
            }
        }
        document.getElementById('error-message').style.display = 'none';
        document.getElementById('submit-button').disabled = true;
        document.getElementById('answer-0').focus();
    }

    function handleEncodingError(data) {
        document.getElementById('error-message').style.display = 'block';
        for (let i = 0; i < currentBlockLength; i++) {
            document.getElementById('answer-' + i).disabled = false;
        }
        document.getElementById('submit-button').disabled = false;
        document.getElementById('answer-0').focus();
    }

    function submitAnswers() {
        const answers = [];
        for (let i = 0; i < currentBlockLength; i++) {
            answers.push(document.getElementById('answer-' + i).value);
        }
        for (let i = 0; i < currentBlockLength; 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 handleTimeUp(data) {
        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;
    }

    // Enable submit only when all active inputs are filled
    document.addEventListener('input', function(e) {
        if (e.target.classList.contains('answer-input')) {
            let allFilled = true;
            for (let i = 0; i < currentBlockLength; i++) {
                if (document.getElementById('answer-' + i).value === '') {
                    allFilled = false; break;
                }
            }
            document.getElementById('submit-button').disabled = !allFilled;
        }
    });

    document.querySelectorAll('.answer-input').forEach(input => {
        input.addEventListener('contextmenu', e => e.preventDefault());
        input.addEventListener('keydown', function(e) {
            if (e.ctrlKey && ['v','c','x'].includes(e.key)) { e.preventDefault(); return; }
            const allowed = ['Backspace','Delete','Tab','ArrowLeft','ArrowRight','ArrowUp','ArrowDown','Enter'];
            if (allowed.includes(e.key)) return;
            if (!/^\d$/.test(e.key)) e.preventDefault();
        });
        ['paste','copy','cut','drop'].forEach(ev =>
            input.addEventListener(ev, e => e.preventDefault()));
        input.addEventListener('input', function() {
            this.value = this.value.replace(/[^0-9]/g, '');
        });
    });

    document.addEventListener('keypress', function(e) {
        if (e.target.classList.contains('answer-input') && e.key === 'Enter') {
            e.preventDefault();
            if (!document.getElementById('submit-button').disabled) submitAnswers();
        }
    });
</script>
{% endblock %}