{% load static %}
{# SEED MAP felt — d3-delaunay dual graph (Voronoi cells = territory + Delaunay #}
{# edges = adjacency) on a my_sea-style --duoUser felt filling .room-hex-pane.  #}
{# Inline sibling of CAST SKY (_sky_overlay) / DRAW SEA (_sea_overlay). Opens on #}
{# #id_seed_map_btn (html.seed-open). STEP 1 = placeholder seeds; Step 2's first #}
{# piece is live: the SHARED wheel rim — the ROOM's own sky (planets only; no   #}
{# location => no houses/axes), one canonical frame for all six gamers — rings  #}
{# the tessellation, which _paint() sizes into the wheel's freed hub.           #}
{# Card-driven seeding (the 6 Celtic-Cross cards) is the next piece.            #}
{# See project_voronoi_spec.                                                    #}
<div class="seed-page seed-page--room" id="id_seed_map_overlay"
     data-table-sky-url="{% url 'epic:table_sky' room.id %}">
  <div class="seed-map-body">
    <div class="seed-map-col">
      <svg id="id_seed_map_svg" class="voronoi-map"></svg>
      <svg id="id_seed_wheel_svg" class="seed-wheel"></svg>
    </div>
  </div>
</div>
<script src="{% static 'apps/gameboard/d3.min.js' %}"></script>
<script src="{% static 'apps/gameboard/voronoi-map.js' %}"></script>
{# NO sky-wheel include here — _sky_overlay.html (always rendered in SKY_SELECT, #}
{# a strictly looser gate than this felt's) already loads it, and a second       #}
{# top-level `const SkyWheel` declaration throws.                                #}
<script>
(function () {
  'use strict';
  var html     = document.documentElement;
  var overlay  = document.getElementById('id_seed_map_overlay');
  var svgEl    = document.getElementById('id_seed_map_svg');
  var wheelSvg = document.getElementById('id_seed_wheel_svg');
  if (!overlay || !svgEl) return;

  // The table's OWN sky (the shared rim frame) — embedded when already
  // computed, else lazily fetched on first open (the endpoint computes via
  // PySwiss at the convened moment + caches on the Room).
  var _tableSky   = {{ room_sky_json|default:"null"|safe }};
  var _skyFetched = false;

  // Phase-btn shed: drop #id_text_btn .active while the felt is up (sea-style);
  // restore on close. The completed CAST SKY / DRAW SEA reopen btns stay lit.
  var _disabled = [];
  function _disablePhaseBtns() {
    _disabled = [];
    ['id_text_btn'].forEach(function (id) {
      var b = document.getElementById(id);
      if (b && b.classList.contains('active')) { b.classList.remove('active'); _disabled.push(b); }
    });
  }
  function _restorePhaseBtns() {
    _disabled.forEach(function (b) { b.classList.add('active'); });
    _disabled = [];
  }

  // Paint/repaint the rim + dual graph at the felt's CURRENT box. The rim
  // draws first and hands back its hub geometry; the map svg is then sized
  // into the freed hub (2×hubR square, circle-clipped) so the wheel RINGS the
  // tessellation — both svgs centre on the same point, so they stay
  // concentric. No rim (SkyWheel absent) -> the map keeps its full-pane CSS
  // size, the Step-1 behaviour (also the Jasmine fixture path).
  function _paint() {
    if (!window.SeedMap) return;
    // NB: sky-wheel.js declares `const SkyWheel` at top-level script scope —
    // a global LEXICAL binding, not a window property — so probe it with
    // typeof, never window.SkyWheel (always undefined).
    var geo = (typeof SkyWheel !== 'undefined' && SkyWheel.drawRim)
      ? SkyWheel.drawRim(wheelSvg, _tableSky)
      : null;
    if (geo) {
      var side = Math.round(geo.hubR * 2);
      svgEl.style.width  = side + 'px';
      svgEl.style.height = side + 'px';
      svgEl.classList.add('voronoi-map--rimmed');
      _ensureGlyphs();
    } else {
      svgEl.style.width = svgEl.style.height = '';
      svgEl.classList.remove('voronoi-map--rimmed');
    }
    SeedMap.drawPlaceholder(svgEl);
  }

  // drawRim reads SkyWheel's _signPaths cache, which SkyWheel.preload()
  // populates via 12 async SVG fetches fired at page parse by _sky_overlay.html.
  // Every other draw site (sky.html, the SkyDrive applet, _sky_overlay) awaits
  // that preload; the rim must too, else a cold-cache fast felt-open paints the
  // sign slices WITHOUT their zodiac glyphs — and in the steady state (the room
  // sky embedded server-side, so _fetchTableSky no-ops), no repaint ever heals
  // it. preload() re-fetches are browser-cached + idempotent on the cache, so
  // kicking it once + repainting on resolve is the cheap established fix.
  var _preloadKicked = false;
  function _ensureGlyphs() {
    if (_preloadKicked || typeof SkyWheel === 'undefined' || !SkyWheel.preload) return;
    _preloadKicked = true;
    SkyWheel.preload().then(function () {
      if (html.classList.contains('seed-open')) _paint();
    }).catch(function () {});
  }

  function _fetchTableSky() {
    if (_tableSky || _skyFetched || !overlay.dataset.tableSkyUrl) return;
    _skyFetched = true;   // one attempt per page — the signs-only frame stands on failure
    window.fetch(overlay.dataset.tableSkyUrl)
      .then(function (r) { return r.ok ? r.json() : null; })
      .then(function (j) { if (j) { _tableSky = j; _paint(); } })
      .catch(function () {});
  }

  // Re-tessellate to fill the felt when its box changes (window resize /
  // rotate). Observe the COL, not the map svg — _paint() sizes that svg
  // itself, and self-observation would re-fire on every paint.
  var _ro = null, _raf = 0;
  function _observeResize() {
    if (_ro || typeof ResizeObserver === 'undefined') return;
    _ro = new ResizeObserver(function () {
      if (!html.classList.contains('seed-open')) return;   // ignore while hidden
      if (_raf) cancelAnimationFrame(_raf);
      _raf = requestAnimationFrame(_paint);                // one repaint per frame
    });
    _ro.observe(overlay.querySelector('.seed-map-col'));
  }

  // Open/close — trap T3: full-close BOTH sibling felts FIRST (three equal-z
  // felts now; no open path drops another's open-class on its own).
  function openSeed() {
    if (html.classList.contains('sky-open') && window.closeSkyFelt) window.closeSkyFelt();
    if (html.classList.contains('sea-open') && window.closeSeaFelt) window.closeSeaFelt();
    html.classList.add('seed-open');
    _disablePhaseBtns();
    // Paint at the felt's current box (visibility:hidden retains layout, so the
    // box is already the full pane), then keep it responsive to resize.
    _paint();
    _fetchTableSky();
    _observeResize();
    if (window.RoomViews && window.RoomViews.syncGear) window.RoomViews.syncGear();
  }
  function closeSeed() {
    html.classList.remove('seed-open');
    _restorePhaseBtns();
    if (window.RoomViews && window.RoomViews.syncGear) window.RoomViews.syncGear();
  }
  window.openSeedMapFelt = openSeed;     // burger reopen + cross-felt swap
  window.closeSeedMapFelt = closeSeed;   // so openSky/openSea can swap cleanly (T3)

  // PHASE btn #id_seed_map_btn lives in _room_hex_center.html (parsed BEFORE this
  // overlay via _table_hex.html) -> bind directly, no defer. Trap T4 only bites
  // _burger.html elements (included after); STEP 1 has no burger seed sub-btn.
  var seedBtn = document.getElementById('id_seed_map_btn');
  if (seedBtn) seedBtn.addEventListener('click', openSeed);
}());
</script>