{% extends "base.html" %}
{% block title %}AADC — Cross-Design Impact Graph{% endblock %}
{% block extra_head %}
<link rel="stylesheet" href="/static/css/agentic-canvas.css">
<style>
#impact-container {
  display: flex;
  height: calc(100vh - 120px);
  background: #080f1e;
  color: #c8d8f0;
}
#graph-panel {
  flex: 1;
  position: relative;
  border-right: 1px solid #1e3a6e;
}
#sigma-container {
  width: 100%;
  height: 100%;
}
#info-panel {
  width: 320px;
  padding: 16px;
  overflow-y: auto;
  background: #0a1428;
  font-size: 13px;
}
.risk-summary-bar {
  display: flex;
  gap: 12px;
  margin-bottom: 16px;
  flex-wrap: wrap;
}
.risk-metric {
  flex: 1;
  min-width: 80px;
  background: #0f1a2e;
  border: 1px solid #1e3a6e;
  border-radius: 6px;
  padding: 8px 10px;
  text-align: center;
}
.risk-metric .val {
  font-size: 22px;
  font-weight: bold;
  color: #3b82f6;
}
.risk-metric .lbl {
  font-size: 10px;
  color: #6a7a9a;
  margin-top: 2px;
}
#node-detail {
  background: #0f1a2e;
  border: 1px solid #1e3a6e;
  border-radius: 6px;
  padding: 12px;
  margin-top: 12px;
  display: none;
}
.legend-item {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  margin-bottom: 4px;
}
.legend-dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  flex-shrink: 0;
}
#link-form {
  background: #0f1a2e;
  border: 1px solid #1e3a6e;
  border-radius: 6px;
  padding: 12px;
  margin-top: 12px;
}
#link-form select, #link-form input {
  width: 100%;
  background: #1a2a40;
  border: 1px solid #2a3a5b;
  color: #c8d8f0;
  border-radius: 4px;
  padding: 5px 8px;
  font-size: 12px;
  margin-bottom: 6px;
  box-sizing: border-box;
}
.btn-sm {
  background: #1a4a6e;
  color: #fff;
  border: none;
  border-radius: 4px;
  padding: 5px 12px;
  cursor: pointer;
  font-size: 12px;
}
.btn-sm:hover { background: #2a5a8e; }
.btn-danger {
  background: #7f1d1d;
  color: #fca5a5;
  border: none;
  border-radius: 4px;
  padding: 3px 8px;
  cursor: pointer;
  font-size: 11px;
}
.btn-danger:hover { background: #991b1b; }
</style>
{% endblock %}
{% block content %}
<div style="padding:10px 16px 6px;background:#0a1428;border-bottom:1px solid #1e3a6e;display:flex;justify-content:space-between;align-items:center">
  <div>
    <a href="/agentic-ai/" style="color:#6a7a9a;text-decoration:none;font-size:12px">← AADC</a>
    <span style="color:#2a3a5b;margin:0 6px">/</span>
    <strong style="color:#a5b4fc">Cross-Design Impact Graph</strong>
  </div>
  <button class="btn-sm" onclick="loadGraph()">↻ Refresh</button>
</div>

<div id="impact-container">
  <div id="graph-panel">
    <div id="sigma-container"></div>
    <div id="graph-loading" style="position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:#080f1e;z-index:10;color:#6a7a9a">
      Loading graph…
    </div>
  </div>

  <div id="info-panel">
    <h3 style="margin:0 0 12px;font-size:14px;color:#a5b4fc">Risk Summary</h3>
    <div class="risk-summary-bar" id="risk-summary-bar">
      <div class="risk-metric"><div class="val" id="rs-total">—</div><div class="lbl">Designs</div></div>
      <div class="risk-metric"><div class="val" id="rs-high" style="color:#e74c3c">—</div><div class="lbl">High Risk</div></div>
      <div class="risk-metric"><div class="val" id="rs-blast" style="color:#f39c12">—</div><div class="lbl">Max Blast Radius</div></div>
    </div>

    <div id="node-detail">
      <strong id="nd-name" style="font-size:13px;color:#a5b4fc"></strong>
      <div style="margin-top:8px;font-size:12px">
        <div>Autonomy: <span id="nd-autonomy" style="font-weight:bold"></span></div>
        <div>Score: <span id="nd-score"></span></div>
        <div>Blast Radius: <span id="nd-blast" style="font-weight:bold;color:#f39c12"></span> downstream</div>
      </div>
      <div style="margin-top:8px">
        <a id="nd-link" href="#" class="btn-sm" style="text-decoration:none;display:inline-block">Open Design →</a>
      </div>
      <div style="margin-top:10px">
        <strong style="font-size:11px;color:#6a7a9a">Outgoing Links</strong>
        <div id="nd-links" style="margin-top:4px;font-size:11px"></div>
      </div>
    </div>

    <div class="link-form" id="link-form" style="display:none">
      <strong style="font-size:12px;color:#c8d8f0">+ Add Design Link</strong>
      <div style="margin-top:8px">
        <div style="font-size:11px;color:#6a7a9a;margin-bottom:3px">From design (selected)</div>
        <div id="lf-src" style="font-size:12px;color:#a5b4fc;margin-bottom:8px">—</div>
        <div style="font-size:11px;color:#6a7a9a;margin-bottom:3px">To design</div>
        <select id="lf-tgt"><option value="">— select —</option></select>
        <div style="font-size:11px;color:#6a7a9a;margin-bottom:3px">Link type</div>
        <select id="lf-type">
          <option value="calls">calls</option>
          <option value="delegates">delegates</option>
          <option value="shares_model">shares_model</option>
          <option value="shares_data">shares_data</option>
        </select>
        <div style="font-size:11px;color:#6a7a9a;margin-bottom:3px">Label (optional)</div>
        <input type="text" id="lf-label" placeholder="e.g. routes task to">
        <button class="btn-sm" onclick="addLink()" style="width:100%">Add Link</button>
      </div>
    </div>

    <div style="margin-top:16px">
      <strong style="font-size:12px;color:#6a7a9a">Autonomy Legend</strong>
      <div style="margin-top:6px" id="autonomy-legend"></div>
    </div>
  </div>
</div>

<script src="{{ url_for('static', filename='vendor/sigma/graphology.min.js') }}"></script>
<script src="{{ url_for('static', filename='vendor/sigma/sigma.min.js') }}"></script>
<script>
const AUTONOMY_COLORS = {
  0: "#27ae60", 1: "#2ecc71", 2: "#f39c12",
  3: "#e67e22", 4: "#e74c3c", 5: "#8e44ad",
};
const AUTONOMY_LABELS = {
  0: "L0 Human-Operated", 1: "L1 Human-Delegated",
  2: "L2 Human-Supervised", 3: "L3 Human-Initiated",
  4: "L4 Fully Autonomous", 5: "L5 Unconstrained",
};

let _graphData = null;
let _sigmaInstance = null;
let _selectedNode = null;
let _allDesigns = [];

// ── Legend ────────────────────────────────────────────────────────────────
function _buildLegend() {
  const el = document.getElementById("autonomy-legend");
  if (!el) return;
  el.innerHTML = Object.entries(AUTONOMY_LABELS).map(([lvl, lbl]) =>
    `<div class="legend-item">
      <div class="legend-dot" style="background:${AUTONOMY_COLORS[lvl]}"></div>
      <span>${lbl}</span>
    </div>`
  ).join("");
}

// ── Load graph ────────────────────────────────────────────────────────────
function loadGraph() {
  document.getElementById("graph-loading").style.display = "flex";
  fetch("/api/agentic-ai/impact-graph")
    .then(r => r.json())
    .then(data => {
      _graphData = data;
      _allDesigns = data.nodes || [];
      _updateRiskSummary(data.risk_summary || {});
      _populateLinkDropdown(data.nodes || []);
      _renderSigma(data);
      document.getElementById("graph-loading").style.display = "none";
    })
    .catch(err => {
      document.getElementById("graph-loading").innerHTML =
        `<div style="color:#e74c3c">Failed to load graph: ${err}</div>`;
    });
}

function _updateRiskSummary(rs) {
  document.getElementById("rs-total").textContent = rs.total_designs ?? "0";
  document.getElementById("rs-high").textContent = rs.high_risk_count ?? "0";
  document.getElementById("rs-blast").textContent = rs.max_blast_radius ?? "0";
}

function _populateLinkDropdown(nodes) {
  const sel = document.getElementById("lf-tgt");
  sel.innerHTML = '<option value="">— select —</option>';
  nodes.forEach(n => {
    const opt = document.createElement("option");
    opt.value = n.id;
    opt.textContent = n.label || n.id;
    sel.appendChild(opt);
  });
}

// ── Sigma.js rendering ────────────────────────────────────────────────────
function _renderSigma(data) {
  if (_sigmaInstance) {
    _sigmaInstance.kill();
    _sigmaInstance = null;
  }

  const graph = new graphology.Graph({ multi: false, type: "directed" });

  (data.nodes || []).forEach(function (n) {
    const level = parseInt((n.autonomy_level || "L0").replace("L", ""), 10) || 0;
    const color = AUTONOMY_COLORS[level] || "#3b82f6";
    const size = Math.max(8, 8 + (n.blast_radius || 0) * 3);
    graph.addNode(n.id, {
      label: n.label || n.id,
      x: Math.random() * 10 - 5,
      y: Math.random() * 10 - 5,
      size,
      color,
      score: n.score,
      autonomy_level: n.autonomy_level,
      blast_radius: n.blast_radius,
    });
  });

  (data.edges || []).forEach(function (e, i) {
    if (!graph.hasNode(e.source) || !graph.hasNode(e.target)) return;
    try {
      graph.addEdge(e.source, e.target, {
        label: e.label || e.link_type || "",
        color: "#2a3a5b",
        size: 2,
      });
    } catch (_) {}
  });

  _sigmaInstance = new Sigma(graph, document.getElementById("sigma-container"), {
    renderLabels: true,
    defaultNodeColor: "#3b82f6",
    defaultEdgeColor: "#2a3a5b",
    labelSize: 11,
    labelColor: { color: "#c8d8f0" },
    edgeLabelSize: 10,
  });

  // Force-layout approximation via random jitter + centering
  _forceLayout(graph);
  _sigmaInstance.refresh();

  _sigmaInstance.on("clickNode", function (e) {
    _selectNode(e.node, graph.getNodeAttributes(e.node));
  });
  _sigmaInstance.on("clickStage", function () {
    _clearSelection();
  });
}

function _forceLayout(graph) {
  const nodes = graph.nodes();
  if (!nodes.length) return;
  // Simple spring layout — 50 iterations
  for (let iter = 0; iter < 50; iter++) {
    const forces = {};
    nodes.forEach(n => { forces[n] = { x: 0, y: 0 }; });

    // Repulsion
    for (let i = 0; i < nodes.length; i++) {
      for (let j = i + 1; j < nodes.length; j++) {
        const a = graph.getNodeAttributes(nodes[i]);
        const b = graph.getNodeAttributes(nodes[j]);
        const dx = a.x - b.x;
        const dy = a.y - b.y;
        const dist = Math.max(0.1, Math.sqrt(dx * dx + dy * dy));
        const f = 2 / (dist * dist);
        forces[nodes[i]].x += dx / dist * f;
        forces[nodes[i]].y += dy / dist * f;
        forces[nodes[j]].x -= dx / dist * f;
        forces[nodes[j]].y -= dy / dist * f;
      }
    }

    // Attraction (edges)
    graph.edges().forEach(e => {
      const src = graph.source(e);
      const tgt = graph.target(e);
      const a = graph.getNodeAttributes(src);
      const b = graph.getNodeAttributes(tgt);
      const dx = b.x - a.x;
      const dy = b.y - a.y;
      const dist = Math.max(0.1, Math.sqrt(dx * dx + dy * dy));
      const f = dist * 0.05;
      forces[src].x += dx / dist * f;
      forces[src].y += dy / dist * f;
      forces[tgt].x -= dx / dist * f;
      forces[tgt].y -= dy / dist * f;
    });

    nodes.forEach(n => {
      const attr = graph.getNodeAttributes(n);
      graph.setNodeAttribute(n, "x", attr.x + forces[n].x * 0.1);
      graph.setNodeAttribute(n, "y", attr.y + forces[n].y * 0.1);
    });
  }
}

// ── Node selection ────────────────────────────────────────────────────────
function _selectNode(nodeId, attrs) {
  _selectedNode = nodeId;
  const detail = document.getElementById("node-detail");
  detail.style.display = "block";

  document.getElementById("nd-name").textContent = attrs.label || nodeId;
  document.getElementById("nd-autonomy").textContent = attrs.autonomy_level || "L0";
  document.getElementById("nd-autonomy").style.color = AUTONOMY_COLORS[
    parseInt((attrs.autonomy_level || "L0").replace("L", ""), 10) || 0
  ];
  const score = attrs.score || 0;
  const scoreEl = document.getElementById("nd-score");
  scoreEl.textContent = `${score.toFixed(1)}%`;
  scoreEl.style.color = score >= 70 ? "#27ae60" : score >= 50 ? "#f39c12" : "#e74c3c";
  document.getElementById("nd-blast").textContent = attrs.blast_radius || 0;
  document.getElementById("nd-link").href = `/agentic-ai/canvas/${nodeId}`;

  // Show outgoing links
  const linksEl = document.getElementById("nd-links");
  if (_graphData) {
    const outgoing = (_graphData.edges || []).filter(e => e.source === nodeId);
    if (outgoing.length) {
      const tgtMap = {};
      (_graphData.nodes || []).forEach(n => { tgtMap[n.id] = n.label || n.id; });
      linksEl.innerHTML = outgoing.map(e =>
        `<div style="display:flex;justify-content:space-between;align-items:center;margin-bottom:3px">
          <span>→ ${_esc(tgtMap[e.target] || e.target)} <em style="color:#6a7a9a">(${_esc(e.link_type || "")})</em></span>
          <button class="btn-danger" onclick="deleteLink('${nodeId}','${e.target}','${e.link_type}')">✕</button>
        </div>`
      ).join("");
    } else {
      linksEl.innerHTML = '<span style="color:#6a7a9a">No outgoing links</span>';
    }
  }

  // Show add-link form
  const lf = document.getElementById("link-form");
  lf.style.display = "block";
  document.getElementById("lf-src").textContent = attrs.label || nodeId;
}

function _clearSelection() {
  _selectedNode = null;
  document.getElementById("node-detail").style.display = "none";
  document.getElementById("link-form").style.display = "none";
}

// ── Link management ───────────────────────────────────────────────────────
function addLink() {
  if (!_selectedNode) return;
  const tgt = document.getElementById("lf-tgt").value;
  const type = document.getElementById("lf-type").value;
  const label = document.getElementById("lf-label").value;
  if (!tgt) { alert("Select a target design."); return; }

  fetch(`/api/agentic-ai/designs/${_selectedNode}/links`, {
    method: "POST",
    headers: { "Content-Type": "application/json" },
    body: JSON.stringify({ tgt_design_id: tgt, link_type: type, link_label: label }),
  })
    .then(r => r.json())
    .then(() => { loadGraph(); })
    .catch(err => alert("Failed: " + err));
}

function deleteLink(srcId, tgtId, linkType) {
  if (!confirm(`Delete link: ${srcId} → ${tgtId} (${linkType})?`)) return;
  // Find the link ID from _graphData edges — we need the DB id
  // Since we only have src/tgt/type, use a DELETE on the links endpoint filtered by tgt
  fetch(`/api/agentic-ai/designs/${srcId}/links`, { method: "GET" })
    .then(r => r.json())
    .then(links => {
      const lnk = (links || []).find(l =>
        l.tgt_design_id === tgtId && l.link_type === linkType
      );
      if (!lnk) return;
      return fetch(`/api/agentic-ai/designs/${srcId}/links/${lnk.id}`, { method: "DELETE" });
    })
    .then(() => loadGraph())
    .catch(err => alert("Delete failed: " + err));
}

function _esc(s) {
  return String(s || "").replace(/&/g,"&amp;").replace(/</g,"&lt;").replace(/>/g,"&gt;");
}

// ── Boot ──────────────────────────────────────────────────────────────────
document.addEventListener("DOMContentLoaded", function () {
  _buildLegend();
  loadGraph();
});
</script>
{% endblock %}