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

{{ block title }}{{ endblock }}

{{ block content }}
<!-- Action-known round: Draw, guess, see partner's draw, choose to match or submit own -->
<div class="action-known-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 for this round.</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.
        Then choose: match their final guess or enter your own updated guess.
    </p>

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

        /* Keep the header/partner/instructions text above the lifted iframe if they overlap */
        .action-known-round > .small,
        .action-known-round > .partner-note,
        .action-known-round > .round-instructions {
            position: relative;
            z-index: 3;
        }
        .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; }

        .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; }
        
        .panel {
            padding: 20px;
            border: 1px solid #e5e7eb;
            border-radius: 8px;
            background: #ffffff;
            box-shadow: 0 4px 16px rgba(15, 23, 42, 0.06);
            height: auto;
            display: flex;
            flex-direction: column;
            justify-content: flex-start;
            align-items: flex-start;
            min-height: 360px;
        }
        .panel h3 { margin: 0 0 8px; color: #1f2937; font-weight: 700; font-size: 1.1em; }
        .panel .subtitle { margin: 0 0 12px; font-weight: 600; color: #4b5563; font-size: 1em; }
        .panel .description { color: #4b5563; margin: 0 0 16px; line-height: 1.4; font-size: 0.95em; }
        
        .draw-grid { display: flex; gap: 10px; flex-wrap: wrap; min-height: 56px; margin-top: 12px; }
        .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-section { margin-top: auto; }
        .guess-section label { display: block; margin-bottom: 8px; font-weight: 500; color: #374151; }
        .guess-controls { display: flex; flex-direction: column; gap: 8px; }
        .guess-input { width: 180px; padding: 10px 12px; border: 2px solid #d1d5db; border-radius: 6px; font-size: 16px; }
        .guess-input:disabled { background: #f3f4f6; cursor: not-allowed; }
        .guess-input.valid { border-color: #10b981; box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.15); }
        .guess-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; }
        
        .submit-button { background: #6b7280; color: #fff; border: none; border-radius: 6px; padding: 8px 16px; font-size: 14px; cursor: pointer; transition: background 0.2s ease; }
        .submit-button:disabled { background: #d1d5db; cursor: not-allowed; }
        .submit-button:hover:not(:disabled) { background: #4b5563; }
        
        /* Stage 2: Partner draw and choice */
        .stage2-section { display: none; margin-top: 32px; padding-top: 24px; border-top: 2px solid #e5e7eb; }
        .stage2-section.visible { display: block; }
        
        .choice-section { margin-top: 24px; }
        .choice-section h4 { margin: 0 0 16px; color: #1f2937; font-weight: 600; }
        
        .choice-buttons { display: flex; gap: 16px; flex-wrap: wrap; }
        .choice-btn { flex: 1; min-width: 200px; padding: 20px; border: 2px solid #e5e7eb; border-radius: 10px; background: #fff; cursor: pointer; transition: all 0.2s ease; text-align: center; }
        .choice-btn:hover:not(.disabled) { border-color: #6366f1; background: #f5f3ff; }
        .choice-btn.selected { border-color: #6366f1; background: #ede9fe; }
        .choice-btn.disabled { opacity: 0.5; cursor: not-allowed; }
        .choice-btn h5 { margin: 0 0 8px; color: #1f2937; font-size: 1.1em; }
        .choice-btn p { margin: 0; color: #6b7280; font-size: 0.9em; line-height: 1.4; }
        
        .own-guess-section { display: none; margin-top: 20px; padding: 16px; background: #f9fafb; border-radius: 8px; }
        .own-guess-section.visible { display: block; }
        
        .info-box { background: #ede9fe; border: 1px solid #a78bfa; border-radius: 6px; padding: 12px 16px; color: #5b21b6; font-size: 0.9em; margin-top: 16px; }
        
        .next-holder { margin-top: 32px; }
        
        /* Hidden form fields */
        .hidden-field { display: none; }
        
        @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 { width: 100%; }
            .panel { height: auto; justify-content: flex-start; }
        }

        @media (max-width: 768px) {
            .choice-buttons { flex-direction: column; }
            .choice-btn { min-width: auto; }
        }
    </style>

    <!-- Hidden form fields for oTree -->
    <input type="hidden" name="action_known_choice" id="id_action_known_choice" value="">
    <input type="hidden" name="action_guess_updated" id="id_action_guess_updated" value="">

    <!-- Stage 1: Your draw and first guess + animation + partner draw -->
    <div class="round-threecol">
        <div class="round-threecol__left">
            <div class="panel">
                <h3>Your Draw</h3>
                <p class="description">Click to draw three balls, one at a time.</p>
                <div class="draw-grid" id="ownDrawsContainer" 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-section">
                    <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"
                               class="guess-input"
                               min="{{ min_guess }}"
                               max="{{ max_guess }}"
                               step="1"
                               inputmode="numeric"
                               required>
                        <button type="button" class="submit-button" id="submitGuess1Btn">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="actionKnownUrnFrame"
                    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="partnerPanel" style="opacity: 0.6;">
                <h3>{{ partner_display_label }}'s Draw</h3>
                <p class="subtitle">{{ partner_full_label }}</p>
                <p class="description" id="partnerDrawDescription">Waiting for your first guess...</p>
                <div class="draw-grid" id="partnerDrawsContainer" 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>
        </div>
    </div>

    <!-- Stage 2: Choice section (revealed after first guess) -->
    <div class="stage2-section" id="stage2Section">
        <div class="choice-section">
            <h4>Make Your Decision</h4>
            <p>You've seen both draws. Now choose:</p>
            
            <div class="choice-buttons">
                <div class="choice-btn" id="matchBtn">
                    <h5>Match {{ partner_display_label }}'s Guess</h5>
                    <p>Adopt {{ partner_display_label }}'s final guess as your own. You won't see the guess they submitted.</p>
                </div>
                <div class="choice-btn" id="ownBtn">
                    <h5>Submit My Own Guess</h5>
                    <p>Enter your own updated guess based on both draws.</p>
                </div>
            </div>
            
            <div class="own-guess-section" id="ownGuessSection">
                <label for="ownGuessInput">Your updated guess:</label>
                <div class="guess-controls">
                    <input type="number"
                           id="ownGuessInput"
                           class="guess-input"
                           min="{{ min_guess }}"
                           max="{{ max_guess }}"
                           step="1"
                           inputmode="numeric">
                    <button type="button" class="submit-button" id="submitOwnGuessBtn" disabled>Confirm my guess</button>
                    <small class="guess-hint">Enter an integer between {{ min_guess }} and {{ max_guess }}.</small>
                </div>
            </div>
            
            <div class="info-box" id="infoBox" style="display: none;"></div>
        </div>
    </div>

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

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

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

    const slotContainers = {
        1: Array.from(document.querySelectorAll('#ownDrawsContainer .draw-slot')),
        2: Array.from(document.querySelectorAll('#partnerDrawsContainer .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);
    }
    
    // DOM elements
    const guessInput = document.getElementById('id_action_guess_initial');
    const submitGuess1Btn = document.getElementById('submitGuess1Btn');
    
    const partnerPanel = document.getElementById('partnerPanel');
    const partnerDrawDescription = document.getElementById('partnerDrawDescription');
    const partnerDrawsContainer = document.getElementById('partnerDrawsContainer');
    
    const stage2Section = document.getElementById('stage2Section');
    const matchBtn = document.getElementById('matchBtn');
    const ownBtn = document.getElementById('ownBtn');
    const ownGuessSection = document.getElementById('ownGuessSection');
    const ownGuessInput = document.getElementById('ownGuessInput');
    const submitOwnGuessBtn = document.getElementById('submitOwnGuessBtn');
    const infoBox = document.getElementById('infoBox');
    
    const hiddenChoice = document.getElementById('id_action_known_choice');
    const hiddenUpdatedGuess = document.getElementById('id_action_guess_updated');
    
    const nextButton = document.querySelector('button.otree-btn-next');

    const stageUnlocked = [false, false];
    let stage1Locked = false;
    let choiceMade = false;
    
    function isGuessValid(value) {
        const num = Number(value);
        return Number.isInteger(num) && num >= minGuess && num <= maxGuess;
    }
    
    function updateGuessStyle(input) {
        if (!input.value) {
            input.classList.remove('valid', 'invalid');
            return;
        }
        if (isGuessValid(input.value)) {
            input.classList.add('valid');
            input.classList.remove('invalid');
        } else {
            input.classList.add('invalid');
            input.classList.remove('valid');
        }
    }
    
    // Stage 1: First guess validation
    guessInput.addEventListener('input', function() {
        updateGuessStyle(guessInput);
        updateControls();
    });
    
    // Stage 1: Submit first guess
    submitGuess1Btn.addEventListener('click', function() {
        if (!isGuessValid(guessInput.value) || stage1Locked || !stageUnlocked[0]) return;
        
        stage1Locked = true;
        guessInput.readOnly = true;
        submitGuess1Btn.disabled = true;
        
        // Reveal partner's draw (auto-draw in iframe)
        revealPartnerDraw();
    });
    
    function revealPartnerDraw() {
        partnerPanel.style.opacity = '1';
        partnerDrawDescription.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
            }
        }
    }
    
    // Stage 2: Choice selection
    matchBtn.addEventListener('click', function() {
        if (choiceMade) return;
        
        matchBtn.classList.add('selected');
        ownBtn.classList.remove('selected');
        ownGuessSection.classList.remove('visible');
        
        // Set hidden fields
        hiddenChoice.value = 'match';
        hiddenUpdatedGuess.value = '';  // Will be set server-side
        
        choiceMade = true;
        matchBtn.classList.add('disabled');
        ownBtn.classList.add('disabled');
        
        infoBox.innerHTML = '<strong>✓ Choice confirmed:</strong> You\'ve chosen to match ' + partnerDisplayLabel + '\'s final guess. We set your updated guess to match theirs.';
        infoBox.style.display = 'block';
        
        nextButton.disabled = false;
    });
    
    ownBtn.addEventListener('click', function() {
        if (choiceMade) return;
        
        ownBtn.classList.add('selected');
        matchBtn.classList.remove('selected');
        ownGuessSection.classList.add('visible');
        ownGuessInput.focus();
    });
    
    // Stage 2: Own guess validation
    ownGuessInput.addEventListener('input', function() {
        updateGuessStyle(ownGuessInput);
        submitOwnGuessBtn.disabled = !isGuessValid(ownGuessInput.value);
    });
    
    // Stage 2: Submit own guess
    submitOwnGuessBtn.addEventListener('click', function() {
        if (!isGuessValid(ownGuessInput.value) || choiceMade) return;
        
        choiceMade = true;
        ownGuessInput.readOnly = true;
        submitOwnGuessBtn.disabled = true;
        matchBtn.classList.add('disabled');
        ownBtn.classList.add('disabled');
        
        // Set hidden fields
        hiddenChoice.value = 'own';
        hiddenUpdatedGuess.value = ownGuessInput.value;
        
        infoBox.innerHTML = '<strong>✓ Guess confirmed:</strong> Your updated guess is <strong>' + ownGuessInput.value + '</strong>.';
        infoBox.style.display = 'block';
        
        nextButton.disabled = false;
    });

    function updateControls() {
        updateGuessStyle(guessInput);
        if (!stageUnlocked[0] || stage1Locked) {
            guessInput.readOnly = true;
            submitGuess1Btn.disabled = true;
            return;
        }
        guessInput.readOnly = false;
        submitGuess1Btn.disabled = !isGuessValid(guessInput.value);
    }

    // Gate based on iframe progress.
    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;
            updateControls();
            if (!stage1Locked) {
                guessInput.focus();
            }
        }
        if (data.type === 'urnexp:complete') {
            stageUnlocked[1] = true;
            if (partnerDrawDescription) {
                partnerDrawDescription.style.display = 'none';
            }
            stage2Section.classList.add('visible');
        }
    });

    // Initialize
    nextButton.disabled = true;
    guessInput.readOnly = true;
    submitGuess1Btn.disabled = true;
    updateControls();
</script>
{{ endblock }}