{% load static %}
{# CAST SKY felt — natal chart entry + D3 wheel, unified with the my_sky /     #}
{# sky.html apparatus (2026-06-07). Renders INSIDE .room-hex-pane on edge-to-  #}
{# edge --duoUser felt (no dark Gaussian backdrop / modal), my_sea-style. The  #}
{# .sky-page wrapper REUSES sky.html's dashboard form/wheel rules; the         #}
{# .sky-page--room modifier scopes the in-room fill + open/close visibility.   #}
{# Opens when the user clicks #id_pick_sky_btn (html.sky-open). Pre-save the    #}
{# form shows alone; on SAVE the felt flips into scroll-snap (form shunts down, #}
{# wheel takes page 1). NVM lives in the room gear menu (not on the felt).      #}

<div class="sky-page sky-page--room"
     id="id_sky_overlay"
     data-preview-url="{% url 'epic:sky_preview' room.id %}"
     data-save-url="{% url 'epic:sky_save' room.id %}{% if current_slot %}?seat={{ current_slot }}{% endif %}"
     data-delete-url="{% url 'epic:sky_delete' room.id %}{% if current_slot %}?seat={{ current_slot }}{% endif %}"
     data-sea-partial-url="{% url 'epic:sea_partial' room.id %}{% if current_slot %}?seat={{ current_slot }}{% endif %}"
     data-user-seat-role="{{ user_seat_role }}">

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

        {# ── Form column ──────────────────────────────────────── #}
        <div class="sky-form-col">

            {# form-main scrolls independently; confirm btn stays pinned below it #}
            <div class="sky-form-main">
                <form id="id_sky_form" autocomplete="off">

                    <div class="sky-field">
                        <label for="id_nf_date">Birth date</label>
                        <input id="id_nf_date" name="date" type="date" required>
                    </div>

                    <div class="sky-field">
                        <label for="id_nf_time">Birth time</label>
                        <input id="id_nf_time" name="time" type="time" value="12:00">
                        <small>Local time at birth place. Use 12:00 if unknown.</small>
                    </div>

                    <div class="sky-field sky-place-field">
                        <label for="id_nf_place">Birth place</label>
                        <div class="sky-place-wrap">
                            <input id="id_nf_place" name="place" type="text"
                                   placeholder="Start typing a city…"
                                   autocomplete="off">
                            <button type="button" id="id_nf_geolocate"
                                    class="btn btn-secondary btn-sm"
                                    title="Use device location">
                                <i class="fa-solid fa-location-crosshairs"></i>
                            </button>
                        </div>
                        <div id="id_nf_suggestions" class="sky-suggestions" hidden></div>
                    </div>

                    <div class="sky-field sky-coords">
                        <div>
                            <label>Latitude</label>
                            <input id="id_nf_lat" name="lat" type="text"
                                   placeholder="—" readonly tabindex="-1">
                        </div>
                        <div>
                            <label>Longitude</label>
                            <input id="id_nf_lon" name="lon" type="text"
                                   placeholder="—" readonly tabindex="-1">
                        </div>
                    </div>

                    <div class="sky-field">
                        <label for="id_nf_tz">Timezone</label>
                        <input id="id_nf_tz" name="tz" type="text"
                               placeholder="auto-detected from coordinates"
                               readonly tabindex="-1">
                    </div>

                </form>

                <div id="id_sky_status" class="sky-status"></div>
            </div>{# /.sky-form-main #}

            <button type="button" id="id_sky_confirm" class="btn btn-primary" disabled>
                Save Sky
            </button>

        </div>

        {# ── Wheel column ─────────────────────────────────────── #}
        {# DEL btn is JS-injected after the wheel paints (see the SAVE  #}
        {# success handler) — keeping it out of the template means a    #}
        {# pre-save form can never show a DEL action against a non-     #}
        {# existent wheel.                                              #}
        <div class="sky-wheel-col">
            <svg id="id_sky_svg" class="sky-svg"></svg>
        </div>

    </div>{# /.sky-modal-body #}

</div>{# /.sky-page--room #}

<script src="{% static 'apps/gameboard/d3.min.js' %}"></script>
<script src="{% static 'apps/gameboard/sky-wheel.js' %}"></script>
<script>
(function () {
  'use strict';

  const overlay      = document.getElementById('id_sky_overlay');
  const form         = document.getElementById('id_sky_form');
  const svgEl        = document.getElementById('id_sky_svg');
  const statusEl     = document.getElementById('id_sky_status');
  const confirmBtn   = document.getElementById('id_sky_confirm');
  // NVM now lives in the room gear menu (the felt refactor dropped the in-modal
  // cancel btn) — guarded everywhere so a null lookup never throws.
  const cancelBtn    = document.getElementById('id_sky_cancel');
  const geoBtn       = document.getElementById('id_nf_geolocate');
  const placeInput   = document.getElementById('id_nf_place');
  const latInput     = document.getElementById('id_nf_lat');
  const lonInput     = document.getElementById('id_nf_lon');
  const tzInput      = document.getElementById('id_nf_tz');
  const suggestions  = document.getElementById('id_nf_suggestions');

  const PREVIEW_URL  = overlay.dataset.previewUrl;
  const SAVE_URL     = overlay.dataset.saveUrl;
  const DELETE_URL   = overlay.dataset.deleteUrl;
  const NOMINATIM    = 'https://nominatim.openstreetmap.org/search';
  const USER_AGENT   = 'EarthmanRPG/1.0 (https://earthmanrpg.me)';

  let _lastChartData  = null;
  let _placeDebounce  = null;
  let _chartDebounce  = null;
  // Bumped on every clear so an in-flight schedulePreview() resolving after
  // DEL doesn't paint the wheel back & re-inject the DEL btn.
  let _fetchSeq       = 0;
  const PLACE_DELAY   = 400;   // ms — Nominatim polite rate
  const CHART_DELAY   = 300;   // ms — chart preview debounce

  // Preload zodiac SVG icons eagerly — they'll be cached before any draw() call.
  // To swap an icon, replace the .svg file in zodiac-signs/ and hard-refresh.
  const _preloadReady = SkyWheel.preload();

  // ── localStorage persistence ──────────────────────────────────────────────
  // Key scoped to room so multiple rooms don't clobber each other.

  const LS_KEY = 'sky-form:' + SAVE_URL;

  function _saveForm() {
    const data = {
      date:  document.getElementById('id_nf_date').value,
      time:  document.getElementById('id_nf_time').value,
      place: placeInput.value,
      lat:   latInput.value,
      lon:   lonInput.value,
      tz:    tzInput.value,
    };
    try { localStorage.setItem(LS_KEY, JSON.stringify(data)); } catch (_) {}
  }

  function _restoreForm() {
    let data;
    try { data = JSON.parse(localStorage.getItem(LS_KEY) || 'null'); } catch (_) {}
    if (!data) return;
    if (data.date)  document.getElementById('id_nf_date').value = data.date;
    if (data.time)  document.getElementById('id_nf_time').value = data.time;
    if (data.place) placeInput.value = data.place;
    if (data.lat)   latInput.value   = data.lat;
    if (data.lon)   lonInput.value   = data.lon;
    if (data.tz)    { tzInput.value  = data.tz; }
  }

  // ── Open / Close ──────────────────────────────────────────────────────────

  // While the felt is up the burger Text sub-btn must be inert: its swipe
  // machine (room-views.js) would otherwise drive DOWN into the reelhouse — but
  // the aperture is scroll-locked, so the page half-loads a carousel view it
  // can't actually reach (confusing UX). We toggle #id_text_btn OFF on open and
  // restore its server-set baseline on close.
  let _textBtnWasActive = false;
  function _disableTextBtn() {
    const tb = document.getElementById('id_text_btn');
    if (!tb) return;
    _textBtnWasActive = tb.classList.contains('active');
    tb.classList.remove('active');
  }
  function _restoreTextBtn() {
    const tb = document.getElementById('id_text_btn');
    if (tb && _textBtnWasActive) tb.classList.add('active');
  }

  function openSky() {
    // Clean SWAP, not a double-open: if the sea felt is up (its lit sky btn was
    // just clicked) close it first. Both felts are z-5 siblings that otherwise
    // stack; neither open path drops the other's open-class on its own. Mirrored
    // by openSea closing the sky felt (user-spec 2026-06-08).
    if (document.documentElement.classList.contains('sea-open') && window.closeSeaFelt) {
      window.closeSeaFelt();
    }
    document.documentElement.classList.add('sky-open');
    _disableTextBtn();
    // Re-sync the room gear to the sky NVM pane (room-views.js owns the gear
    // pane-swap; sky-open toggles outside any scroll/view event it watches).
    if (window.RoomViews && window.RoomViews.syncGear) window.RoomViews.syncGear();
    // If the wheel is empty but the form has enough data (restored from
    // localStorage), kick off a fresh preview so SAVE re-enables (no draw
    // until saved — my_sky parity).
    if (!svgEl.querySelector('*') && _formReady()) {
      schedulePreview();
    }
  }

  function closeSky() {
    document.documentElement.classList.remove('sky-open');
    _restoreTextBtn();
    hideSuggestions();
    if (window.RoomViews && window.RoomViews.syncGear) window.RoomViews.syncGear();
  }

  const pickSkyBtn = document.getElementById('id_pick_sky_btn');
  if (pickSkyBtn) pickSkyBtn.addEventListener('click', openSky);
  if (cancelBtn) cancelBtn.addEventListener('click', closeSky);

  // ── Status helper ─────────────────────────────────────────────────────────

  function setStatus(msg, type) {
    statusEl.textContent = msg;
    statusEl.className = 'sky-status' + (type ? ` sky-status--${type}` : '');
  }

  // ── Nominatim place search ────────────────────────────────────────────────

  placeInput.addEventListener('input', () => {
    clearTimeout(_placeDebounce);
    const q = placeInput.value.trim();
    if (q.length < 3) { hideSuggestions(); return; }
    _placeDebounce = setTimeout(() => fetchPlaces(q), PLACE_DELAY);
  });

  placeInput.addEventListener('keydown', (e) => {
    if (e.key === 'Escape') hideSuggestions();
  });

  document.addEventListener('click', (e) => {
    if (!placeInput.contains(e.target) && !suggestions.contains(e.target)) {
      hideSuggestions();
    }
  });

  function fetchPlaces(query) {
    fetch(`${NOMINATIM}?format=json&q=${encodeURIComponent(query)}&limit=6`, {
      headers: { 'User-Agent': USER_AGENT },
    })
      .then(r => r.json())
      .then(results => {
        if (!results.length) { hideSuggestions(); return; }
        renderSuggestions(results);
      })
      .catch(() => hideSuggestions());
  }

  function renderSuggestions(results) {
    suggestions.innerHTML = '';
    results.forEach(place => {
      const item = document.createElement('button');
      item.type = 'button';
      item.className = 'sky-suggestion-item';
      item.textContent = place.display_name;
      item.addEventListener('click', () => selectPlace(place));
      suggestions.appendChild(item);
    });
    suggestions.hidden = false;
  }

  function hideSuggestions() {
    suggestions.hidden = true;
    suggestions.innerHTML = '';
  }

  function selectPlace(place) {
    placeInput.value = place.display_name;
    latInput.value   = parseFloat(place.lat).toFixed(4);
    lonInput.value   = parseFloat(place.lon).toFixed(4);
    tzInput.value    = '';
    hideSuggestions();
    _saveForm();
    schedulePreview();
  }

  // ── Geolocation ───────────────────────────────────────────────────────────

  geoBtn.addEventListener('click', () => {
    if (!navigator.geolocation) {
      setStatus('Geolocation not supported by this browser.', 'error');
      return;
    }
    setStatus('Requesting device location…');
    navigator.geolocation.getCurrentPosition(
      (pos) => {
        latInput.value = pos.coords.latitude.toFixed(4);
        lonInput.value = pos.coords.longitude.toFixed(4);
        tzInput.value  = '';
        fetch(`https://nominatim.openstreetmap.org/reverse?format=json&lat=${latInput.value}&lon=${lonInput.value}`, {
          headers: { 'User-Agent': USER_AGENT },
        })
          .then(r => r.json())
          .then(data => { placeInput.value = _cityName(data.address) || data.display_name || ''; })
          .catch(() => {})
          .finally(() => _saveForm());
        setStatus('');
        schedulePreview();
      },
      () => setStatus('Location access denied.', 'error'),
    );
  });

  // Build a "City, State, Country" string from a Nominatim address object.
  // Prefers the most specific incorporated place name available.
  function _cityName(addr) {
    if (!addr) return '';
    const city    = addr.city || addr.town || addr.village || addr.hamlet || addr.municipality || '';
    const region  = addr.state || addr.county || addr.state_district || '';
    const country = addr.country || '';
    return [city, region, country].filter(Boolean).join(', ');
  }

  // ── Debounced chart preview ───────────────────────────────────────────────

  // Trigger on date / time / tz changes (coords come via selectPlace / geolocation)
  form.addEventListener('input', (e) => {
    if (e.target === placeInput) return;   // place triggers via selectPlace
    _saveForm();
    clearTimeout(_chartDebounce);
    _chartDebounce = setTimeout(schedulePreview, CHART_DELAY);
  });

  function _formReady() {
    return document.getElementById('id_nf_date').value &&
           latInput.value && lonInput.value;
  }

  function schedulePreview() {
    if (!_formReady()) return;
    const date = document.getElementById('id_nf_date').value;
    const time = document.getElementById('id_nf_time').value || '12:00';
    const lat  = latInput.value;
    const lon  = lonInput.value;
    const tz   = tzInput.value.trim();   // optional — proxy resolves if blank

    const params = new URLSearchParams({ date, time, lat, lon });
    if (tz) params.set('tz', tz);

    setStatus('Calculating…');
    confirmBtn.disabled = true;

    const seq = ++_fetchSeq;

    fetch(`${PREVIEW_URL}?${params}`, { credentials: 'same-origin' })
      .then(r => {
        if (!r.ok) throw new Error(`HTTP ${r.status}`);
        return r.json();
      })
      .then(data => {
        // Stale fetch — DEL ran (or another preview superseded). Bail before
        // we paint the wheel & re-inject the DEL btn against cleared state.
        if (seq !== _fetchSeq) return;

        _lastChartData = data;

        // Back-fill timezone field from proxy response (first render)
        if (!tzInput.value && data.timezone) {
          tzInput.value = data.timezone;
        }

        setStatus('');
        confirmBtn.disabled = false;
        // my_sky parity — pre-save the form shows ALONE on the felt; the wheel
        // only paints AFTER SAVE SKY (_activateSavedState). _lastChartData is
        // captured above so SAVE has the chart payload + can reveal the wheel.
        // Once saved, live edits re-draw in place (the wheel page stays live).
        if (_skySaved()) {
          if (svgEl.querySelector('*')) {
            SkyWheel.redraw(data);
          } else {
            SkyWheel.draw(svgEl, data);
          }
          _ensureDelBtn();
        }
      })
      .catch(err => {
        if (seq !== _fetchSeq) return;
        setStatus(`Could not fetch chart: ${err.message}`, 'error');
        confirmBtn.disabled = true;
      });
  }

  function _skySaved() {
    return document.body.classList.contains('sky-saved');
  }

  // ── Save ──────────────────────────────────────────────────────────────────

  confirmBtn.addEventListener('click', () => {
    if (!_lastChartData) return;
    confirmBtn.disabled = true;
    setStatus('Saving…');

    const payload = {
      birth_dt:     `${document.getElementById('id_nf_date').value}T${document.getElementById('id_nf_time').value || '12:00'}:00`,
      birth_lat:    parseFloat(latInput.value),
      birth_lon:    parseFloat(lonInput.value),
      birth_place:  placeInput.value,
      house_system: _lastChartData.house_system || 'O',
      chart_data:   _lastChartData,
      action:       'confirm',
    };

    fetch(SAVE_URL, {
      method:      'POST',
      credentials: 'same-origin',
      headers: { 'Content-Type': 'application/json', 'X-CSRFToken': _getCsrf() },
      body: JSON.stringify(payload),
    })
      .then(r => {
        if (!r.ok) throw new Error(`HTTP ${r.status}`);
        return r.json();
      })
      .then(data => {
        setStatus('Sky saved!');
        // my_sky parity — reveal the wheel on the felt instead of reloading.
        // The form shunts to page 2; the wheel slides in as page 1 and we ease
        // to it. The gamer lingers on their saved wheel; the gear NVM returns
        // to the hex (which the server re-renders with DRAW SEA — the save
        // already set confirmed_at, so `sky_confirmed` is true server-side).
        _activateSavedState();
      })
      .catch(err => {
        setStatus(`Save failed: ${err.message}`, 'error');
        confirmBtn.disabled = false;
      });
  });

  // ── Reveal the saved wheel on the felt (no reload) ────────────────────────
  // Adds body.sky-saved so _sky.scss flips the felt into scroll-snap (wheel
  // page 1 via .sky-wheel-col order:-1, form page 2), draws the wheel from the
  // captured chart, injects DEL, then pins to the form section + eases to the
  // wheel so the reveal animates in (mirrors sky.html's _activateSavedState).

  function _activateSavedState() {
    if (!_lastChartData) return;
    const wasSaved = document.body.classList.contains('sky-saved');
    document.body.classList.add('sky-saved');
    if (svgEl.querySelector('*')) {
      SkyWheel.redraw(_lastChartData);
    } else {
      SkyWheel.draw(svgEl, _lastChartData);
    }
    _ensureDelBtn();
    if (!wasSaved) {
      // First reveal: pin to the form section so the wheel slides in from above
      // (the form "shunts down"), then begin the post-save cascade. #id_sky_btn
      // activation + the burger glow ride the cascade (not the save instant) so
      // they land WITH the table-hex reveal — see _cascadeFeltOut.
      const formCol = overlay.querySelector('.sky-form-col');
      if (formCol) overlay.scrollTop = formCol.offsetTop;
      _scrollApertureToTop();
      _startSaveCascade();
    } else {
      // Re-assert (WS re-fire / reopen-from-saved): keep the reopen affordance
      // live; no cascade (the table-hex already advanced on the first save).
      const skyBtn = document.getElementById('id_sky_btn');
      if (skyBtn) skyBtn.classList.add('active');
      _scrollApertureToTop();
    }
  }

  // ── Post-save cascade ───────────────────────────────────────────────────────
  // After SAVE the gamer lingers on the freshly-drawn wheel ~3s; THEN the felt
  // eases OUT to reveal the table-hex, the burger glow fires (your sky now lives
  // in the burger fan), and 3s later the DRAW SEA btn eases IN — with the sea
  // overlay injected so it's live with no reload. Each beat is its own timer.
  const _CASCADE_LINGER = 3000, _FELT_FADE = 500, _SEA_DELAY = 3000;

  function _startSaveCascade() {
    setTimeout(_cascadeFeltOut, _CASCADE_LINGER);
  }

  function _cascadeFeltOut() {
    overlay.classList.add('sky-page--cascade-out');   // CSS fades the felt out
    setTimeout(() => {
      document.documentElement.classList.remove('sky-open');
      overlay.classList.remove('sky-page--cascade-out');
      _restoreTextBtn();
      if (window.RoomViews && window.RoomViews.syncGear) window.RoomViews.syncGear();
      // CAST SKY is stale → ease it out; light the burger reopen affordance +
      // fire the glow, all concurrent with the table-hex reveal.
      const skyPhaseBtn = document.getElementById('id_pick_sky_btn');
      if (skyPhaseBtn) skyPhaseBtn.classList.add('hex-phase-btn--out');
      const skyBtn = document.getElementById('id_sky_btn');
      if (skyBtn) skyBtn.classList.add('active');
      if (window.pulseSkyGlow) window.pulseSkyGlow();
      setTimeout(_cascadeDrawSeaIn, _SEA_DELAY);
    }, _FELT_FADE);
  }

  function _cascadeDrawSeaIn() {
    const seaPhaseBtn = document.getElementById('id_pick_sea_btn');
    if (seaPhaseBtn) seaPhaseBtn.classList.remove('hex-phase-btn--out');   // eases in
    _injectSeaOverlay();
  }

  // Fetch + inject the DRAW SEA overlay so it's live without a reload. The sea
  // partial carries its own inline <script> (openSea binding on #id_pick_sea_btn
  // + SeaDeal.reinit) — innerHTML won't execute it, so each <script> is re-
  // created. Idempotent + best-effort (a gear NVM / refresh recovers via the
  // server-rendered confirmed overlay).
  function _injectSeaOverlay() {
    const url = overlay.dataset.seaPartialUrl;
    const container = document.getElementById('id_sea_inject');
    if (!url || !container || container.dataset.injected) return;
    fetch(url, { credentials: 'same-origin' })
      .then((r) => { if (!r.ok) throw new Error(r.status); return r.text(); })
      .then((html) => {
        container.dataset.injected = '1';
        const tpl = document.createElement('template');
        tpl.innerHTML = html;
        Array.prototype.slice.call(tpl.content.childNodes).forEach((node) => {
          if (node.nodeName === 'SCRIPT') {
            const s = document.createElement('script');
            if (node.src) s.src = node.src;
            else s.textContent = node.textContent;
            container.appendChild(s);
          } else {
            container.appendChild(node);
          }
        });
      })
      .catch(() => { /* transient — server render recovers on next load */ });
  }

  // Ease the felt's scroll back to the wheel page (top) after a save —
  // ease-out cubic, ~280ms. No-op if already at the top.
  function _scrollApertureToTop() {
    if (overlay.scrollTop === 0) return;
    const start = overlay.scrollTop;
    const startTime = performance.now();
    const DURATION = 280;
    const ease = (t) => { const u = 1 - t; return 1 - u * u * u; };
    function step(now) {
      const t = Math.min(1, (now - startTime) / DURATION);
      overlay.scrollTop = Math.max(0, start * (1 - ease(t)));
      if (t < 1) requestAnimationFrame(step);
    }
    requestAnimationFrame(step);
  }

  // ── Sky confirmed (self-targeted WS) ──────────────────────────────────────
  // Two cases:
  //   • This browser captured the chart (the gamer saved via the felt) → the
  //     save .then() already ran the cascade; this WS re-fire is idempotent
  //     (re-asserts the saved state, no second cascade, no reload).
  //   • No captured chart (a direct POST confirm, or another browser of the same
  //     seat) → the cascade can't run, so reload to land on the server-rendered
  //     DRAW SEA hex (the pre-cascade behaviour, preserved for these paths).
  function _onSkyConfirmed() {
    if (_lastChartData) {
      _activateSavedState();
    } else {
      window.location.reload();
    }
  }

  // ── DEL btn — JS-injected after the wheel paints; absent on a blank modal
  // CAST SKY's wheel is a live preview; un-saved data lives only in LS_KEY.
  // The btn is created lazily after the first SkyWheel.draw so a blank modal
  // can never offer a DEL action against a non-existent wheel; clearing the
  // SVG removes the btn from the DOM entirely (re-injected on next preview).

  let _delBtn = null;
  function _ensureDelBtn() {
    if (_delBtn) return;
    const wheelCol = document.querySelector('.sky-wheel-col');
    if (!wheelCol) return;
    _delBtn = document.createElement('button');
    _delBtn.type = 'button';
    _delBtn.id = 'id_sky_delete_btn';
    _delBtn.className = 'btn btn-danger';
    _delBtn.textContent = 'DEL';
    wheelCol.appendChild(_delBtn);
    _delBtn.addEventListener('click', () => {
      if (!window.showGuard) return;
      window.showGuard(_delBtn, 'Forget sky?', () => {
        // 1. Invalidate any in-flight preview so its .then() can't paint the
        //    wheel back & re-inject this btn after we've cleared.
        _fetchSeq++;
        // 2. Cancel pending debounces so a typed-just-before-DEL keystroke
        //    can't fire schedulePreview after the clear.
        clearTimeout(_chartDebounce);
        clearTimeout(_placeDebounce);
        // 3. Server purge — drops any Character (draft or confirmed) on this
        //    seat, so a refresh after SAVE-then-DEL doesn't rehydrate state
        //    from the durable Character row.
        fetch(DELETE_URL, {
          method: 'POST',
          credentials: 'same-origin',
          headers: { 'X-CSRFToken': _getCsrf() },
        }).catch(() => {});
        // 4. Client DOM/state reset.
        while (svgEl.firstChild) svgEl.removeChild(svgEl.firstChild);
        form.reset();
        latInput.value = '';
        lonInput.value = '';
        tzInput.value  = '';
        _lastChartData = null;
        confirmBtn.disabled = true;
        setStatus('');
        // Drop the saved state so the felt returns to form-alone (wheel page
        // collapses, scroll-snap disengages) — the seat's Character was purged.
        document.body.classList.remove('sky-saved');
        try { localStorage.removeItem(LS_KEY); } catch (_) {}
        if (_delBtn) {
          _delBtn.remove();
          _delBtn = null;
        }
      });
    });
  }

  // ── CSRF ──────────────────────────────────────────────────────────────────

  function _getCsrf() {
    const m = document.cookie.match(/csrftoken=([^;]+)/);
    return m ? m[1] : '';
  }

  // ── Reopen affordance ──────────────────────────────────────────────────────
  // Exposed so the burger fan's #id_sky_btn (active once the sky is saved) can
  // reopen the saved wheel. burger-btn.js calls window.openSkyFelt().
  window.openSkyFelt = openSky;
  // Exposed so openSea can close the sky felt for a clean felt-swap when a user
  // clicks the lit sky btn from inside the sea felt (user-spec 2026-06-08).
  window.closeSkyFelt = closeSky;

  // ── Restore persisted form data + prime a saved (confirmed) wheel ───────────
  // Pre-save the wheel draw is deferred to openSky (form shows alone). Once the
  // sky is confirmed the server hands us the saved chart (saved_sky_json) so the
  // felt is primed in its saved state — body.sky-saved engages the scroll-snap
  // and the wheel is drawn ready, so the burger reopen lands straight on it
  // (mirrors My Sky's saved-on-load draw).

  const _savedSky = {{ saved_sky_json|default:"null"|safe }};

  // WS: server broadcasts sky_confirmed when any gamer confirms their sky.
  // Only act when the event's seat_role matches this browser's seat.
  const MY_SEAT_ROLE = overlay.dataset.userSeatRole;

  window.addEventListener('room:sky_confirmed', function (e) {
    if (MY_SEAT_ROLE && e.detail.seat_role && e.detail.seat_role !== MY_SEAT_ROLE) return;
    _onSkyConfirmed();
  });

  _restoreForm();

  if (_savedSky) {
    _lastChartData = _savedSky;
    document.body.classList.add('sky-saved');
    confirmBtn.disabled = false;
    _preloadReady.then(() => {
      if (!svgEl.querySelector('*')) SkyWheel.draw(svgEl, _savedSky);
      _ensureDelBtn();
    });
  }

  // Reload-into-open: the SIG_SELECT → SKY_SELECT transition (sig-select.js's
  // CAST SKY click) drops a sessionStorage flag then reloads here, so the felt
  // OPENS on arrival — one click yields the form instead of the old click→reload
  // →click-again. Read once + clear so a later manual refresh doesn't re-open.
  try {
    if (sessionStorage.getItem('sky-autoopen') === '1') {
      sessionStorage.removeItem('sky-autoopen');
      openSky();
    }
  } catch (_) { /* sessionStorage unavailable — non-fatal */ }

  // ── STUB: lock the form once character creation completes ───────────────────
  // Character creation ends after DRAW SEA → the Voronoi map (roadmap step 21),
  // which isn't built yet. When it lands the server will flag the finished state
  // and the re-opened sky becomes READ-ONLY (view your wheel, can't re-cast). For
  // now this is an inert hook — `_skyLocked` is always false until that phase
  // exists. TODO: drive `_skyLocked` from a server ctx flag + lock the gear DEL.
  const _skyLocked = false;
  if (_skyLocked) {
    form.querySelectorAll('input').forEach((el) => { el.disabled = true; });
    confirmBtn.disabled = true;
  }
})();
</script>