{% extends "core/base.html" %}
{% load static %}

{% block title_text %}Game Sea{% endblock title_text %}
{% block header_text %}<span>Game</span><span>Sea</span>{% endblock header_text %}

{% block content %}
    <div class="my-sea-page" data-phase="{% if active_draw %}picker{% else %}landing{% endif %}">
        {% if not user_has_sig %}
            {# Sprint 4b sign-gate. The draw UX is gated behind a saved      #}
            {# significator — render a Look!-formatted Brief-style line w.  #}
            {# FYI (→ /billboard/my-sign/) + NVM (→ /gameboard/) until the  #}
            {# user picks a sign. Inline (not portaled like .note-banner)   #}
            {# because the gate IS the page content, not a transient nudge. #}
            <div class="my-sea-sign-gate">
                <p class="my-sea-sign-gate__line">
                    Look!&mdash;pick your sign before drawing the Sea.
                </p>
                <div class="my-sea-sign-gate__actions">
                    <a class="btn btn-cancel my-sea-sign-gate__back"
                       href="{% url 'gameboard' %}">NVM</a>
                    <a class="btn btn-info my-sea-sign-gate__fyi"
                       href="{% url 'billboard:my_sign' %}">FYI</a>
                </div>
            </div>
        {% else %}
            {% if not active_draw %}
            {# Sprint 5 iter 1 — DRAW SEA landing UX. DRY table hex from    #}
            {# the room shell (.room-shell > .room-table > … > .table-hex) #}
            {# w. 6 chair seats labeled 1C-6C as placeholders for the      #}
            {# friend-invite feature per the My Sea roadmap architectural  #}
            {# anchor "Six chairs retained even in solo". DRAW SEA btn     #}
            {# mirrors SCAN SIGN on /billboard/my-sign/. Suppressed when   #}
            {# an active draw exists (iter 4b) — the picker phase is the  #}
            {# landing state once the user has spent their free quota.    #}
            <div class="my-sea-landing">
                <div class="room-shell">
                    <div id="id_game_table" class="room-table">
                        <div class="room-table-scene">
                            <div class="table-hex-border">
                                <div class="table-hex">
                                    <div class="table-center">
                                        {# Sprint 5 iter 1 — FREE DRAW = the 1/24hr free-quota draw.  #}
                                        {# Future sprint will conditionally swap this for a DRAW SEA  #}
                                        {# .btn-primary that calls the gatekeeper partial once the    #}
                                        {# free daily has been used; until then the btn renders FREE  #}
                                        {# DRAW. ID retained as `id_draw_sea_btn` (intent: the draw   #}
                                        {# entry point) so the swap is label-only when iter 6+ lands. #}
                                        <button id="id_draw_sea_btn" type="button" class="btn btn-primary">FREE<br>DRAW</button>
                                    </div>
                                </div>
                            </div>
                            {% for n in "123456" %}
                                {# Chair-position labels (1C-6C). No roles in    #}
                                {# my-sea (this is the solo draw flow); using    #}
                                {# `.seat-position-label` instead of the room's  #}
                                {# `.seat-role-label` to keep the no-role        #}
                                {# semantics clean. `.position-status-icon` +    #}
                                {# `.fa-ban` are unchanged — already role-       #}
                                {# agnostic in _room.scss.                       #}
                                <div class="table-seat" data-slot="{{ n }}">
                                    <i class="fa-solid fa-chair"></i>
                                    <span class="seat-position-label">{{ n }}C</span>
                                    <i class="position-status-icon fa-solid fa-ban"></i>
                                </div>
                            {% endfor %}
                        </div>
                    </div>
                </div>
            </div>
            {% endif %}

            {# Picker phase — per-spread flexible layout. Sig pins .sea-  #}
            {# pos-core; the 6 surrounding positions all render in DOM   #}
            {# so the SPREAD dropdown can swap `.my-sea-cross[data-      #}
            {# spread]` between the 4 three-card variants (each w. its   #}
            {# own 3-position subset + draw order) + the 2 six-card      #}
            {# Celtic Cross variants (all 6 surrounding positions).      #}
            {# Each empty slot carries a `.sea-pos-label` caption (re-   #}
            {# appropriated from the GRAVITY/LEVITY .sea-stack-name look) #}
            {# that JS updates per spread.                                #}
            {#                                                            #}
            {# `id="id_sea_overlay"` aliases the picker to what SeaDeal   #}
            {# binds to (the gameroom uses the same ID on a different     #}
            {# page — no DOM collision since my-sea + gameroom never co-  #}
            {# exist in one DOM). FLIP click delegates to SeaDeal.        #}
            {# openStage(), which fills the slot AND opens the portaled   #}
            {# stage modal w. SPIN / FYI controls.                        #}
            <div class="my-sea-picker{% if active_draw %} my-sea-picker--locked{% endif %}" id="id_sea_overlay"{% if not active_draw %} style="display:none"{% endif %}>
                <div class="sea-cards-col">
                    <div class="sea-cross my-sea-cross" data-spread="{{ default_spread }}">
                        {# `.sea-pos-label` lives OUTSIDE the slot so SeaDeal._fillSlot's #}
                        {# `slot.innerHTML = …` (which writes the drawn card's corner-   #}
                        {# rank + suit-icon) doesn't clobber it. Labels persist as       #}
                        {# adjacent siblings + are positioned via absolute SCSS to       #}
                        {# touch the slot's nearest edge.                                #}
                        <div class="sea-crucifix-cell sea-pos-crown">
                            <span class="sea-pos-label" data-position="crown">Outcome</span>
                            {% include "apps/gameboard/_partials/_my_sea_slot.html" with position="crown" saved=saved_by_position.crown crossing=False %}
                        </div>
                        <div class="sea-crucifix-cell sea-pos-leave">
                            <span class="sea-pos-label" data-position="leave"></span>
                            {% include "apps/gameboard/_partials/_my_sea_slot.html" with position="leave" saved=saved_by_position.leave crossing=False %}
                        </div>
                        <div class="sea-crucifix-cell sea-pos-core">
                            <div class="sig-stage-card sea-sig-card"
                                 data-card-id="{{ significator.id }}">
                                <span class="fan-corner-rank">{{ significator.corner_rank }}</span>
                                {% if significator.suit_icon %}<i class="fa-solid {{ significator.suit_icon }}"></i>{% endif %}
                            </div>
                            <div class="sea-pos-cover">
                                <span class="sea-pos-label" data-position="cover">Action</span>
                                {% include "apps/gameboard/_partials/_my_sea_slot.html" with position="cover" saved=saved_by_position.cover crossing=False %}
                            </div>
                            <div class="sea-pos-cross">
                                <span class="sea-pos-label" data-position="cross"></span>
                                {% include "apps/gameboard/_partials/_my_sea_slot.html" with position="cross" saved=saved_by_position.cross crossing=True %}
                            </div>
                        </div>
                        <div class="sea-crucifix-cell sea-pos-loom">
                            <span class="sea-pos-label" data-position="loom"></span>
                            {% include "apps/gameboard/_partials/_my_sea_slot.html" with position="loom" saved=saved_by_position.loom crossing=False %}
                        </div>
                        <div class="sea-crucifix-cell sea-pos-lay">
                            <span class="sea-pos-label" data-position="lay">Situation</span>
                            {% include "apps/gameboard/_partials/_my_sea_slot.html" with position="lay" saved=saved_by_position.lay crossing=False %}
                        </div>
                    </div>
                </div>

                {# Form col — SPREAD combobox + DECKS swatches + LOCK    #}
                {# HAND / DEL. DRY w. gameroom `_sea_overlay.html`'s     #}
                {# `.sea-form-col` shape; my-sea-specific differences:   #}
                {# (a) 6 spread options under 2 section dividers,        #}
                {# (b) default = situation-action-outcome (3-card),     #}
                {# (c) no `.sea-modal-header` (the gateway IS the page). #}
                <div class="sea-form-col my-sea-form-col">
                    <div class="sea-form-main">
                        <div class="sea-field">
                            <label for="id_sea_spread" id="id_sea_spread_label">Spread</label>
                            <p class="sea-reversal-hint">{{ reversals_pct|default:25 }}% reversals</p>
                            {# autocomplete="off" opts the hidden input out of   #}
                            {# Firefox's form-history autofill, which otherwise #}
                            {# restores the LAST value on soft reload (F5).     #}
                            {# Without this, combobox.js's `select(i)` short-   #}
                            {# circuits its change-event dispatch when the      #}
                            {# user re-picks the value Firefox already restored #}
                            {# → my-sea's sync() never fires → data-spread on   #}
                            {# .my-sea-cross stays stuck on SAO default.        #}
                            <input type="hidden" id="id_sea_spread" name="spread"
                                   value="{{ default_spread }}" autocomplete="off">
                            <div class="sea-select"
                                 data-combobox
                                 data-combobox-target="id_sea_spread"
                                 role="combobox"
                                 aria-expanded="false"
                                 aria-haspopup="listbox"
                                 aria-labelledby="id_sea_spread_label"
                                 tabindex="0">
                                <span class="sea-select-current">Situation, Action, Outcome</span>
                                <span class="sea-select-arrow" aria-hidden="true">▾</span>
                                <ul class="sea-select-list" role="listbox">
                                    <li role="presentation" class="sea-select-divider">3-card spreads</li>
                                    <li role="option" data-value="past-present-future"      aria-selected="false">Past, Present, Future</li>
                                    <li role="option" data-value="situation-action-outcome" aria-selected="true">Situation, Action, Outcome</li>
                                    <li role="option" data-value="mind-body-spirit"         aria-selected="false">Mind, Body, Spirit</li>
                                    <li role="option" data-value="desire-obstacle-solution" aria-selected="false">Desire, Obstacle, Solution</li>
                                    <li role="presentation" class="sea-select-divider">6-card spreads</li>
                                    <li role="option" data-value="waite-smith"     aria-selected="false">Celtic Cross, Waite-Smith</li>
                                    <li role="option" data-value="escape-velocity" aria-selected="false">Celtic Cross, Escape Velocity</li>
                                </ul>
                            </div>
                        </div>

                        <div class="sea-stacks">
                            <span class="sea-stacks-label">DECKS</span>
                            <div class="sea-deck-stack sea-deck-stack--gravity">
                                <div class="sea-stack-face">
                                    <button class="btn btn-reveal sea-stack-ok" type="button">FLIP</button>
                                </div>
                                <span class="sea-stack-name">Gravity</span>
                            </div>
                            <div class="sea-deck-stack sea-deck-stack--levity">
                                <div class="sea-stack-face">
                                    <button class="btn btn-reveal sea-stack-ok" type="button">FLIP</button>
                                </div>
                                <span class="sea-stack-name">Levity</span>
                            </div>
                        </div>
                    </div>

                    <div class="sea-form-actions">
                        <button type="button" id="id_sea_lock_hand" class="btn btn-primary" disabled>
                            LOCK HAND
                        </button>
                        <button type="button" id="id_sea_del" class="btn btn-danger">
                            DEL
                        </button>
                    </div>
                </div>
                {# Sea stage — portaled modal that opens on FLIP click via #}
                {# SeaDeal.openStage. `position:fixed; inset:0` covers the #}
                {# viewport; click backdrop to dismiss + reveal the slot   #}
                {# thumbnail.                                              #}
                {% include "apps/gameboard/_partials/_sea_stage.html" %}
            </div>

            {# Iter 4b — DEL guard reuses the shared `#id_guard_portal`   #}
            {# from base.html (the same one the room's gear-menu DEL btn  #}
            {# uses). Gaussian-glass tooltip positioned above the DEL btn,#}
            {# no backdrop. The picker IIFE below invokes it via          #}
            {# `window.showGuard(delBtn, "Are you sure?", confirmFn, null,#}
            {# {yesLabel: "DEL"})` when DEL is clicked post-lock.         #}
            {# Sprint 5 iter 4a — shuffled deck (levity + gravity halves,  #}
            {# sig excluded) embedded as JSON; JS reads on init and       #}
            {# pops from the relevant pile on each deposit.                #}
            {{ sea_deck_data|json_script:"id_my_sea_deck" }}
            {# StageCard + SeaDeal — both bind to `#id_sea_overlay` (the   #}
            {# my-sea-picker) + `#id_sea_stage` (the stage partial) on    #}
            {# DOMContentLoaded; openStage() runs on FLIP click below.   #}
            <script src="{% static 'apps/epic/stage-card.js' %}"></script>
            <script src="{% static 'apps/epic/sea.js' %}"></script>
            <script src="{% static 'apps/epic/combobox.js' %}"></script>
            <script>
            (function () {
                // Per-spread draw order + position labels — locked in spec
                // (user 2026-05-19). Each three-card spread uses a DIFFERENT
                // 3-position subset of the 6 surrounding positions, in a
                // specific order. The Celtic Cross variants share position
                // labels (Crown/Beneath/Cover/Cross/Before/Behind — gameroom
                // vocabulary) but differ in draw order.
                var DRAW_ORDER = {
                    'past-present-future':      ['leave', 'cover', 'loom'],
                    'situation-action-outcome': ['lay',   'cover', 'crown'],
                    'mind-body-spirit':         ['crown', 'lay',   'loom'],
                    'desire-obstacle-solution': ['loom',  'cross', 'crown'],
                    'waite-smith':              ['cover', 'cross', 'crown', 'lay',   'loom',  'leave'],
                    'escape-velocity':          ['cover', 'cross', 'lay',   'leave', 'crown', 'loom'],
                };
                var POSITION_LABELS = {
                    'past-present-future':      { leave: 'Past',      cover: 'Present', loom: 'Future' },
                    'situation-action-outcome': { lay:   'Situation', cover: 'Action',  crown: 'Outcome' },
                    'mind-body-spirit':         { crown: 'Mind',      lay:   'Body',    loom: 'Spirit' },
                    'desire-obstacle-solution': { loom:  'Desire',    cross: 'Obstacle',crown: 'Solution' },
                    'waite-smith':     { crown: 'Crown', leave: 'Beneath', cover: 'Cover', cross: 'Cross', loom: 'Before', lay: 'Behind' },
                    // Escape Velocity remaps the diagonal positions per the
                    // user-locked spec (2026-05-19): Beneath→Lay, Before→
                    // Loom, Behind→Leave. Crown/Cover/Cross keep the WS
                    // names.
                    'escape-velocity': { crown: 'Crown', leave: 'Lay',     cover: 'Cover', cross: 'Cross', loom: 'Loom',   lay: 'Leave' },
                };
                var hidden = document.getElementById('id_sea_spread');
                var cross  = document.querySelector('.my-sea-cross');
                var picker = document.querySelector('.my-sea-picker');
                var lockBtn= document.getElementById('id_sea_lock_hand');
                var delBtn = document.getElementById('id_sea_del');
                var deckEl = document.getElementById('id_my_sea_deck');
                var seaSelect = document.querySelector('[data-combobox][data-combobox-target="id_sea_spread"]');
                if (!hidden || !cross || !picker) return;

                // ── Deck state ──────────────────────────────────────────
                // `_deckData` is the immutable initial payload from the
                // server; `_levityPile` + `_gravityPile` are working
                // copies that pop one card per deposit. DEL re-clones
                // from `_deckData` rather than re-fetching.
                var _deckData = { levity: [], gravity: [] };
                try { _deckData = JSON.parse((deckEl && deckEl.textContent) || '{}'); } catch (e) {}
                var _levityPile  = (_deckData.levity  || []).slice();
                var _gravityPile = (_deckData.gravity || []).slice();
                var _filled = 0;
                var _activeStack = null;
                var _locked = false;

                function _currentOrder() {
                    return DRAW_ORDER[hidden.value] || [];
                }

                function _hideOk() {
                    if (_activeStack) {
                        var ok = _activeStack.querySelector('.sea-stack-ok');
                        if (ok) ok.style.display = 'none';
                        _activeStack.classList.remove('sea-deck-stack--active');
                        _activeStack = null;
                    }
                }
                function _showOk(stack) {
                    _hideOk();
                    _activeStack = stack;
                    stack.classList.add('sea-deck-stack--active');
                    var ok = stack.querySelector('.sea-stack-ok');
                    if (ok) ok.style.display = '';
                }

                function _fillSlot(positionName, card, isLevity) {
                    // Lifted from gameroom sea.js's `_fillSlot`: strip
                    // .--empty + the position label, layer .--filled +
                    // polarity classes, set corner-rank + suit-icon.
                    var cell = cross.querySelector('.sea-pos-' + positionName);
                    if (!cell) return;
                    var slot = cell.querySelector('.sea-card-slot');
                    if (!slot) return;
                    slot.classList.remove('sea-card-slot--empty');
                    slot.classList.add('sea-card-slot--filled');
                    slot.classList.add(isLevity ? 'sea-card-slot--levity' : 'sea-card-slot--gravity');
                    if (card.reversed) slot.classList.add('sea-card-slot--reversed');
                    slot.dataset.cardId = String(card.id);
                    slot.dataset.posKey = positionName;
                    slot.innerHTML =
                        '<span class="fan-corner-rank">' + (card.corner_rank || '') + '</span>' +
                        (card.suit_icon ? '<i class="fa-solid ' + card.suit_icon + '"></i>' : '');
                }

                function _emptySlot(cell) {
                    // DEL restores each filled slot to its initial empty
                    // state. `.sea-pos-label` is now a SIBLING of the slot
                    // (outside it) so SeaDeal's innerHTML clobber on draw
                    // doesn't touch it — we don't need to re-render the
                    // label here, just wipe slot contents + classes.
                    var slot = cell.querySelector('.sea-card-slot');
                    if (!slot) return;
                    slot.className = slot.className
                        .split(' ')
                        .filter(function (c) {
                            return !/^sea-card-slot--(filled|visible|focused|levity|gravity|reversed|rank-long)$/.test(c);
                        })
                        .join(' ');
                    slot.classList.add('sea-card-slot--empty');
                    delete slot.dataset.cardId;
                    delete slot.dataset.posKey;
                    slot.innerHTML = '';
                }

                function _lockSpread() {
                    // Lock the SPREAD combobox after the first deposit —
                    // switching spread mid-draw would scramble the in-
                    // progress hand. Unlocks on DEL.
                    if (seaSelect) {
                        seaSelect.classList.add('sea-select--locked');
                        seaSelect.setAttribute('aria-disabled', 'true');
                    }
                }
                function _unlockSpread() {
                    if (seaSelect) {
                        seaSelect.classList.remove('sea-select--locked');
                        seaSelect.removeAttribute('aria-disabled');
                    }
                }

                function _reshuffleDeck() {
                    // Fisher-Yates re-shuffle on DEL — re-distributes cards
                    // across both polarity halves + re-rolls the 25% reversal
                    // axis per card. Page-load shuffle already came from the
                    // server (`_my_sea_deck_data`); subsequent shuffles run
                    // client-side so DEL → fresh-hand doesn't require a
                    // network round-trip.
                    var all = (_deckData.levity || []).concat(_deckData.gravity || []);
                    for (var i = all.length - 1; i > 0; i--) {
                        var j = Math.floor(Math.random() * (i + 1));
                        var tmp = all[i]; all[i] = all[j]; all[j] = tmp;
                    }
                    // Clone each card (don't mutate the immutable server payload
                    // — DEL can fire many times; we don't want successive shuffles
                    // to fold previous reversal flips into the next round).
                    all = all.map(function (c) {
                        var clone = {};
                        for (var k in c) if (Object.prototype.hasOwnProperty.call(c, k)) clone[k] = c[k];
                        clone.reversed = Math.random() < 0.25;
                        return clone;
                    });
                    var mid = Math.floor(all.length / 2);
                    _levityPile  = all.slice(0, mid);
                    _gravityPile = all.slice(mid);
                }

                function _resetHand() {
                    _filled = 0;
                    _hideOk();
                    _unlockSpread();
                    cross.querySelectorAll(
                        '.sea-crucifix-cell.sea-pos-crown, ' +
                        '.sea-crucifix-cell.sea-pos-leave, ' +
                        '.sea-crucifix-cell.sea-pos-loom, ' +
                        '.sea-crucifix-cell.sea-pos-lay, ' +
                        '.sea-pos-cover, .sea-pos-cross'
                    ).forEach(_emptySlot);
                    _reshuffleDeck();
                    if (lockBtn) lockBtn.disabled = true;
                    // Wipe SeaDeal's stage state too — closes a lingering
                    // modal + clears its `_seaHand` map so previously-
                    // drawn cards can't reopen via slot-tap focus.
                    if (window.SeaDeal && window.SeaDeal.resetHand) {
                        SeaDeal.resetHand();
                    }
                }

                function _setLocked(on) {
                    _locked = on;
                    picker.classList.toggle('my-sea-picker--locked', on);
                    // Decks + LOCK HAND go disabled; DEL stays interactive
                    // — it's the user's escape from the locked state
                    // (opens the guard portal in iter 4b, resets the hand
                    // in iter 4a). Without this exemption the SCSS rule
                    // `.btn-disabled { pointer-events: none }` would block
                    // every Selenium / user click on DEL post-LOCK.
                    [picker.querySelector('.sea-deck-stack--levity'),
                     picker.querySelector('.sea-deck-stack--gravity'),
                     lockBtn].forEach(function (el) {
                        if (!el) return;
                        el.classList.toggle('btn-disabled', on);
                    });
                    _hideOk();
                }

                // ── Deck-stack click → show FLIP → click FLIP → deposit ─
                picker.querySelectorAll('.sea-deck-stack').forEach(function (stack) {
                    stack.addEventListener('click', function (e) {
                        if (_locked) return;
                        e.stopPropagation();
                        if (_activeStack === stack) _hideOk();
                        else _showOk(stack);
                    });
                    var ok = stack.querySelector('.sea-stack-ok');
                    if (ok) {
                        ok.style.display = 'none';
                        ok.addEventListener('click', function (e) {
                            if (_locked) return;
                            e.stopPropagation();
                            var isLevity = stack.classList.contains('sea-deck-stack--levity');
                            var pile     = isLevity ? _levityPile : _gravityPile;
                            var card     = pile.length ? pile.shift() : null;
                            var order    = _currentOrder();
                            var posName  = order[_filled];
                            if (card && posName) {
                                // Delegate to SeaDeal — it `_fillSlot`s
                                // (sets corner-rank + suit-icon + polarity
                                // class on the slot at opacity 0) AND opens
                                // the portaled stage modal w. SPIN / FYI.
                                // Click-the-backdrop dismisses + the slot
                                // fades to `.--visible` revealing the
                                // thumbnail.
                                if (window.SeaDeal && window.SeaDeal.openStage) {
                                    SeaDeal.openStage(card, '.sea-pos-' + posName, isLevity);
                                } else {
                                    // Defensive fallback for environments
                                    // where sea.js failed to load (e.g.
                                    // collectstatic miss). Render the slot
                                    // visibly so the draw isn't lost.
                                    _fillSlot(posName, card, isLevity);
                                }
                                _filled++;
                                // First deposit locks the SPREAD combobox —
                                // switching mid-draw would scramble the
                                // in-progress hand's position mapping.
                                if (_filled === 1) _lockSpread();
                                if (lockBtn) lockBtn.disabled = (_filled < order.length);
                            }
                            _hideOk();
                        });
                    }
                });

                // Click elsewhere inside the picker dismisses the FLIP btn.
                picker.addEventListener('click', _hideOk);

                // ── DEL semantics differ by lock state ──────────────────
                // Pre-lock: DEL resets the in-progress hand client-side
                //           (iter 4a behaviour — no server round-trip).
                // Post-lock: DEL invokes the shared `#id_guard_portal`
                //            from base.html via `window.showGuard`, w. a
                //            "DEL" YES-label override (the room's gear-
                //            menu DEL flow uses the same portal). On YES
                //            we POST to /gameboard/my-sea/delete then
                //            navigate back to the page (server returns
                //            204; we redirect manually to land on the
                //            FREE DRAW landing).
                if (delBtn) {
                    delBtn.addEventListener('click', function (e) {
                        e.stopPropagation();
                        if (!_locked) {
                            _resetHand();
                            return;
                        }
                        if (!window.showGuard) return;
                        // Trigger btn (DEL, `.btn-danger`) opens the shared
                        // guard portal; the portal's confirm button is the
                        // standard `.btn-confirm` "OK" + `.btn-cancel` "NVM"
                        // pair — matches the room gear-menu DEL flow exactly.
                        window.showGuard(
                            delBtn,
                            'Are you sure?',
                            function () {
                                fetch('{% url "my_sea_delete" %}', {
                                    method: 'POST',
                                    credentials: 'same-origin',
                                    headers: {'X-CSRFToken': _csrf()},
                                }).then(function (r) {
                                    if (r.ok) window.location.reload();
                                });
                            }
                        );
                    });
                }
                if (lockBtn) {
                    lockBtn.addEventListener('click', function () {
                        if (lockBtn.disabled || _locked) return;
                        // Collect the in-progress hand for the POST. Slot
                        // class includes `--levity` / `--gravity`; reversed
                        // is on `.sea-card-slot--reversed`. Position comes
                        // from `data-pos-key`. Card id from `data-card-id`.
                        var hand = [];
                        cross.querySelectorAll(
                            '.sea-card-slot.sea-card-slot--filled'
                        ).forEach(function (slot) {
                            var cls = slot.className;
                            hand.push({
                                position: slot.dataset.posKey || '',
                                card_id: parseInt(slot.dataset.cardId, 10),
                                reversed: /sea-card-slot--reversed\b/.test(cls),
                                polarity: /sea-card-slot--levity\b/.test(cls) ? 'levity' : 'gravity',
                            });
                        });
                        var order = _currentOrder();
                        if (hand.length < order.length) return;
                        _setLocked(true);
                        _postLock(hand);
                    });
                }

                function _csrf() {
                    var m = document.cookie.match(/(?:^|; )csrftoken=([^;]+)/);
                    return m ? decodeURIComponent(m[1]) : '';
                }
                function _formatTimestamp(iso) {
                    // Mirror the server-side `D, M j @ g:i A` format
                    // (e.g., "Thu, May 21 @ 2:41 AM").
                    var d = new Date(iso);
                    if (isNaN(d)) return '';
                    var DAYS = ['Sun','Mon','Tue','Wed','Thu','Fri','Sat'];
                    var MONTHS = ['Jan','Feb','Mar','Apr','May','Jun',
                                  'Jul','Aug','Sep','Oct','Nov','Dec'];
                    var h = d.getHours();
                    var ampm = h >= 12 ? 'PM' : 'AM';
                    h = h % 12; if (h === 0) h = 12;
                    var m = d.getMinutes();
                    var mm = (m < 10 ? '0' : '') + m;
                    return DAYS[d.getDay()] + ', ' + MONTHS[d.getMonth()]
                        + ' ' + d.getDate() + ' @ ' + h + ':' + mm + ' ' + ampm;
                }
                window._showFreeDrawLockedBrief = function (iso) {
                    // Standard Brief banner — portaled atop the h2 w.
                    // Gaussian-glass bg (see [[note.js]] showBanner). The
                    // next-free-draw moment is passed as an ISO string +
                    // re-used as `created_at` so note.js's `<time
                    // class="note-banner__timestamp">` slot renders the
                    // datetime instead of "Invalid Date" (which it does
                    // for empty/invalid input). The `line_text` carries
                    // only the contextual prose now — the dedicated slot
                    // owns the timestamp display.
                    if (!window.Brief || !Brief.showBanner) return;
                    Brief.showBanner({
                        title: 'Free draw locked',
                        line_text:
                            'Look!&mdash;your free draw is locked in. ' +
                            'Next free draw available at:',
                        post_url: '{% url "gameboard" %}',
                        created_at: iso,
                        kind: 'NUDGE',
                    });
                    var banner = document.querySelector('.note-banner');
                    if (banner) {
                        banner.classList.add('my-sea-locked-banner');
                        // note.js renders the timestamp as `toLocaleDateString`
                        // (e.g., "May 20, 2026") — short-form, no time. Our
                        // use case wants the full `D, M j @ g:i A` shape
                        // (e.g., "Wed, May 20 @ 11:57 PM") so the user sees
                        // both the date AND the precise unlock hour. Overwrite
                        // the rendered text in-place (leaves the `datetime=`
                        // attribute intact for accessibility tooling).
                        var ts = banner.querySelector('.note-banner__timestamp');
                        if (ts && iso) ts.textContent = _formatTimestamp(iso);
                    }
                };
                function _postLock(hand) {
                    fetch('{% url "my_sea_lock" %}', {
                        method: 'POST',
                        credentials: 'same-origin',
                        headers: {
                            'Content-Type': 'application/json',
                            'X-CSRFToken': _csrf(),
                        },
                        body: JSON.stringify({
                            spread: hidden.value,
                            hand: hand,
                        }),
                    }).then(function (r) {
                        return r.ok ? r.json() : null;
                    }).then(function (body) {
                        if (body && body.next_free_draw_at) {
                            window._showFreeDrawLockedBrief(body.next_free_draw_at);
                        }
                    });
                }

                function syncLabels(spread) {
                    var labels = POSITION_LABELS[spread] || {};
                    cross.querySelectorAll('.sea-pos-label').forEach(function (el) {
                        var pos = el.dataset.position;
                        el.textContent = labels[pos] || '';
                    });
                }
                function sync() {
                    cross.setAttribute('data-spread', hidden.value);
                    syncLabels(hidden.value);
                    // Spread switch invalidates any in-progress hand —
                    // position-subset + draw-order both change. Reset.
                    _resetHand();
                }
                hidden.addEventListener('change', sync);

                // Initial state — labels already server-rendered for the
                // default spread. If the picker was server-rendered w. a
                // locked saved hand (iter 4b's active_draw branch), the
                // .my-sea-picker--locked class is already on the page —
                // mirror it in JS state so further interactions stay
                // disabled + DEL routes to the guard portal.
                _filled = 0;
                var _preLocked = picker.classList.contains('my-sea-picker--locked');
                if (_preLocked) {
                    _filled = _currentOrder().length;
                    _setLocked(true);
                    _lockSpread();
                }
                if (lockBtn) lockBtn.disabled = (_filled < _currentOrder().length);

                // Belt-and-braces autofill defense (paired w. autocomplete=
                // off on the hidden input above). Firefox occasionally
                // restores form-history values on soft reload even on
                // hidden inputs; if it does, hidden.value diverges from
                // the server-rendered aria-selected option + combobox.js
                // short-circuits its change-event dispatch on subsequent
                // option picks of the autofilled value. Force-sync from
                // the server-rendered aria-selected source-of-truth.
                var _initialOpt = document.querySelector(
                    '.sea-select-list [role="option"][aria-selected="true"]'
                );
                if (_initialOpt && hidden.value !== _initialOpt.dataset.value) {
                    hidden.value = _initialOpt.dataset.value;
                }

                // Exposed for iter 4b / future surfaces.
                window._mySeaDrawOrder = DRAW_ORDER;
            }());
            </script>

            <script src="{% static 'apps/epic/room.js' %}"></script>
            <script>
            (function () {
                var page = document.querySelector('.my-sea-page');
                if (!page) return;
                var landing = page.querySelector('.my-sea-landing');
                var picker  = page.querySelector('.my-sea-picker');
                var drawBtn = document.getElementById('id_draw_sea_btn');
                // FREE DRAW click flow:
                //   1) seat 1C transitions to .seated (chair --terUser +
                //      drop-shadow glow + .fa-ban → .fa-circle-check —
                //      _room.scss line 596 makes the colour change a
                //      0.6s ease transition);
                //   2) after a brief delay (so the user sees the seat
                //      animation), data-phase swaps to 'picker' + the
                //      landing hides. Picker content lands in iter 2.
                // The seat-take logic is solo-coded for now: 1C is the
                // lowest-numeral chair, and my-sea is 1-user-per-page
                // until the friend-invite feature (per [[project-my-
                // sea-roadmap]]) — so 1C is always the user's seat.
                var SEAT_ANIM_MS = 800;
                if (drawBtn) {
                    drawBtn.addEventListener('click', function () {
                        var seat1 = page.querySelector('.table-seat[data-slot="1"]');
                        if (seat1) {
                            seat1.classList.add('seated');
                            var statusIcon = seat1.querySelector('.position-status-icon');
                            if (statusIcon) {
                                statusIcon.classList.remove('fa-ban');
                                statusIcon.classList.add('fa-circle-check');
                            }
                        }
                        setTimeout(function () {
                            page.setAttribute('data-phase', 'picker');
                            if (landing) landing.style.display = 'none';
                            if (picker)  picker.style.display  = '';
                        }, SEAT_ANIM_MS);
                    });
                }
                // Mirror my-sign's scaleTable() init timing fix — the
                // .my-sea-page hasn't flushed its flex sizing on
                // DOMContentLoaded, so the hex stays unscaled until we
                // dispatch a resize once layout settles.
                window.requestAnimationFrame(function () {
                    window.dispatchEvent(new Event('resize'));
                });
            }());
            </script>

            {# Brief 'Default deck warning' banner — lifted verbatim from  #}
            {# /billboard/my-sign/'s no-equipped-deck path. Same copy,    #}
            {# same FYI (→ /gameboard/) + NVM (dismiss + proceed) actions.#}
            {# Tagged w. .my-sea-intro-banner so FTs disambiguate from    #}
            {# any other Briefs on the page.                              #}
            <script src="{% static 'apps/dashboard/note.js' %}"></script>
            {% if active_draw %}
            {# Iter 4b — saved-draw Brief. Standard portaled banner via   #}
            {# Brief.showBanner (Gaussian-glass bg, atop-h2 positioning); #}
            {# the on-LOCK-success path inside the picker IIFE calls the #}
            {# same `window._showFreeDrawLockedBrief` so a freshly-locked #}
            {# hand gets the identical UX without a page reload. Pass an #}
            {# ISO timestamp (`|date:'c'`) so note.js's `<time>` slot     #}
            {# parses cleanly instead of rendering "Invalid Date".       #}
            <script>
                document.addEventListener('DOMContentLoaded', function () {
                    if (window._showFreeDrawLockedBrief) {
                        window._showFreeDrawLockedBrief("{{ next_free_draw_at|date:'c' }}");
                    }
                });
            </script>
            {% endif %}
            {% if show_backup_intro_banner %}
            <script>
                document.addEventListener('DOMContentLoaded', function () {
                    if (!window.Brief || !Brief.showBanner) return;
                    Brief.showBanner({
                        title: 'Default deck warning',
                        line_text: 'Look!—no deck is equipped. Navigate to the Game Kit to equip one (FYI) or (NVM) proceed with the Earthman [Shabby Cardstock] deck.',
                        post_url: '{% url "gameboard" %}',
                        created_at: '',
                        kind: 'NUDGE',
                    });
                    var banner = document.querySelector('.note-banner');
                    if (banner) banner.classList.add('my-sea-intro-banner');
                });
            </script>
            {% endif %}
        {% endif %}
    </div>
{% endblock content %}