{{ block title }}
    Matching Lobby
{{ endblock }}

{{ block content }}
<div class="lobby-shell">
    <div id="waiting-box" class="lobby-card">
        <h2>Waiting for participants</h2>
        <p id="waiting-text">We are preparing your bargaining group.</p>
    </div>

    <div id="confirmed-box" class="lobby-card" style="display: none;">
        <h2>You are confirmed</h2>
        <p>
            The experiment will start soon. Please remain on this page and wait
            for the other participants.
        </p>
        <p id="ready-countdown-text"></p>
        <p id="confirmed-count-text-ready"></p>
        <button type="button" id="reconfirm-btn" class="btn btn-primary">
            Still ready
        </button>
    </div>

    <div id="invite-modal" class="invite-modal" style="display: none;">
        <div class="invite-card">
            <h2>Your bargaining session is ready</h2>
            <p>
                Click to start within
                <span id="seconds-left">{{ confirm_seconds }}</span>
                seconds.
            </p>
            <p id="confirmed-count-text"></p>
            <button type="button" id="confirm-btn" class="btn btn-primary">
                I'm ready
            </button>
        </div>
    </div>

    <button type="submit" id="auto-submit-btn" style="display: none;"></button>
</div>
{{ endblock }}

{{ block styles }}
<style>
    body {
        background: #eef3f7;
    }

    .lobby-shell {
        max-width: 760px;
        margin: 48px auto;
    }

    .lobby-card,
    .invite-card {
        background: #fffdf8;
        border: 2px solid #d9b44a;
        border-radius: 16px;
        padding: 28px 24px;
        text-align: center;
        box-shadow: 0 14px 40px rgba(0, 0, 0, 0.08);
    }

    .lobby-card h2,
    .invite-card h2 {
        color: #2d3c48;
        margin-bottom: 12px;
    }

    .lobby-card p,
    .invite-card p {
        color: #445564;
        font-size: 1.05rem;
        margin-bottom: 10px;
    }

    .invite-modal {
        position: fixed;
        inset: 0;
        z-index: 4000;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 24px;
        background: rgba(17, 29, 38, 0.72);
    }

    #confirm-btn,
    #reconfirm-btn {
        min-width: 220px;
        padding: 12px 24px;
        font-size: 1.05rem;
        font-weight: 700;
    }

    #confirm-btn[disabled],
    #reconfirm-btn[disabled] {
        opacity: 0.65;
        cursor: not-allowed;
    }

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

{{ block scripts }}
<script>
    const waitingBox = document.getElementById('waiting-box');
    const confirmedBox = document.getElementById('confirmed-box');
    const inviteModal = document.getElementById('invite-modal');
    const waitingText = document.getElementById('waiting-text');
    const secondsLeftEl = document.getElementById('seconds-left');
    const confirmedCountText = document.getElementById('confirmed-count-text');
    const readyCountdownText = document.getElementById('ready-countdown-text');
    const confirmedCountTextReady = document.getElementById('confirmed-count-text-ready');
    const confirmBtn = document.getElementById('confirm-btn');
    const reconfirmBtn = document.getElementById('reconfirm-btn');
    const autoSubmitBtn = document.getElementById('auto-submit-btn');
    const pageForm = document.getElementById('form') || document.querySelector('form');

    const originalTitle = document.title;
    let blinkTimer = null;
    let lastState = null;
    let heartbeatTimer = null;
    let hasSubmitted = false;
    let hasLocallyConfirmed = false;
    let readyWarningActive = false;
    let confirmPending = false;
    let confirmPendingStartedAt = 0;
    let reconfirmPending = false;
    let reconfirmPendingStartedAt = 0;
    let confirmFallbackTimer = null;
    let reconfirmFallbackTimer = null;

    function resetConfirmButton() {
        hasLocallyConfirmed = false;
        confirmPending = false;
        confirmPendingStartedAt = 0;
        if (confirmFallbackTimer) {
            window.clearTimeout(confirmFallbackTimer);
            confirmFallbackTimer = null;
        }
        confirmBtn.disabled = false;
        confirmBtn.textContent = "I'm ready";
    }

    function resetReconfirmButton() {
        reconfirmPending = false;
        reconfirmPendingStartedAt = 0;
        if (reconfirmFallbackTimer) {
            window.clearTimeout(reconfirmFallbackTimer);
            reconfirmFallbackTimer = null;
        }
        reconfirmBtn.disabled = false;
        reconfirmBtn.textContent = 'Still ready';
    }

    function setStateVisibility(showWaiting, showConfirmed, showInvite) {
        waitingBox.style.display = showWaiting ? 'block' : 'none';
        confirmedBox.style.display = showConfirmed ? 'block' : 'none';
        inviteModal.style.display = showInvite ? 'flex' : 'none';
    }

    function startTitleBlink() {
        if (blinkTimer) return;
        blinkTimer = window.setInterval(function () {
            document.title = document.title === originalTitle
                ? 'Your bargaining session is ready'
                : originalTitle;
        }, 900);
    }

    function stopTitleBlink() {
        if (blinkTimer) {
            window.clearInterval(blinkTimer);
            blinkTimer = null;
        }
        document.title = originalTitle;
    }

    function playBeep() {
        try {
            const AudioContextClass = window.AudioContext || window.webkitAudioContext;
            if (!AudioContextClass) return;
            const ctx = new AudioContextClass();
            const osc = ctx.createOscillator();
            const gain = ctx.createGain();

            osc.type = 'sine';
            osc.frequency.value = 880;
            osc.connect(gain);
            gain.connect(ctx.destination);

            gain.gain.setValueAtTime(0.0001, ctx.currentTime);
            gain.gain.exponentialRampToValueAtTime(0.2, ctx.currentTime + 0.02);
            gain.gain.exponentialRampToValueAtTime(0.0001, ctx.currentTime + 0.5);

            osc.start();
            osc.stop(ctx.currentTime + 0.5);
        } catch (e) {
        }
    }

    function safeLiveSend(payload) {
        if (typeof liveSend === 'function') {
            liveSend(payload);
        }
    }

    function renderWaiting(data) {
        resetConfirmButton();
        resetReconfirmButton();
        setStateVisibility(true, false, false);
        waitingText.textContent =
            'We are preparing your bargaining group. Current waiting pool: ' +
            data.waiting_count +
            '.';
        stopTitleBlink();
    }

    function renderInvited(data) {
        setStateVisibility(false, false, true);

        const secondsLeft = Math.max(0, Number(data.seconds_left || 0));
        secondsLeftEl.textContent = secondsLeft;
        confirmedCountText.textContent =
            String(data.confirmed_count || 0) +
            ' of 4 participants have already confirmed.';

        if (confirmPending && Date.now() - confirmPendingStartedAt > 4000) {
            resetConfirmButton();
        }

        if (confirmPending) {
            confirmBtn.disabled = true;
            confirmBtn.textContent = 'Confirming...';
        } else {
            resetConfirmButton();
        }

        if (lastState !== 'invited') {
            playBeep();
            startTitleBlink();
        }
    }

    function renderConfirmed(data) {
        const secondsLeft = Math.max(0, Number(data.seconds_left || 0));
        hasLocallyConfirmed = true;
        confirmPending = false;
        confirmPendingStartedAt = 0;
        if (confirmFallbackTimer) {
            window.clearTimeout(confirmFallbackTimer);
            confirmFallbackTimer = null;
        }
        confirmBtn.disabled = true;
        confirmBtn.textContent = 'Confirmed';
        if (reconfirmPending && Date.now() - reconfirmPendingStartedAt > 4000) {
            resetReconfirmButton();
        } else if (reconfirmPending) {
            reconfirmBtn.disabled = true;
            reconfirmBtn.textContent = 'Confirming...';
        } else {
            resetReconfirmButton();
        }
        readyCountdownText.textContent =
            'Please confirm again within ' +
            secondsLeft +
            ' seconds to stay in this group.';
        confirmedCountTextReady.textContent =
            String(data.confirmed_count || 0) +
            ' of 4 participants have already confirmed.';
        setStateVisibility(false, true, false);

        if (secondsLeft <= 10) {
            if (!readyWarningActive) {
                playBeep();
                readyWarningActive = true;
            }
            startTitleBlink();
        } else {
            readyWarningActive = false;
            stopTitleBlink();
        }
    }

    function renderMatched() {
        if (hasSubmitted) return;
        hasSubmitted = true;
        stopTitleBlink();

        if (heartbeatTimer) {
            window.clearInterval(heartbeatTimer);
            heartbeatTimer = null;
        }

        waitingText.textContent = 'Group confirmed. Entering round 1...';
        setStateVisibility(true, false, false);
        playBeep();
        startTitleBlink();

        window.setTimeout(function () {
            if (pageForm) {
                if (typeof pageForm.submit === 'function') {
                    pageForm.submit();
                } else if (typeof pageForm.requestSubmit === 'function') {
                    pageForm.requestSubmit();
                }
            } else {
                autoSubmitBtn.click();
            }
        }, 2200);

        window.setTimeout(function () {
            if (!document.hidden) {
                window.location.reload();
            }
        }, 4200);
    }


    function renderState(data) {
        if (!data || !data.state) return;

        if (data.state === 'waiting') {
            renderWaiting(data);
        } else if (data.state === 'invited') {
            renderInvited(data);
        } else if (data.state === 'confirmed') {
            renderConfirmed(data);
        } else if (data.state === 'matched') {
            renderMatched();
            return;
        }

        lastState = data.state;
    }

    function sendHeartbeat() {
        safeLiveSend({
            type: 'heartbeat',
            tab_visible: !document.hidden,
        });
    }

    function startHeartbeatLoop() {
        if (heartbeatTimer) {
            window.clearInterval(heartbeatTimer);
        }
        heartbeatTimer = window.setInterval(function () {
            sendHeartbeat();
        }, {{ heartbeat_seconds }} * 1000);
    }

    document.addEventListener('visibilitychange', function () {
        sendHeartbeat();
    });

    confirmBtn.addEventListener('click', function () {
        hasLocallyConfirmed = true;
        confirmPending = true;
        confirmPendingStartedAt = Date.now();
        confirmBtn.disabled = true;
        confirmBtn.textContent = 'Confirming...';
        if (confirmFallbackTimer) {
            window.clearTimeout(confirmFallbackTimer);
        }
        confirmFallbackTimer = window.setTimeout(function () {
            if (confirmPending) {
                resetConfirmButton();
            }
        }, 4500);
        safeLiveSend({
            type: 'confirm',
            tab_visible: !document.hidden,
        });
    });

    reconfirmBtn.addEventListener('click', function () {
        readyWarningActive = false;
        reconfirmPending = true;
        reconfirmPendingStartedAt = Date.now();
        stopTitleBlink();
        reconfirmBtn.disabled = true;
        reconfirmBtn.textContent = 'Confirming...';
        if (reconfirmFallbackTimer) {
            window.clearTimeout(reconfirmFallbackTimer);
        }
        reconfirmFallbackTimer = window.setTimeout(function () {
            if (reconfirmPending) {
                resetReconfirmButton();
            }
        }, 4500);
        safeLiveSend({
            type: 'reconfirm',
            tab_visible: !document.hidden,
        });
    });

    function liveRecv(data) {
        renderState(data);
    }

    document.addEventListener('DOMContentLoaded', function () {
        setStateVisibility(true, false, false);
        startHeartbeatLoop();
        sendHeartbeat();
    });
</script>
{{ endblock }}