{% extends "network/base.html" %}
{% block title %}Change Request — {{ topology_name }}{% endblock %}
{% block content %}
<style>
  /* ── Change Request Markup Mode styles ─────────────────────────── */
  .cr-layout { display:flex; gap:1.5rem; align-items:flex-start; }
  .cr-sidebar { width:380px; flex-shrink:0; }
  .cr-main { flex:1; min-width:0; }

  .markup-toolbar {
    display:flex; gap:0.5rem; align-items:center; flex-wrap:wrap;
    padding:0.75rem 1rem; background:var(--surface); border:1px solid var(--border);
    border-radius:8px; margin-bottom:1rem;
  }
  .markup-toolbar .mode-label {
    font-size:0.75rem; color:var(--text-dim); margin-right:0.5rem; font-weight:600;
    text-transform:uppercase; letter-spacing:0.05em;
  }

  .action-btn {
    display:inline-flex; align-items:center; gap:0.35rem;
    padding:0.4rem 0.85rem; border-radius:6px; border:2px solid transparent;
    font-size:0.85rem; font-weight:600; cursor:pointer; transition:all 0.15s;
    background:transparent;
  }
  .action-btn.add-btn   { color:#27ae60; border-color:#27ae60; }
  .action-btn.add-btn.active,
  .action-btn.add-btn:hover   { background:#27ae60; color:#fff; }
  .action-btn.remove-btn { color:#e74c3c; border-color:#e74c3c; }
  .action-btn.remove-btn.active,
  .action-btn.remove-btn:hover { background:#e74c3c; color:#fff; }
  .action-btn.modify-btn { color:#f39c12; border-color:#f39c12; }
  .action-btn.modify-btn.active,
  .action-btn.modify-btn:hover { background:#f39c12; color:#fff; }
  .action-btn.neutral-btn { color:var(--text-dim); border-color:var(--border); }
  .action-btn.neutral-btn.active,
  .action-btn.neutral-btn:hover { background:var(--text-dim); color:var(--bg); }

  /* Canvas mini-preview for entity picker */
  .entity-picker-grid {
    display:grid; grid-template-columns:1fr 1fr; gap:0.5rem; max-height:240px; overflow-y:auto;
  }
  .entity-chip {
    display:flex; align-items:center; gap:0.4rem; padding:0.35rem 0.6rem;
    border:1px solid var(--border); border-radius:6px; cursor:pointer;
    font-size:0.8rem; transition:all 0.12s; background:var(--surface);
    overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
  }
  .entity-chip:hover { border-color:var(--accent); background:var(--surface-raised); }
  .entity-chip.selected { border-color:var(--accent); background:color-mix(in srgb, var(--accent) 15%, transparent); }
  .entity-chip .etype-dot {
    width:8px; height:8px; border-radius:50%; flex-shrink:0;
  }

  /* CR item cards */
  .cr-item-card {
    border:1px solid var(--border); border-radius:8px; padding:0.75rem;
    margin-bottom:0.5rem; position:relative;
  }
  .cr-item-card.action-add    { border-left:4px solid #27ae60; background:color-mix(in srgb,#27ae60 6%,var(--surface)); }
  .cr-item-card.action-remove { border-left:4px solid #e74c3c; background:color-mix(in srgb,#e74c3c 6%,var(--surface)); }
  .cr-item-card.action-modify { border-left:4px solid #f39c12; background:color-mix(in srgb,#f39c12 6%,var(--surface)); }
  .cr-item-card .item-action-badge {
    font-size:0.7rem; font-weight:700; text-transform:uppercase;
    padding:0.15rem 0.4rem; border-radius:4px; letter-spacing:0.04em;
  }
  .badge-add    { background:#27ae60; color:#fff; }
  .badge-remove { background:#e74c3c; color:#fff; }
  .badge-modify { background:#f39c12; color:#fff; }

  .cr-item-card .delete-item-btn {
    position:absolute; top:0.5rem; right:0.5rem;
    background:none; border:none; color:var(--text-dim); cursor:pointer;
    font-size:0.85rem; padding:0.2rem 0.4rem;
  }
  .cr-item-card .delete-item-btn:hover { color:var(--danger,#e74c3c); }

  /* CR list sidebar */
  .cr-list-item {
    display:flex; align-items:center; justify-content:space-between;
    padding:0.6rem 0.75rem; border-radius:6px; border:1px solid var(--border);
    margin-bottom:0.4rem; cursor:pointer; transition:all 0.12s;
    background:var(--surface);
  }
  .cr-list-item:hover { border-color:var(--accent); }
  .cr-list-item.active { border-color:var(--accent); background:color-mix(in srgb,var(--accent) 10%,var(--surface)); }
  .cr-list-item .cr-status {
    font-size:0.7rem; font-weight:600; text-transform:uppercase; padding:0.15rem 0.4rem;
    border-radius:4px;
  }
  .status-draft { background:var(--surface-raised); color:var(--text-dim); }
  .status-submitted { background:#2980b9; color:#fff; }
  .status-approved { background:#27ae60; color:#fff; }
  .status-rejected { background:#e74c3c; color:#fff; }
  .status-withdrawn { background:#7f8c8d; color:#fff; }

  /* Document preview */
  .doc-preview {
    font-family:var(--font-mono); font-size:0.78rem; line-height:1.6;
    background:var(--surface); border:1px solid var(--border); border-radius:8px;
    padding:1.25rem; overflow-x:auto; white-space:pre-wrap; max-height:600px;
    overflow-y:auto;
  }

  /* Diff table */
  .diff-table { width:100%; border-collapse:collapse; font-size:0.8rem; }
  .diff-table th, .diff-table td { padding:0.35rem 0.6rem; border:1px solid var(--border); }
  .diff-table th { background:var(--surface-raised); font-weight:600; }
  .diff-before { background:color-mix(in srgb,#e74c3c 12%,transparent); }
  .diff-after  { background:color-mix(in srgb,#27ae60 12%,transparent); }

  /* Responsive */
  @media (max-width: 900px) {
    .cr-layout { flex-direction:column; }
    .cr-sidebar { width:100%; }
  }
</style>

<div class="page-header">
  <div>
    <h1 class="page-title">Change Request Markup</h1>
    <p class="page-subtitle">{{ topology_name }} — Propose additions, removals, and modifications for CAB review</p>
  </div>
  <div class="page-actions">
    <a href="/network/canvas/{{ topology_id }}" class="btn btn-secondary">← Canvas</a>
    <a href="/network/compliance/{{ topology_id }}" class="btn btn-secondary">Compliance</a>
    <a href="/network/intent/{{ topology_id }}" class="btn btn-secondary">Intent</a>
  </div>
</div>

<!-- Hidden topology data for JS -->
<script>
const TOPO_ID = {{ topology_id | tojson }};
const TOPO_NAME = {{ topology_name | tojson }};
const TOPO_CLASS = {{ topology_classification | tojson }};
const GRAPH_NODES = {{ graph_nodes | tojson }};
const GRAPH_EDGES = {{ graph_edges | tojson }};
</script>

<div class="cr-layout">

  <!-- ── LEFT SIDEBAR: CR list ─────────────────────────────────────── -->
  <aside class="cr-sidebar">

    <!-- Create new CR -->
    <div class="panel" style="margin-bottom:1rem;">
      <div class="panel-header">
        <h2 class="panel-title">Change Requests</h2>
        <button class="btn btn-primary-sm" onclick="showCreateCR()">+ New CR</button>
      </div>
      <div id="create-cr-form" style="display:none;padding:1rem;border-top:1px solid var(--border);">
        <label style="display:block;margin-bottom:0.5rem;">Title *
          <input type="text" id="new-cr-title" placeholder="e.g. Add DMZ firewall cluster" style="width:100%;"/>
        </label>
        <label style="display:block;margin-bottom:0.75rem;">Description
          <textarea id="new-cr-desc" rows="2" placeholder="Purpose of this change..." style="width:100%;"></textarea>
        </label>
        <button class="btn btn-primary" onclick="createCR()" style="width:100%;">Create Change Request</button>
      </div>

      <div id="cr-list" style="padding:0.5rem;">
        {% if change_requests %}
          {% for cr in change_requests %}
          <div class="cr-list-item" id="cr-item-{{ cr.id }}" onclick="selectCR('{{ cr.id }}')">
            <div>
              <div style="font-weight:600;font-size:0.85rem;">{{ cr.title }}</div>
              <div style="font-size:0.72rem;color:var(--text-dim);">{{ cr.updated_at[:10] }}</div>
            </div>
            <span class="cr-status status-{{ cr.status }}">{{ cr.status }}</span>
          </div>
          {% endfor %}
        {% else %}
          <div id="cr-list-empty" style="padding:1.5rem;text-align:center;color:var(--text-dim);font-size:0.85rem;">
            No change requests yet. Create one to start marking proposed changes.
          </div>
        {% endif %}
      </div>
    </div>

    <!-- CR Status Control (shown when CR selected) -->
    <div id="cr-status-panel" class="panel" style="display:none;">
      <div class="panel-header"><h2 class="panel-title">CR Status</h2></div>
      <div style="padding:1rem;">
        <p style="font-size:0.82rem;color:var(--text-dim);margin-bottom:0.75rem;">
          Current: <strong id="cr-status-badge">draft</strong>
        </p>
        <div style="display:flex;flex-direction:column;gap:0.4rem;">
          <button class="btn btn-secondary" style="font-size:0.8rem;" onclick="setCRStatus('submitted')">Submit for CAB Review</button>
          <button class="btn btn-secondary" style="font-size:0.8rem;color:#27ae60;border-color:#27ae60;" onclick="setCRStatus('approved')">Approve</button>
          <button class="btn btn-secondary" style="font-size:0.8rem;color:#e74c3c;border-color:#e74c3c;" onclick="setCRStatus('rejected')">Reject</button>
          <button class="btn btn-secondary" style="font-size:0.8rem;color:var(--text-dim);" onclick="setCRStatus('withdrawn')">Withdraw</button>
        </div>
        <hr style="margin:0.75rem 0;border-color:var(--border);">
        <button class="btn btn-secondary" style="font-size:0.8rem;color:#e74c3c;width:100%;" onclick="deleteCR()">Delete CR</button>
      </div>
    </div>

  </aside>

  <!-- ── MAIN AREA: Markup editor + document ─────────────────────── -->
  <main class="cr-main">

    <!-- Markup Mode Toolbar (shown when CR selected) -->
    <div id="markup-toolbar-wrap" style="display:none;">
      <div class="markup-toolbar">
        <span class="mode-label">Mark as:</span>
        <button class="action-btn add-btn" id="btn-add" onclick="setAction('add')">
          ⬤ Add
        </button>
        <button class="action-btn remove-btn" id="btn-remove" onclick="setAction('remove')">
          ⬤ Remove
        </button>
        <button class="action-btn modify-btn" id="btn-modify" onclick="setAction('modify')">
          ⬤ Modify
        </button>
        <button class="action-btn neutral-btn" id="btn-none" onclick="setAction(null)" style="margin-left:auto;">
          ✕ Clear Selection
        </button>
      </div>

      <!-- Entity Picker -->
      <div class="panel" style="margin-bottom:1rem;">
        <div class="panel-header">
          <h2 class="panel-title" id="entity-picker-title">Select Topology Element</h2>
          <span id="entity-picker-hint" style="font-size:0.78rem;color:var(--text-dim);">
            Pick a node or edge, then click Mark
          </span>
        </div>
        <div style="padding:0.75rem;">
          <div style="display:flex;gap:0.5rem;margin-bottom:0.5rem;">
            <button class="btn btn-secondary" style="font-size:0.78rem;padding:0.25rem 0.6rem;"
                    onclick="showEntities('node')">Nodes ({{ graph_nodes|length }})</button>
            <button class="btn btn-secondary" style="font-size:0.78rem;padding:0.25rem 0.6rem;"
                    onclick="showEntities('edge')">Edges ({{ graph_edges|length }})</button>
            <input type="text" id="entity-filter" placeholder="Filter..." style="flex:1;font-size:0.8rem;"
                   oninput="filterEntities()"/>
          </div>
          <div class="entity-picker-grid" id="entity-grid">
            <!-- Populated by JS -->
          </div>
          <!-- Justification + confirm -->
          <div id="markup-confirm" style="display:none;margin-top:0.75rem;padding-top:0.75rem;border-top:1px solid var(--border);">
            <label style="display:block;margin-bottom:0.5rem;font-size:0.83rem;">Justification (optional)
              <textarea id="markup-justification" rows="2" placeholder="Why is this change proposed?" style="width:100%;font-size:0.8rem;"></textarea>
            </label>
            <div id="modify-fields" style="display:none;">
              <label style="display:block;margin-bottom:0.5rem;font-size:0.83rem;">Before (current state, JSON)
                <textarea id="before-json" rows="3" placeholder='{"label":"old-fw","type":"firewall"}' style="width:100%;font-family:var(--font-mono);font-size:0.77rem;"></textarea>
              </label>
              <label style="display:block;margin-bottom:0.5rem;font-size:0.83rem;">After (proposed state, JSON)
                <textarea id="after-json" rows="3" placeholder='{"label":"new-fw","type":"firewall","bandwidth":"10GbE"}' style="width:100%;font-family:var(--font-mono);font-size:0.77rem;"></textarea>
              </label>
            </div>
            <button class="btn btn-primary" onclick="confirmMarkup()">Mark Element</button>
            <button class="btn btn-secondary" onclick="cancelMarkup()">Cancel</button>
          </div>
        </div>
      </div>
    </div>

    <!-- Placeholder when no CR selected -->
    <div id="no-cr-placeholder" class="panel" style="padding:3rem;text-align:center;color:var(--text-dim);">
      <div style="font-size:2rem;margin-bottom:1rem;">📋</div>
      <p style="font-size:1rem;font-weight:600;">Select or create a Change Request</p>
      <p style="font-size:0.85rem;">Each CR captures a set of proposed topology changes (add / remove / modify) for CAB review.</p>
    </div>

    <!-- CR Items list (shown when CR selected) -->
    <div id="cr-items-panel" style="display:none;">
      <div class="panel">
        <div class="panel-header">
          <h2 class="panel-title">Proposed Changes <span id="items-count-badge" class="badge badge-dim">0</span></h2>
          <button class="btn btn-primary-sm" onclick="generateDocument()" id="generate-doc-btn">⬇ Generate CR Document</button>
        </div>
        <div id="cr-items-list" style="padding:0.75rem;">
          <div id="items-empty" style="padding:1.5rem;text-align:center;color:var(--text-dim);font-size:0.85rem;">
            No changes marked yet. Use the toolbar above to select elements.
          </div>
        </div>
      </div>

      <!-- Generated Document -->
      <div id="doc-section" class="panel" style="display:none;margin-top:1rem;">
        <div class="panel-header">
          <h2 class="panel-title">CAB Review Document</h2>
          <div style="display:flex;gap:0.5rem;">
            <button class="btn btn-secondary" onclick="copyDocMarkdown()">⎘ Copy Markdown</button>
            <button class="btn btn-secondary" onclick="downloadDocMarkdown()">⬇ Download .md</button>
          </div>
        </div>
        <div id="doc-summary-bar" class="stats-bar" style="padding:0.75rem 1rem;display:flex;gap:1.5rem;flex-wrap:wrap;border-bottom:1px solid var(--border);"></div>
        <div id="doc-impact-flags" style="display:none;padding:0.75rem 1rem;border-bottom:1px solid var(--border);"></div>
        <div id="doc-sections" style="padding:1rem;"></div>
        <details style="padding:0.5rem 1rem 1rem;">
          <summary style="cursor:pointer;font-size:0.83rem;color:var(--text-dim);margin-bottom:0.5rem;">
            Raw Markdown Source
          </summary>
          <pre id="doc-markdown-raw" class="doc-preview"></pre>
        </details>
      </div>
    </div>

  </main>
</div>

<script>
// ── State ────────────────────────────────────────────────────────────────────
let activeCrId = null;
let activeAction = null;  // 'add' | 'remove' | 'modify' | null
let selectedEntity = null;  // {id, type, label, data}
let currentItems = [];
let currentEntities = [];  // currently shown in picker
let _entityMode = 'node';

// ── Init ─────────────────────────────────────────────────────────────────────
document.addEventListener('DOMContentLoaded', () => {
  // Auto-select first CR if any
  const firstCR = document.querySelector('.cr-list-item');
  if (firstCR) {
    const crId = firstCR.id.replace('cr-item-', '');
    selectCR(crId);
  }
  showEntities('node');
});

// ── CR Selection ──────────────────────────────────────────────────────────────
function selectCR(crId) {
  activeCrId = crId;
  document.querySelectorAll('.cr-list-item').forEach(el => el.classList.remove('active'));
  const el = document.getElementById(`cr-item-${crId}`);
  if (el) el.classList.add('active');

  document.getElementById('no-cr-placeholder').style.display = 'none';
  document.getElementById('markup-toolbar-wrap').style.display = 'block';
  document.getElementById('cr-items-panel').style.display = 'block';
  document.getElementById('cr-status-panel').style.display = 'block';

  // Update status badge
  const statusEl = el ? el.querySelector('.cr-status') : null;
  document.getElementById('cr-status-badge').textContent = statusEl ? statusEl.textContent.trim() : '—';

  loadItems();
}

// ── CR Create ────────────────────────────────────────────────────────────────
function showCreateCR() {
  const f = document.getElementById('create-cr-form');
  f.style.display = f.style.display === 'none' ? 'block' : 'none';
}

async function createCR() {
  const title = document.getElementById('new-cr-title').value.trim();
  if (!title) { alert('Title is required.'); return; }
  const desc = document.getElementById('new-cr-desc').value.trim();
  const r = await fetch(`/network/api/change-request/${TOPO_ID}/create`, {
    method: 'POST',
    headers: {'Content-Type': 'application/json'},
    body: JSON.stringify({title, description: desc}),
  });
  const data = await r.json();
  if (!r.ok) { alert(data.error || 'Error creating CR'); return; }

  // Add to list
  const list = document.getElementById('cr-list');
  const empty = document.getElementById('cr-list-empty');
  if (empty) empty.remove();

  const el = document.createElement('div');
  el.className = 'cr-list-item';
  el.id = `cr-item-${data.id}`;
  el.onclick = () => selectCR(data.id);
  el.innerHTML = `
    <div>
      <div style="font-weight:600;font-size:0.85rem;">${_esc(title)}</div>
      <div style="font-size:0.72rem;color:var(--text-dim);">just now</div>
    </div>
    <span class="cr-status status-draft">draft</span>
  `;
  list.prepend(el);

  document.getElementById('create-cr-form').style.display = 'none';
  document.getElementById('new-cr-title').value = '';
  document.getElementById('new-cr-desc').value = '';
  selectCR(data.id);
}

// ── Action Selection ──────────────────────────────────────────────────────────
function setAction(action) {
  activeAction = action;
  selectedEntity = null;
  ['add','remove','modify'].forEach(a => {
    document.getElementById(`btn-${a}`).classList.toggle('active', a === action);
  });
  document.getElementById('markup-confirm').style.display = 'none';
  document.getElementById('modify-fields').style.display =
    action === 'modify' ? 'block' : 'none';
  if (action) {
    document.getElementById('entity-picker-hint').textContent =
      `Pick an element to mark as "${action}" →`;
  } else {
    document.getElementById('entity-picker-hint').textContent = 'Pick a node or edge, then click Mark';
  }
  // Refresh grid to clear selection
  showEntities(_entityMode);
}

// ── Entity Picker ─────────────────────────────────────────────────────────────
function showEntities(mode) {
  _entityMode = mode;
  let items = [];
  if (mode === 'node') {
    items = GRAPH_NODES.map(n => ({
      id: n.id,
      type: 'node',
      label: (n.attrs && n.attrs.label && n.attrs.label.text) || n.id,
      nodeType: n.type || 'unknown',
      data: n,
    }));
  } else {
    items = GRAPH_EDGES.map(e => ({
      id: e.id,
      type: 'edge',
      label: (e.attrs && e.attrs.label && e.attrs.label.text) || `${e.source.id}→${e.target.id}`,
      nodeType: 'edge',
      data: e,
    }));
  }
  currentEntities = items;
  renderEntityGrid(items);
}

function filterEntities() {
  const q = document.getElementById('entity-filter').value.toLowerCase();
  renderEntityGrid(currentEntities.filter(e => e.label.toLowerCase().includes(q) || e.id.toLowerCase().includes(q)));
}

function renderEntityGrid(items) {
  const grid = document.getElementById('entity-grid');
  if (!items.length) {
    grid.innerHTML = '<div style="grid-column:1/-1;color:var(--text-dim);font-size:0.8rem;padding:0.5rem;">No elements found.</div>';
    return;
  }
  grid.innerHTML = items.map(item => `
    <div class="entity-chip ${selectedEntity && selectedEntity.id === item.id ? 'selected' : ''}"
         onclick="selectEntity(${JSON.stringify(item).replace(/"/g,'&quot;')})">
      <span class="etype-dot" style="background:${item.type==='edge'?'#3498db':'#9b59b6'};"></span>
      <span title="${_esc(item.id)}">${_esc(item.label.substring(0,28))}${item.label.length>28?'…':''}</span>
    </div>
  `).join('');
}

function selectEntity(item) {
  selectedEntity = item;
  renderEntityGrid(currentEntities);  // re-render to show selection
  if (activeAction) {
    document.getElementById('markup-confirm').style.display = 'block';
    // Pre-fill before_json for modify with current node data
    if (activeAction === 'modify') {
      const flat = {};
      const d = item.data || {};
      ['id','type','label'].forEach(k => { if (d[k]) flat[k] = d[k]; });
      if (d.attrs && d.attrs.label) flat['label'] = d.attrs.label.text;
      document.getElementById('before-json').value = JSON.stringify(flat, null, 2);
      document.getElementById('after-json').value = '';
    }
  }
}

function cancelMarkup() {
  selectedEntity = null;
  document.getElementById('markup-confirm').style.display = 'none';
  renderEntityGrid(currentEntities);
}

// ── Confirm Markup ───────────────────────────────────────────────────────────
async function confirmMarkup() {
  if (!activeCrId) { alert('Select a CR first.'); return; }
  if (!activeAction) { alert('Select an action (Add / Remove / Modify).'); return; }
  if (!selectedEntity) { alert('Select an element from the picker.'); return; }

  let beforeJson = {}, afterJson = {};
  if (activeAction === 'modify') {
    try { beforeJson = JSON.parse(document.getElementById('before-json').value || '{}'); } catch { beforeJson = {}; }
    try { afterJson = JSON.parse(document.getElementById('after-json').value || '{}'); } catch { afterJson = {}; }
  } else if (activeAction === 'add') {
    afterJson = _flattenEntityData(selectedEntity.data);
  } else if (activeAction === 'remove') {
    beforeJson = _flattenEntityData(selectedEntity.data);
  }

  const body = {
    action_type: activeAction,
    entity_id: selectedEntity.id,
    entity_type: selectedEntity.type,
    entity_label: selectedEntity.label,
    before_json: beforeJson,
    after_json: afterJson,
    justification: document.getElementById('markup-justification').value.trim(),
  };

  const r = await fetch(`/network/api/change-request/${activeCrId}/markup`, {
    method: 'POST',
    headers: {'Content-Type': 'application/json'},
    body: JSON.stringify(body),
  });
  const data = await r.json();
  if (!r.ok) { alert(data.error || 'Error adding markup'); return; }

  // Reset UI
  document.getElementById('markup-justification').value = '';
  document.getElementById('markup-confirm').style.display = 'none';
  document.getElementById('before-json').value = '';
  document.getElementById('after-json').value = '';
  selectedEntity = null;
  renderEntityGrid(currentEntities);

  // Reload items
  loadItems();
  showToast(`✓ Marked as ${activeAction}`);
}

function _flattenEntityData(data) {
  if (!data) return {};
  const flat = {};
  Object.entries(data).forEach(([k, v]) => {
    if (['id','source','target','vertices','z'].includes(k)) return;
    if (typeof v === 'object' && v !== null && !Array.isArray(v)) {
      Object.entries(v).forEach(([sk, sv]) => {
        if (typeof sv !== 'object') flat[`${k}.${sk}`] = sv;
      });
    } else if (!Array.isArray(v)) {
      flat[k] = v;
    }
  });
  return flat;
}

// ── Load Items ───────────────────────────────────────────────────────────────
async function loadItems() {
  if (!activeCrId) return;
  const r = await fetch(`/network/api/change-request/${activeCrId}/items`);
  const data = await r.json();
  currentItems = data.items || [];
  renderItems();
}

function renderItems() {
  const list = document.getElementById('cr-items-list');
  const empty = document.getElementById('items-empty');
  document.getElementById('items-count-badge').textContent = currentItems.length;

  if (!currentItems.length) {
    list.innerHTML = '';
    list.appendChild(empty);
    empty.style.display = 'block';
    return;
  }
  empty.style.display = 'none';
  list.innerHTML = currentItems.map(item => `
    <div class="cr-item-card action-${item.action_type}">
      <button class="delete-item-btn" onclick="deleteItem('${item.id}')" title="Remove markup">✕</button>
      <div style="display:flex;align-items:center;gap:0.5rem;margin-bottom:0.4rem;">
        <span class="item-action-badge badge-${item.action_type}">${item.action_type}</span>
        <strong style="font-size:0.88rem;">${_esc(item.entity_label || item.entity_id)}</strong>
        <span style="font-size:0.75rem;color:var(--text-dim);">(${item.entity_type})</span>
      </div>
      ${item.justification ? `<p style="font-size:0.8rem;color:var(--text-dim);margin:0.25rem 0;">${_esc(item.justification)}</p>` : ''}
      ${renderItemDiff(item)}
      <div style="font-size:0.7rem;color:var(--text-dim);margin-top:0.35rem;">
        by ${_esc(item.created_by || '—')} · ${(item.created_at||'').substring(0,10)}
      </div>
    </div>
  `).join('');
}

function renderItemDiff(item) {
  if (item.action_type !== 'modify') return '';
  let before = {}, after = {};
  try { before = JSON.parse(item.before_json || '{}'); } catch {}
  try { after = JSON.parse(item.after_json || '{}'); } catch {}
  const keys = new Set([...Object.keys(before), ...Object.keys(after)]);
  if (!keys.size) return '';
  const rows = [...keys].filter(k => before[k] !== after[k]).map(k =>
    `<tr>
      <td><code style="font-size:0.75rem;">${_esc(k)}</code></td>
      <td class="diff-before"><code style="font-size:0.75rem;">${_esc(String(before[k] ?? '—'))}</code></td>
      <td class="diff-after"><code style="font-size:0.75rem;">${_esc(String(after[k] ?? '—'))}</code></td>
    </tr>`
  ).join('');
  if (!rows) return '';
  return `<table class="diff-table" style="margin-top:0.4rem;">
    <thead><tr><th>Field</th><th>Before</th><th>After</th></tr></thead>
    <tbody>${rows}</tbody>
  </table>`;
}

// ── Delete Item ──────────────────────────────────────────────────────────────
async function deleteItem(itemId) {
  if (!confirm('Remove this markup item?')) return;
  const r = await fetch(`/network/api/change-request/item/${itemId}`, {method: 'DELETE'});
  if (!r.ok) { const d = await r.json(); alert(d.error || 'Error'); return; }
  loadItems();
}

// ── CR Status ────────────────────────────────────────────────────────────────
async function setCRStatus(newStatus) {
  if (!activeCrId) return;
  const r = await fetch(`/network/api/change-request/${activeCrId}/status`, {
    method: 'PUT',
    headers: {'Content-Type': 'application/json'},
    body: JSON.stringify({status: newStatus}),
  });
  const data = await r.json();
  if (!r.ok) { alert(data.error || 'Error'); return; }
  document.getElementById('cr-status-badge').textContent = newStatus;
  const statusEl = document.querySelector(`#cr-item-${activeCrId} .cr-status`);
  if (statusEl) {
    statusEl.className = `cr-status status-${newStatus}`;
    statusEl.textContent = newStatus;
  }
  showToast(`CR status → ${newStatus}`);
}

async function deleteCR() {
  if (!activeCrId) return;
  if (!confirm('Delete this change request and all its markup items?')) return;
  const r = await fetch(`/network/api/change-request/${activeCrId}/delete`, {method: 'DELETE'});
  const data = await r.json();
  if (!r.ok) { alert(data.error || 'Error'); return; }
  const el = document.getElementById(`cr-item-${activeCrId}`);
  if (el) el.remove();
  activeCrId = null;
  document.getElementById('no-cr-placeholder').style.display = 'block';
  document.getElementById('markup-toolbar-wrap').style.display = 'none';
  document.getElementById('cr-items-panel').style.display = 'none';
  document.getElementById('cr-status-panel').style.display = 'none';
  document.getElementById('doc-section').style.display = 'none';
  showToast('CR deleted.');
}

// ── Generate Document ─────────────────────────────────────────────────────────
async function generateDocument() {
  if (!activeCrId) return;
  document.getElementById('generate-doc-btn').textContent = '⌛ Generating...';
  try {
    const r = await fetch(`/network/api/change-request/${activeCrId}/generate`, {method: 'POST'});
    const doc = await r.json();
    if (!r.ok) { alert(doc.error || 'Error generating document'); return; }
    renderDocument(doc);
    document.getElementById('doc-section').style.display = 'block';
    document.getElementById('doc-section').scrollIntoView({behavior: 'smooth', block: 'start'});
    showToast('✓ CR document generated');
  } finally {
    document.getElementById('generate-doc-btn').textContent = '⬇ Generate CR Document';
  }
}

function renderDocument(doc) {
  // Summary bar
  const s = doc.summary || {};
  document.getElementById('doc-summary-bar').innerHTML = `
    <div><span class="badge badge-green">🟢 Add</span> <strong>${s.add || 0}</strong></div>
    <div><span class="badge badge-red">🔴 Remove</span> <strong>${s.remove || 0}</strong></div>
    <div><span class="badge" style="background:#f39c12;color:#fff;">🟡 Modify</span> <strong>${s.modify || 0}</strong></div>
    <div><strong>Total:</strong> ${s.total || 0} changes</div>
    <div style="margin-left:auto;font-size:0.78rem;color:var(--text-dim);">
      SHA-256: <code>${doc.checksum}</code>
    </div>
  `;

  // Impact flags
  const flags = doc.impact_flags || [];
  const flagsEl = document.getElementById('doc-impact-flags');
  if (flags.length) {
    flagsEl.style.display = 'block';
    flagsEl.innerHTML = `<strong style="font-size:0.82rem;">⚠ Impact Flags:</strong>
      <ul style="margin:0.25rem 0 0 1rem;font-size:0.8rem;color:var(--text-dim);">
        ${flags.map(f => `<li>${_esc(f)}</li>`).join('')}
      </ul>`;
  } else {
    flagsEl.style.display = 'none';
  }

  // Sections
  const actionColors = {add:'#27ae60', remove:'#e74c3c', modify:'#f39c12'};
  const sections = (doc.sections || []).filter(s => s.count > 0);
  document.getElementById('doc-sections').innerHTML = sections.map(sec => `
    <div style="margin-bottom:1.5rem;">
      <h3 style="border-left:4px solid ${actionColors[sec.action_type]};padding-left:0.75rem;margin-bottom:0.75rem;">
        ${sec.label} <span class="badge badge-dim">${sec.count}</span>
      </h3>
      ${sec.entries.map(e => `
        <div class="cr-item-card action-${sec.action_type}" style="margin-bottom:0.5rem;">
          <div style="display:flex;align-items:center;gap:0.5rem;margin-bottom:0.35rem;">
            <span class="item-action-badge badge-${sec.action_type}">${sec.action_type}</span>
            <strong>${_esc(e.entity_label)}</strong>
            <span style="font-size:0.75rem;color:var(--text-dim);">(${e.entity_type})</span>
          </div>
          ${e.justification ? `<p style="font-size:0.8rem;margin:0.25rem 0;color:var(--text-dim);">${_esc(e.justification)}</p>` : ''}
          ${e.diff && e.diff.length ? `
            <table class="diff-table" style="margin-top:0.4rem;">
              <thead><tr><th>Field</th><th>Before</th><th>After</th></tr></thead>
              <tbody>
                ${e.diff.map(d => `
                  <tr>
                    <td><code style="font-size:0.75rem;">${_esc(d.field)}</code></td>
                    <td class="diff-before"><code style="font-size:0.75rem;">${_esc(String(d.before ?? '—'))}</code></td>
                    <td class="diff-after"><code style="font-size:0.75rem;">${_esc(String(d.after ?? '—'))}</code></td>
                  </tr>`).join('')}
              </tbody>
            </table>` : ''}
        </div>
      `).join('')}
    </div>
  `).join('');

  // Raw markdown
  document.getElementById('doc-markdown-raw').textContent = doc.markdown || '';
  window._lastDocMarkdown = doc.markdown || '';
  window._lastCrTitle = doc.title || 'change-request';
}

function copyDocMarkdown() {
  if (!window._lastDocMarkdown) { alert('Generate the document first.'); return; }
  navigator.clipboard.writeText(window._lastDocMarkdown).then(() => showToast('Copied to clipboard'));
}

function downloadDocMarkdown() {
  if (!window._lastDocMarkdown) { alert('Generate the document first.'); return; }
  const blob = new Blob([window._lastDocMarkdown], {type: 'text/markdown'});
  const url = URL.createObjectURL(blob);
  const a = document.createElement('a');
  a.href = url;
  a.download = `${(window._lastCrTitle||'cr').replace(/\s+/g,'-').toLowerCase()}.md`;
  a.click();
  URL.revokeObjectURL(url);
}

// ── Toast ────────────────────────────────────────────────────────────────────
function showToast(msg) {
  let t = document.getElementById('cr-toast');
  if (!t) {
    t = document.createElement('div');
    t.id = 'cr-toast';
    t.style.cssText = 'position:fixed;bottom:1.5rem;right:1.5rem;background:var(--accent);color:#fff;'
      + 'padding:0.6rem 1.1rem;border-radius:8px;font-size:0.85rem;z-index:9999;opacity:0;transition:opacity 0.2s;';
    document.body.appendChild(t);
  }
  t.textContent = msg;
  t.style.opacity = '1';
  clearTimeout(t._timer);
  t._timer = setTimeout(() => { t.style.opacity = '0'; }, 2500);
}

// ── Utils ────────────────────────────────────────────────────────────────────
function _esc(s) {
  return String(s).replace(/&/g,'&amp;').replace(/</g,'&lt;').replace(/>/g,'&gt;')
    .replace(/"/g,'&quot;');
}
</script>
{% endblock %}