{% extends "base.html" %}
{% block title %}{{ area.name }} — Layout{% endblock %}

{% block head %}
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no, viewport-fit=cover">
<style>
  /* Lock the document so layout mode owns the viewport. Prevents pull-to-
     refresh and accidental scrolling on phones.
     IMPORTANT: don't hide <main> with display:none — that would also hide
     .layout-mode (it's a child of <main> per base.html), even though .layout-mode
     uses position:fixed. Hide just <header>, and reset <main>'s padding/margin
     so the fixed-positioned .layout-mode div sits cleanly on top. */
  html, body { overflow: hidden; overscroll-behavior: none; height: 100%; }
  body > header { display: none; }
  body > main { margin: 0; padding: 0; }
  body { margin: 0; padding: 0; background: var(--bg, #fff); }

  /* Hide the floating capture bubble in layout mode — competes for the
     bottom-left corner with the compass overlay. */
  #floating-capture-bubble, #floating-capture-modal { display: none !important; }
</style>
{% endblock %}

{% block content %}
<div class="layout-mode" data-layout-area-id="{{ area.id }}">

  <!-- Top bar — back, area name, selection display, rotate button -->
  <div class="layout-topbar">
    <a href="/areas/{{ area.id }}" class="layout-back" aria-label="Exit layout mode">←</a>
    <div class="layout-title">{{ area.name }}</div>
    <div class="layout-selection" data-selection-display>
      <span class="layout-selection-empty">Tap a plant or inventory tile to select.</span>
    </div>
    <button type="button" class="btn small" data-rotate-view title="Rotate view 90°">↻</button>
  </div>

  <!-- Canvas — the area sketch (rendered axis-aligned; the compass shows
       the actual N orientation) -->
  <div class="layout-canvas-wrap" data-canvas-wrap>
    <div class="layout-canvas-rotator" data-canvas-rotator>
      <svg class="layout-canvas-svg" data-canvas-svg
           viewBox="0 0 {{ g.vb_w }} {{ g.vb_h }}"
           preserveAspectRatio="xMidYMid meet"
           xmlns="http://www.w3.org/2000/svg"
           data-rect-x="{{ g.rect_x }}" data-rect-y="{{ g.rect_y }}"
           data-rect-w="{{ g.rect_w }}" data-rect-h="{{ g.rect_h }}"
           data-compass-rot="{{ compass_rot }}"
           data-area-l="{{ L }}" data-area-w="{{ W }}">
        <rect x="{{ g.rect_x }}" y="{{ g.rect_y }}"
              width="{{ g.rect_w }}" height="{{ g.rect_h }}"
              class="area-sketch-rect"></rect>

        {# Grid. Three densities so layout has a clear sense of scale + a snap
           target for the press-and-drag placement gesture:
             - 6" (0.5 ft) snap grid — dotted
             - 1' grid — solid
             - 5' major grid — solid, slightly more opaque
           Iterates in half-foot steps; even indices = integer feet.
           Loop bound `(L * 2)|int + 1` covers fractional area sizes (e.g.
           a 4.5 ft area still gets a line at y=4.0). Earlier `(L|int) * 2`
           silently dropped the final lines when L wasn't an integer. #}
        <g class="area-sketch-grid">
          {% for i in range(1, (L * 2)|int + 1) %}
            {%- set is_foot = (i % 2 == 0) -%}
            {%- set is_major = is_foot and ((i // 2) % 5 == 0) -%}
          <line x1="{{ g.rect_x + i * 0.5 }}" y1="{{ g.rect_y }}"
                x2="{{ g.rect_x + i * 0.5 }}" y2="{{ g.rect_y + g.rect_h }}"
                class="grid-line{% if is_major %} grid-line-major{% elif not is_foot %} grid-line-snap{% endif %}"></line>
          {% endfor %}
          {% for j in range(1, (W * 2)|int + 1) %}
            {%- set is_foot = (j % 2 == 0) -%}
            {%- set is_major = is_foot and ((j // 2) % 5 == 0) -%}
          <line x1="{{ g.rect_x }}" y1="{{ g.rect_y + j * 0.5 }}"
                x2="{{ g.rect_x + g.rect_w }}" y2="{{ g.rect_y + j * 0.5 }}"
                class="grid-line{% if is_major %} grid-line-major{% elif not is_foot %} grid-line-snap{% endif %}"></line>
          {% endfor %}
        </g>

        {# Empty-canvas tap target — placement happens here #}
        <rect x="{{ g.rect_x }}" y="{{ g.rect_y }}"
              width="{{ g.rect_w }}" height="{{ g.rect_h }}"
              class="canvas-tap-target" data-canvas-tap-target></rect>

        {# Placed plant icons (axis-aligned; no inner rotation) #}
        <g class="layout-plants" data-plants-layer>
          {% for icon in placed_icons %}
          <g class="plant-icon plant-icon-status-{{ icon.status }}"
             data-plant-id="{{ icon.plant_id }}"
             data-icon-index="{{ icon.icon_index }}"
             data-pos-x="{{ icon.x }}"
             data-pos-y="{{ icon.y }}"
             data-icon-side="{{ icon.side }}"
             data-species-name="{{ icon.species_name }}"
             data-variety-name="{{ icon.variety_name }}"
             data-plant-count="{{ icon.plant_count }}"
             data-plant-status="{{ icon.status }}"
             transform="translate({{ g.rect_x + icon.x }} {{ g.rect_y + icon.y }}) scale({{ icon.side }})">
            <circle r="0.45" class="plant-icon-bg"></circle>
            {% if icon.icon.type == 'emoji' %}
            <text class="plant-icon-emoji" text-anchor="middle" dominant-baseline="central"
                  y="0.05">{{ icon.icon.char }}</text>
            {% else %}
            <use href="#{{ icon.icon.id }}" x="-0.42" y="-0.42" width="0.84" height="0.84"></use>
            {% endif %}
            {% if icon.plant_count > 1 %}
            <g class="plant-icon-count" transform="translate(0.32 -0.32)">
              <circle r="0.18" class="plant-icon-count-bg"></circle>
              <text class="plant-icon-count-label" text-anchor="middle" dominant-baseline="central">{{ icon.plant_count }}</text>
            </g>
            {% endif %}
          </g>
          {% endfor %}
        </g>
      </svg>

      {# Compass mini overlay — rotates by -(viewRotation) - compassRot so N
         always points to true north regardless of view rotation. #}
      <div class="sketch-compass-mini sketch-compass-mini-large layout-compass" data-compass-mini aria-hidden="true">
        <svg viewBox="-30 -30 60 60">
          <line x1="0" y1="-22" x2="0" y2="22" stroke="#888" stroke-width="1"/>
          <line x1="-22" y1="0" x2="22" y2="0" stroke="#888" stroke-width="1"/>
          <polygon points="0,-22 -3.5,-13 3.5,-13" fill="#c44" stroke="#7a1f29" stroke-width="0.5"/>
          <text y="-23" text-anchor="middle" class="cm-n">N</text>
          <text y="29" text-anchor="middle">S</text>
          <text x="29" y="4" text-anchor="end">E</text>
          <text x="-29" y="4" text-anchor="start">W</text>
        </svg>
      </div>
    </div>
  </div>

  <!-- Inventory tray + tools -->
  <div class="layout-tray" data-tray-root data-active-pool="inventory">
    <div class="layout-tray-tabs" data-tray-tabs>
      <button type="button" class="tray-tab active" data-pool="inventory"
              title="Plants attached to this area — both ones currently on the canvas and ones waiting to be positioned. Includes planted plants you've sent back from the canvas and any unplanted/idea plants you've placed in this area.">
        Here <span class="tray-tab-count">{{ inventory_tiles|length }}</span>
      </button>
      <button type="button" class="tray-tab" data-pool="unplanted"
              title="Unplanted plants from anywhere — purchased or seeded but not yet committed to an area. Tap one and the canvas to place it here.">
        Unplanted <span class="tray-tab-count">{{ unplanted_pool_tiles|length }}</span>
      </button>
      <button type="button" class="tray-tab" data-pool="idea"
              title="Idea plants — speculative; don't need to physically exist yet. Tap one and the canvas to place it here.">
        Ideas <span class="tray-tab-count">{{ idea_pool_tiles|length }}</span>
      </button>
    </div>

    {# Pool: inventory (this area's attached plants) — placing pops from queue
       and updates positions only. Send-back pushes back onto the queue. #}
    <div class="layout-tray-tiles" data-pool="inventory" data-tray-tiles>
      {% for tile in inventory_tiles %}
      <div class="inv-tile-wrap inv-tile-status-{{ tile.status }}">
        <button type="button" class="inv-tile inv-tile-status-{{ tile.status }} {% if tile.count == 0 %}empty{% endif %}"
                data-plant-id="{{ tile.plant_id }}"
                data-species-name="{{ tile.species_name }}"
                data-variety-name="{{ tile.variety_name }}"
                data-ppu="{{ tile.ppu }}"
                data-qty-total="{{ tile.qty_total }}"
                data-side="{{ tile.side }}"
                data-count="{{ tile.count }}"
                data-plant-status="{{ tile.status }}"
                data-pool="inventory"
                data-inv-plants-each="{{ tile.inv_plants_each|tojson }}"
                style="--tile-color: {{ tile.color }}">
          <span class="inv-tile-glyph">
            {% if tile.icon.type == 'emoji' %}{{ tile.icon.char }}
            {% else %}<svg viewBox="0 0 24 24" width="22" height="22"><use href="#{{ tile.icon.id }}"/></svg>
            {% endif %}
          </span>
          <span class="inv-tile-count" data-tile-count>×{{ tile.count }}</span>
          <span class="inv-tile-name">{{ tile.species_name }}{% if tile.variety_name %}<br><em>{{ tile.variety_name }}</em>{% endif %}</span>
        </button>
        {% if tile.status in ('unplanted', 'idea') %}
        <button type="button" class="inv-tile-detach"
                data-detach-plant-id="{{ tile.plant_id }}"
                title="Detach from this area (move back to the global {{ tile.status }} pool — clears positions).">↩</button>
        {% endif %}
      </div>
      {% else %}
      <div class="inv-tile-empty">No plant_groups in this area yet. Switch to <strong>Unplanted</strong> or <strong>Ideas</strong> to place from the global pool.</div>
      {% endfor %}
    </div>

    {# Pool: unplanted (global) — placing attaches the plant to this area
       (POST /api/plants/{id}/attach-to-area). #}
    <div class="layout-tray-tiles" data-pool="unplanted" data-tray-tiles hidden>
      {% for tile in unplanted_pool_tiles %}
      <button type="button" class="inv-tile inv-tile-status-{{ tile.status }}"
              data-plant-id="{{ tile.plant_id }}"
              data-species-name="{{ tile.species_name }}"
              data-variety-name="{{ tile.variety_name }}"
              data-ppu="{{ tile.ppu }}"
              data-qty-total="{{ tile.qty_total }}"
              data-side="{{ tile.side }}"
              data-count="{{ tile.count }}"
              data-plant-status="{{ tile.status }}"
              data-pool="unplanted"
              data-source-area="{{ tile.source_area_name }}"
              data-inv-plants-each="{{ tile.inv_plants_each|tojson }}"
              style="--tile-color: {{ tile.color }}"
              title="{% if tile.source_area_name %}Currently attached to {{ tile.source_area_name }} — placing will move it here.{% else %}Not currently in any area.{% endif %}">
        <span class="inv-tile-glyph">
          {% if tile.icon.type == 'emoji' %}{{ tile.icon.char }}
          {% else %}<svg viewBox="0 0 24 24" width="22" height="22"><use href="#{{ tile.icon.id }}"/></svg>
          {% endif %}
        </span>
        <span class="inv-tile-count" data-tile-count>×{{ tile.count }}</span>
        <span class="inv-tile-name">{{ tile.species_name }}{% if tile.variety_name %}<br><em>{{ tile.variety_name }}</em>{% endif %}</span>
        {% if tile.source_area_name %}<span class="inv-tile-source">↗ {{ tile.source_area_name }}</span>{% endif %}
      </button>
      {% else %}
      <div class="inv-tile-empty">No unplanted plants. Add some at <a href="/unplanted">/unplanted</a>.</div>
      {% endfor %}
    </div>

    {# Pool: idea (global) — same as unplanted but status='idea'. #}
    <div class="layout-tray-tiles" data-pool="idea" data-tray-tiles hidden>
      {% for tile in idea_pool_tiles %}
      <button type="button" class="inv-tile inv-tile-status-{{ tile.status }}"
              data-plant-id="{{ tile.plant_id }}"
              data-species-name="{{ tile.species_name }}"
              data-variety-name="{{ tile.variety_name }}"
              data-ppu="{{ tile.ppu }}"
              data-qty-total="{{ tile.qty_total }}"
              data-side="{{ tile.side }}"
              data-count="{{ tile.count }}"
              data-plant-status="{{ tile.status }}"
              data-pool="idea"
              data-source-area="{{ tile.source_area_name }}"
              data-inv-plants-each="{{ tile.inv_plants_each|tojson }}"
              style="--tile-color: {{ tile.color }}"
              title="{% if tile.source_area_name %}Currently in {{ tile.source_area_name }} — placing will move it here.{% else %}Idea plant, not yet attached to an area.{% endif %}">
        <span class="inv-tile-glyph">
          {% if tile.icon.type == 'emoji' %}{{ tile.icon.char }}
          {% else %}<svg viewBox="0 0 24 24" width="22" height="22"><use href="#{{ tile.icon.id }}"/></svg>
          {% endif %}
        </span>
        <span class="inv-tile-count" data-tile-count>×{{ tile.count }}</span>
        <span class="inv-tile-name">{{ tile.species_name }}{% if tile.variety_name %}<br><em>{{ tile.variety_name }}</em>{% endif %}</span>
        {% if tile.source_area_name %}<span class="inv-tile-source">↗ {{ tile.source_area_name }}</span>{% endif %}
      </button>
      {% else %}
      <div class="inv-tile-empty">No idea plants. Add some at <a href="/unplanted?tab=idea">/unplanted</a>.</div>
      {% endfor %}
    </div>

    <div class="layout-tools">
      <button type="button" class="btn small" data-tool-auto-arrange>⚙ Auto-arrange</button>
      <button type="button" class="btn small ghost" data-tool-send-all-inventory title="Move every plant on the canvas back to its inventory pile.">⤴ All to inventory</button>
    </div>
  </div>
</div>
{% endblock %}

{% block scripts %}
<script>
(function () {
  const root = document.querySelector('.layout-mode');
  if (!root) return;
  const areaId = root.dataset.layoutAreaId;
  const canvasWrap = root.querySelector('[data-canvas-wrap]');
  const rotator = root.querySelector('[data-canvas-rotator]');
  const svg = root.querySelector('[data-canvas-svg]');
  const plantsLayer = root.querySelector('[data-plants-layer]');
  const tapTarget = root.querySelector('[data-canvas-tap-target]');
  const trayRoot = root.querySelector('[data-tray-root]');
  const trayTabs = root.querySelectorAll('[data-tray-tabs] .tray-tab');
  // The three tray-tiles containers — keyed by data-pool.
  const trayPools = {};
  root.querySelectorAll('[data-tray-tiles]').forEach(function (el) {
    trayPools[el.dataset.pool] = el;
  });
  // Backward-compat: many places used `trayTiles` to mean the inventory pile.
  // Keep that pointer for code paths that only deal with the inventory pool.
  const trayTiles = trayPools.inventory;
  const compassMini = root.querySelector('[data-compass-mini]');
  const selectionDisplay = root.querySelector('[data-selection-display]');
  const rotateBtn = root.querySelector('[data-rotate-view]');
  const autoArrangeBtn = root.querySelector('[data-tool-auto-arrange]');
  const sendAllInvBtn = root.querySelector('[data-tool-send-all-inventory]');

  // ---- Selection state ----
  // Declared up here (before any function that references it) so the
  // tab-restoration on initial load — which calls setActivePool → reads
  // `selection` — doesn't hit a TDZ ReferenceError. The original
  // declaration was further down, which silently broke ALL click handlers
  // whenever the URL had a #tab= hash on page load.
  // selection: null | {kind: 'placed', el, ...} | {kind: 'inventory', tile, ...}
  let selection = null;

  // ---- Tray tab switching ----
  // The active tab is mirrored to the URL hash so a reload (e.g. after
  // placing from a pool) keeps the user on the same tab.
  function setActivePool(name, opts) {
    if (!trayPools[name]) name = 'inventory';
    trayRoot.dataset.activePool = name;
    Object.entries(trayPools).forEach(function (entry) {
      entry[1].hidden = entry[0] !== name;
    });
    trayTabs.forEach(function (tab) {
      tab.classList.toggle('active', tab.dataset.pool === name);
    });
    if (!(opts && opts.fromHash)) {
      // Replace (not push) so back-button doesn't get cluttered with tab changes.
      if (history.replaceState) {
        history.replaceState(null, '', '#tab=' + name);
      } else {
        location.hash = 'tab=' + name;
      }
    }
    // Switching tabs clears any inventory-side selection so a stale pointer
    // can't try to place from the wrong tile.
    if (selection && selection.kind === 'inventory') clearSelection();
  }
  trayTabs.forEach(function (tab) {
    tab.addEventListener('click', function () { setActivePool(tab.dataset.pool); });
  });

  // On load, honor #tab=<pool> from the URL (set by setActivePool on prior
  // tab switch, preserved across the reload after a pool-place).
  function applyInitialPoolFromHash() {
    var m = (location.hash || '').match(/tab=(\w+)/);
    if (m && trayPools[m[1]]) setActivePool(m[1], {fromHash: true});
  }
  applyInitialPoolFromHash();

  const rectX = parseFloat(svg.dataset.rectX);
  const rectY = parseFloat(svg.dataset.rectY);
  const rectW = parseFloat(svg.dataset.rectW);
  const rectH = parseFloat(svg.dataset.rectH);
  // The area is rendered axis-aligned in the SVG. compassRot is the area's
  // real-world bearing (e.g. 315° = SW-NE), used only to spin the compass
  // overlay so N points to actual north.
  const compassRot = parseFloat(svg.dataset.compassRot);

  // ---- View rotation (CSS transform on canvas-rotator) ----
  // Since the rect is axis-aligned, we only need 0° vs 90° to make the rect's
  // long axis line up with the viewport's long axis. The manual button
  // increments by 90°.
  const areaL = parseFloat(svg.dataset.areaL);
  const areaW = parseFloat(svg.dataset.areaW);
  let viewRotation = 0;
  function applyViewRotation() {
    rotator.style.transform = `rotate(${viewRotation}deg)`;
    // Compass overlay points to true north: compensate for both viewRotation
    // and compassRot so N always points up-on-screen-relative-to-true-north.
    compassMini.style.transform = `rotate(${-(viewRotation + compassRot)}deg)`;
  }
  function autoFitRotation() {
    const wrap = canvasWrap.getBoundingClientRect();
    if (!wrap.width || !wrap.height) return;
    const scaleZero = Math.min(wrap.width / areaL, wrap.height / areaW);
    const scaleNinety = Math.min(wrap.width / areaW, wrap.height / areaL);
    viewRotation = (scaleNinety > scaleZero) ? 90 : 0;
    applyViewRotation();
  }
  rotateBtn.addEventListener('click', () => {
    viewRotation = (viewRotation + 90) % 360;
    applyViewRotation();
  });
  window.addEventListener('resize', autoFitRotation);
  // Initial fit after layout settles
  setTimeout(autoFitRotation, 50);

  // (selection state is declared near the top of the IIFE — see the comment
  //  there. Keeping helpers near the original location.)

  function glyphHTMLForSelection(sel) {
    // Pull the inner glyph out of the source element (canvas icon or inv tile)
    // and wrap it for the top bar. Emoji renders as text; SVG renders as a
    // small <svg><use/></svg>.
    let src;
    if (sel.kind === 'placed') src = sel.el;
    else if (sel.kind === 'inventory') src = sel.tile;
    if (!src) return '';
    // Look for an inv-tile-glyph wrapper first (HTML)
    const tileGlyph = src.querySelector('.inv-tile-glyph');
    if (tileGlyph) return tileGlyph.innerHTML;
    // Otherwise pull the inner SVG glyph (text emoji or <use>)
    const useEl = src.querySelector('use');
    if (useEl) {
      const href = useEl.getAttribute('href') || '';
      return `<svg viewBox="0 0 24 24" width="22" height="22"><use href="${href}"/></svg>`;
    }
    const textEl = src.querySelector('.plant-icon-emoji');
    if (textEl) return textEl.textContent;
    return '';
  }

  function updateSelectionDisplay() {
    if (!selection) {
      selectionDisplay.innerHTML = '<span class="layout-selection-empty">Tap a plant or inventory tile to select.</span>';
      return;
    }
    const sp = selection.species || '?';
    const v = selection.variety || '';
    const glyph = glyphHTMLForSelection(selection);
    const groupBadge = (selection.plantCount && selection.plantCount > 1)
      ? ` <span class="layout-selection-badge">×${selection.plantCount}</span>`
      : '';
    const hint = selection.kind === 'placed'
      ? '<span class="layout-selection-hint">tap empty canvas to move, tap tray to send to inventory, tap selected again to cancel</span>'
      : '<span class="layout-selection-hint">tap canvas to place, tap selected tile again to cancel</span>';
    selectionDisplay.innerHTML =
      `<span class="layout-selection-glyph">${glyph}</span> ${sp}${v ? ' / <em>' + v + '</em>' : ''}${groupBadge} ${hint}`;
  }

  function clearSelection() {
    if (selection && selection.kind === 'placed' && selection.el) {
      selection.el.classList.remove('selected', 'ghost');
    }
    if (selection && selection.kind === 'inventory' && selection.tile) {
      selection.tile.classList.remove('selected');
    }
    selection = null;
    updateSelectionDisplay();
  }

  function selectPlaced(el) {
    if (selection && selection.kind === 'placed' && selection.el === el) {
      clearSelection();
      return;
    }
    clearSelection();
    el.classList.add('selected', 'ghost');
    selection = {
      kind: 'placed',
      el,
      plantId: el.dataset.plantId,
      iconIndex: parseInt(el.dataset.iconIndex, 10),
      species: el.dataset.speciesName,
      variety: el.dataset.varietyName,
      plantCount: parseInt(el.dataset.plantCount, 10) || 1,
      side: parseFloat(el.dataset.iconSide) || 1,
    };
    updateSelectionDisplay();
  }

  // ---- Inventory queue helpers ----
  // Each tile carries a JSON array of plant_counts (the queue of icons still
  // in inventory). Placing pops from the front; sending back pushes onto the
  // back. The displayed count is sum(queue), in PLANTS not icons.
  function tileQueue(tile) {
    try {
      const raw = tile.dataset.invPlantsEach || '[]';
      const arr = JSON.parse(raw);
      return Array.isArray(arr) ? arr.map(n => parseInt(n, 10) || 0) : [];
    } catch (e) { return []; }
  }
  function setTileQueue(tile, arr) {
    tile.dataset.invPlantsEach = JSON.stringify(arr);
    const total = arr.reduce((a, b) => a + b, 0);
    tile.dataset.count = String(total);
    tile.querySelector('[data-tile-count]').textContent = '×' + total;
    tile.classList.toggle('empty', total === 0);
  }
  function nextIconPlantsForTile(tile) {
    const q = tileQueue(tile);
    return q.length ? q[0] : 0;
  }

  function selectInventory(tile) {
    if (selection && selection.kind === 'inventory' && selection.tile === tile) {
      clearSelection();
      return;
    }
    // Empty tile — nothing to pick.
    const q = tileQueue(tile);
    if (q.length === 0) {
      clearSelection();
      return;
    }
    clearSelection();
    tile.classList.add('selected');
    selection = {
      kind: 'inventory',
      tile,
      plantId: tile.dataset.plantId,
      species: tile.dataset.speciesName,
      variety: tile.dataset.varietyName,
      plantCount: q[0],   // the next icon's plant_count (front of queue)
      side: parseFloat(tile.dataset.side) || 1,
    };
    updateSelectionDisplay();
  }

  // ---- Coordinate math: screen → SVG-user → rect-local ----
  function screenPointToLocal(clientX, clientY) {
    const pt = svg.createSVGPoint();
    pt.x = clientX;
    pt.y = clientY;
    const ctm = plantsLayer.getScreenCTM();
    if (!ctm) return null;
    return pt.matrixTransform(ctm.inverse());
  }

  // ---- Press-and-drag placement gesture ----
  // The user taps with a selection held: a ghost cell + ghost icon appear
  // snapped to the 6"×6" grid cell under the finger. They can drag to
  // fine-tune which cell is highlighted, then release to commit. A quick
  // tap-without-movement still works — it's just pointerdown + pointerup
  // at (effectively) the same coords.
  const CELL_FT = 0.5;
  function snapToCell(localX, localY) {
    // localX/Y are rect-local feet (0..L, 0..W).
    const lx = Math.max(0, Math.min(rectW - 0.0001, localX));
    const ly = Math.max(0, Math.min(rectH - 0.0001, localY));
    const cellX = Math.floor(lx / CELL_FT) * CELL_FT;
    const cellY = Math.floor(ly / CELL_FT) * CELL_FT;
    return {
      cellX, cellY,
      centerX: cellX + CELL_FT / 2,
      centerY: cellY + CELL_FT / 2,
    };
  }
  // Build the SVG ghost (highlighted cell rect + faded plant icon) at a
  // given snap. Returns {cellRect, icon} so the move handler can update
  // them in place. Both elements live in the plantsLayer so they share
  // its transform (axis-aligned, view-rotation applied via the CSS
  // transform on .layout-canvas-rotator).
  function buildGhost(snap) {
    const ns = 'http://www.w3.org/2000/svg';
    const cellRect = document.createElementNS(ns, 'rect');
    cellRect.setAttribute('class', 'drag-ghost-cell');
    cellRect.setAttribute('x', rectX + snap.cellX);
    cellRect.setAttribute('y', rectY + snap.cellY);
    cellRect.setAttribute('width', CELL_FT);
    cellRect.setAttribute('height', CELL_FT);
    cellRect.setAttribute('pointer-events', 'none');
    plantsLayer.appendChild(cellRect);

    const icon = buildGhostIconForSelection(snap);
    if (icon) plantsLayer.appendChild(icon);
    return { cellRect, icon };
  }
  function buildGhostIconForSelection(snap) {
    if (!selection) return null;
    const ns = 'http://www.w3.org/2000/svg';
    let g;
    if (selection.kind === 'placed' && selection.el) {
      // Clone the visual of the currently-selected placed icon so the
      // ghost looks exactly like what's being moved.
      g = selection.el.cloneNode(true);
      g.classList.remove('selected', 'ghost');
      g.removeAttribute('data-plant-id');
      g.removeAttribute('data-icon-index');
    } else if (selection.kind === 'inventory' && selection.tile) {
      // Build a fresh icon matching the inventory/pool tile.
      g = document.createElementNS(ns, 'g');
      const circle = document.createElementNS(ns, 'circle');
      circle.setAttribute('r', '0.45');
      circle.setAttribute('class', 'plant-icon-bg');
      g.appendChild(circle);
      const glyphHTML = selection.tile.querySelector('.inv-tile-glyph').innerHTML;
      const innerSvg = iconHTMLToSVG(glyphHTML);
      const wrap = document.createElementNS(ns, 'g');
      wrap.innerHTML = innerSvg;
      g.appendChild(wrap);
    } else {
      return null;
    }
    g.setAttribute('class', 'plant-icon drag-ghost-icon');
    g.setAttribute('pointer-events', 'none');
    g.setAttribute('transform',
      `translate(${rectX + snap.centerX} ${rectY + snap.centerY}) scale(${selection.side})`);
    return g;
  }
  function updateGhost(ghost, snap) {
    if (ghost.cellRect) {
      ghost.cellRect.setAttribute('x', rectX + snap.cellX);
      ghost.cellRect.setAttribute('y', rectY + snap.cellY);
    }
    if (ghost.icon) {
      ghost.icon.setAttribute('transform',
        `translate(${rectX + snap.centerX} ${rectY + snap.centerY}) scale(${selection.side})`);
    }
  }
  function removeGhost(ghost) {
    if (!ghost) return;
    if (ghost.cellRect) ghost.cellRect.remove();
    if (ghost.icon) ghost.icon.remove();
  }

  // Drag state. dragState is non-null while a press is in progress.
  // `wasDragging` is a one-shot flag set on pointerup so the click event
  // that fires on the icon underneath the release doesn't accidentally
  // run the icon's select/drop logic.
  let dragState = null;
  let wasDragging = false;

  function pointInRect(localX, localY) {
    return localX >= 0 && localX <= rectW && localY >= 0 && localY <= rectH;
  }

  svg.addEventListener('pointerdown', (e) => {
    // Only initiate drag when there's something to place — otherwise let
    // the icon click handler do its normal "tap to select" work.
    if (!selection) return;
    const local = screenPointToLocal(e.clientX, e.clientY);
    if (!local) return;
    const lx = local.x - rectX;
    const ly = local.y - rectY;
    if (!pointInRect(lx, ly)) return;
    const snap = snapToCell(lx, ly);
    const ghost = buildGhost(snap);
    try { svg.setPointerCapture(e.pointerId); } catch (err) { /* ignore */ }
    dragState = { pointerId: e.pointerId, snap, ghost };
    e.preventDefault();
  });

  svg.addEventListener('pointermove', (e) => {
    if (!dragState || e.pointerId !== dragState.pointerId) return;
    const local = screenPointToLocal(e.clientX, e.clientY);
    if (!local) return;
    const snap = snapToCell(local.x - rectX, local.y - rectY);
    updateGhost(dragState.ghost, snap);
    dragState.snap = snap;
  });

  svg.addEventListener('pointerup', (e) => {
    if (!dragState || e.pointerId !== dragState.pointerId) return;
    const { snap, ghost } = dragState;
    removeGhost(ghost);
    try { svg.releasePointerCapture(dragState.pointerId); } catch (err) { /* ignore */ }
    dragState = null;
    wasDragging = true;
    // Reset the guard after the click event has had a chance to fire/be ignored.
    setTimeout(() => { wasDragging = false; }, 30);
    const x = snap.centerX;
    const y = snap.centerY;
    if (!selection) return;
    if (selection.kind === 'inventory') {
      const pool = selection.tile.dataset.pool || 'inventory';
      if (pool === 'inventory') placeFromInventory(selection, x, y);
      else placeFromPool(selection, x, y, pool);
    } else if (selection.kind === 'placed') {
      moveOnCanvas(selection, x, y);
    }
  });

  function cancelDrag() {
    if (!dragState) return;
    removeGhost(dragState.ghost);
    try { svg.releasePointerCapture(dragState.pointerId); } catch (err) { /* ignore */ }
    dragState = null;
  }
  svg.addEventListener('pointercancel', cancelDrag);
  svg.addEventListener('lostpointercapture', () => { if (dragState) cancelDrag(); });

  // Place from the global Unplanted/Ideas pool. The backend peels off one
  // icon's worth of plants from the source group (split semantic), creating
  // or merging into a target group in THIS area. We pass `icon_plants` so
  // the server knows how many plants the icon represents (= the front of the
  // pool tile's queue: e.g. 4 for a full onion icon, 3 for the partial).
  function placeFromPool(sel, x, y, poolStatus) {
    const q = tileQueue(sel.tile);
    const iconPlants = q.length ? q[0] : 1;
    sel.tile.disabled = true;
    fetch('/api/plants/' + sel.plantId + '/attach-to-area', {
      method: 'POST',
      headers: {'Content-Type': 'application/json'},
      body: JSON.stringify({
        area_id: parseInt(areaId, 10),
        position: {x, y},
        icon_plants: iconPlants,
      }),
    }).then(function (res) {
      if (!res.ok) {
        return res.text().then(function (t) {
          sel.tile.disabled = false;
          alert('Place failed: ' + t);
        });
      }
      // Full reload — the simplest way to reflect every change (canvas icon,
      // pool tile decrement, new/merged inventory tile) is a clean re-render
      // from the server.
      location.reload();
    }).catch(function (err) {
      sel.tile.disabled = false;
      alert('Place error: ' + err.message);
    });
  }

  // Tap on existing icon — selection rules:
  //  - No selection: tap selects this icon.
  //  - Selection is THIS icon: cancel (drop).
  //  - Selection is something else: handled by the press-and-drag gesture
  //    that fires on the SVG-level pointer handlers. The `wasDragging`
  //    guard below stops this click handler from also re-running it.
  // Drag-ghosts are pointer-events:none so they don't intercept clicks.
  plantsLayer.addEventListener('click', (e) => {
    if (wasDragging) { wasDragging = false; return; }
    if (e.target.closest('.drag-ghost-icon')) return;
    const icon = e.target.closest('.plant-icon');
    if (!icon) return;
    e.stopPropagation();
    if (!selection) { selectPlaced(icon); return; }
    if (selection.kind === 'placed' && selection.el === icon) {
      clearSelection();
      return;
    }
    // Selection held + tap on a different icon: do nothing here. The
    // press-and-drag flow above already placed at the snapped cell on
    // pointerup; we don't want to double-place.
  });

  // Tap inventory/pool tile — selection rules apply across all pools.
  // Delegated on trayRoot so the same handler covers all three pool containers.
  //  - No selection: pick from this tile.
  //  - Selection is THIS tile: cancel.
  //  - Holding a PLACED icon and tap matching tile: send placed → inventory.
  //  - Otherwise (different tile while holding): ignore — must drop first.
  trayRoot.addEventListener('click', (e) => {
    const detachBtn = e.target.closest('.inv-tile-detach');
    if (detachBtn) {
      e.stopPropagation();
      const pid = detachBtn.dataset.detachPlantId;
      if (!confirm('Detach this plant from this area? It will be moved back to the global pool and all its positions here will be cleared.')) return;
      fetch('/api/plants/' + pid + '/detach-from-area', {method: 'POST'})
        .then(function (res) {
          if (!res.ok) return res.text().then(function (t) { alert('Detach failed: ' + t); });
          location.reload();
        })
        .catch(function (err) { alert('Detach error: ' + err.message); });
      return;
    }
    const tile = e.target.closest('.inv-tile');
    if (!tile) return;
    if (e.target.closest('.tray-tab')) return;   // tab clicks handled separately
    e.stopPropagation();
    if (!selection) { selectInventory(tile); return; }
    if (selection.kind === 'inventory' && selection.tile === tile) {
      clearSelection();
      return;
    }
    if (selection.kind === 'placed' && selection.plantId === tile.dataset.plantId) {
      sendPlacedToInventory(selection);
      return;
    }
    // Otherwise — ignore. User must drop the current selection first.
  });

  // ---- Persistence ----
  async function savePositions(plantId, positions) {
    try {
      const res = await fetch(`/api/plants/${plantId}/positions`, {
        method: 'POST',
        headers: {'Content-Type': 'application/json'},
        body: JSON.stringify({positions}),
      });
      if (!res.ok) console.error('save failed', await res.text());
    } catch (err) {
      console.error('save failed', err);
    }
  }

  // Read all current positions for a plant_id from the DOM
  function currentPositions(plantId) {
    const icons = Array.from(plantsLayer.querySelectorAll(`.plant-icon[data-plant-id="${plantId}"]`));
    icons.sort((a, b) => parseInt(a.dataset.iconIndex, 10) - parseInt(b.dataset.iconIndex, 10));
    return icons.map(el => ({
      x: parseFloat(el.dataset.posX),
      y: parseFloat(el.dataset.posY),
    }));
  }

  // ---- Actions ----
  function placeFromInventory(sel, x, y) {
    const tile = sel.tile;
    const q = tileQueue(tile);
    if (q.length === 0) { clearSelection(); return; }
    // Pop the front of the queue — that's this icon's plant_count.
    const plantCount = q.shift();
    const iconClone = createIconElement({
      plantId: sel.plantId,
      x, y,
      side: sel.side,
      species: sel.species,
      variety: sel.variety,
      plantCount,
      status: tile.dataset.plantStatus || 'planted',
      iconHTML: tile.querySelector('.inv-tile-glyph').innerHTML,
    });
    plantsLayer.appendChild(iconClone);
    setTileQueue(tile, q);  // updates count + dataset + display
    clearSelection();
    savePositions(sel.plantId, currentPositions(sel.plantId));
  }

  function moveOnCanvas(sel, x, y) {
    const el = sel.el;
    el.dataset.posX = x;
    el.dataset.posY = y;
    el.setAttribute('transform',
      `translate(${rectX + x} ${rectY + y}) scale(${sel.side})`);
    clearSelection();
    savePositions(sel.plantId, currentPositions(sel.plantId));
  }

  function sendPlacedToInventory(sel) {
    const plantId = sel.plantId;
    const placedPlantCount = sel.plantCount || 1;
    sel.el.remove();
    // The tile is always present (backend always emits one); push the placed
    // icon's plant_count onto the back of the queue.
    const tile = trayTiles.querySelector(`.inv-tile[data-plant-id="${plantId}"]`);
    if (tile) {
      const q = tileQueue(tile);
      q.push(placedPlantCount);
      setTileQueue(tile, q);
    }
    clearSelection();
    savePositions(plantId, currentPositions(plantId));
  }

  function createIconElement({plantId, x, y, side, species, variety, plantCount, status, iconHTML}) {
    // Compute next icon-index for this plant_id
    const existing = plantsLayer.querySelectorAll(`.plant-icon[data-plant-id="${plantId}"]`);
    let nextIdx = 0;
    existing.forEach(el => {
      const i = parseInt(el.dataset.iconIndex, 10);
      if (i >= nextIdx) nextIdx = i + 1;
    });
    const ns = 'http://www.w3.org/2000/svg';
    const g = document.createElementNS(ns, 'g');
    const st = (status || 'planted');
    // Status class drives the canvas visual (solid/dashed/dotted border).
    g.setAttribute('class', `plant-icon plant-icon-status-${st}`);
    g.setAttribute('transform', `translate(${rectX + x} ${rectY + y}) scale(${side})`);
    g.dataset.plantId = plantId;
    g.dataset.iconIndex = nextIdx;
    g.dataset.posX = x;
    g.dataset.posY = y;
    g.dataset.iconSide = side;
    g.dataset.speciesName = species || '';
    g.dataset.varietyName = variety || '';
    g.dataset.plantCount = plantCount || 1;
    g.dataset.plantStatus = st;
    const circle = document.createElementNS(ns, 'circle');
    circle.setAttribute('r', '0.45');
    circle.setAttribute('class', 'plant-icon-bg');
    g.appendChild(circle);
    // Inject the icon HTML — emoji <text> or <use>
    const wrapper = document.createElementNS(ns, 'g');
    wrapper.innerHTML = iconHTMLToSVG(iconHTML);
    g.appendChild(wrapper);
    // Count badge — matches the Jinja template's render so icons that
    // represent multiple plants (e.g. an onion icon at ppu=4 with plant_count=4)
    // show the number immediately on placement, not just after reload.
    const pc = parseInt(plantCount, 10) || 1;
    if (pc > 1) {
      const badge = document.createElementNS(ns, 'g');
      badge.setAttribute('class', 'plant-icon-count');
      badge.setAttribute('transform', 'translate(0.32 -0.32)');
      const bgC = document.createElementNS(ns, 'circle');
      bgC.setAttribute('r', '0.18');
      bgC.setAttribute('class', 'plant-icon-count-bg');
      badge.appendChild(bgC);
      const lbl = document.createElementNS(ns, 'text');
      lbl.setAttribute('class', 'plant-icon-count-label');
      lbl.setAttribute('text-anchor', 'middle');
      lbl.setAttribute('dominant-baseline', 'central');
      lbl.textContent = String(pc);
      badge.appendChild(lbl);
      g.appendChild(badge);
    }
    return g;
  }

  function iconHTMLToSVG(html) {
    // The tile's glyph is either an emoji char or a tiny <svg><use/></svg>.
    // Inside the canvas SVG we want a <text> emoji or <use>.
    const trimmed = html.trim();
    if (trimmed.startsWith('<svg')) {
      // Pull out the symbol id
      const m = trimmed.match(/href="#([^"]+)"/);
      if (m) return `<use href="#${m[1]}" x="-0.42" y="-0.42" width="0.84" height="0.84"></use>`;
    }
    // Plain emoji char(s)
    return `<text class="plant-icon-emoji" text-anchor="middle" dominant-baseline="central" y="0.05">${trimmed}</text>`;
  }

  // ---- Auto-arrange ----
  autoArrangeBtn.addEventListener('click', async () => {
    autoArrangeBtn.disabled = true;
    autoArrangeBtn.textContent = '⏳ Thinking…';
    try {
      const res = await fetch(`/api/areas/${areaId}/auto-arrange`, {method: 'POST'});
      if (!res.ok) {
        const txt = await res.text();
        alert('Auto-arrange failed: ' + txt);
        return;
      }
      const data = await res.json();
      const assignments = data.assignments || [];
      if (!assignments.length) {
        alert(data.message || 'Nothing to arrange.');
        return;
      }
      // Apply each assignment by appending positions to that plant_id
      for (const a of assignments) {
        const plantId = String(a.plant_id);
        const tile = trayTiles.querySelector(`.inv-tile[data-plant-id="${plantId}"]`);
        if (!tile) continue;
        const positions = a.positions || [];
        for (const p of positions) {
          // Stop when the queue is exhausted.
          if (tileQueue(tile).length === 0) break;
          const fakeSel = {
            tile,
            plantId,
            side: parseFloat(tile.dataset.side) || 1,
            species: tile.dataset.speciesName,
            variety: tile.dataset.varietyName,
          };
          placeFromInventory(fakeSel, p.x, p.y);
        }
      }
    } catch (err) {
      alert('Auto-arrange error: ' + err.message);
    } finally {
      autoArrangeBtn.disabled = false;
      autoArrangeBtn.textContent = '⚙ Auto-arrange';
    }
  });

  // ---- Send all to inventory ----
  sendAllInvBtn.addEventListener('click', async () => {
    if (!confirm('Move every plant on the canvas back to the inventory pile?')) return;
    const allIcons = Array.from(plantsLayer.querySelectorAll('.plant-icon'));
    // Group by plantId so we save once per group.
    const byPlantId = {};
    allIcons.forEach(el => {
      const pid = el.dataset.plantId;
      (byPlantId[pid] = byPlantId[pid] || []).push(el);
    });
    for (const [pid, icons] of Object.entries(byPlantId)) {
      const tile = trayTiles.querySelector(`.inv-tile[data-plant-id="${pid}"]`);
      if (tile) {
        const q = tileQueue(tile);
        // Push each placed icon's plant_count back onto the queue.
        icons.forEach(el => {
          const pc = parseInt(el.dataset.plantCount, 10) || 1;
          q.push(pc);
        });
        setTileQueue(tile, q);
      }
      icons.forEach(el => el.remove());
      await savePositions(pid, []);
    }
    clearSelection();
  });

  updateSelectionDisplay();
})();
</script>
{% endblock %}