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

{{ block title }}{{ endblock }}

{{ block content }}
<!-- Use the identical structure to the Signal round but reveal partner's guess instead of their draw -->
<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 {{ partner_display_label }}’s guess, 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_action_guess_initial">Your guess after seeing your draw:</label>
                    <div class="guess-controls">
                        <input type="number"
                               id="id_action_guess_initial"
                               name="action_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="actionUrnFrame"
                    src="{% static 'org_learning/urn_experiment.html' %}?mode=guided&slots=external&rounds=1&num_red={{ urn_red_count }}&draws={{ own_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 guess</h3>
                <p class="partner-subtitle">{{ partner_display_label }}</p>
                <p class="stage-description">After you submit your first guess, you see your partner's guess 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 indicators">
                    <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="partner-guess-reveal" id="partnerGuessReveal" style="display:none;">
                    <span class="partner-guess-label">{{ partner_display_label }} guessed</span>
                    <span class="partner-guess-value" id="partnerGuessValue"></span>
                </div>

                <div class="guess-input">
                    <label for="id_action_guess_updated">Updated guess after seeing {{ partner_display_label }}'s guess:</label>
                    <div class="guess-controls">
                        <input type="number"
                               id="id_action_guess_updated"
                               name="action_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>

    <style>
        /* Copy of SignalRound styles to keep ActionRound visually identical */
        .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; }
        .draw-slot .ball.grey { background: #d1d5db; border-color: #9ca3af; box-shadow: 0 0 0 2px rgba(17, 24, 39, 0.45), 0 2px 8px rgba(15, 23, 42, 0.10); }
        .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; }
        /* Partner guess reveal styling */
        .partner-guess-reveal { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 16px; }
        .partner-guess-label { font-size: 0.95em; color: #4b5563; font-weight: 500; }
        .partner-guess-value { display: flex; align-items: center; justify-content: center; width: 72px; height: 72px; border-radius: 50%; background: linear-gradient(135deg, #6366f1 0%, #4f46e5 100%); color: #fff; font-size: 28px; font-weight: 700; box-shadow: 0 6px 16px rgba(79, 70, 229, 0.35); }

        @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>

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

<!-- Async mode: Partner guess is already available from historical data -->
<script>
    const minGuess = Number('{{ min_guess }}');
    const maxGuess = Number('{{ max_guess }}');

    const urnFrame = document.getElementById('actionUrnFrame');

    const slotContainers = {
        1: Array.from(document.querySelectorAll('#stage1Draws .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_action_guess_initial');
        const input2 = document.getElementById('id_action_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_action_guess_initial'),
        document.getElementById('id_action_guess_updated'),
    ];
    const lockButtons = [
        document.getElementById('lockGuess1Btn'),
        document.getElementById('lockGuess2Btn'),
    ];

    const stageUnlocked = [false, false];
    const stageLocked = [false, false];

    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];

    const partnerRevealNote = document.getElementById('partnerRevealNote');
    const partnerGuessReveal = document.getElementById('partnerGuessReveal');
    const partnerGuessValue = document.getElementById('partnerGuessValue');
    const partnerSlots = Array.from(document.querySelectorAll('#stage2Draws .draw-slot'));

    const partnerHistoricalGuess = JSON.parse('{{ partner_guess_initial_json|safe }}');

    const nextButton = document.querySelector('button.otree-btn-next');

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

    function updateGuessStyles() {
        guessInputs.forEach(input => {
            if (input.readOnly || !input.value) {
                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 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;
        }

        alignGuessInputs();
    }

    function revealPartnerInfo() {
        if (partnerRevealNote) {
            partnerRevealNote.textContent = 'Partner information revealed.';
        }
        if (partnerGuessValue) {
            partnerGuessValue.textContent = (partnerHistoricalGuess === null || partnerHistoricalGuess === undefined) ? '?' : String(partnerHistoricalGuess);
        }
        if (partnerGuessReveal) {
            partnerGuessReveal.style.display = '';
        }

        // Animate 3 grey balls appearing to indicate the partner saw 3 draws.
        partnerSlots.forEach((slot, idx) => {
            setTimeout(() => {
                slot.innerHTML = '';
                const ball = document.createElement('div');
                ball.className = 'ball grey';
                ball.setAttribute('aria-label', 'grey ball');
                slot.appendChild(ball);
            }, idx * 180);
        });

        // Unlock updated guess after the 3 indicators appear.
        setTimeout(() => {
            stageUnlocked[1] = true;
            if (partnerRevealNote) {
                partnerRevealNote.style.display = 'none';
            }
            setStageEnabled(1, true);
            updateControls();
            if (guess2Input && !stageLocked[1]) {
                guess2Input.focus();
            }
        }, partnerSlots.length * 180 + 40);
    }

    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) {
            setStageEnabled(1, true);
            revealPartnerInfo();
        }

        updateControls();
    }

    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);
    });

    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:complete') {
            stageUnlocked[0] = true;
            setStageEnabled(0, true);
            updateControls();
            if (guess1Input && !stageLocked[0]) {
                guess1Input.focus();
            }
        }
    });

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

    updateControls();
    alignGuessInputs();

    window.addEventListener('resize', () => alignGuessInputs());
</script>
{{ endblock }}