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

{{ block title }}{{ endblock }}

{{ block content }}
<div class="signal-round">
    {% if participant.vars.num_rounds %}
    <div class="small text-muted mb-3">Round {{ player.round_number }} of {{ participant.vars.num_rounds }}</div>
    {% endif %}
    {% if partner_full_label %}
    <p class="partner-note">You are paired with <strong>{{ partner_full_label }}</strong> for this round.</p>
    {% else %}
    <p class="partner-note">You are paired with another participant. Their name shows once both of you finish the intake.</p>
    {% endif %}
    <p class="round-instructions">
        Your job is to guess the <strong>total</strong> number of red balls in the urn (out of 20).
        You are not guessing how many red balls are left.
        First, draw 3 balls and enter your guess.
        Then you see the three balls {{ partner_display_label }} drew, and you update your guess.
    </p>

    <div class="round-threecol">
        <div class="round-threecol__left">
            <div class="panel" id="stage1">
                <h3 class="stage-label">Your draw</h3>
                <p class="stage-description">Click to draw three balls, one at a time.</p>

                <div class="draw-grid" id="stage1Draws" aria-live="polite" aria-label="Your draw results">
                    <div class="draw-slot" data-stage="1" data-slot="1" aria-hidden="true"></div>
                    <div class="draw-slot" data-stage="1" data-slot="2" aria-hidden="true"></div>
                    <div class="draw-slot" data-stage="1" data-slot="3" aria-hidden="true"></div>
                </div>

                <div class="guess-input">
                    <label for="id_signal_guess_initial">Your guess after seeing your draw:</label>
                    <div class="guess-controls">
                        <input type="number"
                               id="id_signal_guess_initial"
                               name="signal_guess_initial"
                               min="{{ min_guess }}"
                               max="{{ max_guess }}"
                               step="1"
                               inputmode="numeric"
                               required>
                        <button type="button" class="lock-button" id="lockGuess1Btn">Submit first guess</button>
                        <small class="guess-hint">Enter an integer between {{ min_guess }} and {{ max_guess }}.</small>
                    </div>
                </div>
            </div>
        </div>

        <div class="round-threecol__mid">
            <div class="urn-visual" aria-label="Urn animation">
                <iframe
                    class="urn-visual__frame"
                    id="signalUrnFrame"
                    src="{% static 'org_learning/urn_experiment.html' %}?mode=guided&slots=external&num_red={{ urn_red_count }}&draws={{ own_draws_csv }},{{ partner_draws_csv }}"
                    title="Urn animation"
                    loading="lazy"
                ></iframe>
            </div>
        </div>

        <div class="round-threecol__right">
            <div class="panel" id="stage2" style="opacity: 0.6;">
                <h3 class="stage-label">Partner draw</h3>
                <p class="partner-subtitle">{{ partner_display_label }}</p>
                <p class="stage-description">After you submit your first guess, you see the three balls your partner drew so you can update your estimate.</p>

                <div class="auto-reveal-note" id="partnerRevealNote">Waiting for your first guess...</div>
                <div class="draw-grid" id="stage2Draws" aria-live="polite" aria-label="Partner draw results">
                    <div class="draw-slot" data-stage="2" data-slot="1" aria-hidden="true"></div>
                    <div class="draw-slot" data-stage="2" data-slot="2" aria-hidden="true"></div>
                    <div class="draw-slot" data-stage="2" data-slot="3" aria-hidden="true"></div>
                </div>

                <div class="guess-input">
                    <label for="id_signal_guess_updated">Updated guess after seeing {{ partner_display_label }}'s draw:</label>
                    <div class="guess-controls">
                        <input type="number"
                               id="id_signal_guess_updated"
                               name="signal_guess_updated"
                               min="{{ min_guess }}"
                               max="{{ max_guess }}"
                               step="1"
                               inputmode="numeric"
                               required>
                        <button type="button" class="lock-button" id="lockGuess2Btn">Submit updated guess</button>
                        <small class="guess-hint">Enter an integer between {{ min_guess }} and {{ max_guess }}.</small>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="next-holder">{{ next_button }}</div>
</div>

<style>
    .signal-round { max-width: 1200px; margin: 0 auto; }
    .signal-round p { color: #374151; }

    /* Keep the header/partner/instructions text above the lifted iframe if they overlap */
    .signal-round > .small,
    .signal-round > .partner-note,
    .signal-round > .round-instructions {
        position: relative;
        z-index: 3;
    }

    .round-threecol {
        display: grid;
        grid-template-columns: minmax(280px, 1fr) minmax(320px, 420px) minmax(280px, 1fr);
        grid-template-areas: "left mid right";
        gap: 18px;
        align-items: start;
        margin-top: 16px;
    }

    .round-threecol__left { grid-area: left; }
    .round-threecol__mid { grid-area: mid; }
    .round-threecol__right { grid-area: right; }

    /* Lift the animation column slightly to reduce perceived top whitespace */
    .round-threecol__mid { margin-top: -80px; }

    .urn-visual { display: flex; justify-content: center; margin: 0; }
    .urn-visual__frame {
        width: 100%;
        max-width: 420px;
        height: min(720px, 80vh);
        border: 0;
        border-radius: 8px;
        overflow: hidden;
        background: #fff;
    }
    .partner-note { background: #fef3c7; border: 1px solid #fbbf24; border-radius: 6px; padding: 10px 14px; color: #92400e; }
    .round-instructions { margin-top: 18px; }

    .panel {
        padding: 20px;
        border: 1px solid #e5e7eb;
        border-radius: 8px;
        background: #ffffff;
        box-shadow: 0 4px 16px rgba(15, 23, 42, 0.06);
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        gap: 10px;
        align-items: flex-start;
        height: auto;
        min-height: 360px;
    }

    .stage-label { margin: 0; color: #1f2937; display: block; line-height: 1.25; font-weight: 700; font-size: 1.05em; }
    .partner-subtitle { margin: 0; font-weight: 600; color: #4b5563; line-height: 1.35; font-size: 1.2em; }
    .draw-grid { display: flex; gap: 10px; flex-wrap: wrap; min-height: 56px; margin-top: 0; }
    .draw-slot {
        width: 52px;
        height: 52px;
        border-radius: 999px;
        border: 2px dashed #d1d5db;
        background: #f3f4f6;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    .draw-slot .ball {
        width: 44px;
        height: 44px;
        border-radius: 999px;
        border: 2px solid;
        box-shadow: 0 0 0 2px #111827, 0 2px 8px rgba(15, 23, 42, 0.18);
    }
    .draw-slot .ball.red { background: #e74c3c; border-color: #c0392b; }
    .draw-slot .ball.white { background: #ffffff; border-color: #ffffff; }
    .guess-input { margin-top: auto; display: flex; flex-direction: column; gap: 6px; }
    .guess-controls { display: flex; flex-direction: column; gap: 8px; }
    .guess-input input { width: 180px; padding: 10px 12px; border: 2px solid #d1d5db; border-radius: 6px; font-size: 16px; }
    .guess-input input:disabled { background: #f3f4f6; cursor: not-allowed; }
    .guess-input input.valid { border-color: #10b981; box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.15); }
    .guess-input input.invalid { border-color: #dc2626; box-shadow: 0 0 0 2px rgba(220, 38, 38, 0.25); }
    .guess-hint { color: #6b7280; font-size: 0.85em; }
    .lock-button { margin-top: 0; background: #6b7280; color: #fff; border: none; border-radius: 6px; padding: 6px 12px; font-size: 14px; cursor: pointer; transition: background 0.2s ease; align-self: flex-start; }
    .lock-button:disabled { background: #d1d5db; cursor: not-allowed; }
    .lock-button:hover:not(:disabled) { background: #4b5563; }

    .stage-description { color: #4b5563; margin: 0; line-height: 1.35; }
    .auto-reveal-note { font-size: 0.9em; color: #6b7280; margin-bottom: 0; }
    .next-holder { margin-top: 32px; }

    @media (max-width: 1100px) {
        .round-threecol {
            grid-template-columns: 1fr;
            grid-template-areas:
                "mid"
                "left"
                "right";
            align-items: start;
        }
        .round-threecol__mid { margin-top: 0; }
        .urn-visual { margin: 12px 0 18px; }
        .guess-input input { width: 100%; }
        .panel { height: auto; justify-content: flex-start; }
    }
</style>

<script>
    const minGuess = Number('{{ min_guess }}');
    const maxGuess = Number('{{ max_guess }}');
    const urnFrame = document.getElementById('signalUrnFrame');

    const slotContainers = {
        1: Array.from(document.querySelectorAll('#stage1Draws .draw-slot')),
        2: Array.from(document.querySelectorAll('#stage2Draws .draw-slot')),
    };

    function renderDraw(stageRound, drawNumber, color) {
        const slots = slotContainers[stageRound] || [];
        const idx = Number(drawNumber) - 1;
        if (!Number.isFinite(idx) || idx < 0 || idx >= slots.length) {
            return;
        }
        const slot = slots[idx];
        slot.innerHTML = '';
        const ball = document.createElement('div');
        ball.className = `ball ${color}`;
        ball.setAttribute('aria-label', `${color} ball`);
        slot.appendChild(ball);

        // Keep the two guess input blocks aligned as draws populate.
        alignGuessInputs();
    }

    const guessBlocks = [
        document.querySelector('#stage1 .guess-input'),
        document.querySelector('#stage2 .guess-input'),
    ];

    function alignGuessInputs() {
        const input1 = document.getElementById('id_signal_guess_initial');
        const input2 = document.getElementById('id_signal_guess_updated');
        const block1 = guessBlocks[0];
        const block2 = guessBlocks[1];
        if (!input1 || !input2 || !block1 || !block2) return;

        // Reset first so measurements reflect the natural layout.
        block1.style.marginTop = '';
        block2.style.marginTop = '';

        requestAnimationFrame(() => {
            const top1 = input1.getBoundingClientRect().top;
            const top2 = input2.getBoundingClientRect().top;
            if (!Number.isFinite(top1) || !Number.isFinite(top2)) return;

            const targetTop = Math.max(top1, top2);
            const d1 = Math.max(0, Math.round(targetTop - top1));
            const d2 = Math.max(0, Math.round(targetTop - top2));
            if (d1) block1.style.marginTop = `${d1}px`;
            if (d2) block2.style.marginTop = `${d2}px`;
        });
    }
    const guessInputs = [
        document.getElementById('id_signal_guess_initial'),
        document.getElementById('id_signal_guess_updated'),
    ];
    const lockButtons = [
        document.getElementById('lockGuess1Btn'),
        document.getElementById('lockGuess2Btn'),
    ];
    const stageUnlocked = [false, false];
    const stageLocked = [false, false];
    const partnerRevealNote = document.getElementById('partnerRevealNote');
    const nextButton = document.querySelector('button.otree-btn-next');

    const stage1 = document.getElementById('stage1');
    const stage2 = document.getElementById('stage2');
    const guess1Input = guessInputs[0];
    const guess2Input = guessInputs[1];
    const lock1 = lockButtons[0];
    const lock2 = lockButtons[1];

    function isGuessValid(input) {
        const value = Number(input.value);
        return Number.isInteger(value) && value >= minGuess && value <= maxGuess;
    }

    function updateGuessStyles() {
        guessInputs.forEach(input => {
            if (!input || input.disabled || !input.value) {
                input && input.classList.remove('valid', 'invalid');
                return;
            }
            if (isGuessValid(input)) {
                input.classList.add('valid');
                input.classList.remove('invalid');
            } else {
                input.classList.add('invalid');
                input.classList.remove('valid');
            }
        });
    }

    function updateControls() {
        updateGuessStyles();

        lockButtons.forEach((btn, index) => {
            if (!btn) return;
            btn.disabled = !(stageUnlocked[index] && isGuessValid(guessInputs[index]) && !stageLocked[index]);
        });

        if (nextButton) {
            const ready = stageLocked[0] && stageLocked[1];
            nextButton.disabled = !ready;
        }
    }

    function lockStage(stageIndex) {
        const input = guessInputs[stageIndex];
        if (!isGuessValid(input)) {
            input.classList.add('invalid');
            return;
        }
        stageLocked[stageIndex] = true;
        input.readOnly = true;
        if (lockButtons[stageIndex]) {
            lockButtons[stageIndex].disabled = true;
        }
        if (stageIndex === 0) {
            if (partnerRevealNote) {
                partnerRevealNote.textContent = 'Showing partner draw…';
            }
            if (urnFrame && urnFrame.contentWindow) {
                try {
                    urnFrame.contentWindow.postMessage({ type: 'urnexp:autodraw', round: 2 }, '*');
                    urnFrame.contentWindow.postMessage({ type: 'urnexp:continue' }, '*');
                } catch (e) {
                    // ignore
                }
            }

            // Visually activate the partner panel right away,
            // but keep its input locked until the partner draw completes.
            setStageEnabled(1, true);
        }
        updateControls();
    }

    function setStageEnabled(stageIndex, enabled) {
        const input = stageIndex === 0 ? guess1Input : guess2Input;
        const lock = stageIndex === 0 ? lock1 : lock2;
        const stageEl = stageIndex === 0 ? stage1 : stage2;
        if (stageEl) {
            if (stageIndex === 0) {
                stageEl.style.opacity = '1';
            } else {
                stageEl.style.opacity = enabled ? '1' : '0.6';
            }
        }

        const controlsEnabled = enabled && stageUnlocked[stageIndex] && !stageLocked[stageIndex];
        if (input) {
            input.readOnly = !controlsEnabled;
        }
        if (lock) {
            lock.disabled = !controlsEnabled;
        }
    }

    lockButtons.forEach((button, index) => {
        if (button) {
            button.addEventListener('click', () => lockStage(index));
        }
    });

    guessInputs.forEach(input => {
        if (!input) {
            return;
        }
        input.readOnly = false;
        input.addEventListener('input', updateControls);
        input.addEventListener('blur', updateControls);
    });

    if (nextButton) {
        nextButton.disabled = true;
    }

    setStageEnabled(0, true);
    setStageEnabled(1, false);

    window.addEventListener('message', (event) => {
        const data = event && event.data;
        if (!data || typeof data !== 'object') {
            return;
        }
        if (urnFrame && event.source !== urnFrame.contentWindow) {
            return;
        }
        if (data.type === 'urnexp:draw') {
            renderDraw(Number(data.round), Number(data.draw), String(data.color || ''));
        }
        if (data.type === 'urnexp:round_complete') {
            stageUnlocked[0] = true;
            setStageEnabled(0, true);
            if (guess1Input && !stageLocked[0]) {
                guess1Input.focus();
            }
            alignGuessInputs();
            updateControls();
        }
        if (data.type === 'urnexp:complete') {
            stageUnlocked[1] = true;
            setStageEnabled(1, true);
            if (partnerRevealNote) {
                partnerRevealNote.style.display = 'none';
            }
            if (guess2Input && !stageLocked[1]) {
                guess2Input.focus();
            }
            alignGuessInputs();
            updateControls();
        }
    });

    updateControls();
    alignGuessInputs();

    window.addEventListener('resize', () => alignGuessInputs());

    // Poll the server for partner info and update the partner note when it becomes available
    function pollPartnerLabel() {
        const partnerNoteEl = document.querySelector('.partner-note');
        if (!partnerNoteEl) return;
        // if it already has a strong name element, nothing to do
        if (partnerNoteEl.querySelector('strong')) return;

        let attempts = 0;
        const maxAttempts = 30; // about 1 minute at 2s interval
        const id = setInterval(async () => {
            attempts += 1;
            try {
                const res = await fetch(window.location.href, { cache: 'no-cache' });
                const text = await res.text();
                const doc = new DOMParser().parseFromString(text, 'text/html');
                const remote = doc.querySelector('.partner-note');
                if (remote) {
                    const strong = remote.querySelector('strong');
                    if (strong && strong.textContent.trim()) {
                        partnerNoteEl.innerHTML = remote.innerHTML;
                        clearInterval(id);
                        return;
                    }
                }
            } catch (e) {
                // ignore network/parse errors and retry
            }
            if (attempts >= maxAttempts) clearInterval(id);
        }, 2000);
    }

    // start polling for partner info when page loads
    window.addEventListener('load', () => setTimeout(pollPartnerLabel, 500));

    // run immediately after script execution
</script>
{{ endblock }}