{% 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-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-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); }
  #btn-reset {
    margin-left: auto;
    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;
  }
  #btn-reset:hover { border-color: var(--accent); color: var(--accent); }

  #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; }
</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">
  <input id="search-box" type="search" placeholder="🔍  Search symbol…" 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>
  <span id="stats"></span>
  <button id="btn-reset">Reset view</button>
</div>

<div id="graph-canvas">
  <svg id="graph-svg"></svg>
  <div id="tooltip"></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",
  };

  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));

  // ── reactive filter state ────────────────────────────────────────────
  let filterKind = "";
  let filterRel  = "";
  let searchQ    = "";

  // ── 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;

  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 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();

    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 => 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"; });

    // Highlight on click
    nodeG.on("click", (ev, d) => {
      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.18);
      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.05;
        });
      ev.stopPropagation();
    });

    svg.on("click", () => {
      nodeG.selectAll("circle").attr("opacity", 1);
      link.attr("stroke-opacity", 0.65);
    });

    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;
      if (q  && !n.label.toLowerCase().includes(q) && !n.file.toLowerCase().includes(q)) return false;
      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 ─────────────────────────────────────────────────────────
  document.getElementById("search-box").addEventListener("input", ev => {
    searchQ = ev.target.value.trim();
    applyFilters();
  });
  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-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 %}