{# CUI // SP-CTI — Reusable twin snapshot panel macro #}
{# Usage: {% from "includes/twin_snapshot_panel.html" import snapshot_panel %} #}
{#        {{ snapshot_panel(snapshots, snap_endpoint, canvas_label="Baseline") }} #}
{% macro snapshot_panel(snapshots, snap_endpoint, canvas_label="Baseline Snapshot") %}
<div class="twin-panel" style="margin-bottom:16px;" id="snapPanel">
  <h2>1. {{ canvas_label }}</h2>
  {% if snapshots %}
  <ul class="snap-list" id="snapList">
    {% for s in snapshots %}
    <li class="snap-item {% if loop.first %}active{% endif %}"
        data-id="{{ s.id }}"
        onclick="selectSnap(this,'{{ s.id }}')">
      <span>{{ s.label }}</span>
      <span class="snap-meta">{{ s.node_count if s.node_count is defined else s.resource_count if s.resource_count is defined else '—' }} items · {{ s.created_at[:10] if s.created_at else '—' }}</span>
    </li>
    {% endfor %}
  </ul>
  {% else %}
  <p style="color:#5a6e8c;font-size:12px;">No snapshots yet — take one below.</p>
  {% endif %}
  <button class="btn btn-primary btn-sm" onclick="takeSnapshot()">Take Snapshot Now</button>
  <span id="snapSpinner" class="spinner" style="display:none;vertical-align:middle;margin-left:8px;"></span>
  <p class="hint">A snapshot freezes the current state. Use it as the baseline for your next simulation.</p>
</div>
<script>
const SNAP_ENDPOINT = "{{ snap_endpoint }}";
let selectedSnapId = {% if snapshots %}"{{ snapshots[0].id }}"{% else %}null{% endif %};

function selectSnap(el, snapId) {
  document.querySelectorAll('.snap-item').forEach(i => i.classList.remove('active'));
  el.classList.add('active');
  selectedSnapId = snapId;
}

async function takeSnapshot() {
  const spinner = document.getElementById('snapSpinner');
  spinner.style.display = 'inline-block';
  try {
    const r = await fetch(SNAP_ENDPOINT, {
      method: 'POST',
      headers: {'Content-Type':'application/json'},
      body: JSON.stringify({label: 'manual-' + new Date().toISOString().slice(0,10)})
    });
    const data = await r.json();
    if (!r.ok) { alert('Snapshot failed: ' + (data.error || r.status)); return; }
    const ul = document.getElementById('snapList') || (() => {
      const p = document.getElementById('snapPanel');
      const newUl = document.createElement('ul');
      newUl.id = 'snapList'; newUl.className = 'snap-list';
      p.insertBefore(newUl, p.querySelector('button'));
      return newUl;
    })();
    const count = data.node_count ?? data.resource_count ?? data.control_count ?? '—';
    const li = document.createElement('li');
    li.className = 'snap-item active';
    li.dataset.id = data.id;
    li.onclick = () => selectSnap(li, data.id);
    li.innerHTML = `<span>${data.label}</span><span class="snap-meta">${count} items · ${(data.created_at||'').slice(0,10)}</span>`;
    ul.prepend(li);
    document.querySelectorAll('.snap-item').forEach(i => i.classList.remove('active'));
    li.classList.add('active');
    selectedSnapId = data.id;
  } catch(e) { alert('Error: ' + e.message); }
  finally { spinner.style.display = 'none'; }
}
</script>
{% endmacro %}