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

{% block title %}{% endblock %}

{% block content %}

{# ── Normal waiting state ── #}
<div id="waiting-content" style="display:flex; flex-direction:column; align-items:center;
     justify-content:center; text-align:center; padding:60px 20px;">

    <p id="status-msg" style="font-size:1.1rem; color:#555;">
        Please wait while all participants connect…
    </p>

    <p id="count-msg" style="font-size:0.95rem; color:#888; margin-top:8px;">
        <span id="arrived-count">-</span> / {{ total_players }} participants connected
    </p>

    {# Simple animated dots to show the page is live #}
    <div style="margin-top:24px;">
        <span class="dot" style="display:inline-block;width:10px;height:10px;border-radius:50%;
              background:#aaa;margin:0 4px;animation:pulse 1.2s infinite ease-in-out;"></span>
        <span class="dot" style="display:inline-block;width:10px;height:10px;border-radius:50%;
              background:#aaa;margin:0 4px;animation:pulse 1.2s 0.4s infinite ease-in-out;"></span>
        <span class="dot" style="display:inline-block;width:10px;height:10px;border-radius:50%;
              background:#aaa;margin:0 4px;animation:pulse 1.2s 0.8s infinite ease-in-out;"></span>
    </div>
</div>

{# ── Duplicate tab warning — hidden until detected ── #}
<div id="duplicate-warning" style="display:none; max-width:600px; margin:80px auto;
     text-align:center; font-family:sans-serif; color:#333;">
    <svg xmlns="http://www.w3.org/2000/svg" width="64" height="64" viewBox="0 0 24 24"
         fill="none" stroke="#e67e22" stroke-width="1.5" stroke-linecap="round"
         stroke-linejoin="round" style="margin-bottom:24px;">
        <circle cx="12" cy="12" r="10"/>
        <line x1="12" y1="8"  x2="12" y2="12"/>
        <line x1="12" y1="16" x2="12.01" y2="16"/>
    </svg>
    <h2 style="font-size:1.8rem; margin-bottom:16px;">Duplicate session detected.</h2>
    <p style="font-size:1.05rem; line-height:1.7; margin-bottom:12px;">
        This participation link is already open in another window or tab.
        <strong>Please close this window</strong> and continue in your original window.
    </p>
    <p style="font-size:0.9rem; color:#777; margin-top:24px;">
        If you believe you have reached this page in error, please inform the experimenter.
    </p>
</div>

{# Hidden form — submitted automatically when all participants are ready #}
<div style="margin-top:2000px;">
    {{ formfields }}
</div>

<style>
@keyframes pulse {
    0%, 100% { opacity: 0.3; transform: scale(0.8); }
    50%       { opacity: 1;   transform: scale(1.2); }
}
</style>

<script>
(function () {
    var participantCode = "{{ participant.code }}";
    var totalPlayers    = {{ total_players }};
    var isDuplicate     = false;

    // ── Duplicate tab detection via BroadcastChannel ──────────────────────
    // Both tabs share the same participant object in oTree, so detection
    // must be done client-side. The channel is keyed to this participant's
    // code so only tabs for the same person communicate.
    var bc = null;
    try { bc = new BroadcastChannel("otree_dup_" + participantCode); } catch(e) {}

    if (bc) {
        bc.onmessage = function (event) {
            if (event.data === "already_open") {
                markAsDuplicate();
            } else if (event.data === "are_you_there") {
                bc.postMessage("already_open");
            }
        };
        bc.postMessage("are_you_there");
    }

    function markAsDuplicate() {
        isDuplicate = true;
        document.getElementById("waiting-content").style.display  = "none";
        document.getElementById("duplicate-warning").style.display = "block";
        // Block form submission permanently on this tab
        document.querySelectorAll("form").forEach(function(f) {
            f.addEventListener("submit", function(e) { e.preventDefault(); });
        });
    }

    // ── Live poll: ask server how many participants have arrived ──────────
    // We send a heartbeat every 2 seconds. The server counts how many
    // unique participants have checked in and broadcasts that count.
    // When count == totalPlayers, all non-duplicate tabs auto-submit.

    function sendHeartbeat() {
        if (isDuplicate) return;
        liveSend({ type: "checkin" });
    }

    function liveRecv(data) {
        if (isDuplicate) return;

        if (data.arrived !== undefined) {
            var el = document.getElementById("arrived-count");
            if (el) el.textContent = data.arrived;
        }

        if (data.all_arrived) {
            // All participants are connected — auto-submit the form
            clearInterval(heartbeatInterval);
            var forms = document.querySelectorAll("form");
            if (forms.length > 0) {
                forms[0].submit();
            }
        }
    }

    // Start heartbeat after a short delay to let oTree's liveSend initialise
    var heartbeatInterval = setInterval(sendHeartbeat, 2000);
    setTimeout(sendHeartbeat, 500);  // send one immediately too
})();
</script>

{% endblock %}