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

{{ block title }}
{{ endblock }}

{{ block content }}
<div class="example-wrapper">
    <h2>Practice Example</h2>
    <p class="intro-text">
        This practice round shows how the game works.
        The urn has <strong>20</strong> balls in total, with between <strong>4</strong> and <strong>16</strong> <span class="text-danger fw-bold">RED</span> balls.
    </p>

    <div class="urn-section">
        <p class="draws-text">
            In this practice round, draw <strong>3</strong> balls, make a guess, then draw <strong>3</strong> more balls and update your guess.
        </p>
        <div class="urn-visual" aria-label="Practice urn">
            <iframe
                class="urn-visual__frame"
                id="practiceUrnFrame"
                src="{% static 'org_learning/urn_experiment.html' %}?mode=practice&num_red={{ demo_red_count }}&draws={{ demo_draws_csv }}"
                title="Practice urn animation"
                loading="lazy"
            ></iframe>
        </div>
    </div>

    <div class="guess-section" id="guessSection1">
        <p class="guess-text">
            After you see the first 3 draws, guess the <strong>total</strong> number of <span class="text-danger fw-bold">RED</span> balls in the urn (out of 20).
            Do not guess how many are left.
        </p>
        <div class="guess-input">
            <label for="demoGuess1">Your first guess (between 4 and 16):</label>
            <input type="number" id="demoGuess1" min="4" max="16" step="1" inputmode="numeric" autocomplete="off">
            <small class="field-hint">Once you enter a valid guess, you move to round 2.</small>
        </div>
    </div>

    <div class="guess-section" id="guessSection2" data-initial="{{ player.field_maybe_none('demo_guess') }}">
        <p class="guess-text">
            After you see the next 3 draws, update your guess.
        </p>
        <div class="guess-input">
            {% if form.demo_guess.errors %}
                <div class="field-error">{{ form.demo_guess.errors }}</div>
            {% endif %}
            <label for="id_demo_guess">Your updated guess (between 4 and 16):</label>
            <input type="number" id="id_demo_guess" name="demo_guess" min="4" max="16" step="1" inputmode="numeric" required>
            <small class="field-hint">Only whole numbers between 4 and 16 are allowed.</small>
        </div>
    </div>
    <div class="example-next">
        {{ next_button }}
    </div>
</div>

<style>
    .example-wrapper { max-width: 760px; margin: 0 auto; }
    .intro-text, .draws-text, .guess-text { color: #374151; }
    .urn-section { display: flex; flex-direction: column; align-items: center; margin: 24px 0; }
    .urn-visual { display: flex; align-items: center; justify-content: center; width: 100%; }

    .urn-visual__frame {
        width: 100%;
        max-width: 420px;
        height: min(720px, 80vh);
        border: 0;
        border-radius: 8px;
        overflow: hidden;
        background: #fff;
    }
    .guess-section { display: none; margin-top: 32px; padding: 20px; background: #f3f4f6; border-radius: 8px; }
    .guess-input { margin-top: 14px; display: flex; flex-direction: column; gap: 8px; }
    .guess-input input { width: 140px; padding: 10px 12px; border: 2px solid #d1d5db; border-radius: 6px; font-size: 16px; }
    .guess-input input:focus { outline: none; border-color: #10b981; box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.15); }
    .example-next { margin-top: 24px; }
    .field-error { color: #b91c1c; font-weight: 600; }
    .field-hint { color: #6b7280; font-size: 0.85em; }
</style>

<script>
    const minRed = 4;
    const maxRed = 16;

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

    const guessSection1 = document.getElementById('guessSection1');
    const guessSection2 = document.getElementById('guessSection2');
    const guess1Input = document.getElementById('demoGuess1');
    const guess2Input = document.getElementById('id_demo_guess');
    const nextButton = document.querySelector('button.otree-btn-next');
    const initialGuessRaw = guessSection2 ? guessSection2.dataset.initial || '' : '';
    const initialGuess = initialGuessRaw && initialGuessRaw !== 'None' ? initialGuessRaw : '';

    let round1Complete = false;
    let continuedToRound2 = false;

    function showGuess1Section() {
        if (!guessSection1) {
            return;
        }
        guessSection1.style.display = 'block';
        if (guess1Input) {
            guess1Input.disabled = false;
            guess1Input.focus();
        }
    }

    function showGuess2Section() {
        if (!guessSection2) {
            return;
        }
        guessSection2.style.display = 'block';
        if (guess2Input) {
            guess2Input.disabled = false;
            guess2Input.focus();
        }
        validateGuess2();
    }

    function validateGuess2() {
        if (!guess2Input) {
            return;
        }
        const raw = guess2Input.value;
        const value = Number(raw);
        const isValid = Number.isInteger(value) && value >= minRed && value <= maxRed;
        if (nextButton) {
            nextButton.disabled = !isValid;
        }
    }

    function validateGuess1AndContinue() {
        if (!round1Complete || continuedToRound2) {
            return;
        }
        if (!guess1Input) {
            return;
        }
        const value = Number(guess1Input.value);
        const isValid = Number.isInteger(value) && value >= minRed && value <= maxRed;
        if (!isValid) {
            return;
        }
        continuedToRound2 = true;
        guess1Input.readOnly = true;

        if (urnFrame && urnFrame.contentWindow) {
            urnFrame.contentWindow.postMessage({ type: 'urnexp:continue' }, '*');
        }
    }

    function sanitizeGuess2() {
        if (!guess2Input) {
            return;
        }
        const raw = guess2Input.value;
        let value = Number(raw);
        if (!Number.isFinite(value)) {
            guess2Input.value = '';
            validateGuess2();
            return;
        }
        if (!Number.isInteger(value)) {
            guess2Input.value = '';
            validateGuess2();
            return;
        }
        validateGuess2();
    }

    window.addEventListener('message', (event) => {
        if (urnFrame && event.source !== urnFrame.contentWindow) {
            return;
        }
        const data = event && event.data;
        if (!data || typeof data !== 'object') {
            return;
        }
        if (data.type === 'urnexp:round_complete' && data.round === 1) {
            round1Complete = true;
            showGuess1Section();
            validateGuess1AndContinue();
            return;
        }
        if (data.type === 'urnexp:complete') {
            showGuess2Section();
        }
    });

    if (guess1Input) {
        guess1Input.disabled = true;
        guess1Input.addEventListener('input', validateGuess1AndContinue);
        guess1Input.addEventListener('change', validateGuess1AndContinue);
        guess1Input.addEventListener('blur', validateGuess1AndContinue);
    }

    if (guess2Input) {
        guess2Input.disabled = true;
        if (initialGuess) {
            guess2Input.value = initialGuess;
        }
        guess2Input.addEventListener('input', validateGuess2);
        guess2Input.addEventListener('change', sanitizeGuess2);
        guess2Input.addEventListener('blur', sanitizeGuess2);
    }

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

    if (guess2Input && guess2Input.value) {
        showGuess2Section();
    }
</script>

{{ endblock }}