{{ block title }}
<div style="display: flex; justify-content: center; align-items: center;">Generation and Families</div>
{{ endblock }}

{{ block content }}

<div id="connection-overlay" style="
    position: fixed; inset: 0; z-index: 9999;
    background: rgba(255,255,255,0.92);
    display: flex; flex-direction: column;
    justify-content: center; align-items: center;
    font-size: 18px; color: #444;
">
    <div style="margin-bottom: 16px;">
        <svg width="48" height="48" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
            <circle cx="24" cy="24" r="20" stroke="#ccc" stroke-width="4"/>
            <path d="M24 4 a20 20 0 0 1 20 20" stroke="#555" stroke-width="4" stroke-linecap="round">
                <animateTransform attributeName="transform" type="rotate"
                    from="0 24 24" to="360 24 24" dur="0.9s" repeatCount="indefinite"/>
            </path>
        </svg>
    </div>
    <div>Setting up the selection board&hellip;</div>
    <div style="font-size: 13px; color: #888; margin-top: 8px;">This takes a few seconds on first load.</div>
</div>

<style>
.bottom-label {
    position: absolute;
    bottom: -2px;
    left: 0;
    right: 0;
    text-align: center;
    font-weight: bold;
}

.cards-container {
    display: grid;
    grid-template-rows: repeat(3, 150px);
    grid-auto-flow: column;
    justify-content: center;
    align-items: center;
    margin: 30px auto;
    gap: 30px 60px;
}

.card {
    width: 150px;
    height: 150px;
    background-image: url('/static/f0.png');
    background-size: cover;
    background-position: center;
    border: 2px solid #ddd;
    border-radius: 10px;
    cursor: pointer;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
}

.card:hover {
    transform: scale(1.05);
    box-shadow: 0 4px 8px rgba(0,0,0,0.2);
}

.card.taken {
    opacity: 0.6;
    background-image: url('/static/cross.png');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    cursor: not-allowed;
}

.card.taken img {
    display: block !important;
}

.instructions {
    text-align: center;
    margin-bottom: 20px;
    font-size: 16px;
    line-height: 1.5;
}

#status {
    text-align: center;
    margin-top: 20px;
    font-weight: bold;
}

.you-label {
    position: absolute;
    bottom: 20px;
    left: 0;
    right: 0;
    text-align: center;
    font-weight: bold;
}

.card.selected-by-me {
    border: 8px solid grey;
    background-color: #ffffff;
}

@keyframes pulse {
    0% { box-shadow: 0 0 5px #4CAF50; }
    50% { box-shadow: 0 0 20px #4CAF50; }
    100% { box-shadow: 0 0 5px #4CAF50; }
}
</style>

<!-- Completion message: family name filled in by JS via liveRecv -->
<div class="instructions" id="completion-message" style="display: none;">
    {% if generation == 1 %}
        <br><br><br>
        All families have completed the selection process. Please click the button to proceed.<br><br>
    {% elif generation == 2 %}
        Based on the past generation's choice, you have been assigned the following family name:<br>
        <b><div id="label_result" style="font-weight: bold;"></div></b>
        <br>
        You will have the below ID:<br>
        <b><div id="label_result1" style="font-weight: bold;"></div></b>
        <br>
    {% endif %}
</div>

<div class="instructions" id="instructions-message" style="display: block;">
    <br><br>
    <div id="gen1-waiting" style="display: none;">
        <p>You have chosen the successor for your family.</p>
        <p>Please wait for all families to finish choosing their successors.</p>
    </div>

    <div id="gen1-choosing" style="display: {% if generation == 1 and player.child_id == -100 %}block{% else %}none{% endif %};">
        <p>Behind each of these cards is a participant of the next generation.</p>
        <p>Please choose one of them to be your successor, {{ family_assignment }}-II, and click the card.<br>
            (Flipped over cards without a border on them have already been chosen.)</p>
    </div>

    <div id="gen2-waiting" style="display: {% if generation == 2 and player.parent_id == -100 %}block{% else %}none{% endif %};">
        <p>Your past generation will now choose their successors from your generation in a random order.</p>
        <p>Behind each of these cards is a participant of your generation. Please wait while the past generation makes their choices.</p>
    </div>

    <div id="gen2-selected" style="display: {% if generation == 2 and player.parent_id != -100 %}block{% else %}none{% endif %};">
        Your family has completed the selection process. This stage will end once all families have finished their selections.<br><br><br>
    </div>
</div>

<div class="cards-container">
    {% for i in card_range %}
    <div class="card {% if generation == 2 and i == my_own_id %}selected-by-me{% endif %}"
         id="card{{ i }}" data-square="{{ i }}" onclick="sendMove(this)">

        {# Gen2: show their own family image if already assigned #}
        {% if generation == 2 and i == my_own_id and player.parent_id != -100 %}
            <img src="/static/{{ family_assignment }}.png" id="img{{ i }}" style="width:150px;height:150px;">
            <div class="you-label" id="label{{ i }}">{{ family_assignment }}-II</div>
        {# Gen1: show the family image on the card they already selected #}
        {% elif generation == 1 and i == player.child_id %}
            <img src="/static/{{ family_assignment }}.png" id="img{{ i }}" style="width:150px;height:150px;">
            <div class="you-label" id="label{{ i }}">{{ family_assignment }}-II</div>
        {% else %}
            <img src="" id="img{{ i }}" style="display: none; width:150px;height:150px;">
            <div class="you-label" id="label{{ i }}" style="display: none;"></div>
        {% endif %}

        <div class="bottom-label" id="bottom-label{{ i }}">
            {% if generation == 2 and i == my_own_id %}
                (You)
            {% elif generation == 1 and i == player.child_id %}
                (Your successor)
            {% endif %}
        </div>
    </div>
    {% endfor %}
</div>

<br><br><br>

<div id="proceed-btn" style="display: none; justify-content: right; align-items: right;">
    <button class="btn btn-primary">Next</button>
</div>

<script>
    let finished = false;
    let hasHighlighted = false;
    let mySelectedCard = null;
    let myFamilyName = null;

    function writeStatus(msg) {
        const el = document.getElementById('status');
        if (el) el.innerText = msg;
    }

    function updateInstructionsForGen1(hasSelected) {
        if (js_vars.my_generation !== 1) return;
        const choosingDiv = document.getElementById('gen1-choosing');
        const waitingDiv  = document.getElementById('gen1-waiting');
        if (hasSelected) {
            if (choosingDiv) choosingDiv.style.display = 'none';
            if (waitingDiv)  waitingDiv.style.display  = 'block';
        } else {
            if (choosingDiv) choosingDiv.style.display = 'block';
            if (waitingDiv)  waitingDiv.style.display  = 'none';
        }
    }

    function liveRecv(data) {
    // ── Dismiss loading overlay on first server response ──
    const overlay = document.getElementById('connection-overlay');
    if (overlay) overlay.remove();
    // ─────────────────────────────────────────────────────

        console.log("Received update:", data);

        // Handle server rejection — reset locks so player can try another card
        if (data.error) {
            console.warn("Move rejected:", data.error);
            hasHighlighted = false;
            mySelectedCard = null;
            writeStatus("That card was just taken. Please choose another.");
        }

        let board = [];
        if (data.board_state) {
            board = Array.isArray(data.board_state)
                ? data.board_state
                : JSON.parse(data.board_state);
        }

        const BLANK = -1;
        const resultLabel  = document.getElementById('label_result');
        const resultLabel1 = document.getElementById('label_result1');

        if (board.length) {
            for (let i = 1; i <= board.length; i++) {
                const card        = document.getElementById(`card${i}`);
                const img         = document.getElementById(`img${i}`);
                const label       = document.getElementById(`label${i}`);
                const bottomLabel = document.getElementById(`bottom-label${i}`);
                if (!card) continue;

                const cellValue = board[i - 1];
                card.classList.remove('taken');

                if (cellValue !== BLANK && cellValue !== -1) {
                    const famName = cellValue;
                    card.classList.add('taken');

                    if (img) {
                        img.src = `/static/${famName}.png`;
                        img.style.display = 'block';
                    }
                    if (label && famName) {
                        label.textContent = `${famName}-II`;
                        label.style.display = 'block';
                    }

                    // Gen2: detect when own card has been claimed
                    if (js_vars.my_generation == 2 && i == js_vars.my_own_id) {
                        myFamilyName = famName;
                        if (resultLabel)  resultLabel.textContent  = famName;
                        if (resultLabel1) resultLabel1.textContent = `${famName}-II`;
                        const gen2waiting  = document.getElementById('gen2-waiting');
                        const gen2selected = document.getElementById('gen2-selected');
                        if (gen2waiting)  gen2waiting.style.display  = 'none';
                        if (gen2selected) gen2selected.style.display = 'block';
                    }

                    // Gen1: lock if server confirms this is their own selection
                    if (js_vars.my_generation == 1 && mySelectedCard === null) {
                        if (famName === js_vars.family_assignment) {
                            card.classList.add('selected-by-me');
                            mySelectedCard = i;
                            hasHighlighted = true;
                            if (bottomLabel) bottomLabel.textContent = '(Your successor)';
                            updateInstructionsForGen1(true);
                        }
                    }

                } else {
                    if (img) {
                        img.removeAttribute('src');
                        img.style.display = 'none';
                    }
                    if (label) label.style.display = 'none';
                }
            }
        }

        if (data.game_end == true) {
            if (js_vars.my_generation == 2 && myFamilyName) {
                if (resultLabel)  resultLabel.textContent  = myFamilyName;
                if (resultLabel1) resultLabel1.textContent = `${myFamilyName}-II`;
            }
            const completion = document.getElementById('completion-message');
            if (completion) completion.style.display = 'block';
            const instr = document.getElementById('instructions-message');
            if (instr) instr.style.display = 'none';
            const btn = document.getElementById('proceed-btn');
            if (btn) btn.style.display = 'flex';
        }

        // ✅ FIX: Unlock clicks after board confirms Gen1 hasn't selected yet.
        // If mySelectedCard was set above, hasHighlighted is already true — safe.
        if (js_vars.my_generation == 1 && mySelectedCard === null) {
            hasHighlighted = false;
        }
    }

    function sendMove(card) {
        if (finished) return;
        if (card.classList.contains('taken')) return;
        if (js_vars.my_generation == 2) return;
        if (hasHighlighted) return;

        const move = parseInt(card.dataset.square);
        hasHighlighted = true;  // lock immediately to prevent double-click
        liveSend({move: move}); // server confirms → liveRecv updates the UI
    }

    document.addEventListener("DOMContentLoaded", function() {
        console.log(console.log("Page loaded — sending warmup ping to pre-warm WebSocket connection"));

        {% if generation == 1 and player.child_id != -100 %}
            // ✅ Already selected — lock immediately, no need to wait for liveRecv
            mySelectedCard = {{ player.child_id }};
            hasHighlighted = true;
            updateInstructionsForGen1(true);
        {% else %}
            // ✅ FIX: Do NOT pre-lock. Leave hasHighlighted = false so clicks work
            // immediately. liveRecv will lock if server confirms already selected.
            // Previously this was set to true here, causing a deadlock when
            // liveRecv never fired due to empty broadcast recipient list.
            hasHighlighted = false;
        {% endif %}

        liveSend({});  // request current board state to sync UI
    });
</script>

{{ endblock }}