{% extends "base.html" %}
{% block title %}{{ design.name or 'New Design' }} - Quality Design Canvas{% endblock %}
{% block content %}
<div class="dc-wrap" style="display:flex;height:calc(100vh - 60px);background:#0d1b2a;">
  <!-- Left Sidebar (220px) -->
  <div class="dc-sidebar" style="width:220px;min-width:220px;background:#0a1628;border-right:1px solid #1e3a6e;overflow-y:auto;">
    <div class="dc-tabs" style="display:flex;border-bottom:1px solid #1e3a6e;">
      <div class="dc-tab active" onclick="switchTab('palette-tab',this)" style="flex:1;text-align:center;padding:8px;cursor:pointer;font-size:12px;color:#2196f3;border-bottom:2px solid #2196f3;">Palette</div>
      <div class="dc-tab" onclick="switchTab('snippet-tab',this)" style="flex:1;text-align:center;padding:8px;cursor:pointer;font-size:12px;color:#7a8cb0;">Snippets</div>
      <div class="dc-tab" onclick="switchTab('runbook-tab',this)" style="flex:1;text-align:center;padding:8px;cursor:pointer;font-size:12px;color:#7a8cb0;">Runbooks</div>
    </div>

    <!-- Palette Tab -->
    <div id="palette-tab" class="dc-tab-content" style="display:block;padding:8px;">
      <div style="margin-bottom:8px;">
        <input type="text" id="palette-search" placeholder="Search nodes..."
               style="width:100%;padding:4px 8px;background:#16213e;border:1px solid #1e3a6e;border-radius:4px;color:#eaeaea;font-size:12px;box-sizing:border-box;" />
      </div>
      {% set category_colors = {
        'quality_gates': '#e94560',
        'quality_sources': '#27ae60',
        'quality_consumers': '#f39c12',
        'cross_canvas': '#9c27b0',
        'compliance_targets': '#2196f3'
      } %}
      {% set category_labels = {
        'quality_gates': 'Quality Gates',
        'quality_sources': 'Data Sources',
        'quality_consumers': 'Consumers & Reports',
        'cross_canvas': 'Cross-Canvas Links',
        'compliance_targets': 'Compliance Targets'
      } %}
      {% for category, items in objects.items() if objects %}
      <div class="dc-palette-group" style="margin-bottom:6px;">
        <div class="dc-palette-header" onclick="togglePaletteGroup(this)"
             style="padding:6px 8px;background:#16213e;border-radius:4px;cursor:pointer;display:flex;justify-content:space-between;align-items:center;font-size:12px;color:{{ category_colors.get(category, '#2196f3') }};font-weight:600;">
          <span>{{ category_labels.get(category, category|replace('_', ' ')|title) }}</span>
          <span class="dc-chevron" style="transition:transform 0.2s;">&#9660;</span>
        </div>
        <div class="dc-palette-items" style="display:none;padding:4px 0;">
          {% for item in items %}
          <div class="dc-palette-item" draggable="true"
               data-node-type="{{ item.type }}" data-label="{{ item.label }}" data-category="{{ category }}"
               style="padding:5px 8px;margin:2px 0;cursor:grab;font-size:11px;color:#eaeaea;border-radius:3px;display:flex;align-items:center;gap:6px;border:1px solid transparent;"
               onmouseenter="this.style.background='#1e3a6e';this.style.borderColor='{{ category_colors.get(category, '#2196f3') }}'" onmouseleave="this.style.background='transparent';this.style.borderColor='transparent'"
               title="{{ node_descs.get(item.type, '') }}">
            <span style="color:{{ category_colors.get(category, '#2196f3') }};font-size:8px;">&#9632;</span>
            <span>{{ item.label }}</span>
          </div>
          {% endfor %}
        </div>
      </div>
      {% endfor %}
      {% if not objects %}
      <p style="color:#7a8cb0;font-size:11px;padding:8px;">No palette objects loaded.</p>
      {% endif %}
    </div>

    <!-- Snippets Tab -->
    <div id="snippet-tab" class="dc-tab-content" style="display:none;padding:8px;">
      {% if snippets %}
        {% for s in snippets %}
        <div class="dc-snippet-item" style="padding:8px;margin:4px 0;background:#16213e;border:1px solid #1e3a6e;border-radius:4px;cursor:pointer;"
             onclick="applySnippet('{{ s.id }}')"
             onmouseenter="this.style.borderColor='#2196f3'" onmouseleave="this.style.borderColor='#1e3a6e'">
          <div style="font-size:12px;color:#eaeaea;font-weight:600;">{{ s.name }}</div>
          <div style="font-size:11px;color:#7a8cb0;margin-top:2px;">{{ s.description }}</div>
          <div style="margin-top:4px;">
            <span style="background:#0f3460;color:#2196f3;padding:1px 6px;border-radius:3px;font-size:10px;">{{ s.node_count }} nodes</span>
            {% if s.category %}<span style="background:#0f3460;color:#ff9800;padding:1px 6px;border-radius:3px;font-size:10px;margin-left:4px;">{{ s.category }}</span>{% endif %}
          </div>
        </div>
        {% endfor %}
      {% else %}
        <p style="color:#7a8cb0;font-size:11px;padding:8px;">No snippets available. <a href="/quality/canvas/snippets" style="color:#2196f3;">Browse library</a></p>
      {% endif %}
    </div>

    <!-- Runbooks Tab -->
    <div id="runbook-tab" class="dc-tab-content" style="display:none;padding:8px;">
      {% if runbooks %}
        {% for rb in runbooks %}
        <div class="dc-runbook-item" style="padding:8px;margin:4px 0;background:#16213e;border:1px solid #1e3a6e;border-radius:4px;"
             onmouseenter="this.style.borderColor='#2196f3'" onmouseleave="this.style.borderColor='#1e3a6e'">
          <div style="font-size:12px;color:#eaeaea;font-weight:600;">{{ rb.name }}</div>
          <div style="font-size:11px;color:#7a8cb0;margin-top:2px;">Trigger: {{ rb.trigger_gate or 'Manual' }}</div>
          <button onclick="executeRunbook('{{ rb.id }}')"
                  style="margin-top:6px;padding:3px 10px;background:#2196f3;color:#fff;border:none;border-radius:3px;font-size:11px;cursor:pointer;">Run</button>
        </div>
        {% endfor %}
      {% else %}
        <p style="color:#7a8cb0;font-size:11px;padding:8px;">No runbooks available. <a href="/quality/canvas/runbooks" style="color:#2196f3;">Browse library</a></p>
      {% endif %}
    </div>
  </div>

  <!-- Main Canvas Area -->
  <div class="dc-main" style="flex:1;position:relative;display:flex;flex-direction:column;">
    <!-- Toolbar -->
    <div class="dc-toolbar" style="height:40px;background:#0a1628;border-bottom:1px solid #1e3a6e;display:flex;align-items:center;padding:0 10px;gap:8px;flex-shrink:0;">
      <input type="text" id="design-name" value="{{ design.name or '' }}" placeholder="Design name..."
             style="background:#16213e;border:1px solid #1e3a6e;border-radius:4px;color:#eaeaea;padding:4px 8px;font-size:13px;width:200px;" />
      <div style="width:1px;height:20px;background:#1e3a6e;"></div>
      <button onclick="canvasSave()" title="Save design"
              style="padding:4px 12px;background:#2196f3;color:#fff;border:none;border-radius:4px;font-size:12px;cursor:pointer;">Save</button>
      <button onclick="canvasUndo()" title="Undo"
              style="padding:4px 8px;background:#16213e;color:#eaeaea;border:1px solid #1e3a6e;border-radius:4px;font-size:12px;cursor:pointer;">&#8617;</button>
      <button onclick="canvasRedo()" title="Redo"
              style="padding:4px 8px;background:#16213e;color:#eaeaea;border:1px solid #1e3a6e;border-radius:4px;font-size:12px;cursor:pointer;">&#8618;</button>
      <div style="width:1px;height:20px;background:#1e3a6e;"></div>
      <button onclick="canvasZoomIn()" title="Zoom in"
              style="padding:4px 8px;background:#16213e;color:#eaeaea;border:1px solid #1e3a6e;border-radius:4px;font-size:12px;cursor:pointer;">+</button>
      <button onclick="canvasZoomOut()" title="Zoom out"
              style="padding:4px 8px;background:#16213e;color:#eaeaea;border:1px solid #1e3a6e;border-radius:4px;font-size:12px;cursor:pointer;">&minus;</button>
      <span id="zoom-level" style="color:#7a8cb0;font-size:11px;">100%</span>
      <div style="flex:1;"></div>
      <div class="dc-toolbar-actions" style="display:flex;gap:6px;">
        <div style="position:relative;display:inline-block;">
          <button onclick="toggleExportMenu()" title="Export"
                  style="padding:4px 12px;background:#16213e;color:#eaeaea;border:1px solid #1e3a6e;border-radius:4px;font-size:12px;cursor:pointer;">Export &#9660;</button>
          <div id="export-menu" style="display:none;position:absolute;right:0;top:100%;background:#16213e;border:1px solid #1e3a6e;border-radius:4px;min-width:140px;z-index:100;">
            <a onclick="canvasExport('json')" style="display:block;padding:6px 12px;color:#eaeaea;font-size:12px;cursor:pointer;text-decoration:none;" onmouseenter="this.style.background='#1e3a6e'" onmouseleave="this.style.background='transparent'">Export JSON</a>
            <a onclick="canvasExport('svg')" style="display:block;padding:6px 12px;color:#eaeaea;font-size:12px;cursor:pointer;text-decoration:none;" onmouseenter="this.style.background='#1e3a6e'" onmouseleave="this.style.background='transparent'">Export SVG</a>
            <a onclick="canvasExport('png')" style="display:block;padding:6px 12px;color:#eaeaea;font-size:12px;cursor:pointer;text-decoration:none;" onmouseenter="this.style.background='#1e3a6e'" onmouseleave="this.style.background='transparent'">Export PNG</a>
          </div>
        </div>
        <button onclick="canvasAssess()" title="Run SA-11 assessment"
                style="padding:4px 12px;background:#0f3460;color:#2196f3;border:1px solid #1e3a6e;border-radius:4px;font-size:12px;cursor:pointer;">Assess</button>
        <button onclick="canvasGaps()" title="Gap analysis"
                style="padding:4px 12px;background:#0f3460;color:#ff9800;border:1px solid #1e3a6e;border-radius:4px;font-size:12px;cursor:pointer;">Gaps</button>
        <button onclick="showUQS()" title="Unified Quality Score"
                style="padding:4px 12px;background:#0f3460;color:#4caf50;border:1px solid #1e3a6e;border-radius:4px;font-size:12px;cursor:pointer;">UQS</button>
        <button onclick="showGates()" title="Security gates"
                style="padding:4px 12px;background:#0f3460;color:#e94560;border:1px solid #1e3a6e;border-radius:4px;font-size:12px;cursor:pointer;">Gates</button>
        <a href="/quality/" title="Back to designs"
           style="padding:4px 12px;background:#16213e;color:#7a8cb0;border:1px solid #1e3a6e;border-radius:4px;font-size:12px;text-decoration:none;display:flex;align-items:center;">Back</a>
      </div>
    </div>

    <!-- Canvas Surface -->
    <div class="dc-canvas-area" style="position:relative;flex:1;overflow:auto;">
      <div id="canvas-container" style="width:100%;height:100%;"></div>
    </div>

    <!-- Info Bar -->
    <div class="dc-info" style="height:24px;background:#0a1628;border-top:1px solid #1e3a6e;display:flex;align-items:center;padding:0 10px;font-size:11px;color:#7a8cb0;flex-shrink:0;justify-content:space-between;">
      <span>QDC v1.0 | CUI // SP-CTI | {{ design.id or 'unsaved' }}</span>
      <span id="canvas-status" style="color:#4caf50;">Ready</span>
    </div>
  </div>

  <!-- Right Panel (hidden by default) -->
  <div class="dc-right-panel" id="dc-right-panel" style="width:0;min-width:0;overflow:hidden;background:#0a1628;border-left:1px solid #1e3a6e;transition:width 0.2s,min-width 0.2s;">
    <div class="dc-right-panel-header" style="display:flex;justify-content:space-between;align-items:center;padding:10px 12px;border-bottom:1px solid #1e3a6e;">
      <span id="dc-panel-title" style="font-size:14px;font-weight:600;color:#2196f3;">Results</span>
      <button onclick="closeRightPanel()" style="background:none;border:none;color:#7a8cb0;font-size:16px;cursor:pointer;padding:2px 6px;" title="Close panel">&times;</button>
    </div>
    <div class="dc-right-panel-body" id="dc-panel-body" style="padding:12px;overflow-y:auto;height:calc(100% - 44px);color:#eaeaea;font-size:13px;">
    </div>
  </div>
</div>

<style>
/* QDC Canvas Styles */
.dc-wrap { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; }
.dc-tab { transition: color 0.15s, border-bottom-color 0.15s; border-bottom: 2px solid transparent; }
.dc-tab:hover { color: #2196f3 !important; }
.dc-tab.active { color: #2196f3 !important; border-bottom: 2px solid #2196f3 !important; }
.dc-palette-item:active { cursor: grabbing; }
.dc-palette-header .dc-chevron { font-size: 10px; }
.dc-palette-header.open .dc-chevron { transform: rotate(180deg); }
.dc-toolbar button:hover { opacity: 0.85; }
.dc-right-panel.open { width: 360px !important; min-width: 360px !important; }

/* Scrollbar styling */
.dc-sidebar::-webkit-scrollbar,
.dc-right-panel-body::-webkit-scrollbar { width: 6px; }
.dc-sidebar::-webkit-scrollbar-track,
.dc-right-panel-body::-webkit-scrollbar-track { background: #0a1628; }
.dc-sidebar::-webkit-scrollbar-thumb,
.dc-right-panel-body::-webkit-scrollbar-thumb { background: #1e3a6e; border-radius: 3px; }
.dc-sidebar::-webkit-scrollbar-thumb:hover,
.dc-right-panel-body::-webkit-scrollbar-thumb:hover { background: #2196f3; }

/* Canvas drop target */
#canvas-container { background: radial-gradient(circle at 1px 1px, #1e3a6e22 1px, transparent 0); background-size: 24px 24px; }
#canvas-container.drag-over { outline: 2px dashed #2196f3; outline-offset: -4px; }

/* Assessment result badges in right panel */
.dc-result-pass { color: #4caf50; }
.dc-result-warn { color: #ff9800; }
.dc-result-fail { color: #e94560; }
.dc-result-row { padding: 6px 0; border-bottom: 1px solid #1e3a6e; }
.dc-result-row:last-child { border-bottom: none; }
.dc-score-badge { display: inline-block; padding: 2px 10px; border-radius: 12px; font-weight: bold; font-size: 13px; }
</style>

<script>
(function() {
  'use strict';

  // ── Global config ─────────────────────────────────────────────
  window.DESIGN_ID = {{ (design.id|tojson) if design and design.id else 'null' }};
  window.API_BASE = '/quality/api';
  window.NODE_DESCS = {{ node_descs|tojson if node_descs else '{}' }};
  window.CANVAS_CONFIG = {{ canvas_config|tojson if canvas_config else '{}' }};

  var _undoStack = [];
  var _redoStack = [];
  var _zoom = 100;

  // ── Tab switching ─────────────────────────────────────────────
  window.switchTab = function(tabId, el) {
    document.querySelectorAll('.dc-tab-content').forEach(function(c) { c.style.display = 'none'; });
    document.querySelectorAll('.dc-tab').forEach(function(t) {
      t.classList.remove('active');
      t.style.color = '#7a8cb0';
      t.style.borderBottom = '2px solid transparent';
    });
    var tab = document.getElementById(tabId);
    if (tab) tab.style.display = 'block';
    if (el) {
      el.classList.add('active');
      el.style.color = '#2196f3';
      el.style.borderBottom = '2px solid #2196f3';
    }
  };

  // ── Palette group toggle ──────────────────────────────────────
  window.togglePaletteGroup = function(header) {
    var items = header.nextElementSibling;
    var isOpen = items.style.display !== 'none';
    items.style.display = isOpen ? 'none' : 'block';
    header.classList.toggle('open', !isOpen);
  };

  // ── Palette search ────────────────────────────────────────────
  var searchInput = document.getElementById('palette-search');
  if (searchInput) {
    searchInput.addEventListener('input', function() {
      var q = this.value.toLowerCase();
      document.querySelectorAll('.dc-palette-item').forEach(function(item) {
        var text = item.textContent.toLowerCase();
        item.style.display = text.indexOf(q) >= 0 ? 'flex' : 'none';
      });
    });
  }

  // ── Canvas operations (stubs — implemented in qdc-canvas.js) ──
  window.canvasSave = function() {
    var name = document.getElementById('design-name').value;
    setStatus('Saving...');
    fetch(API_BASE + '/designs' + (DESIGN_ID ? '/' + DESIGN_ID : ''), {
      method: DESIGN_ID ? 'PUT' : 'POST',
      headers: {'Content-Type': 'application/json'},
      body: JSON.stringify({name: name, canvas_data: window._canvasData || {}})
    })
    .then(function(r) { return r.json(); })
    .then(function(d) {
      if (d.status === 'ok') {
        if (d.design_id && !DESIGN_ID) {
          DESIGN_ID = d.design_id;
          window.history.replaceState(null, '', '/quality/canvas/' + d.design_id);
        }
        setStatus('Saved');
      } else {
        setStatus('Save failed: ' + (d.error || 'Unknown'));
      }
    })
    .catch(function(e) { setStatus('Error: ' + e.message); });
  };

  window.canvasUndo = function() {
    if (_undoStack.length > 0) {
      _redoStack.push(JSON.stringify(window._canvasData || {}));
      window._canvasData = JSON.parse(_undoStack.pop());
      setStatus('Undo');
    }
  };

  window.canvasRedo = function() {
    if (_redoStack.length > 0) {
      _undoStack.push(JSON.stringify(window._canvasData || {}));
      window._canvasData = JSON.parse(_redoStack.pop());
      setStatus('Redo');
    }
  };

  window.canvasZoomIn = function() {
    _zoom = Math.min(_zoom + 10, 200);
    document.getElementById('zoom-level').textContent = _zoom + '%';
    var c = document.getElementById('canvas-container');
    if (c) c.style.transform = 'scale(' + (_zoom / 100) + ')';
  };

  window.canvasZoomOut = function() {
    _zoom = Math.max(_zoom - 10, 30);
    document.getElementById('zoom-level').textContent = _zoom + '%';
    var c = document.getElementById('canvas-container');
    if (c) c.style.transform = 'scale(' + (_zoom / 100) + ')';
  };

  window.canvasAssess = function() {
    if (!DESIGN_ID) { alert('Save the design first.'); return; }
    openRightPanel('SA-11 Assessment');
    setStatus('Assessing...');
    fetch(API_BASE + '/designs/' + DESIGN_ID + '/assess', {method: 'POST'})
      .then(function(r) { return r.json(); })
      .then(function(d) {
        if (d.status === 'ok' && d.assessment) {
          renderAssessment(d.assessment);
          setStatus('Assessment complete');
        } else {
          document.getElementById('dc-panel-body').innerHTML = '<p class="dc-result-fail">Assessment failed: ' + (d.error || 'Unknown') + '</p>';
          setStatus('Assessment failed');
        }
      })
      .catch(function(e) {
        document.getElementById('dc-panel-body').innerHTML = '<p class="dc-result-fail">Error: ' + e.message + '</p>';
        setStatus('Error');
      });
  };

  window.canvasGaps = function() {
    if (!DESIGN_ID) { alert('Save the design first.'); return; }
    openRightPanel('Gap Analysis');
    setStatus('Analyzing gaps...');
    fetch(API_BASE + '/designs/' + DESIGN_ID + '/gaps')
      .then(function(r) { return r.json(); })
      .then(function(d) {
        if (d.status === 'ok') {
          renderGaps(d.gaps || []);
          setStatus('Gap analysis complete');
        } else {
          document.getElementById('dc-panel-body').innerHTML = '<p class="dc-result-fail">' + (d.error || 'No gaps data') + '</p>';
        }
      })
      .catch(function(e) {
        document.getElementById('dc-panel-body').innerHTML = '<p class="dc-result-fail">Error: ' + e.message + '</p>';
      });
  };

  window.showUQS = function() {
    if (!DESIGN_ID) { alert('Save the design first.'); return; }
    openRightPanel('Unified Quality Score');
    fetch(API_BASE + '/designs/' + DESIGN_ID + '/uqs')
      .then(function(r) { return r.json(); })
      .then(function(d) {
        if (d.status === 'ok') {
          renderUQS(d);
        } else {
          document.getElementById('dc-panel-body').innerHTML = '<p class="dc-result-fail">' + (d.error || 'No UQS data') + '</p>';
        }
      })
      .catch(function(e) {
        document.getElementById('dc-panel-body').innerHTML = '<p class="dc-result-fail">Error: ' + e.message + '</p>';
      });
  };

  window.showGates = function() {
    if (!DESIGN_ID) { alert('Save the design first.'); return; }
    openRightPanel('Security Gates');
    fetch(API_BASE + '/designs/' + DESIGN_ID + '/gates')
      .then(function(r) { return r.json(); })
      .then(function(d) {
        if (d.status === 'ok') {
          renderGates(d.gates || []);
        } else {
          document.getElementById('dc-panel-body').innerHTML = '<p class="dc-result-fail">' + (d.error || 'No gate data') + '</p>';
        }
      })
      .catch(function(e) {
        document.getElementById('dc-panel-body').innerHTML = '<p class="dc-result-fail">Error: ' + e.message + '</p>';
      });
  };

  window.canvasExport = function(fmt) {
    document.getElementById('export-menu').style.display = 'none';
    if (!DESIGN_ID) { alert('Save the design first.'); return; }
    window.open(API_BASE + '/designs/' + DESIGN_ID + '/export?format=' + fmt, '_blank');
  };

  window.toggleExportMenu = function() {
    var m = document.getElementById('export-menu');
    m.style.display = m.style.display === 'none' ? 'block' : 'none';
  };

  // ── Right panel helpers ───────────────────────────────────────
  window.openRightPanel = function(title) {
    var panel = document.getElementById('dc-right-panel');
    panel.classList.add('open');
    document.getElementById('dc-panel-title').textContent = title;
    document.getElementById('dc-panel-body').innerHTML = '<p style="color:#7a8cb0;">Loading...</p>';
  };

  window.closeRightPanel = function() {
    document.getElementById('dc-right-panel').classList.remove('open');
  };

  // ── Render helpers ────────────────────────────────────────────
  function renderAssessment(a) {
    var body = document.getElementById('dc-panel-body');
    var scoreColor = a.uqs_score >= 80 ? '#4caf50' : a.uqs_score >= 60 ? '#ff9800' : '#e94560';
    var html = '<div style="text-align:center;margin:12px 0;">';
    html += '<div class="dc-score-badge" style="background:' + scoreColor + '22;color:' + scoreColor + ';font-size:24px;padding:8px 20px;">' + (a.uqs_score || 0).toFixed(1) + '</div>';
    html += '<div style="color:#7a8cb0;margin-top:4px;">UQS Score</div>';
    html += '</div>';
    if (a.findings && a.findings.length) {
      html += '<div style="margin-top:12px;">';
      a.findings.forEach(function(f) {
        var cls = f.severity === 'CAT1' ? 'dc-result-fail' : f.severity === 'CAT2' ? 'dc-result-warn' : 'dc-result-pass';
        html += '<div class="dc-result-row"><span class="' + cls + '">[' + f.severity + ']</span> ' + f.message + '</div>';
      });
      html += '</div>';
    }
    body.innerHTML = html;
  }

  function renderGaps(gaps) {
    var body = document.getElementById('dc-panel-body');
    if (!gaps.length) { body.innerHTML = '<p class="dc-result-pass">No gaps found.</p>'; return; }
    var html = '<div style="margin-bottom:8px;color:#7a8cb0;">' + gaps.length + ' gap(s) found</div>';
    gaps.forEach(function(g) {
      var cls = g.severity === 'high' ? 'dc-result-fail' : g.severity === 'medium' ? 'dc-result-warn' : 'dc-result-pass';
      html += '<div class="dc-result-row"><span class="' + cls + '">' + (g.severity || 'info').toUpperCase() + '</span> ';
      html += '<strong>' + (g.rule_id || '') + '</strong> ' + (g.title || g.description || '') + '</div>';
    });
    body.innerHTML = html;
  }

  function renderUQS(d) {
    var body = document.getElementById('dc-panel-body');
    var s = d.uqs_score || 0;
    var scoreColor = s >= 80 ? '#4caf50' : s >= 60 ? '#ff9800' : '#e94560';
    var html = '<div style="text-align:center;margin:12px 0;">';
    html += '<div class="dc-score-badge" style="background:' + scoreColor + '22;color:' + scoreColor + ';font-size:32px;padding:12px 28px;">' + s.toFixed(1) + '</div>';
    html += '<div style="color:#7a8cb0;margin-top:6px;">Unified Quality Score</div></div>';
    if (d.dimensions) {
      html += '<table style="width:100%;border-collapse:collapse;margin-top:12px;">';
      Object.keys(d.dimensions).forEach(function(k) {
        var v = d.dimensions[k];
        var c = v >= 80 ? '#4caf50' : v >= 60 ? '#ff9800' : '#e94560';
        html += '<tr style="border-bottom:1px solid #1e3a6e;"><td style="padding:6px;color:#eaeaea;">' + k + '</td><td style="padding:6px;text-align:right;color:' + c + ';font-weight:bold;">' + v.toFixed(1) + '</td></tr>';
      });
      html += '</table>';
    }
    body.innerHTML = html;
  }

  function renderGates(gates) {
    var body = document.getElementById('dc-panel-body');
    if (!gates.length) { body.innerHTML = '<p style="color:#7a8cb0;">No gates evaluated.</p>'; return; }
    var html = '';
    gates.forEach(function(g) {
      var icon = g.passed ? '<span style="color:#4caf50;">&#10003;</span>' : '<span style="color:#e94560;">&#10007;</span>';
      html += '<div class="dc-result-row">' + icon + ' <strong>' + g.name + '</strong>';
      if (g.message) html += '<div style="color:#7a8cb0;font-size:12px;margin-top:2px;">' + g.message + '</div>';
      html += '</div>';
    });
    body.innerHTML = html;
  }

  function setStatus(msg) {
    var el = document.getElementById('canvas-status');
    if (el) el.textContent = msg;
  }

  // ── Snippet / Runbook actions ─────────────────────────────────
  window.applySnippet = function(snippetId) {
    fetch(API_BASE + '/snippets/' + snippetId)
      .then(function(r) { return r.json(); })
      .then(function(d) {
        if (d.status === 'ok' && d.snippet) {
          var graphData = d.snippet.graph_json;
          if (typeof graphData === 'string') {
            try { graphData = JSON.parse(graphData); } catch(e) { graphData = null; }
          }
          if (graphData) {
            // Render snippet nodes on canvas
            renderGraphNodes(graphData);
            setStatus('Snippet applied: ' + (d.snippet.name || snippetId));
          } else {
            setStatus('Snippet has no graph data');
          }
        } else {
          setStatus('Snippet not found');
        }
      })
      .catch(function(e) { setStatus('Snippet error: ' + e.message); });
  };

  window.executeRunbook = function(runbookId) {
    if (!DESIGN_ID) { alert('Save the design first.'); return; }
    openRightPanel('Runbook Execution');
    fetch(API_BASE + '/runbooks/' + runbookId + '/execute', {
      method: 'POST',
      headers: {'Content-Type': 'application/json'},
      body: JSON.stringify({design_id: DESIGN_ID})
    })
    .then(function(r) { return r.json(); })
    .then(function(d) {
      var body = document.getElementById('dc-panel-body');
      if (d.status === 'ok') {
        body.innerHTML = '<p class="dc-result-pass">Runbook executed successfully.</p><pre style="background:#16213e;padding:8px;border-radius:4px;font-size:11px;color:#eaeaea;white-space:pre-wrap;">' + JSON.stringify(d.result, null, 2) + '</pre>';
      } else {
        body.innerHTML = '<p class="dc-result-fail">Execution failed: ' + (d.error || 'Unknown') + '</p>';
      }
    })
    .catch(function(e) {
      document.getElementById('dc-panel-body').innerHTML = '<p class="dc-result-fail">Error: ' + e.message + '</p>';
    });
  };

  // ── Canvas Rendering ─────────────────────────────────────────
  var _nodeColors = {
    'gate-': '#e94560', 'src-': '#27ae60', 'con-': '#f39c12',
    'xc-': '#9c27b0', 'tgt-': '#2196f3'
  };

  function getNodeColor(type) {
    for (var prefix in _nodeColors) {
      if (type && type.indexOf(prefix) === 0) return _nodeColors[prefix];
    }
    return '#5a6e8c';
  }

  window.renderGraphNodes = function(graphData) {
    var container = document.getElementById('canvas-container');
    if (!container || !graphData) return;

    var nodes = graphData.nodes || [];
    var edges = graphData.edges || [];

    // Clear existing
    container.innerHTML = '';
    window._canvasData = graphData;

    // Render nodes as positioned divs
    nodes.forEach(function(n) {
      var div = document.createElement('div');
      div.id = 'node-' + n.id;
      div.className = 'canvas-node';
      div.setAttribute('data-node-id', n.id);
      div.setAttribute('data-node-type', n.type || '');
      var color = getNodeColor(n.type);
      div.style.cssText = 'position:absolute;left:' + (n.x || 50) + 'px;top:' + (n.y || 50) + 'px;' +
        'width:' + (n.w || 130) + 'px;height:' + (n.h || 50) + 'px;' +
        'background:#16213e;border:2px solid ' + color + ';border-radius:6px;' +
        'display:flex;align-items:center;justify-content:center;' +
        'color:#eaeaea;font-size:11px;font-weight:600;cursor:move;' +
        'text-align:center;padding:4px 8px;box-sizing:border-box;' +
        'transition:box-shadow 0.15s;z-index:2;';
      div.textContent = n.label || n.type || '?';
      div.title = (window.NODE_DESCS || {})[n.type] || n.label || '';

      // Hover effect
      div.onmouseenter = function() { this.style.boxShadow = '0 0 12px ' + color + '66'; };
      div.onmouseleave = function() { this.style.boxShadow = 'none'; };

      container.appendChild(div);
    });

    // Render edges as SVG lines
    if (edges.length > 0) {
      var svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
      svg.style.cssText = 'position:absolute;top:0;left:0;width:100%;height:100%;pointer-events:none;z-index:1;';
      svg.setAttribute('width', '100%');
      svg.setAttribute('height', '100%');

      var nodeMap = {};
      nodes.forEach(function(n) {
        nodeMap[n.id] = { x: (n.x || 50) + (n.w || 130) / 2, y: (n.y || 50) + (n.h || 50) / 2 };
      });

      edges.forEach(function(e) {
        var src = nodeMap[e.source];
        var tgt = nodeMap[e.target];
        if (src && tgt) {
          var line = document.createElementNS('http://www.w3.org/2000/svg', 'line');
          line.setAttribute('x1', src.x);
          line.setAttribute('y1', src.y);
          line.setAttribute('x2', tgt.x);
          line.setAttribute('y2', tgt.y);
          line.setAttribute('stroke', '#1e3a6e');
          line.setAttribute('stroke-width', '2');
          line.setAttribute('stroke-dasharray', '6,3');
          svg.appendChild(line);

          // Arrow at target
          var angle = Math.atan2(tgt.y - src.y, tgt.x - src.x);
          var arrowLen = 10;
          var ax = tgt.x - arrowLen * Math.cos(angle - 0.4);
          var ay = tgt.y - arrowLen * Math.sin(angle - 0.4);
          var bx = tgt.x - arrowLen * Math.cos(angle + 0.4);
          var by = tgt.y - arrowLen * Math.sin(angle + 0.4);
          var arrow = document.createElementNS('http://www.w3.org/2000/svg', 'polygon');
          arrow.setAttribute('points', tgt.x + ',' + tgt.y + ' ' + ax + ',' + ay + ' ' + bx + ',' + by);
          arrow.setAttribute('fill', '#2196f3');
          svg.appendChild(arrow);
        }
      });

      container.appendChild(svg);
    }

    setStatus(nodes.length + ' nodes, ' + edges.length + ' edges');
  };

  // ── Drag-and-drop from palette ──────────────────────────────
  document.querySelectorAll('.dc-palette-item').forEach(function(item) {
    item.addEventListener('dragstart', function(e) {
      e.dataTransfer.setData('application/json', JSON.stringify({
        type: item.getAttribute('data-node-type'),
        label: item.getAttribute('data-label') || item.textContent.trim()
      }));
    });
  });

  var canvasEl = document.getElementById('canvas-container');
  if (canvasEl) {
    canvasEl.addEventListener('dragover', function(e) {
      e.preventDefault();
      canvasEl.classList.add('drag-over');
    });
    canvasEl.addEventListener('dragleave', function() {
      canvasEl.classList.remove('drag-over');
    });
    canvasEl.addEventListener('drop', function(e) {
      e.preventDefault();
      canvasEl.classList.remove('drag-over');
      try {
        var data = JSON.parse(e.dataTransfer.getData('application/json'));
        var rect = canvasEl.getBoundingClientRect();
        var x = Math.round(e.clientX - rect.left);
        var y = Math.round(e.clientY - rect.top);
        var nodeId = 'n-' + Math.random().toString(36).substr(2, 8);
        var newNode = {id: nodeId, type: data.type, label: data.label, x: x - 65, y: y - 25, w: 130, h: 50};

        // Add to canvas data
        if (!window._canvasData) window._canvasData = {nodes: [], edges: []};
        window._canvasData.nodes.push(newNode);

        // Render the new node
        renderGraphNodes(window._canvasData);
        setStatus('Added: ' + data.label);
      } catch(err) {
        setStatus('Drop failed: ' + err.message);
      }
    });
  }

  // ── Load initial graph from design data ─────────────────────
  var _initialGraph = {{ (design.graph_json if design and design.graph_json else '{}')|safe }};
  if (typeof _initialGraph === 'string') {
    try { _initialGraph = JSON.parse(_initialGraph); } catch(e) { _initialGraph = {nodes:[], edges:[]}; }
  }
  if (_initialGraph && (_initialGraph.nodes || []).length > 0) {
    renderGraphNodes(_initialGraph);
  } else {
    setStatus('Empty canvas — drag nodes from palette or use a template');
  }

  // ── Close export menu on outside click ────────────────────────
  document.addEventListener('click', function(e) {
    var menu = document.getElementById('export-menu');
    if (menu && menu.style.display !== 'none' && !e.target.closest('[onclick*="toggleExportMenu"]') && !e.target.closest('#export-menu')) {
      menu.style.display = 'none';
    }
  });

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