{% 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="landing">
        {% 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 %}
            {# 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/.                   #}
            <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>

            {# 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.                                #}
            <div class="my-sea-picker" style="display:none">
                <div class="sea-cards-col">
                    <div class="sea-cross my-sea-cross" data-spread="{{ default_spread }}">
                        <div class="sea-crucifix-cell sea-pos-crown">
                            <div class="sea-card-slot sea-card-slot--empty">
                                <span class="sea-pos-label" data-position="crown">Outcome</span>
                            </div>
                        </div>
                        <div class="sea-crucifix-cell sea-pos-leave">
                            <div class="sea-card-slot sea-card-slot--empty">
                                <span class="sea-pos-label" data-position="leave"></span>
                            </div>
                        </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">
                                <div class="sea-card-slot sea-card-slot--empty">
                                    <span class="sea-pos-label" data-position="cover">Action</span>
                                </div>
                            </div>
                            <div class="sea-pos-cross">
                                <div class="sea-card-slot sea-card-slot--empty sea-card-slot--crossing">
                                    <span class="sea-pos-label" data-position="cross"></span>
                                </div>
                            </div>
                        </div>
                        <div class="sea-crucifix-cell sea-pos-loom">
                            <div class="sea-card-slot sea-card-slot--empty">
                                <span class="sea-pos-label" data-position="loom"></span>
                            </div>
                        </div>
                        <div class="sea-crucifix-cell sea-pos-lay">
                            <div class="sea-card-slot sea-card-slot--empty">
                                <span class="sea-pos-label" data-position="lay">Situation</span>
                            </div>
                        </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>
                            <input type="hidden" id="id_sea_spread" name="spread"
                                   value="{{ default_spread }}">
                            <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>
            </div>
            <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.
                //
                // DRAW_ORDER feeds iter 4's deck-click-deposit logic; for
                // iter 3 it's just baked-in metadata.
                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', 'cover'],
                    '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',cover: 'Solution' },
                    'waite-smith':     { crown: 'Crown', leave: 'Beneath', cover: 'Cover', cross: 'Cross', loom: 'Before', lay: 'Behind' },
                    'escape-velocity': { crown: 'Crown', leave: 'Beneath', cover: 'Cover', cross: 'Cross', loom: 'Before', lay: 'Behind' },
                };
                var hidden = document.getElementById('id_sea_spread');
                var cross  = document.querySelector('.my-sea-cross');
                if (!hidden || !cross) return;
                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);
                }
                hidden.addEventListener('change', sync);
                sync();
                // Exposed for iter 4 (deck-click-deposit reads DRAW_ORDER).
                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 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 %}