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

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

{% block content %}
{# Phase B spectator surface — an ACCEPTED invitee watches {{ owner|at_handle }}'s #}
{# Sea read-only. The owner's my_sea.html is left untouched; this is a       #}
{# dedicated, simpler template: the table hex (seat 1C = owner, 2C = this     #}
{# visitor) + the owner's draw rendered read-only (no FLIP / DEL / AUTO       #}
{# DRAW). GATE VIEW opens the visitor gate; once a token is deposited the     #}
{# center btn becomes VIEW DRAW (toggles the read-only draw into view).       #}
<div class="my-sea-page my-sea-visit-page"
     data-phase="landing"
     data-spectator="true"
     data-polarity="{% if significator_reversed %}levity{% else %}gravity{% endif %}">

    <div class="my-sea-landing my-sea-visit-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">
                                {% if seat2_present %}
                                    {# Visitor is present — VIEW DRAW reveals the owner's #}
                                    {# read-only draw (client-side toggle below).         #}
                                    <button id="id_my_sea_view_draw_btn" type="button"
                                            class="btn btn-primary">VIEW<br>DRAW</button>
                                {% else %}
                                    {# Not yet present — GATE VIEW → visitor token gate.  #}
                                    <button id="id_my_sea_gate_view_btn" type="button"
                                            class="btn btn-primary"
                                            data-gate-url="{% url 'my_sea_visit_gate' owner.id %}">GATE<br>VIEW</button>
                                {% endif %}
                            </div>
                        </div>
                    </div>
                    {# Every present member shows on the ring — owner 1C +    #}
                    {# present invitees 2C–6C by deposit order (the viewer's  #}
                    {# own seat carries `--self`). Built server-side as       #}
                    {# `seats` so all viewers see identical absolute seating. #}
                    {% for seat in seats %}
                        {% if seat.present %}
                            <div class="table-seat seated{% if seat.is_self %} table-seat--self{% endif %}" data-slot="{{ seat.n }}" data-seat-token="{{ seat.token }}">
                                <i class="fa-solid fa-chair"></i>
                                <span class="seat-position-label">{{ seat.label }}</span>
                                <i class="position-status-icon fa-solid fa-circle-check"></i>
                            </div>
                        {% else %}
                            <div class="table-seat" data-slot="{{ seat.n }}">
                                <i class="fa-solid fa-chair"></i>
                                <span class="seat-position-label">{{ seat.label }}</span>
                                <i class="position-status-icon fa-solid fa-ban"></i>
                            </div>
                        {% endif %}
                    {% endfor %}
                </div>
            </div>
        </div>
    </div>

    {% if seat2_present %}
    {# Owner's draw, read-only. Hidden until VIEW DRAW toggles it in. Renders #}
    {# the SAME interactive cross stage the owner sees (click→stage, hover,    #}
    {# SPIN, FYI) off the owner's draw payload — see _my_sea_visit_cross.html. #}
    <div id="id_my_sea_visit_draw" class="my-sea-visit-draw" style="display:none">
        {{ sea_deck_data|json_script:"id_my_sea_deck" }}
        {% include "apps/gameboard/_partials/_my_sea_visit_cross.html" %}
    </div>
    {% endif %}

    {# Gear menu — NVM (back to /gameboard/) + BYE (drop presence, free 2C). #}
    {% url 'my_sea_visit_leave' owner.id as leave_url %}
    {% include "apps/gameboard/_partials/_my_sea_gear.html" with leave_url=leave_url %}
    {# Burger fan — carries the voice sub-btn (active while voice_active). #}
    {% include "apps/gameboard/_partials/_burger.html" %}
</div>
{% endblock content %}

{% block scripts %}
    <script src="{% static 'apps/gameboard/my-sea-seats.js' %}"></script>
    <script src="{% static 'apps/epic/burger-btn.js' %}"></script>
    {# Voice-affordance glow/pulse machine — keys on the voice sub-btn's      #}
    {# availability + the live mesh state (VoiceRoom.setOnStateChange).        #}
    <script src="{% static 'apps/voice/voice-glow.js' %}"></script>
    {% if seat2_present %}
    {# Read-only cross stage — StageCard + SeaDeal bind to #id_sea_overlay   #}
    {# (inside #id_my_sea_visit_draw) for click→stage + SPIN + FYI + hover.  #}
    {# A trimmed seed IIFE (no picker/FLIP/DEL machinery) reconstructs       #}
    {# SeaDeal's `_seaHand` from the server-rendered filled slots so each    #}
    {# card is clickable into the magnified stage — same logic as my_sea's   #}
    {# saved-hand restore, just without the draw affordances.                #}
    <script src="{% static 'apps/epic/stage-card.js' %}"></script>
    <script src="{% static 'apps/epic/sea.js' %}"></script>
    <script>
    (function () {
        function _seed() {
            if (!window.SeaDeal || !window.SeaDeal.seedHand) return;
            var cross = document.querySelector('.my-sea-cross');
            if (!cross) return;
            var deckEl = document.getElementById('id_my_sea_deck');
            var deck = {};
            try { deck = JSON.parse((deckEl && deckEl.textContent) || '{}'); } catch (e) {}
            var byId = {};
            (deck.levity || []).concat(deck.gravity || []).forEach(function (c) {
                byId[c.id] = c;
            });
            var seed = {};
            cross.querySelectorAll('.sea-card-slot.sea-card-slot--filled').forEach(function (slot) {
                var posName = slot.dataset.posKey;
                var card = byId[parseInt(slot.dataset.cardId, 10)];
                if (!posName || !card) return;
                var slotCard = {};
                for (var k in card) {
                    if (Object.prototype.hasOwnProperty.call(card, k)) slotCard[k] = card[k];
                }
                // Per-instance reversed/polarity come from the slot's DOM
                // class (the owner's saved hand, not the deck-shuffle axis).
                slotCard.reversed = slot.classList.contains('sea-card-slot--reversed');
                var isLevity = slot.classList.contains('sea-card-slot--levity');
                seed[posName] = { card: slotCard, isLevity: isLevity };
            });
            window.SeaDeal.seedHand(seed);
        }
        if (document.readyState === 'loading') {
            document.addEventListener('DOMContentLoaded', _seed);
        } else {
            _seed();
        }
    }());
    </script>
    {# Async witness — a WS to `mysea_<owner>` pushes the owner's hand as each #}
    {# card lands; SeaDeal.register fills the cross slot (+ seeds it clickable) #}
    {# live, no refresh. A DEL (empty hand) re-empties the cleared slots.       #}
    <script>
    (function () {
        if (!('WebSocket' in window)) return;
        var deckEl = document.getElementById('id_my_sea_deck');
        var deck = {};
        try { deck = JSON.parse((deckEl && deckEl.textContent) || '{}'); } catch (e) {}
        var byId = {};
        (deck.levity || []).concat(deck.gravity || []).forEach(function (c) { byId[c.id] = c; });

        function _applyHand(hand) {
            if (!window.SeaDeal || !window.SeaDeal.register) return;
            var cross = document.querySelector('.my-sea-cross');
            if (!cross) return;
            var inHand = {};
            (hand || []).forEach(function (e) {
                if (!e || !e.position) return;
                inHand[e.position] = true;
                var card = byId[e.card_id];
                if (!card) return;
                var c = {};
                for (var k in card) { if (Object.prototype.hasOwnProperty.call(card, k)) c[k] = card[k]; }
                c.reversed = !!e.reversed;
                window.SeaDeal.register(c, '.sea-pos-' + e.position, e.polarity === 'levity');
            });
            // Re-empty any slot the owner cleared (DEL → empty-hand broadcast).
            cross.querySelectorAll('.sea-card-slot.sea-card-slot--filled').forEach(function (slot) {
                var pos = slot.dataset.posKey;
                if (pos && !inHand[pos]) {
                    var crossing = slot.classList.contains('sea-card-slot--crossing');
                    slot.className = 'sea-card-slot sea-card-slot--empty' + (crossing ? ' sea-card-slot--crossing' : '');
                    slot.innerHTML = '';
                    slot.removeAttribute('data-card-id');
                    slot.removeAttribute('data-pos-key');
                }
            });
        }
        window._mySeaApplyHand = _applyHand;   // test seam

        var tries = 0;
        function _connect() {
            var scheme = window.location.protocol === 'https:' ? 'wss' : 'ws';
            var ws;
            try {
                ws = new WebSocket(scheme + '://' + window.location.host + '/ws/my-sea-spectate/{{ owner.id }}/');
            } catch (e) { return; }
            ws.onmessage = function (ev) {
                var msg;
                try { msg = JSON.parse(ev.data); } catch (e) { return; }
                if (msg && msg.type === 'sea_draw') _applyHand(msg.hand);
            };
            // Brief capped reconnect for transient blips (no infinite loop if
            // the spectate server/Redis is down).
            ws.onclose = function () { if (tries++ < 5) setTimeout(_connect, 3000); };
        }
        if (document.readyState === 'loading') {
            document.addEventListener('DOMContentLoaded', _connect);
        } else {
            _connect();
        }
    }());
    </script>
    {% endif %}
    <script>
    (function () {
        // VIEW DRAW toggles the read-only draw against the table hex. The
        // page's data-phase flips landing↔picker so the cross reuses the
        // owner's `.my-sea-page[data-phase="picker"]` --duoUser felt bg (DRY —
        // same rule the owner picker rides). The hex view stays "landing".
        var page = document.querySelector('.my-sea-page');
        var viewBtn = document.getElementById('id_my_sea_view_draw_btn');
        var draw = document.getElementById('id_my_sea_visit_draw');
        var landing = document.querySelector('.my-sea-visit-landing');
        if (viewBtn && draw) {
            viewBtn.addEventListener('click', function () {
                var showing = draw.style.display !== 'none';
                draw.style.display = showing ? 'none' : '';
                if (landing) landing.style.display = showing ? '' : 'none';
                if (page) page.setAttribute('data-phase', showing ? 'landing' : 'picker');
            });
        }
        // GATE VIEW → visitor gate.
        var gateBtn = document.getElementById('id_my_sea_gate_view_btn');
        if (gateBtn) {
            gateBtn.addEventListener('click', function () {
                window.location.href = gateBtn.dataset.gateUrl || '#';
            });
        }
    }());
    </script>
{% endblock scripts %}