{% 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>
                    {% for n in "123456" %}
                        {% if n == '1' and seat1_present %}
                            <div class="table-seat seated" data-slot="1"
                                 data-seat-token="owner-{{ owner.id }}-{{ owner_draw_id }}">
                                <i class="fa-solid fa-chair"></i>
                                <span class="seat-position-label">1C</span>
                                <i class="position-status-icon fa-solid fa-circle-check"></i>
                            </div>
                        {% elif n == '2' and seat2_present %}
                            <div class="table-seat seated" data-slot="2"
                                 data-seat-token="visit-{{ sea_invite.id }}">
                                <i class="fa-solid fa-chair"></i>
                                <span class="seat-position-label">2C</span>
                                <i class="position-status-icon fa-solid fa-circle-check"></i>
                            </div>
                        {% else %}
                            <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>
                        {% 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>
    {% endif %}
    <script>
    (function () {
        // VIEW DRAW toggles the read-only draw against the table hex.
        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';
            });
        }
        // 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 %}