{% 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;
        --training-color: #e67e22; --paid-color: #27ae60;
    }
    body { font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
           background-color: var(--neutral-lightest); color: var(--neutral-dark); line-height: 1.6; }
    .otree-timer { display: none !important; }
    .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); }
    .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); }
    .card.training { border-left-color: var(--training-color); }
    .card.paid     { border-left-color: var(--paid-color); }
    h2 { color: var(--primary-dark); border-bottom: 2px solid var(--primary-light);
         padding-bottom: 8px; margin-top: 0; margin-bottom: 20px; font-size: 17px; }

    /* Phase badge */
    .phase-badge {
        display: inline-block; padding: 4px 14px; border-radius: 20px;
        font-size: 13px; font-weight: 700; margin-bottom: 16px;
    }
    .phase-badge.training { background: #fef3e2; color: var(--training-color); border: 2px solid var(--training-color); }
    .phase-badge.paid     { background: #e8f8ef; color: var(--paid-color);     border: 2px solid var(--paid-color); }

    /* Status bar */
    .status-bar { display: flex; justify-content: space-between; align-items: stretch;
                  gap: 12px; margin-bottom: 20px; }
    .status-item { flex: 1; background: var(--neutral-lightest); border-radius: 6px;
                   padding: 10px 14px; text-align: center; }
    .status-label { font-size: 11px; color: #888; text-transform: uppercase;
                    letter-spacing: 0.5px; margin-bottom: 4px; }
    .status-value { font-size: 20px; font-weight: 700; color: var(--primary-dark); }
    .status-value.warning { color: #c0392b; }

    /* Progress bar for training conditions */
    .training-conditions { margin-bottom: 20px; }
    .condition-row { display: flex; align-items: center; gap: 10px;
                     margin-bottom: 8px; font-size: 13px; }
    .condition-icon { font-size: 16px; width: 20px; text-align: center; flex-shrink: 0; }
    .condition-bar-outer { flex: 1; height: 10px; background: #dee2e6;
                           border-radius: 5px; overflow: hidden; }
    .condition-bar-inner { height: 100%; background: var(--training-color);
                           border-radius: 5px; transition: width 0.5s ease; }
    .condition-bar-inner.complete { background: var(--paid-color); }
    .condition-label { font-size: 12px; color: #666; min-width: 80px; text-align: right; }

    /* Task area */
    .task-area { text-align: center; width: 100%; padding: 10px 0; position: relative; }
    .timer { position: absolute; top: 0; right: 0; 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: none; color: white;
                  padding: 10px 28px; border-radius: 6px; font-size: 15px; font-weight: 500;
                  cursor: pointer; transition: all 0.3s ease;
                  box-shadow: 0 2px 4px rgba(0,0,0,0.1); }
    .btn-custom:hover { background-color: var(--primary-dark); transform: translateY(-2px); }
    .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); }
    .error-msg { 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; }

    /* Training complete banner */
    .training-complete-banner { display: none; background: linear-gradient(135deg, var(--paid-color), #2ecc71);
                                 color: white; padding: 20px; border-radius: 8px; text-align: center;
                                 margin-bottom: 20px; font-size: 16px; font-weight: 600; }

    /* 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; }
    .encoding-table-inner tr:last-child td { background: white; color: var(--neutral-dark); font-weight: 600; }

    /* Result */
    .result-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin: 20px 0; }
    .result-item { background: var(--neutral-lightest); border-radius: 6px; padding: 14px;
                   border-left: 4px solid var(--primary-light); }
    .result-label { font-size: 12px; color: #888; margin-bottom: 4px; }
    .result-value { font-size: 22px; font-weight: 700; color: var(--primary-dark); }

    .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; }
    .otree-btn-next:hover { background-color: var(--primary-dark) !important; transform: translateY(-2px); }
    @media (max-width: 480px) { .result-grid { grid-template-columns: 1fr; } }
</style>

<div class="header">
    <h1>Phase 4</h1>
</div>

<!-- Status bar (hidden until task starts) -->
<div class="status-bar" id="statusBar" style="display:none;">
    <div class="status-item">
        <div class="status-label">{% if participant.language == 'en' %}Elapsed{% else %}Vergangen{% endif %}</div>
        <div class="status-value timer-value" id="elapsedTimer">00:00</div>
    </div>
    <div class="status-item">
        <div class="status-label">{% if participant.language == 'en' %}Remaining{% else %}Verbleibend{% endif %}</div>
        <div class="status-value timer-value" id="remainingTimer">14:00</div>
    </div>
    <div class="status-item">
        <div class="status-label">{% if participant.language == 'en' %}Blocks (training){% else %}Blöcke (Training){% endif %}</div>
        <div class="status-value" id="trainingSets">0</div>
    </div>
    <div class="status-item">
        <div class="status-label">{% if participant.language == 'en' %}Blocks (paid){% else %}Blöcke (bezahlt){% endif %}</div>
        <div class="status-value" id="paidSets">0</div>
    </div>
</div>

<!-- Main card -->
<div class="card" id="mainCard">

    <!-- Phase badge -->
    <div class="phase-badge training" id="phaseBadge">
        {% if participant.language == 'en' %}⏳ Training Phase (unpaid){% else %}⏳ Trainingsphase (unbezahlt){% endif %}
    </div>

    <!-- Training complete banner -->
    <div class="training-complete-banner" id="trainingBanner">
        {% if participant.language == 'en' %}
            ✓ Training complete! You are now in the <strong>paid phase</strong>.
        {% else %}
            ✓ Training abgeschlossen! Sie befinden sich jetzt in der <strong>bezahlten Phase</strong>.
        {% endif %}
    </div>

    <!-- Training conditions (shown during training) -->
    <div class="training-conditions" id="trainingConditions">
        <h2>
            {% if participant.language == 'en' %}Training Progress{% else %}Trainingsfortschritt{% endif %}
        </h2>
        <p style="font-size: 13px; color: #666; margin-bottom: 14px;">
            {% if participant.language == 'en' %}
                The paid phase begins automatically once <strong>both</strong> conditions are met.
            {% else %}
                Die bezahlte Phase beginnt automatisch, sobald <strong>beide</strong> Bedingungen erfüllt sind.
            {% endif %}
        </p>

        <!-- Condition 1: time -->
        <div class="condition-row">
            <span class="condition-icon" id="timeIcon">⏱</span>
            <div>
                <div style="font-size: 13px; font-weight: 600;">
                    {% if participant.language == 'en' %}Minimum time:{% else %}Mindestzeit:{% endif %}
                    {% if reduction > 0 %}
                        <span style="font-size: 12px; color: var(--paid-color);">
                            ({% if participant.language == 'en' %}reduced by {{ reduction }}s due to help{% else %}um {{ reduction }}s reduziert durch Hilfe{% endif %})
                        </span>
                    {% endif %}
                </div>
            </div>
            <div class="condition-bar-outer">
                <div class="condition-bar-inner" id="timeBar" style="width:0%"></div>
            </div>
            <span class="condition-label" id="timeLabel">0 / {{ effective_training }}s</span>
        </div>

        <!-- Condition 2: blocks -->
        <div class="condition-row">
            <span class="condition-icon" id="blocksIcon">📦</span>
            <div>
                <div style="font-size: 13px; font-weight: 600;">
                    {% if participant.language == 'en' %}Minimum blocks:{% else %}Mindestblöcke:{% endif %}
                </div>
            </div>
            <div class="condition-bar-outer">
                <div class="condition-bar-inner" id="blocksBar" style="width:0%"></div>
            </div>
            <span class="condition-label" id="blocksLabel">0 / {{ training_min_blocks }}</span>
        </div>
    </div>

    <!-- START SCREEN -->
    <div id="startScreen" style="text-align:center; padding: 30px 0;">
        <h2>{% if participant.language == 'en' %}Ready to start?{% else %}Bereit loszulegen?{% endif %}</h2>
        <p style="font-size: 14px; color: #555; margin-bottom: 20px;">
            {% if participant.language == 'en' %}
                You will first complete an <strong>unpaid training phase</strong> (minimum {{ effective_training }}s
                and {{ training_min_blocks }} blocks), after which the <strong>paid phase</strong> begins automatically
                Each correctly completed block in the paid phase earns <strong>10 points</strong>.
                {% if help_received > 0 %}
                    Your partner helped you, reducing your training time by <strong>{{ reduction }} seconds</strong>.
                {% endif %}
            {% else %}
                Sie absolvieren zunächst eine <strong>unbezahlte Trainingsphase</strong> (mindestens {{ effective_training }}s
                und {{ training_min_blocks }} Blöcke), danach beginnt die <strong>bezahlte Phase</strong> automatisch.
                Jeder korrekt abgeschlossene Block in der bezahlten Phase bringt Ihnen <strong>10 Punkte</strong>.
                {% if help_received > 0 %}
                    Ihr*e Mitspieler*in hat Ihnen geholfen und Ihre Trainingszeit um <strong>{{ reduction }} Sekunden</strong> verkürzt.
                {% endif %}
            {% endif %}
        </p>
        <button type="button" onclick="startTask()" class="btn-custom">
            {% if participant.language == 'en' %}Start Task{% else %}Aufgabe starten{% endif %}
        </button>
    </div>

    <!-- TASK SCREEN -->
    <div id="taskScreen" style="display:none;">
        <div class="task-area">
            <div id="errorMsg" class="error-msg">
                {% if participant.language == 'en' %}Some answers are incorrect. Please check your entries.
                {% else %}Einige Antworten sind falsch. Bitte überprüfen Sie Ihre Eingaben.{% endif %}
            </div>
            <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 style="margin-top: 16px;">
                <button type="button" onclick="submitAnswers()" id="submitBtn" class="btn-custom" disabled>OK</button>
            </div>
        </div>
    </div>

    <!-- TIME UP SCREEN -->
    <div id="timeupScreen" style="display:none; text-align:center; padding: 20px 0;">
        <h3 style="color: var(--primary-dark);">
            {% if participant.language == 'en' %}Time is up!{% else %}Die Zeit ist um!{% endif %}
        </h3>
        <p>{% if participant.language == 'en' %}You have completed the encoding task.{% else %}Sie haben die Kodieraufgabe abgeschlossen.{% endif %}</p>
        <div class="result-grid">
            <div class="result-item">
                <div class="result-label">{% if participant.language == 'en' %}Training blocks{% else %}Trainingsblöcke{% endif %}</div>
                <div class="result-value" id="finalTrainingSets">0</div>
            </div>
            <div class="result-item" style="border-left-color: var(--paid-color);">
                <div class="result-label">{% if participant.language == 'en' %}Paid blocks{% else %}Bezahlte Blöcke{% endif %}</div>
                <div class="result-value" id="finalPaidSets">0</div>
            </div>
            <div class="result-item" style="grid-column: 1 / -1; border-left-color: var(--primary-medium);">
                <div class="result-label">{% if participant.language == 'en' %}Points earned (Phase 4){% else %}Erspielte Punkte (Phase 4){% endif %}</div>
                <div class="result-value" id="finalPoints">0</div>
            </div>
        </div>
        <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" id="buttonSection">
            <button class="otree-btn-next btn btn-primary">
                {% if participant.language == 'en' %}Continue{% else %}Weiter{% endif %}
            </button>
        </div>
    </div>
</div>

<!-- Encoding table -->
<div class="card">
    <h2>{% if participant.language == 'en' %}Encryption Table (New){% else %}Verschlüsselungstabelle (Neu){% 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>

<script>
    let timerInterval      = null;
    let elapsedInterval    = null;
    let startTime          = null;
    let inPaidPhase        = js_vars.in_paid_phase || false;
    let trainingSets       = js_vars.training_sets || 0;
    let paidSets           = js_vars.paid_sets || 0;
    const totalDuration    = js_vars.total_duration;
    const trainingDuration = js_vars.training_duration;
    const minBlocks        = js_vars.training_min_blocks;

    // ── Resume after refresh ──────────────────────────────────────────────────
    document.addEventListener('DOMContentLoaded', function() {
        const saved = js_vars.task_start_time;

        // If time is already up (server confirmed), show timeup screen directly
        if (js_vars.time_is_up) {
            document.getElementById('startScreen').style.display    = 'none';
            document.getElementById('taskScreen').style.display     = 'none';
            document.getElementById('statusBar').style.display      = 'flex';
            document.getElementById('timeupScreen').style.display   = 'block';
            document.getElementById('finalTrainingSets').textContent = js_vars.total_sets_completed - js_vars.paid_sets;
            document.getElementById('finalPaidSets').textContent     = js_vars.paid_sets;
            document.getElementById('finalPoints').textContent       = js_vars.points_p4_B;
            updateStatusBar(js_vars.total_duration);
            return;
        }

        if (saved) {
            startTime = new Date(saved).getTime();
            const elapsed = (Date.now() - startTime) / 1000;
            document.getElementById('statusBar').style.display  = 'flex';
            document.getElementById('startScreen').style.display = 'none';
            updateStatusBar(elapsed);

            if (elapsed >= totalDuration) {
                document.getElementById('timeupScreen').style.display   = 'block';
                document.getElementById('finalTrainingSets').textContent = js_vars.total_sets_completed - js_vars.paid_sets;
                document.getElementById('finalPaidSets').textContent     = js_vars.paid_sets;
                document.getElementById('finalPoints').textContent       = js_vars.points_p4_B;
            } else {
                document.getElementById('taskScreen').style.display = 'block';
                if (inPaidPhase) switchToPaidPhase(false);
                startTimers();
                liveSend({ type: 'resume_task' });
            }
            document.getElementById('trainingSets').textContent = trainingSets;
            document.getElementById('paidSets').textContent     = paidSets;
        }
    });

    function liveRecv(data) {
        if (data.type === 'new_letters') {
            displayLetters(data.letters);
            document.getElementById('errorMsg').style.display = 'none';
            if (data.start_time) {
                startTimers();
                document.getElementById('statusBar').style.display = 'flex';
            } else if (!data.resume) {
                if (inPaidPhase) {
                    paidSets++;
                    document.getElementById('paidSets').textContent = paidSets;
                } else {
                    trainingSets++;
                    document.getElementById('trainingSets').textContent = trainingSets;
                }
            }
            if (data.in_paid_phase && !inPaidPhase) switchToPaidPhase(true);
        } else if (data.type === 'training_complete') {
            switchToPaidPhase(true);
            displayLetters(data.letters);
            document.getElementById('errorMsg').style.display = 'none';
        } else if (data.type === 'encoding_error') {
            document.getElementById('errorMsg').style.display = 'block';
            for (let i = 0; i < 3; i++) {
                document.getElementById('answer-' + i).disabled = false;
            }
            document.getElementById('submitBtn').disabled = false;
            document.getElementById('answer-0').focus();
        } else if (data.type === 'time_remaining') {
            if (data.in_paid_phase && !inPaidPhase) switchToPaidPhase(true);
            updateConditionBars(data.elapsed, data.training_sets);
        } else if (data.type === 'time_up') {
            handleTimeUp(data);
        }
    }

    function startTask() {
        document.getElementById('startScreen').style.display = 'none';
        document.getElementById('taskScreen').style.display  = 'block';
        document.getElementById('statusBar').style.display   = 'flex';
        startTime = Date.now();
        liveSend({ type: 'start_task' });
    }

    function startTimers() {
        if (!startTime) startTime = Date.now();

        elapsedInterval = setInterval(function() {
            const elapsed   = (Date.now() - startTime) / 1000;
            const remaining = Math.max(totalDuration - elapsed, 0);
            updateStatusBar(elapsed);
            if (!inPaidPhase) updateConditionBars(elapsed, trainingSets);
            if (remaining <= 60) {
                document.getElementById('remainingTimer').classList.add('warning');
            }
        }, 1000);

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

    function updateStatusBar(elapsed) {
        const remaining = Math.max(totalDuration - elapsed, 0);
        const em = Math.floor(elapsed / 60),    es = Math.floor(elapsed % 60);
        const rm = Math.floor(remaining / 60),  rs = Math.floor(remaining % 60);
        document.getElementById('elapsedTimer').textContent =
            String(em).padStart(2,'0') + ':' + String(es).padStart(2,'0');
        document.getElementById('remainingTimer').textContent =
            String(rm).padStart(2,'0') + ':' + String(rs).padStart(2,'0');
    }

    function updateConditionBars(elapsed, trainingBlocksFromServer) {
        if (inPaidPhase) return;

        // Time bar
        const timePct = Math.min((elapsed / trainingDuration) * 100, 100);
        const timeBar = document.getElementById('timeBar');
        timeBar.style.width = timePct + '%';
        if (timePct >= 100) timeBar.classList.add('complete');
        document.getElementById('timeLabel').textContent =
            Math.floor(elapsed) + ' / ' + trainingDuration + 's';
        document.getElementById('timeIcon').textContent = timePct >= 100 ? '✓' : '⏱';

        // Blocks bar
        const blocks    = trainingBlocksFromServer !== undefined ? trainingBlocksFromServer : trainingSets;
        const blocksPct = Math.min((blocks / minBlocks) * 100, 100);
        const blocksBar = document.getElementById('blocksBar');
        blocksBar.style.width = blocksPct + '%';
        if (blocksPct >= 100) blocksBar.classList.add('complete');
        document.getElementById('blocksLabel').textContent = blocks + ' / ' + minBlocks;
        document.getElementById('blocksIcon').textContent  = blocksPct >= 100 ? '✓' : '📦';
    }

    function switchToPaidPhase(animate) {
        inPaidPhase = true;
        const badge = document.getElementById('phaseBadge');
        badge.className = 'phase-badge paid';
        badge.textContent = document.documentElement.lang === 'de'
            ? '✓ Bezahlte Phase' : '✓ Paid Phase';
        document.getElementById('mainCard').className = 'card paid';
        document.getElementById('trainingConditions').style.display = 'none';
        if (animate) {
            const banner = document.getElementById('trainingBanner');
            banner.style.display = 'block';
            setTimeout(function() { banner.style.display = 'none'; }, 4000);
        }
    }

    function displayLetters(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 inp = document.getElementById('answer-' + i);
            inp.value = ''; inp.disabled = false;
        }
        document.getElementById('submitBtn').disabled = true;
        document.getElementById('answer-0').focus();
    }

    function submitAnswers() {
        const answers = [
            document.getElementById('answer-0').value,
            document.getElementById('answer-1').value,
            document.getElementById('answer-2').value,
        ];
        for (let i = 0; i < 3; i++) document.getElementById('answer-' + i).disabled = true;
        document.getElementById('submitBtn').disabled = true;
        liveSend({ type: 'submit_encoding', answers: answers });
    }

    function handleTimeUp(data) {
        clearInterval(timerInterval); clearInterval(elapsedInterval);
        timerInterval = null; elapsedInterval = null;
        document.getElementById('taskScreen').style.display   = 'none';
        document.getElementById('timeupScreen').style.display = 'block';
        document.getElementById('finalTrainingSets').textContent = data.total_sets - (data.paid_sets || 0);
        document.getElementById('finalPaidSets').textContent     = data.paid_sets || 0;
        document.getElementById('finalPoints').textContent       = data.payoff_points || 0;
    }

    // Input validation
    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('submitBtn').disabled = !allFilled;
        }
    });

    document.querySelectorAll('.answer-input').forEach(function(inp) {
        inp.addEventListener('contextmenu', function(e) { e.preventDefault(); });
        inp.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(function(ev) {
            inp.addEventListener(ev, function(e) { e.preventDefault(); });
        });
        inp.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('submitBtn').disabled) submitAnswers();
        }
    });
</script>

{% endblock %}