{% extends "base.html" %}

{% block content %}
<style>
  /* Graph page overrides — full-bleed canvas */
  .main { padding: 0; max-width: none; display: flex; flex-direction: column; height: 100vh; overflow: hidden; }

  #graph-header {
    padding: 1.1rem 2rem 0.9rem;
    border-bottom: 1px solid var(--border-subtle);
    display: flex; align-items: center; gap: 1.5rem; flex-wrap: wrap;
    background: var(--surface);
    flex-shrink: 0;
  }
  #graph-header h1 { font-size: 1.15rem; font-weight: 700; color: var(--text); }
  #graph-header p  { font-size: 0.82rem; color: var(--muted); margin: 0; }

  #legend {
    display: flex; gap: 1rem; flex-wrap: wrap; align-items: center;
    margin-left: auto;
  }
  .legend-item {
    display: flex; align-items: center; gap: 0.35rem;
    font-size: 0.78rem; color: var(--muted);
  }
  .legend-dot {
    width: 12px; height: 12px; border-radius: 50%; flex-shrink: 0;
  }
  .legend-line {
    width: 22px; height: 2px; flex-shrink: 0; border-radius: 1px;
  }

  #graph-controls {
    padding: 0.6rem 2rem;
    background: var(--surface2);
    border-bottom: 1px solid var(--border-subtle);
    display: flex; gap: 0.75rem; align-items: center; flex-wrap: wrap;
    flex-shrink: 0;
  }
  #search, #search-box {
    background: var(--surface); border: 1px solid var(--border);
    color: var(--text); padding: 0.3rem 0.7rem; border-radius: var(--radius-sm);
    font-size: 0.82rem; width: 220px; outline: none;
  }
  #search:focus, #search-box:focus { border-color: var(--accent); }
  #graph-controls label { font-size: 0.82rem; color: var(--muted); }
  #graph-controls select {
    background: var(--surface); border: 1px solid var(--border);
    color: var(--text); padding: 0.28rem 0.55rem; border-radius: var(--radius-sm);
    font-size: 0.82rem; outline: none; cursor: pointer;
  }
  #graph-controls select:focus { border-color: var(--accent); }
  .ctrl-btn {
    background: var(--surface); border: 1px solid var(--border);
    color: var(--muted); padding: 0.28rem 0.75rem; border-radius: var(--radius-sm);
    font-size: 0.82rem; cursor: pointer;
    transition: all 0.15s;
  }
  .ctrl-btn:hover { border-color: var(--accent); color: var(--accent); }
  .ctrl-btn.active { border-color: var(--accent); color: var(--accent); background: rgba(88,166,255,0.1); }
  #btn-reset { margin-left: auto; }

  #stats { font-size: 0.78rem; color: var(--muted2); }

  #graph-canvas { flex: 1; overflow: hidden; position: relative; }

  svg#graph-svg {
    width: 100%; height: 100%;
    background: #1a1a2e;
    display: block;
  }

  /* Node labels */
  .node-label {
    font-family: "SFMono-Regular", Consolas, "Liberation Mono", monospace;
    font-size: 11px;
    fill: #cdd9e5;
    pointer-events: none;
    text-anchor: middle;
    dominant-baseline: central;
  }

  /* Tooltip */
  #tooltip {
    position: absolute;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    padding: 0.55rem 0.8rem;
    font-size: 0.8rem;
    color: var(--text);
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.15s;
    max-width: 280px;
    z-index: 10;
    box-shadow: 0 4px 12px rgba(0,0,0,.5);
  }
  #tooltip .tt-name { font-weight: 700; color: var(--accent); word-break: break-all; }
  #tooltip .tt-meta { color: var(--muted); margin-top: 0.2rem; line-height: 1.5; }

  #empty-state {
    position: absolute; inset: 0;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    color: var(--muted2); font-size: 0.9rem; gap: 0.5rem;
  }
  #empty-state .big { font-size: 2.5rem; }

  /* N-hop focus indicator */
  #focus-indicator {
    position: absolute; bottom: 12px; left: 50%; transform: translateX(-50%);
    background: rgba(88,166,255,0.15); border: 1px solid var(--accent);
    border-radius: var(--radius-sm); padding: 0.3rem 0.8rem;
    font-size: 0.78rem; color: var(--accent);
    pointer-events: none; opacity: 0; transition: opacity 0.2s;
  }
</style>

<div id="graph-header">
  <div>
    <h1>🕸 Dependency Graph</h1>
    <p>Interactive force-directed map of symbols and their relationships</p>
  </div>
  <div id="legend">
    <div class="legend-item"><div class="legend-dot" style="background:#4f9ef8"></div> class</div>
    <div class="legend-item"><div class="legend-dot" style="background:#3fb950"></div> function</div>
    <div class="legend-item"><div class="legend-dot" style="background:#e3804e"></div> module</div>
    <div class="legend-item"><div class="legend-dot" style="background:#a371f7"></div> method</div>
    <div class="legend-item"><div class="legend-dot" style="background:#7d8590"></div> other</div>
    <div class="legend-item" style="margin-left:0.5rem">
      <div class="legend-line" style="background:#e36262"></div> inherits
    </div>
    <div class="legend-item">
      <div class="legend-line" style="background:#58a6ff"></div> imports
    </div>
    <div class="legend-item">
      <div class="legend-line" style="background:#3fb950"></div> calls
    </div>
    <div class="legend-item">
      <div class="legend-line" style="background:#7d8590"></div> other
    </div>
  </div>
</div>

<div id="graph-controls">
  <!-- Primary search input — id="search" for compatibility + id="search-box" alias -->
  <input id="search" type="search" placeholder="🔍  Filter nodes…" autocomplete="off">
  <label>Kind:
    <select id="filter-kind">
      <option value="">All</option>
      <option value="class">class</option>
      <option value="function">function</option>
      <option value="module">module</option>
      <option value="method">method</option>
    </select>
  </label>
  <label>Relationship:
    <select id="filter-rel">
      <option value="">All</option>
      <option value="inherits">inherits</option>
      <option value="imports">imports</option>
      <option value="calls">calls</option>
    </select>
  </label>
  <button id="btn-group-file" class="ctrl-btn" title="Color-code nodes by source file and cluster same-file nodes together">Group by file</button>
  <span id="stats"></span>
  <button id="btn-reset" class="ctrl-btn">Reset view</button>
</div>

<div id="graph-canvas">
  <svg id="graph-svg"></svg>
  <div id="tooltip"></div>
  <div id="focus-indicator">N-hop focus — click background to reset</div>
  <div id="empty-state" style="display:none">
    <div class="big">📭</div>
    <div>No graph data found — run <code>rekipedia scan</code> first.</div>
  </div>
</div>

<script src="https://cdn.jsdelivr.net/npm/d3@7/dist/d3.min.js"></script>
<script>
(async () => {
  // ── colour maps ─────────────────────────────────────────────────────
  const NODE_COLORS = {
    class:    "#4f9ef8",
    function: "#3fb950",
    module:   "#e3804e",
    method:   "#a371f7",
    unknown:  "#7d8590",
  };
  const EDGE_COLORS = {
    inherits: "#e36262",
    imports:  "#58a6ff",
    calls:    "#3fb950",
    unknown:  "#484f58",
  };

  // File-based colour palette (for Group by file mode)
  const FILE_PALETTE = [
    "#e36262","#58a6ff","#3fb950","#e3804e","#a371f7",
    "#ffd700","#22d3ee","#fb923c","#4ade80","#f472b6",
  ];

  function nodeColor(kind) {
    return NODE_COLORS[kind?.toLowerCase()] ?? NODE_COLORS.unknown;
  }
  function edgeColor(kind) {
    return EDGE_COLORS[kind?.toLowerCase()] ?? EDGE_COLORS.unknown;
  }

  // ── fetch data ───────────────────────────────────────────────────────
  let graphData;
  try {
    const resp = await fetch("/api/graph");
    graphData = await resp.json();
  } catch(e) {
    console.error(e);
    graphData = { nodes: [], edges: [] };
  }

  if (!graphData.nodes.length) {
    document.getElementById("empty-state").style.display = "flex";
    return;
  }

  // Build a set of god node names for quick lookup
  const godNodeNames = new Set((graphData.god_nodes || []).map(g => g.name));

  // File colour map
  const allFiles = [...new Set(graphData.nodes.map(n => n.file || "unknown"))].sort();
  const fileColorMap = new Map(allFiles.map((f, i) => [f, FILE_PALETTE[i % FILE_PALETTE.length]]));

  // ── reactive state ────────────────────────────────────────────────
  let filterKind    = "";
  let filterRel     = "";
  let searchQ       = "";
  let groupByFile   = false;
  let focusedNodeId = null;   // null = no focus; string = N-hop focused node

  // ── svg setup ────────────────────────────────────────────────────────
  const container = document.getElementById("graph-canvas");
  const svg = d3.select("#graph-svg");
  const width  = () => container.clientWidth;
  const height = () => container.clientHeight;

  const defs = svg.append("defs");

  // Arrow markers per edge kind
  const edgeKinds = [...new Set(graphData.edges.map(e => e.kind || "unknown"))];
  edgeKinds.forEach(k => {
    defs.append("marker")
      .attr("id", `arrow-${k}`)
      .attr("viewBox", "0 -4 8 8")
      .attr("refX", 18).attr("refY", 0)
      .attr("markerWidth", 6).attr("markerHeight", 6)
      .attr("orient", "auto")
      .append("path")
        .attr("d", "M0,-4L8,0L0,4")
        .attr("fill", edgeColor(k));
  });

  const g = svg.append("g");

  // Zoom
  const zoom = d3.zoom()
    .scaleExtent([0.05, 4])
    .on("zoom", ev => g.attr("transform", ev.transform));
  svg.call(zoom);

  // ── simulation ───────────────────────────────────────────────────────
  let simulation;
  let currentNodeG, currentLink;

  function buildGraph(nodes, edges) {
    // Deep-clone to avoid mutation
    const ns = nodes.map(n => ({ ...n }));
    const idSet = new Set(ns.map(n => n.id));
    const droppedEdges = edges.filter(e => !idSet.has(e.source) || !idSet.has(e.target));
    if (droppedEdges.length > 0) console.warn(`Dropped ${droppedEdges.length} unresolved edges`);
    const es = edges
      .filter(e => idSet.has(e.source) && idSet.has(e.target))
      .map(e => ({ ...e }));

    document.getElementById("stats").textContent =
      `${ns.length} nodes · ${es.length} edges`;

    if (simulation) simulation.stop();

    const forces = [
      d3.forceLink(es).id(d => d.id).distance(90).strength(0.4),
    ];

    // Group-by-file: pull same-file nodes together
    let fileForce = null;
    if (groupByFile) {
      // Build centroid targets based on file index
      const fileIndex = new Map(allFiles.map((f, i) => [f, i]));
      const totalFiles = allFiles.length || 1;
      fileForce = d3.forceX(d => {
        const idx = fileIndex.get(d.file || "unknown") ?? 0;
        const angle = (idx / totalFiles) * 2 * Math.PI;
        return width() / 2 + (width() * 0.3) * Math.cos(angle);
      }).strength(0.12);
      const fileForceY = d3.forceY(d => {
        const idx = fileIndex.get(d.file || "unknown") ?? 0;
        const angle = (idx / totalFiles) * 2 * Math.PI;
        return height() / 2 + (height() * 0.3) * Math.sin(angle);
      }).strength(0.12);
      simulation = d3.forceSimulation(ns)
        .force("link",    d3.forceLink(es).id(d => d.id).distance(90).strength(0.4))
        .force("charge",  d3.forceManyBody().strength(-220))
        .force("center",  d3.forceCenter(width() / 2, height() / 2))
        .force("collide", d3.forceCollide(18))
        .force("fileX",   fileForce)
        .force("fileY",   fileForceY);
    } else {
      simulation = d3.forceSimulation(ns)
        .force("link",    d3.forceLink(es).id(d => d.id).distance(90).strength(0.4))
        .force("charge",  d3.forceManyBody().strength(-220))
        .force("center",  d3.forceCenter(width() / 2, height() / 2))
        .force("collide", d3.forceCollide(18));
    }

    // Clear previous
    g.selectAll("*").remove();

    // Edges
    const link = g.append("g").attr("class", "edges")
      .selectAll("line")
      .data(es)
      .join("line")
        .attr("stroke", d => edgeColor(d.kind))
        .attr("stroke-width", 1.4)
        .attr("stroke-opacity", 0.65)
        .attr("marker-end", d => `url(#arrow-${d.kind || "unknown"})`);

    // Nodes
    const nodeG = g.append("g").attr("class", "nodes")
      .selectAll("g")
      .data(ns)
      .join("g")
        .attr("cursor", "pointer")
        .call(d3.drag()
          .on("start", (ev, d) => {
            if (!ev.active) simulation.alphaTarget(0.3).restart();
            d.fx = d.x; d.fy = d.y;
          })
          .on("drag",  (ev, d) => { d.fx = ev.x; d.fy = ev.y; })
          .on("end",   (ev, d) => {
            if (!ev.active) simulation.alphaTarget(0);
            d.fx = null; d.fy = null;
          })
        );

    nodeG.append("circle")
      .attr("r", d => godNodeNames.has(d.label) ? 16 : 9)
      .attr("fill", d => {
        if (groupByFile) return fileColorMap.get(d.file || "unknown") ?? "#7d8590";
        return nodeColor(d.kind);
      })
      .attr("stroke", d => godNodeNames.has(d.label) ? "#ffd700" : "#1a1a2e")
      .attr("stroke-width", d => godNodeNames.has(d.label) ? 3 : 2);

    nodeG.append("text")
      .attr("class", "node-label")
      .attr("dy", 20)
      .text(d => d.label.length > 20 ? d.label.slice(0, 18) + "…" : d.label);

    // Tooltip
    const tip = document.getElementById("tooltip");
    nodeG
      .on("mouseenter", (ev, d) => {
        tip.innerHTML = `
          <div class="tt-name">${d.label}</div>
          <div class="tt-meta">
            kind: <b>${d.kind}</b><br>
            file: <span style="color:var(--text)">${d.file || "—"}</span>
          </div>`;
        tip.style.opacity = "1";
        _moveTip(ev);
      })
      .on("mousemove", _moveTip)
      .on("mouseleave", () => { tip.style.opacity = "0"; });

    // ── N-hop focus on click ──────────────────────────────────────────
    const focusIndicator = document.getElementById("focus-indicator");

    nodeG.on("click", (ev, d) => {
      ev.stopPropagation();

      if (focusedNodeId === d.id) {
        // Second click on same node → expand: show 2-hop neighbours
        const hop1 = new Set([d.id]);
        es.forEach(e => {
          const sid = typeof e.source === "object" ? e.source.id : e.source;
          const tid = typeof e.target === "object" ? e.target.id : e.target;
          if (sid === d.id) hop1.add(tid);
          if (tid === d.id) hop1.add(sid);
        });
        const hop2 = new Set(hop1);
        es.forEach(e => {
          const sid = typeof e.source === "object" ? e.source.id : e.source;
          const tid = typeof e.target === "object" ? e.target.id : e.target;
          if (hop1.has(sid)) hop2.add(tid);
          if (hop1.has(tid)) hop2.add(sid);
        });
        nodeG.selectAll("circle")
          .attr("opacity", nd => hop2.has(nd.id) ? 1 : 0.12);
        link.attr("stroke-opacity", e => {
          const sid = typeof e.source === "object" ? e.source.id : e.source;
          const tid = typeof e.target === "object" ? e.target.id : e.target;
          return (hop2.has(sid) && hop2.has(tid)) ? 0.7 : 0.04;
        });
        focusedNodeId = null;  // reset toggle so next click goes back to 1-hop
        focusIndicator.textContent = "2-hop focus — click node again or background to reset";
        focusIndicator.style.opacity = "1";
      } else {
        // First click → 1-hop focus
        const connected = new Set([d.id]);
        es.forEach(e => {
          const sid = typeof e.source === "object" ? e.source.id : e.source;
          const tid = typeof e.target === "object" ? e.target.id : e.target;
          if (sid === d.id) connected.add(tid);
          if (tid === d.id) connected.add(sid);
        });
        nodeG.selectAll("circle")
          .attr("opacity", nd => connected.has(nd.id) ? 1 : 0.12);
        link.attr("stroke-opacity", e => {
          const sid = typeof e.source === "object" ? e.source.id : e.source;
          const tid = typeof e.target === "object" ? e.target.id : e.target;
          return (sid === d.id || tid === d.id) ? 1 : 0.04;
        });
        focusedNodeId = d.id;
        focusIndicator.textContent = `Focused: ${d.label} (1-hop) — click again to expand`;
        focusIndicator.style.opacity = "1";
      }
    });

    // Click on background → reset focus
    svg.on("click", () => {
      nodeG.selectAll("circle").attr("opacity", 1);
      link.attr("stroke-opacity", 0.65);
      focusedNodeId = null;
      focusIndicator.style.opacity = "0";
    });

    // ── Search highlight (opacity) ────────────────────────────────────
    function applySearchHighlight() {
      const q = searchQ.toLowerCase();
      if (!q) {
        nodeG.selectAll("circle").attr("opacity", 1);
        nodeG.selectAll("text").attr("opacity", 1);
        return;
      }
      nodeG.each(function(d) {
        const matches = d.label.toLowerCase().includes(q) || (d.file || "").toLowerCase().includes(q);
        d3.select(this).selectAll("circle").attr("opacity", matches ? 1 : 0.2);
        d3.select(this).selectAll("text").attr("opacity", matches ? 1 : 0.2);
      });
    }

    currentNodeG = nodeG;
    currentLink  = link;

    // Apply initial search highlight
    applySearchHighlight();

    simulation.on("tick", () => {
      link
        .attr("x1", d => d.source.x).attr("y1", d => d.source.y)
        .attr("x2", d => d.target.x).attr("y2", d => d.target.y);
      nodeG.attr("transform", d => `translate(${d.x},${d.y})`);
    });
  }

  function _moveTip(ev) {
    const tip = document.getElementById("tooltip");
    const rect = container.getBoundingClientRect();
    let x = ev.clientX - rect.left + 12;
    let y = ev.clientY - rect.top  + 12;
    if (x + 300 > rect.width)  x = ev.clientX - rect.left - 300;
    if (y + 80  > rect.height) y = ev.clientY - rect.top  - 80;
    tip.style.left = x + "px";
    tip.style.top  = y + "px";
  }

  function applyFilters() {
    const q  = searchQ.toLowerCase();
    const kf = filterKind.toLowerCase();
    const rf = filterRel.toLowerCase();

    const filteredNodes = graphData.nodes.filter(n => {
      if (kf && (n.kind || "").toLowerCase() !== kf) return false;
      // When searching, keep all nodes but dim non-matches (done in buildGraph)
      return true;
    });
    const nodeIds = new Set(filteredNodes.map(n => n.id));

    const filteredEdges = graphData.edges.filter(e => {
      if (rf && (e.kind || "").toLowerCase() !== rf) return false;
      if (!nodeIds.has(e.source) || !nodeIds.has(e.target)) return false;
      return true;
    });

    buildGraph(filteredNodes, filteredEdges);
  }

  // ── controls ─────────────────────────────────────────────────────────
  const searchInput = document.getElementById("search");
  searchInput.addEventListener("input", ev => {
    searchQ = ev.target.value.trim();
    // Apply highlight in-place without full rebuild for perf
    if (currentNodeG) {
      const q = searchQ.toLowerCase();
      if (!q) {
        currentNodeG.selectAll("circle").attr("opacity", 1);
        currentNodeG.selectAll("text").attr("opacity", 1);
      } else {
        currentNodeG.each(function(d) {
          const matches = d.label.toLowerCase().includes(q) || (d.file || "").toLowerCase().includes(q);
          d3.select(this).selectAll("circle").attr("opacity", matches ? 1 : 0.2);
          d3.select(this).selectAll("text").attr("opacity", matches ? 1 : 0.2);
        });
      }
    }
  });
  document.getElementById("filter-kind").addEventListener("change", ev => {
    filterKind = ev.target.value;
    applyFilters();
  });
  document.getElementById("filter-rel").addEventListener("change", ev => {
    filterRel = ev.target.value;
    applyFilters();
  });
  document.getElementById("btn-group-file").addEventListener("click", function() {
    groupByFile = !groupByFile;
    this.classList.toggle("active", groupByFile);
    applyFilters();
  });
  document.getElementById("btn-reset").addEventListener("click", () => {
    svg.transition().duration(400).call(
      zoom.transform,
      d3.zoomIdentity.translate(width() / 2, height() / 2).scale(1)
        .translate(-width() / 2, -height() / 2)
    );
  });

  // Populate dynamic kind/rel dropdowns from real data
  const allKinds = [...new Set(graphData.nodes.map(n => n.kind || "unknown"))].sort();
  const kindSel = document.getElementById("filter-kind");
  kindSel.innerHTML = '<option value="">All</option>';
  allKinds.forEach(k => {
    const o = document.createElement("option");
    o.value = k; o.textContent = k;
    kindSel.appendChild(o);
  });

  const allRels = [...new Set(graphData.edges.map(e => e.kind || "unknown"))].sort();
  const relSel = document.getElementById("filter-rel");
  relSel.innerHTML = '<option value="">All</option>';
  allRels.forEach(r => {
    const o = document.createElement("option");
    o.value = r; o.textContent = r;
    relSel.appendChild(o);
  });

  // ── initial render ───────────────────────────────────────────────────
  applyFilters();

  // Resize handler
  window.addEventListener("resize", () => {
    if (simulation) {
      simulation.force("center", d3.forceCenter(width() / 2, height() / 2));
      simulation.alpha(0.2).restart();
    }
  });
})();
</script>
{% endblock %}