let nodes = [], edges = [], selId = null, dragId = null, dOffX, dOffY;
let isPan = false, pSX, pSY, pOffX = 0, pOffY = 0, zoom = 1;
let connFrom = null, tmpLine = null, nIdCnt = 0;
let undoStk = [], redoStk = [];
const wrap = document.getElementById('wrap'), vp = document.getElementById('viewport');
const cv = document.getElementById('canvas'), svg = document.getElementById('svg');
const props = document.getElementById('props');

function sn(v) { return Math.round(v / 20) * 20; }

function buildPalette() {
  const p = document.getElementById('palette');
  CATS.forEach(([cat, types]) => {
    p.innerHTML += `<div class="cat">${cat}</div>`;
    types.forEach(t => {
      const info = NODE_TYPES[t];
      p.innerHTML += `<div class="p-item" draggable="true" data-type="${t}">
        <span class="p-icon" style="background:${info.color}33;color:${info.color}">${t.split('-')[0].substring(0,2).toUpperCase()}</span>
        ${info.label}</div>`;
    });
  });
  document.querySelectorAll('.p-item').forEach(el => {
    el.addEventListener('dragstart', e => { e.dataTransfer.setData('text/plain', el.dataset.type); });
  });
}

function addNode(type, x, y, id, label) {
  const def = NODE_TYPES[type]; if (!def) return null;
  const nid = id || (++nIdCnt);
  const el = document.createElement('div');
  el.className = 'node'; el.dataset.id = nid;
  el.style.cssText = `left:${sn(x)}px;top:${sn(y)}px;width:130px;border-color:${def.color}`;
  el.innerHTML = `<div class="rm" onclick="rmNode(${nid})">×</div>
    <div class="port port-in" data-n="${nid}"></div>
    <div class="nl">${label||def.label}</div>
    <div class="ns">${def.label}</div>
    <div class="port port-out" data-n="${nid}"></div>`;
  el.addEventListener('mousedown', e => {
    if (e.target.closest('.rm,.port')) return;
    e.stopPropagation(); selNode(nid);
    const r = el.getBoundingClientRect();
    dragId = nid; dOffX = e.clientX - r.left; dOffY = e.clientY - r.top;
    el.style.zIndex = 20; el.style.cursor = 'grabbing';
    saveSt();
  });
  el.querySelectorAll('.port').forEach(p => {
    p.addEventListener('mousedown', e => {
      e.stopPropagation(); e.preventDefault();
      if (p.classList.contains('port-out')) {
        connFrom = { id: +p.dataset.n, el: p };
        const r = p.getBoundingClientRect(), wr = vp.getBoundingClientRect();
        tmpLine = document.createElementNS('http://www.w3.org/2000/svg', 'line');
        tmpLine.setAttribute('stroke', '#58a6ff'); tmpLine.setAttribute('stroke-width', '2');
        tmpLine.setAttribute('stroke-dasharray', '6,4');
        tmpLine.setAttribute('x1', (r.left - wr.left) / zoom);
        tmpLine.setAttribute('y1', (r.top - wr.top + 4) / zoom);
        tmpLine.setAttribute('x2', (e.clientX - wr.left) / zoom);
        tmpLine.setAttribute('y2', (e.clientY - wr.top) / zoom);
        svg.appendChild(tmpLine);
      }
    });
  });
  cv.appendChild(el);
  nodes.push({ id: nid, type, x: sn(x), y: sn(y), label: label || def.label });
  updStats(); return nid;
}

function rmNode(id) {
  const el = cv.querySelector(`.node[data-id="${id}"]`);
  if (el) el.remove();
  nodes = nodes.filter(n => n.id !== id);
  edges = edges.filter(e => e.from !== id && e.to !== id);
  renEdges(); updStats(); if (selId === id) { selId = null; props.classList.remove('open'); }
  saveSt();
}

function selNode(id) {
  cv.querySelectorAll('.node').forEach(n => n.classList.remove('selected'));
  const el = cv.querySelector(`.node[data-id="${id}"]`);
  if (el) el.classList.add('selected');
  selId = id; showProps(id);
}

function showProps(id) {
  const n = nodes.find(x => x.id === id); if (!n) return;
  props.classList.add('open');
  document.getElementById('pLabel').value = n.label;
  document.getElementById('pSub').value = n.sub || '';
  document.getElementById('pWidth').value = 130;
  const sel = document.getElementById('pType');
  sel.innerHTML = '';
  Object.keys(NODE_TYPES).forEach(k => {
    const o = document.createElement('option');
    o.value = k; o.textContent = NODE_TYPES[k].label;
    if (k === n.type) o.selected = true;
    sel.appendChild(o);
  });
}

function up(f, v) {
  const n = nodes.find(x => x.id === selId); if (!n) return;
  const el = cv.querySelector(`.node[data-id="${selId}"]`); if (!el) return;
  if (f === 'label') { n.label = v; el.querySelector('.nl').textContent = v; }
  else if (f === 'type') {
    const def = NODE_TYPES[v]; if (!def) return;
    n.type = v; n.label = def.label;
    el.style.borderColor = def.color;
    el.querySelector('.nl').textContent = def.label;
    el.querySelector('.ns').textContent = def.label;
    document.getElementById('pLabel').value = def.label;
  }
  else if (f === 'w') { el.style.width = v + 'px'; }
  renEdges(); saveSt();
}

function delNode() { if (selId !== null) rmNode(selId); }

function addEdge(from, to) {
  if (from === to || edges.some(e => e.from === from && e.to === to)) return;
  edges.push({ from, to }); renEdges(); updStats(); saveSt();
}

function renEdges() {
  svg.querySelectorAll('.eg').forEach(g => g.remove());
  const wr = vp.getBoundingClientRect();
  edges.forEach((e, i) => {
    const fEl = cv.querySelector(`.node[data-id="${e.from}"]`);
    const tEl = cv.querySelector(`.node[data-id="${e.to}"]`);
    if (!fEl || !tEl) return;
    const fr = fEl.getBoundingClientRect(), tr = tEl.getBoundingClientRect();
    const x1 = (fr.right - wr.left - 8) / zoom, y1 = (fr.top + fr.height/2 - wr.top) / zoom;
    const x2 = (tr.left - wr.left + 8) / zoom, y2 = (tr.top + tr.height/2 - wr.top) / zoom;
    const cp = Math.max(40, Math.abs(x2 - x1) * 0.4);
    const d = `M${x1} ${y1} C${x1+cp} ${y1},${x2-cp} ${y2},${x2} ${y2}`;
    const g = document.createElementNS('http://www.w3.org/2000/svg', 'g');
    g.classList.add('eg');
    // glow
    const gl = document.createElementNS('http://www.w3.org/2000/svg', 'path');
    gl.setAttribute('d', d); gl.setAttribute('stroke', '#58a6ff');
    gl.setAttribute('stroke-width', '5'); gl.setAttribute('fill', 'none');
    gl.setAttribute('opacity', '0.1');
    g.appendChild(gl);
    // main
    const m = document.createElementNS('http://www.w3.org/2000/svg', 'path');
    m.setAttribute('d', d); m.setAttribute('stroke', '#58a6ff');
    m.setAttribute('stroke-width', '2'); m.setAttribute('fill', 'none');
    m.setAttribute('stroke-linecap', 'round');
    m.addEventListener('dblclick', () => { edges.splice(i,1); renEdges(); updStats(); saveSt(); });
    g.appendChild(m);
    // pulse
    for (let j = 0; j < 2; j++) {
      const p = document.createElementNS('http://www.w3.org/2000/svg', 'path');
      p.setAttribute('d', d); p.setAttribute('stroke', '#79c0ff');
      p.setAttribute('stroke-width', '1.5'); p.setAttribute('fill', 'none');
      p.setAttribute('stroke-dasharray', '6,14');
      p.style.animation = `pulseF ${0.8 + j*0.1}s linear infinite`;
      p.style.animationDelay = `-${j * 0.4}s`;
      g.appendChild(p);
    }
    // arrow
    const ang = Math.atan2(y2 - y1, x2 - x1);
    const ax = x2 - 4, ay = y2 - 2;
    const ar = document.createElementNS('http://www.w3.org/2000/svg', 'polygon');
    ar.setAttribute('points', `${ax},${ay} ${ax-8*Math.cos(ang-.4)},${ay-8*Math.sin(ang-.4)} ${ax-8*Math.cos(ang+.4)},${ay-8*Math.sin(ang+.4)}`);
    ar.setAttribute('fill', '#58a6ff');
    g.appendChild(ar);
    svg.appendChild(g);
  });
}

document.addEventListener('mousemove', e => {
  if (dragId !== null) {
    const el = cv.querySelector(`.node[data-id="${dragId}"]`); if (!el) return;
    const wr = vp.getBoundingClientRect();
    let x = (e.clientX - wr.left - dOffX) / zoom, y = (e.clientY - wr.top - dOffY) / zoom;
    x = sn(Math.max(0,x)); y = sn(Math.max(0,y));
    el.style.left = x + 'px'; el.style.top = y + 'px';
    const n = nodes.find(nn => nn.id === dragId); if (n) { n.x = x; n.y = y; }
    renEdges();
  }
  if (tmpLine) {
    const wr = vp.getBoundingClientRect();
    tmpLine.setAttribute('x2', (e.clientX - wr.left)/zoom);
    tmpLine.setAttribute('y2', (e.clientY - wr.top)/zoom);
  }
  if (isPan) {
    pOffX += e.clientX - pSX; pOffY += e.clientY - pSY;
    pSX = e.clientX; pSY = e.clientY;
    vp.style.transform = `translate(${pOffX}px,${pOffY}px) scale(${zoom})`;
  }
});

document.addEventListener('mouseup', e => {
  if (dragId !== null) {
    const el = cv.querySelector(`.node[data-id="${dragId}"]`);
    if (el) el.style.cursor = 'move';
    dragId = null;
  }
  if (tmpLine) {
    tmpLine.remove(); tmpLine = null;
    const t = e.target.closest('.port-in');
    if (t && connFrom) addEdge(connFrom.id, +t.dataset.n);
    connFrom = null;
  }
  if (isPan) { isPan = false; wrap.style.cursor = 'grab'; }
});

wrap.addEventListener('mousedown', e => {
  if (e.target.closest('.node')) return;
  cv.querySelectorAll('.node').forEach(n => n.classList.remove('selected'));
  selId = null; props.classList.remove('open');
  isPan = true; pSX = e.clientX; pSY = e.clientY; wrap.style.cursor = 'grabbing';
});

wrap.addEventListener('wheel', e => {
  e.preventDefault();
  const d = e.deltaY > 0 ? 0.9 : 1.1, nz = Math.max(0.2, Math.min(3, zoom * d));
  const wr = wrap.getBoundingClientRect();
  const vx = (e.clientX - wr.left - pOffX) / zoom, vy = (e.clientY - wr.top - pOffY) / zoom;
  zoom = nz;
  pOffX = e.clientX - wr.left - vx * zoom; pOffY = e.clientY - wr.top - vy * zoom;
  vp.style.transform = `translate(${pOffX}px,${pOffY}px) scale(${zoom})`;
  document.getElementById('zoom').textContent = Math.round(zoom*100) + '%';
}, { passive: false });

cv.addEventListener('dragover', e => e.preventDefault());
cv.addEventListener('drop', e => {
  e.preventDefault();
  const type = e.dataTransfer.getData('text/plain');
  if (!type || !NODE_TYPES[type]) return;
  const wr = vp.getBoundingClientRect();
  let x = (e.clientX - wr.left)/zoom - 65, y = (e.clientY - wr.top)/zoom - 20;
  addNode(type, sn(Math.max(0,x)), sn(Math.max(0,y)));
  saveSt();
});

function saveSt() {
  undoStk.push(JSON.stringify({ nodes: nodes.map(n => ({...n})), edges: [...edges] }));
  if (undoStk.length > 50) undoStk.shift();
  redoStk = [];
}

function undo() {
  if (undoStk.length < 2) return;
  redoStk.push(undoStk.pop());
  loadSt(JSON.parse(undoStk[undoStk.length-1]));
}

function redo() {
  if (!redoStk.length) return;
  undoStk.push(redoStk.pop());
  loadSt(JSON.parse(undoStk[undoStk.length-1]));
}

function loadSt(st) {
  cv.querySelectorAll('.node').forEach(el => el.remove());
  svg.querySelectorAll('.eg').forEach(g => g.remove());
  nodes = []; edges = st.edges || [];
  (st.nodes || []).forEach(n => addNode(n.type, n.x, n.y, n.id, n.label));
  renEdges(); updStats();
}

function updStats() {
  document.getElementById('stats').textContent = `${nodes.length} componenten · ${edges.length} connecties`;
}

function fit() {
  if (!nodes.length) return;
  const mx = Math.min(...nodes.map(n => n.x)), my = Math.min(...nodes.map(n => n.y));
  const Mx = Math.max(...nodes.map(n => n.x + 130)), My = Math.max(...nodes.map(n => n.y + 44));
  const wr = wrap.getBoundingClientRect();
  zoom = Math.max(0.2, Math.min(wr.width/(Mx-mx+150), (wr.height-60)/(My-my+80), 1.5));
  pOffX = -mx * zoom + 50; pOffY = -my * zoom + 30;
  vp.style.transform = `translate(${pOffX}px,${pOffY}px) scale(${zoom})`;
  document.getElementById('zoom').textContent = Math.round(zoom*100)+'%';
}

function filterPalette(q) {
  q = q.toLowerCase();
  document.querySelectorAll('.p-item').forEach(el => el.style.display = el.textContent.toLowerCase().includes(q) ? 'flex' : 'none');
  document.querySelectorAll('.cat').forEach(el => {
    let sib = el.nextElementSibling, has = false;
    while (sib && sib.classList.contains('p-item')) { if (sib.style.display !== 'none') has = true; sib = sib.nextElementSibling; }
    el.style.display = has ? 'block' : 'none';
  });
}

async function save() {
  const name = document.getElementById('diagramName').value;
  const client_id = document.getElementById('clientSelect').value;
  if (!name || !client_id) { setStatus('Naam en cliënt verplicht', 'err'); return; }
  const data = { id: DIAGRAM_ID || null, client_id: +client_id, name,
    nodes: nodes.map(n => ({...n})), edges: [...edges] };
  try {
    const r = await fetch('/python-editor/api/save', {
      method: 'POST', headers: {'Content-Type':'application/json'}, body: JSON.stringify(data)
    });
    const d = await r.json();
    setStatus('Opgeslagen ✓', 'ok');
    if (d.id && !DIAGRAM_ID) history.replaceState(null, '', '/python-editor/?id=' + d.id);
  } catch(e) { setStatus('Fout bij opslaan', 'err'); }
}

function setStatus(msg, t) {
  const el = document.getElementById('status');
  el.textContent = msg; el.style.color = t === 'err' ? '#f85149' : '#3fb950';
  setTimeout(() => { el.textContent = ''; }, 3000);
}

document.addEventListener('keydown', e => {
  if (e.target.tagName === 'INPUT' || e.target.tagName === 'SELECT') return;
  if (e.key === 'Delete' || e.key === 'Backspace') { delNode(); e.preventDefault(); }
  if ((e.ctrlKey||e.metaKey) && e.key === 'z') { e.shiftKey ? redo() : undo(); e.preventDefault(); }
  if ((e.ctrlKey||e.metaKey) && e.key === 's') { save(); e.preventDefault(); }
});

const style = document.createElement('style');
style.textContent = `@keyframes pulseF{0%{stroke-dashoffset:20}100%{stroke-dashoffset:0}}`;
document.head.appendChild(style);

buildPalette();
fetch('/python-editor/api/clients').then(r=>r.json()).then(clients => {
  const sel = document.getElementById('clientSelect');
  clients.forEach(c => { sel.innerHTML += `<option value="${c.id}">${c.name}</option>`; });
});
if (NODES_JSON && NODES_JSON.length) {
  NODES_JSON.forEach(n => addNode(n.type, n.x, n.y, n.id, n.label));
  edges = EDGES_JSON || [];
  renEdges(); updStats(); saveSt();
  setTimeout(fit, 100);
}
nIdCnt = nodes.length;
updStats(); saveSt();