{% 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). The dual-graph map is ringed by the SHARED #}
{# game wheel — the stripped sky-wheel rim whose planets are PLACED by the       #}
{# gamers in the "Set the Game Clock" ritual (Room.clock_placements), one        #}
{# canonical frame for all six. The wheel starts SIGNS-ONLY; the gamer whose     #}
{# POSITION CIRCLE's turn it is (circle 6 places Uranus first) clicks a sign     #}
{# wedge to place their planet. _paint() sizes the map into the wheel's freed    #}
{# hub. See project_voronoi_spec.                                                #}
<div class="seed-page seed-page--room" id="id_seed_map_overlay"
     data-clock-place-url="{% url 'epic:place_clock_planet' room.id %}"
     data-clock-placeable="{{ clock_placeable|default:'' }}">
  <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>
  {% if clock_placeable %}
  {# Placement prompt — only for the gamer whose position circle's turn it is.  #}
  <div id="id_clock_prompt" class="clock-prompt">Place {{ clock_placeable }}<br><small>in a sign</small></div>
  {% endif %}
</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 shared wheel's planets — PLACED by the gamers, {planet: sign}. The rim
  // renders these (sign granularity); empty => signs-only (planets eliminated).
  var _placements = {{ clock_placements_json|default:"{}"|safe }};
  // The planet THIS gamer may place now (their position circle's turn), or ''.
  var _placeable  = overlay.dataset.clockPlaceable || '';

  var SIGN_ORDER = ['Aries', 'Taurus', 'Gemini', 'Cancer', 'Leo', 'Virgo',
                    'Libra', 'Scorpio', 'Sagittarius', 'Capricorn', 'Aquarius', 'Pisces'];
  // Sign-granularity placement → the sign's MIDPOINT degree (no degree precision
  // yet); drawRim renders the glyph there.
  function _midDeg(sign) { var i = SIGN_ORDER.indexOf(sign); return i < 0 ? 0 : i * 30 + 15; }
  function _rimData() {
    var planets = {};
    Object.keys(_placements).forEach(function (p) {
      planets[p] = { sign: _placements[p], degree: _midDeg(_placements[p]), retrograde: false };
    });
    return { planets: planets, aspects: [] };
  }

  function _csrf() {
    var m = document.cookie.match(/(?:^|; )csrftoken=([^;]+)/);
    return m ? decodeURIComponent(m[1]) : '';
  }

  // Place the active planet in the picked sign: POST, then adopt the server's
  // authoritative placements + drop this gamer's affordance (their turn is
  // done — turn handoff 5→1 is a later increment) + repaint.
  function _onPickSign(sign) {
    if (!_placeable || !overlay.dataset.clockPlaceUrl) return;
    var planet = _placeable;
    window.fetch(overlay.dataset.clockPlaceUrl, {
      method: 'POST',
      credentials: 'same-origin',
      headers: { 'Content-Type': 'application/x-www-form-urlencoded', 'X-CSRFToken': _csrf() },
      body: 'planet=' + encodeURIComponent(planet) + '&sign=' + encodeURIComponent(sign),
    }).then(function (r) { return r.ok ? r.json() : null; })
      .then(function (j) {
        if (!j) return;
        _placements = j.placements || _placements;
        _placeable = '';
        var prompt = document.getElementById('id_clock_prompt');
        if (prompt) prompt.parentNode.removeChild(prompt);
        _paint();
      }).catch(function () {});
  }

  // 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
  // the placed planets (+ placement targets if it's this gamer's turn) 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 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 = null;
    if (typeof SkyWheel !== 'undefined' && SkyWheel.drawRim) {
      var opts = _placeable ? { placeable: _placeable, onPickSign: _onPickSign } : undefined;
      geo = SkyWheel.drawRim(wheelSvg, _rimData(), opts);
    }
    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 nothing repaints to heal 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 () {});
  }

  // 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();
    _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); there is no burger seed sub-btn.
  var seedBtn = document.getElementById('id_seed_map_btn');
  if (seedBtn) seedBtn.addEventListener('click', openSeed);
}());
</script>