{% load static %}
{# PICK SEA overlay — Celtic Cross spread entry                              #}
{# Included in room.html when table_status == "SKY_SELECT" and sky_confirmed #}
{# Layout is the reverse of PICK SKY: cards left (transparent), form right  #}

<div class="sea-backdrop"></div>
<div class="sea-overlay" id="id_sea_overlay"
     data-sea-deck-url="{% url 'epic:sea_deck' room.id %}">

    <div class="sea-modal-wrap">
    <div class="sea-modal">

        <header class="sea-modal-header">
            <h2>PICK <span>SEA</span></h2>
            <p>Draw cards to circumscribe your character's influences and seed the Voronoi map.</p>
        </header>

        <div class="sea-modal-body">

            {# ── Cards column (transparent) ───────────────────────────── #}
            <div class="sea-cards-col">
                <div class="sea-cross">
                    {# Crown — CC pos 3 / EV pos 5 #}
                    <div class="sea-cross-cell sea-pos-crown">
                        <div class="sea-card-slot sea-card-slot--empty"></div>
                    </div>
                    {# Beneath (past) — CC pos 4 / EV pos 3 #}
                    <div class="sea-cross-cell sea-pos-past">
                        <div class="sea-card-slot sea-card-slot--empty"></div>
                    </div>
                    {# Center — Significator (always placed) + Cover + Cross overlaid #}
                    <div class="sea-cross-cell sea-pos-center">
                        <div class="sig-stage-card sea-sig-card" style="--sig-card-w: 4rem">
                            {% if my_tray_sig %}
                                <span class="fan-corner-rank">{{ my_tray_sig.corner_rank }}</span>
                                {% if my_tray_sig.suit_icon %}<i class="fa-solid {{ my_tray_sig.suit_icon }}"></i>{% endif %}
                            {% endif %}
                        </div>
                        {# Cover — CC/EV pos 1, stacked face-up on Sig #}
                        <div class="sea-pos-cover">
                            <div class="sea-card-slot sea-card-slot--empty"></div>
                        </div>
                        {# Cross — CC/EV pos 2, rotated 90° on Cover #}
                        <div class="sea-pos-cross">
                            <div class="sea-card-slot sea-card-slot--empty sea-card-slot--crossing"></div>
                        </div>
                    </div>
                    {# Before (future) — CC pos 5 / EV pos 6 #}
                    <div class="sea-cross-cell sea-pos-future">
                        <div class="sea-card-slot sea-card-slot--empty"></div>
                    </div>
                    {# Behind (root) — CC pos 6 / EV pos 4 #}
                    <div class="sea-cross-cell sea-pos-root">
                        <div class="sea-card-slot sea-card-slot--empty"></div>
                    </div>
                </div>
            </div>

            {# ── Form column (priUser / opaque) ───────────────────────── #}
            <div class="sea-form-col">

                <div class="sea-form-main">
                    <div class="sea-field">
                        <label for="id_sea_spread">Spread</label>
                        <select id="id_sea_spread" name="spread" class="sea-select">
                            {% if user_polarity == "levity" %}
                                <option value="waite-smith" selected>Celtic Cross, Waite-Smith</option>
                                <option value="escape-velocity">Celtic Cross, Escape Velocity</option>
                            {% else %}
                                <option value="escape-velocity" selected>Celtic Cross, Escape Velocity</option>
                                <option value="waite-smith">Celtic Cross, Waite-Smith</option>
                            {% endif %}
                        </select>
                    </div>

                    {# Two face-down deck piles — tap to proffer OK #}
                    <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-confirm sea-stack-ok" type="button">OK</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-confirm sea-stack-ok" type="button">OK</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>{# /.sea-modal-body #}

    </div>{# /.sea-modal #}

    <button type="button" id="id_sea_cancel" class="btn btn-cancel btn-sm">NVM</button>

    </div>{# /.sea-modal-wrap #}
</div>{# /.sea-overlay #}

<script>
(function () {
  'use strict';

  const overlay   = document.getElementById('id_sea_overlay');
  const cancelBtn = document.getElementById('id_sea_cancel');

  function openSea() {
    document.documentElement.classList.add('sea-open');
  }

  function closeSea() {
    document.documentElement.classList.remove('sea-open');
  }

  const pickSeaBtn = document.getElementById('id_pick_sea_btn');
  if (pickSeaBtn) pickSeaBtn.addEventListener('click', openSea);
  cancelBtn.addEventListener('click', closeSea);
  overlay.addEventListener('click', (e) => { if (e.target === overlay) closeSea(); });

  // ── Deck draw ──────────────────────────────────────────────────────────────

  const SEA_DECK_URL = overlay.dataset.seaDeckUrl;

  const SPREAD_ORDER = {
    'waite-smith':     ['.sea-pos-cover', '.sea-pos-cross', '.sea-pos-crown', '.sea-pos-root', '.sea-pos-future', '.sea-pos-past'],
    'escape-velocity': ['.sea-pos-cover', '.sea-pos-cross', '.sea-pos-root', '.sea-pos-past', '.sea-pos-crown', '.sea-pos-future'],
  };

  let levityPile = [], gravityPile = [];
  let _filled    = 0;
  let _activeStack = null;

  const spreadSel = overlay.querySelector('#id_sea_spread');
  const lockBtn   = overlay.querySelector('#id_sea_lock_hand');
  const delBtn    = overlay.querySelector('#id_sea_del');

  function _spreadKey() {
    return spreadSel ? spreadSel.value : 'waite-smith';
  }

  function _nextPosSelector() {
    const order = SPREAD_ORDER[_spreadKey()] || SPREAD_ORDER['waite-smith'];
    return order[_filled] || null;
  }

  function _hideOk() {
    if (_activeStack) {
      const 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');
    const ok = stack.querySelector('.sea-stack-ok');
    if (ok) ok.style.display = '';
  }

  function _fillPos(sel, card, isLevity) {
    const cell = overlay.querySelector(sel);
    if (!cell) return;
    const 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');
    slot.dataset.cardId = String(card.id);
    slot.innerHTML =
      `<span class="fan-corner-rank">${card.corner_rank}</span>` +
      (card.suit_icon ? `<i class="fa-solid ${card.suit_icon}"></i>` : '');
    _filled++;
    if (lockBtn) lockBtn.disabled = (_filled < 6);
  }

  function _reset() {
    _filled = 0;
    _hideOk();
    overlay.querySelectorAll('.sea-card-slot').forEach(s => {
      s.classList.remove('sea-card-slot--filled', 'sea-card-slot--levity', 'sea-card-slot--gravity');
      s.classList.add('sea-card-slot--empty');
      s.innerHTML = '';
      delete s.dataset.cardId;
    });
    if (lockBtn) lockBtn.disabled = true;
    _fetchDeck();
  }

  function _fetchDeck() {
    fetch(SEA_DECK_URL, { credentials: 'same-origin' })
      .then(r => r.json())
      .then(data => { levityPile = data.levity || []; gravityPile = data.gravity || []; })
      .catch(() => {});
  }

  overlay.querySelectorAll('.sea-deck-stack').forEach(stack => {
    stack.addEventListener('click', e => {
      e.stopPropagation();
      _activeStack === stack ? _hideOk() : _showOk(stack);
    });
    const ok = stack.querySelector('.sea-stack-ok');
    if (ok) {
      ok.style.display = 'none';
      ok.addEventListener('click', e => {
        e.stopPropagation();
        const isLevity = stack.classList.contains('sea-deck-stack--levity');
        const pile = isLevity ? levityPile : gravityPile;
        const card = pile.length ? pile.shift() : null;
        const pos  = _nextPosSelector();
        if (card && pos) _fillPos(pos, card, isLevity);
        _hideOk();
      });
    }
  });

  overlay.addEventListener('click', _hideOk);
  if (delBtn) delBtn.addEventListener('click', _reset);

  _fetchDeck();
})();
</script>