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

{{ block title }}
Individual Decision
{{ endblock }}

{{ block content }}
<div class="individual-round">
    {% if participant.vars.num_rounds %}
        <div class="small text-muted mb-3">Round {{ player.round_number }} of {{ participant.vars.num_rounds }}</div>
    {% endif %}
    <p>
        Your job is to guess the <strong>total</strong> number of red balls in the urn (out of 20).
        You make <strong>two</strong> guesses in this round.
        For each guess, draw 3 balls (one at a time) to get a clue.
        You are not guessing how many red balls are left.
    </p>

    <div class="round-threecol">
        <div class="round-threecol__left">
            <div class="stage" id="stage1">
            <h3>First draw</h3>
            <p>After you see the first 3 draws, enter your first guess.</p>
            <div class="draw-grid" id="stage1Draws" aria-label="First 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_individual_guess_1">Your guess after the first draw:</label>
                <input type="number" id="id_individual_guess_1" name="individual_guess_1" 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 class="round-threecol__mid">
            <div class="urn-visual">
                <iframe
                    class="urn-visual__frame"
                    id="individualUrnFrame"
                    src="{% static 'org_learning/urn_experiment.html' %}?mode=guided&slots=external&num_red={{ urn_red_count }}&draws={{ individual_draws_csv }}"
                    title="Urn animation"
                    loading="lazy"
                ></iframe>
            </div>
        </div>

        <div class="round-threecol__right">
            <div class="stage" id="stage2">
            <h3>Second draw</h3>
            <p>After you submit your first guess, draw 3 more balls.</p>
            <div class="draw-grid" id="stage2Draws" aria-label="Second 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_individual_guess_2">Updated guess after the second draw:</label>
                <input type="number" id="id_individual_guess_2" name="individual_guess_2" min="{{ min_guess }}" max="{{ max_guess }}" step="1" inputmode="numeric" required>
                <button type="button" class="lock-button" id="lockGuess2Btn">Submit second guess</button>
                <small class="guess-hint">Enter an integer between {{ min_guess }} and {{ max_guess }}.</small>
            </div>
            </div>
        </div>
    </div>


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

<style>
    .individual-round { max-width: 1200px; margin: 0 auto; box-sizing: border-box; }
    .individual-round h2 { color: #1f2937; }
    .individual-round p { color: #374151; }

    /* Keep the intro text above the lifted iframe if they overlap */
    .individual-round > p,
    .individual-round > .small {
        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;
    }

    .stage {
        margin: 0;
        padding: 20px;
        border: 1px solid #e5e7eb;
        border-radius: 8px;
        background: #ffffff;
        box-shadow: 0 4px 16px rgba(15, 23, 42, 0.06);
        height: auto;
        min-height: 360px;
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        align-items: flex-start;
        gap: 10px;
    }
    .stage h3 { margin-top: 0; color: #1f2937; }
    .draw-grid { display: flex; gap: 10px; margin: 0; min-height: 56px; }
    .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; }
    .lock-button { margin-top: 8px; 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; }
    .guess-input { margin-top: auto; display: flex; flex-direction: column; gap: 6px; }
    .guess-input input { width: 160px; 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; }
    .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; }
        .stage { height: auto; justify-content: flex-start; }
    }
</style>

<script>
    const minGuess = Number('{{ min_guess }}');
    const maxGuess = Number('{{ max_guess }}');

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

    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];
        if (!slot) {
            return;
        }
        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_individual_guess_1');
        const input2 = document.getElementById('id_individual_guess_2');
        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 = '';

        // Measure on the next frame to avoid layout thrash.
        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_individual_guess_1'),
        document.getElementById('id_individual_guess_2'),
    ];
    const lockButtons = [
        document.getElementById('lockGuess1Btn'),
        document.getElementById('lockGuess2Btn'),
    ];

    const stageUnlocked = [false, false];
    const stageLocked = [false, false];
    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.disabled || !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 lockStage(stageIndex) {
        const input = guessInputs[stageIndex];
        if (!isGuessValid(input)) {
            input.classList.add('invalid');
            return;
        }
        stageLocked[stageIndex] = true;
        // keep the value submitted with the form but prevent edits
        input.readOnly = true;
        if (lockButtons[stageIndex]) {
            lockButtons[stageIndex].disabled = true;
        }

        if (stageIndex === 0 && urnFrame && urnFrame.contentWindow) {
            try {
                urnFrame.contentWindow.postMessage({ type: 'urnexp:continue' }, '*');
            } catch (e) {
                // ignore
            }

            // Visually activate the second panel right away,
            // but keep its input locked until the 2nd set of draws completes.
            setStageEnabled(1, true);
        }
        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);
    });

    // Gate inputs based on iframe progress.
    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 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) {
                // Keep the first panel visually active from the start.
                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;
        }
    }

    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();
            }
            updateControls();
            alignGuessInputs();
        }
        if (data.type === 'urnexp:complete') {
            stageUnlocked[1] = true;
            setStageEnabled(1, true);
            if (guess2Input && !stageLocked[1]) {
                guess2Input.focus();
            }
            updateControls();
            alignGuessInputs();
        }
    });

    window.addEventListener('resize', alignGuessInputs);

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

    updateControls();
    alignGuessInputs();
</script>
{{ endblock }}