{% extends "base.html" %}
{% block title %}Neural Network — Fractal Memory{% endblock %}

{% block content %}
<div class="page-header" style="display:flex;align-items:flex-start;justify-content:space-between;">
  <div>
    <h1>Neural Network</h1>
    <p class="subtitle">Association force graph — nodes are memories, edges are learned associations</p>
  </div>
  <button class="btn-secondary" onclick="openHelp('brain')" title="Help">? Help</button>
</div>

<div class="brain-controls">
  <label>Domain:
    <select id="domain-select" onchange="loadGraph()">
      <option value="default">default</option>
    </select>
  </label>
  <button class="btn-secondary" onclick="loadGraph()">Refresh</button>
  <button class="btn-secondary" onclick="fitAllNodes()" title="Fit all nodes in view">Fit All</button>
  <button class="btn-secondary" onclick="svg.transition().duration(300).call(zoomBehavior.scaleBy, 1.4)" title="Zoom in">＋</button>
  <button class="btn-secondary" onclick="svg.transition().duration(300).call(zoomBehavior.scaleBy, 0.7)" title="Zoom out">－</button>
  <label class="toggle">
    <input type="checkbox" id="show-labels" checked onchange="toggleLabels()"/>
    Labels
  </label>
</div>

<div class="brain-container">
  <svg id="brain-svg"></svg>
  <div id="node-tooltip" class="tooltip hidden"></div>
</div>
{% endblock %}

{% block scripts %}
<script>
const WIDTH = 900, HEIGHT = 600;
let simulation, svg, zoomGroup, linkGroup, nodeGroup, showLabels = true;
let currentNodes = [], currentLinks = [];
let zoomBehavior;

function initSvg() {
  svg = d3.select("#brain-svg")
    .attr("width", WIDTH)
    .attr("height", HEIGHT)
    .attr("viewBox", `0 0 ${WIDTH} ${HEIGHT}`);

  // Zoom & pan
  zoomBehavior = d3.zoom()
    .scaleExtent([0.1, 8])
    .on("zoom", (event) => { zoomGroup.attr("transform", event.transform); });
  svg.call(zoomBehavior);
  svg.on("dblclick.zoom", null); // disable double-click zoom

  zoomGroup = svg.append("g").attr("class", "zoom-group");

  zoomGroup.append("defs").append("marker")
    .attr("id", "arrow")
    .attr("markerWidth", 6).attr("markerHeight", 6)
    .attr("refX", 12).attr("refY", 3)
    .attr("orient", "auto")
    .append("path").attr("d", "M0,0 L0,6 L6,3 z")
    .attr("fill", "#4a9eff44");

  linkGroup = zoomGroup.append("g").attr("class", "links");
  nodeGroup = zoomGroup.append("g").attr("class", "nodes");

  simulation = d3.forceSimulation()
    .force("link", d3.forceLink().id(d => d.id).distance(120))
    .force("charge", d3.forceManyBody().strength(-300))
    .force("center", d3.forceCenter(WIDTH / 2, HEIGHT / 2))
    .force("collision", d3.forceCollide(30))
    .on("tick", ticked)
    .on("end", fitAllNodes);
}

function fitAllNodes() {
  if (!currentNodes.length) return;
  const pad = 60;
  const xs = currentNodes.map(d => d.x).filter(v => v != null);
  const ys = currentNodes.map(d => d.y).filter(v => v != null);
  if (!xs.length) return;
  const minX = Math.min(...xs), maxX = Math.max(...xs);
  const minY = Math.min(...ys), maxY = Math.max(...ys);
  const w = maxX - minX || 1, h = maxY - minY || 1;
  const scale = Math.min(0.9, (WIDTH - pad * 2) / w, (HEIGHT - pad * 2) / h);
  const tx = (WIDTH - scale * (minX + maxX)) / 2;
  const ty = (HEIGHT - scale * (minY + maxY)) / 2;
  svg.transition().duration(500)
    .call(zoomBehavior.transform, d3.zoomIdentity.translate(tx, ty).scale(scale));
}

function lifecycleColor(lc) {
  const map = {
    "probation": "#ff6b35",
    "confirmed": "#4a9eff",
    "permanent": "#a855f7",
    "safety_critical": "#ff2d55",
  };
  return map[lc] || "#888";
}

function loadGraph() {
  const domain = document.getElementById("domain-select").value;
  fetch(`/api/associations/${domain}`)
    .then(r => r.json())
    .then(data => renderGraph(data))
    .catch(e => console.error(e));
}

function renderGraph(data) {
  currentNodes = data.nodes || [];
  currentLinks = data.edges || [];

  // Links
  const link = linkGroup.selectAll("line").data(currentLinks, d => `${d.source}-${d.target}`);
  link.enter().append("line")
    .attr("class", "link")
    .attr("stroke-width", d => Math.max(0.5, d.weight * 4))
    .attr("stroke", "#4a9eff55")
    .attr("marker-end", "url(#arrow)")
    .merge(link);
  link.exit().remove();

  // Nodes
  const node = nodeGroup.selectAll("g.node").data(currentNodes, d => d.id);
  const nodeEnter = node.enter().append("g")
    .attr("class", "node")
    .call(d3.drag()
      .on("start", dragStart)
      .on("drag", dragged)
      .on("end", dragEnd))
    .on("mouseover", showTooltip)
    .on("mouseout", hideTooltip)
    .on("click", d => window.location.href = `/memory/${d.target?.__data__?.id || d.currentTarget.__data__.id}`);

  nodeEnter.append("circle")
    .attr("r", d => 8 + Math.sqrt(d.retrieval_count || 0) * 3)
    .attr("fill", d => lifecycleColor(d.lifecycle))
    .attr("stroke", "#0a0a0f")
    .attr("stroke-width", 2);

  nodeEnter.append("text")
    .attr("class", "node-label")
    .attr("dy", -14)
    .attr("text-anchor", "middle")
    .text(d => (d.label || "").substring(0, 20));

  node.merge(nodeEnter);
  node.exit().remove();

  simulation.nodes(currentNodes);
  simulation.force("link").links(currentLinks);
  simulation.alpha(0.5).restart();
}

function ticked() {
  linkGroup.selectAll("line")
    .attr("x1", d => d.source.x).attr("y1", d => d.source.y)
    .attr("x2", d => d.target.x).attr("y2", d => d.target.y);
  nodeGroup.selectAll("g.node")
    .attr("transform", d => `translate(${d.x},${d.y})`);
}

function dragStart(event, d) { if (!event.active) simulation.alphaTarget(0.3).restart(); d.fx = d.x; d.fy = d.y; }
function dragged(event, d) { d.fx = event.x; d.fy = event.y; }
function dragEnd(event, d) { if (!event.active) simulation.alphaTarget(0); d.fx = null; d.fy = null; }

function showTooltip(event, d) {
  const tip = document.getElementById("node-tooltip");
  tip.innerHTML = `<strong>${escHtml(d.label)}</strong><br>lifecycle: ${d.lifecycle}<br>intensity: ${(d.intensity||0).toFixed(2)}<br>retrievals: ${d.retrieval_count||0}`;
  tip.style.left = (event.pageX + 12) + "px";
  tip.style.top = (event.pageY - 10) + "px";
  tip.classList.remove("hidden");
}
function hideTooltip() { document.getElementById("node-tooltip").classList.add("hidden"); }
function toggleLabels() {
  showLabels = document.getElementById("show-labels").checked;
  nodeGroup.selectAll(".node-label").style("display", showLabels ? null : "none");
}
function escHtml(s) { return String(s).replace(/[&<>"']/g, c => ({"&":"&amp;","<":"&lt;",">":"&gt;",'"':"&quot;","'":"&#39;"})[c]); }

// Bootstrap domains — default to active domain
fetch("/api/vitals").then(r => r.json()).then(data => {
  const sel = document.getElementById("domain-select");
  const domains = data.domains || [];
  const activeDomain = data.active_domain || null;
  domains.forEach(d => {
    if (d !== "default") {
      const opt = document.createElement("option");
      opt.value = d; opt.textContent = d;
      sel.appendChild(opt);
    }
  });
  // Select active domain, or first non-default domain
  if (activeDomain && activeDomain !== "default") {
    sel.value = activeDomain;
  } else if (domains.length > 0) {
    const nonDefault = domains.find(d => d !== "default");
    if (nonDefault) sel.value = nonDefault;
  }
  initSvg();
  loadGraph();
});
</script>
{% endblock %}