{% extends "base.html" %}
{% block title %}Code Map — Log Thread{% endblock %}

{% block head %}
<style>
*{box-sizing:border-box}
body{overflow:hidden}
#app{display:flex;flex-direction:column;height:100vh;background:#0d1117;color:#e6edf3}

/* ── Top nav ── */
nav{background:#161b22;border-bottom:1px solid #30363d;padding:8px 16px;display:flex;align-items:center;gap:12px;z-index:10;flex-shrink:0}
.nav-back{color:#8b949e;background:transparent;border:1px solid #30363d;border-radius:6px;padding:4px 10px;font-size:12px;cursor:pointer;font-family:inherit}
.nav-back:hover{color:#e6edf3;background:#21262d}
.nav-brand{display:flex;align-items:center;gap:8px;font-weight:600;font-size:14px}
.nav-brand svg{color:#7c3aed}
#repoName{font-size:14px;font-weight:600}
#statsDisplay{font-size:12px;color:#8b949e;margin-left:auto}
.search-wrap{position:relative;margin-left:auto}
.search-wrap input{background:#21262d;border:1px solid #30363d;border-radius:6px;padding:6px 12px 6px 32px;font-size:12px;color:#e6edf3;width:240px;font-family:inherit}
.search-wrap input:focus{outline:none;border-color:#7c3aed;box-shadow:0 0 0 2px rgba(124,58,237,.15)}
.search-wrap svg{position:absolute;left:10px;top:50%;transform:translateY(-50%);pointer-events:none;color:#8b949e}
#searchDropdown{position:absolute;top:calc(100% + 4px);left:0;right:0;background:#161b22;border:1px solid #30363d;border-radius:8px;max-height:300px;overflow-y:auto;z-index:100;display:none;box-shadow:0 8px 24px rgba(0,0,0,.5)}
.sr-item{padding:8px 12px;cursor:pointer;display:flex;align-items:center;gap:8px}
.sr-item:hover{background:#21262d}
.sr-name{font-size:12px;font-weight:600;color:#e6edf3}
.sr-meta{font-size:11px;color:#8b949e}
.sr-badge{font-size:10px;padding:1px 5px;border-radius:3px;font-weight:600;text-transform:uppercase;letter-spacing:.3px}

/* ── Layout ── */
.body{display:flex;flex:1;min-height:0}

/* ── Sidebar ── */
aside{width:260px;background:#161b22;border-right:1px solid #30363d;display:flex;flex-direction:column;flex-shrink:0}
.side-hdr{padding:10px 12px;border-bottom:1px solid #30363d;display:flex;align-items:center;gap:6px}
.side-hdr h3{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.6px;color:#8b949e;flex:1}
.view-tabs{display:flex;gap:4px}
.view-tab{background:transparent;border:1px solid #30363d;color:#8b949e;border-radius:4px;padding:2px 8px;font-size:11px;cursor:pointer;font-family:inherit}
.view-tab.active{background:#7c3aed;border-color:#7c3aed;color:#fff}
#symbolList{flex:1;overflow-y:auto;padding:6px}
.sym-item{padding:7px 10px;border-radius:6px;cursor:pointer;display:flex;align-items:center;gap:8px;margin-bottom:1px}
.sym-item:hover{background:#21262d}
.sym-item.active{background:#21262d;border-left:2px solid #7c3aed}
.sym-dot{width:8px;height:8px;border-radius:50%;flex-shrink:0}
.sym-name{font-size:12px;font-weight:500;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sym-file{font-size:10px;color:#8b949e;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* ── Graph canvas ── */
.graph-wrap{flex:1;position:relative;background:radial-gradient(ellipse at 30% 40%, rgba(124,58,237,.06) 0%, transparent 60%), #0d1117;overflow:hidden}
#gc{display:block;width:100%;height:100%;cursor:grab}
#gc:active{cursor:grabbing}
.tip{position:absolute;background:#161b22;border:1px solid #30363d;border-radius:8px;padding:10px 12px;font-size:11px;pointer-events:none;z-index:20;display:none;max-width:240px;box-shadow:0 4px 16px rgba(0,0,0,.5)}
.tip-name{font-weight:700;font-size:13px;margin-bottom:4px;color:#e6edf3}
.tip-badge{display:inline-block;padding:1px 6px;border-radius:3px;font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.3px;margin-bottom:5px}
.tip-file{font-size:10px;color:#8b949e;word-break:break-all;margin-bottom:4px}
.tip-hint{font-size:9.5px;color:#484f58;margin-top:4px}
.zoom-btns{position:absolute;bottom:16px;right:16px;display:flex;flex-direction:column;gap:4px}
.zoom-btn{width:32px;height:32px;background:#21262d;border:1px solid #30363d;border-radius:6px;color:#e6edf3;cursor:pointer;font-size:16px;display:flex;align-items:center;justify-content:center;font-family:inherit}
.zoom-btn:hover{background:#30363d}
.breadcrumb{position:absolute;top:10px;left:10px;display:flex;align-items:center;gap:4px;font-size:11px;background:#161b22cc;border:1px solid #30363d;border-radius:6px;padding:4px 8px;backdrop-filter:blur(8px)}
.bc-item{color:#8b949e;cursor:pointer;padding:0 2px}
.bc-item:hover{color:#e6edf3}
.bc-item.current{color:#e6edf3;cursor:default}
.bc-sep{color:#484f58}
.back-graph-btn{background:#21262d;border:1px solid #30363d;color:#8b949e;border-radius:4px;padding:2px 7px;font-size:11px;cursor:pointer;font-family:inherit;margin-right:4px}
.back-graph-btn:hover{color:#e6edf3}
.back-graph-btn:disabled{opacity:.3;cursor:not-allowed}

/* ── Detail panel ── */
#detail{width:280px;background:#161b22;border-left:1px solid #30363d;flex-direction:column;overflow-y:auto;display:none}
#detail.open{display:flex}
.det-hdr{padding:14px 14px 8px;border-bottom:1px solid #30363d;display:flex;align-items:center;gap:8px}
.det-name{font-size:14px;font-weight:700;flex:1;word-break:break-all}
.det-close{background:transparent;border:none;color:#8b949e;cursor:pointer;font-size:18px;padding:0;line-height:1}
.det-body{padding:14px;display:flex;flex-direction:column;gap:14px}
.det-section h4{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.6px;color:#8b949e;margin-bottom:6px}
.det-row{background:#0d1117;border-radius:6px;padding:7px 10px;font-size:11px;cursor:pointer;display:flex;align-items:center;gap:6px;color:#e6edf3}
.det-row:hover{background:#21262d}
.det-row .arr{margin-left:auto;color:#8b949e;font-size:14px}
.det-count{font-size:10px;color:#7c3aed;font-weight:700;margin-left:4px}
.det-file{font-size:10px;color:#8b949e;word-break:break-all}

/* ── Loading overlay ── */
#loading{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:#0d1117cc;z-index:30;display:none}
#loading.on{display:flex}
.spin{width:28px;height:28px;border:2px solid #30363d;border-top-color:#7c3aed;border-radius:50%;animation:spin .7s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}

/* ── Empty state ── */
.empty{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;pointer-events:none}
.empty-inner{text-align:center;max-width:340px}
.empty-inner h2{font-size:20px;font-weight:700;margin:12px 0 6px}
.empty-inner p{font-size:13px;color:#8b949e;line-height:1.6}
.badge-sync{display:inline-block;background:#21262d;border:1px solid #30363d;border-radius:6px;padding:6px 14px;font-family:monospace;font-size:12px;color:#7c3aed;margin-top:12px}
</style>
{% endblock %}

{% block content %}
<div id="app">
  <nav>
    <button class="nav-back" onclick="location.href='/dashboard'">← Dashboard</button>
    <div class="nav-brand">
      <svg width="18" height="18" fill="none" viewBox="0 0 24 24" stroke="currentColor">
        <circle cx="12" cy="5" r="2" stroke-width="2"/><circle cx="5" cy="12" r="2" stroke-width="2"/>
        <circle cx="19" cy="12" r="2" stroke-width="2"/><circle cx="12" cy="19" r="2" stroke-width="2"/>
        <line x1="12" y1="7" x2="5" y2="10" stroke-width="1.5"/><line x1="12" y1="7" x2="19" y2="10" stroke-width="1.5"/>
        <line x1="12" y1="17" x2="5" y2="14" stroke-width="1.5"/><line x1="12" y1="17" x2="19" y2="14" stroke-width="1.5"/>
      </svg>
      <span id="repoName">Loading…</span>
    </div>
    <div class="search-wrap">
      <svg width="14" height="14" fill="none" viewBox="0 0 24 24" stroke="currentColor"><circle cx="11" cy="11" r="8" stroke-width="2"/><path d="M21 21l-4.35-4.35" stroke-width="2"/></svg>
      <input id="searchInp" type="text" placeholder="Search symbols…" autocomplete="off">
      <div id="searchDropdown"></div>
    </div>
    <span id="statsDisplay"></span>
  </nav>

  <div class="body">
    <aside>
      <div class="side-hdr">
        <h3>Symbols</h3>
        <div class="view-tabs">
          <button class="view-tab active" data-view="all" onclick="setViewFilter(this,'all')">All</button>
          <button class="view-tab" data-view="fn" onclick="setViewFilter(this,'fn')">fn</button>
          <button class="view-tab" data-view="class" onclick="setViewFilter(this,'class')">class</button>
          <button class="view-tab" data-view="table" onclick="setViewFilter(this,'table')">table</button>
          <button class="view-tab" data-view="api" onclick="setViewFilter(this,'api')">api</button>
        </div>
      </div>
      <div id="symbolList"><div style="padding:20px;text-align:center;color:#8b949e;font-size:12px">Loading…</div></div>
    </aside>

    <div class="graph-wrap">
      <canvas id="gc"></canvas>
      <div class="tip" id="tip"></div>
      <div class="breadcrumb" id="breadcrumb">
        <button class="back-graph-btn" id="backGraphBtn" disabled onclick="graphBack()">←</button>
        <span class="bc-item current" id="bcRoot" onclick="graphHome()">Overview</span>
      </div>
      <div class="zoom-btns">
        <button class="zoom-btn" onclick="zoom(1.2)">+</button>
        <button class="zoom-btn" onclick="zoom(0.83)">−</button>
        <button class="zoom-btn" title="Reset" onclick="resetView()">⊙</button>
      </div>
      <div class="empty" id="emptyState" style="display:none">
        <div class="empty-inner">
          <svg width="64" height="64" fill="none" viewBox="0 0 24 24" stroke="#7c3aed" style="opacity:.5"><circle cx="12" cy="12" r="10" stroke-width="1.5"/><circle cx="8" cy="9" r="1.5" fill="#7c3aed"/><circle cx="16" cy="9" r="1.5" fill="#7c3aed"/><circle cx="12" cy="16" r="1.5" fill="#7c3aed"/><line x1="8" y1="9" x2="12" y2="16" stroke-width="1.5"/><line x1="16" y1="9" x2="12" y2="16" stroke-width="1.5"/></svg>
          <h2>Code Map Explorer</h2>
          <p id="emptyMsg">Select a symbol from the sidebar to visualise its connections, or use search to find something specific.</p>
        </div>
      </div>
      <div id="loading"><div class="spin"></div></div>
    </div>

    <div id="detail">
      <div class="det-hdr">
        <div>
          <div class="det-name" id="detName"></div>
          <div class="det-file" id="detFile"></div>
        </div>
        <button class="det-close" onclick="closeDetail()">×</button>
      </div>
      <div class="det-body" id="detBody"></div>
    </div>
  </div>
</div>
{% endblock %}

{% block scripts %}
<script>
var REPO_ID = "{{ repo_id }}";
var token   = localStorage.getItem('lt_token');
if (!token) location.href = '/login';

// ── Node display config ──────────────────────────────────────────────────────
var TYPE_MAP = {
  Function: {label:'fn',   color:'#56d364'},
  Method:   {label:'fn',   color:'#56d364'},
  Class:    {label:'class',color:'#58a6ff'},
  Interface:{label:'iface',color:'#bc8cff'},
  TypeAlias:{label:'type', color:'#63e2b7'},
  Variable: {label:'var',  color:'#ff9f43'},
  Constant: {label:'var',  color:'#ff9f43'},
  Module:   {label:'file', color:'#8b949e'},
  File:     {label:'file', color:'#8b949e'},
  DbTable:  {label:'table',color:'#e06c75'},
  DbColumn: {label:'col',  color:'#d19a66'},
  ApiEndpoint:{label:'api',color:'#98c379'},
};
var DEFAULT_TYPE = {label:'•', color:'#8b949e'};
function tinfo(t){ return TYPE_MAP[t] || DEFAULT_TYPE; }

var EDGE_COLORS = {
  calls:'#56d364',
  uses_type:'#58a6ff',
  implements:'#bc8cff',
  inherits:'#ff9f43',
  imports:'#63e2b7',
  defines:'#94a3b8',
  depends_on:'#6e7681',
  uses_library:'#d2a8ff',
  queries_table:'#06b6d4',
  queries_column:'#22d3ee',
  handles:'#98c379',
  handles_route:'#f97316',
  protected_by:'#ef4444',
  reads:'#e06c75',
  writes:'#e06c75',
  has_column:'#d19a66'
};
function ecol(t){ return EDGE_COLORS[t] || '#3d444d'; }

// ── State ────────────────────────────────────────────────────────────────────
var allNodes = [];   // manifest node index [{n, t, f}]
var currentFilter = 'all';
var graphNodes = [], graphEdges = [];
var navStack = [];   // [{nodes,edges,title,focus}]
var currentTitle = 'Overview';
var currentFocus = null;
var selNode = null, hovNode = null;
var offsetX=0, offsetY=0, sc=1, dragging=false, dragNode=null, lastM={x:0,y:0};
var animId=null;

// ── Canvas ───────────────────────────────────────────────────────────────────
var gc = document.getElementById('gc');
var ctx = gc.getContext('2d');

function resize(){
  var r = gc.parentElement.getBoundingClientRect();
  gc.width  = r.width  * devicePixelRatio;
  gc.height = r.height * devicePixelRatio;
  gc.style.width  = r.width  + 'px';
  gc.style.height = r.height + 'px';
  ctx.setTransform(devicePixelRatio,0,0,devicePixelRatio,0,0);
  draw();
}
window.addEventListener('resize', resize);
setTimeout(resize, 40);

// ── API helpers ──────────────────────────────────────────────────────────────
async function api(path){
  var r = await fetch(path, {headers:{'Authorization':'Bearer '+token}});
  if (!r.ok) throw new Error(r.status);
  return r.json();
}

// ── Bootstrap ────────────────────────────────────────────────────────────────
async function boot(){
  showLoading(true);
  try {
    var data = await api('/graph/data/'+REPO_ID);
    document.getElementById('repoName').textContent = data.name || 'Repository';
    document.getElementById('statsDisplay').textContent =
      (data.symbols_count||0).toLocaleString() + ' symbols · ' +
      (data.edges_count||0).toLocaleString() + ' edges';

    if (!data.has_graph_data){
      showEmpty('<span style="color:#ff9f43">Graph not synced yet.</span><br>' +
        'Run <span class="badge-sync">logthread sync</span> in your project.');
      renderSidebar([]);
      return;
    }
    allNodes = data.nodes || [];
    renderSidebar(allNodes);
    showEmpty('<span>Select a symbol to explore its connections.</span>', true);
  } catch(e){
    showEmpty('Failed to load. Please refresh.');
  } finally {
    showLoading(false);
  }
}

// ── Sidebar ──────────────────────────────────────────────────────────────────
function setViewFilter(btn, view){
  document.querySelectorAll('.view-tab').forEach(b => b.classList.remove('active'));
  btn.classList.add('active');
  currentFilter = view;
  renderSidebar(allNodes);
}

function renderSidebar(nodes){
  var list = document.getElementById('symbolList');
  var filtered = currentFilter === 'all' ? nodes
    : nodes.filter(n => (tinfo(n.t).label === currentFilter));
  if (!filtered.length){
    list.innerHTML = '<div style="padding:16px;text-align:center;color:#8b949e;font-size:12px">No symbols</div>';
    return;
  }
  list.innerHTML = filtered.slice(0,500).map(function(n){
    var ti = tinfo(n.t);
    return '<div class="sym-item" onclick="navigateTo(\''+esc(n.n)+'\')" title="'+esc(n.f)+'">'
      + '<span class="sym-dot" style="background:'+ti.color+'"></span>'
      + '<div style="min-width:0"><div class="sym-name">'+esc(n.n)+'</div>'
      + '<div class="sym-file">'+esc(n.f||'')+'</div></div></div>';
  }).join('');
}

// ── Navigation ───────────────────────────────────────────────────────────────
async function navigateTo(name, pushHistory){
  if (pushHistory !== false && graphNodes.length > 0){
    navStack.push({nodes: graphNodes.slice(), edges: graphEdges.slice(), title: currentTitle, focus: currentFocus});
  }
  currentTitle = name;
  updateBreadcrumb();
  document.getElementById('backGraphBtn').disabled = navStack.length === 0;
  showLoading(true);
  showEmpty(null);
  try {
    var data = await api('/graph/neighbors/'+REPO_ID+'/'+encodeURIComponent(name));
    var gNodes = (data.nodes||[]).map(function(n){
      var ti = tinfo(n.type);
      return {id:n.name, name:n.name, type:n.type, file:n.file||'',
              color:ti.color, short:ti.label,
              x:0,y:0,vx:0,vy:0,r: n.type==='Class'?18:13, focus: n.name===name};
    });
    var gEdges = (data.edges||[]).map(function(e){
      return {from:e.from, to:e.to, rel:e.rel||'', color:ecol(e.rel||'')};
    });
    setGraphData(gNodes, gEdges, name);
    showDetail(name);
  } catch(e){
    showEmpty('Failed to load symbol data.');
  } finally {
    showLoading(false);
  }
}

function graphBack(){
  if (!navStack.length) return;
  var prev = navStack.pop();
  currentTitle = prev.title;
  updateBreadcrumb();
  document.getElementById('backGraphBtn').disabled = navStack.length === 0;
  setGraphData(prev.nodes, prev.edges, prev.focus || null);
}

function graphHome(){
  navStack = [];
  currentTitle = 'Overview';
  updateBreadcrumb();
  document.getElementById('backGraphBtn').disabled = true;
  graphNodes = []; graphEdges = []; currentFocus = null;
  draw();
  showEmpty('<span>Select a symbol to explore its connections.</span>', true);
  closeDetail();
}

function updateBreadcrumb(){
  var bc = document.getElementById('breadcrumb');
  var html = '<button class="back-graph-btn" id="backGraphBtn" '
    + (navStack.length ? '' : 'disabled') + ' onclick="graphBack()">←</button>';
  var parts = navStack.map(function(f){ return f.title; });
  parts.push(currentTitle);
  parts.forEach(function(p, i){
    var isLast = i === parts.length - 1;
    if (i > 0) html += '<span class="bc-sep">›</span>';
    if (isLast){
      html += '<span class="bc-item current">'+esc(p.length>22?p.slice(0,20)+'..':p)+'</span>';
    } else {
      var idx = i;
      html += '<span class="bc-item" onclick="jumpBreadcrumb('+idx+')">'+esc(p.length>18?p.slice(0,16)+'..':p)+'</span>';
    }
  });
  bc.innerHTML = html;
}

function jumpBreadcrumb(idx){
  var target = navStack[idx];
  if (!target) return;
  navStack = navStack.slice(0, idx);
  currentTitle = target.title;
  updateBreadcrumb();
  document.getElementById('backGraphBtn').disabled = navStack.length === 0;
  setGraphData(target.nodes, target.edges, target.focus || null);
}

function layoutFocus360(nodeList, edgeList, focusName){
  var focus = nodeList.find(function(n){ return n.id === focusName; });
  if (!focus) { layoutSugiyama(nodeList, edgeList); return; }
  focus.x = 0; focus.y = 0;

  var incoming = [], outgoing = [], both = [], ambient = [];
  nodeList.forEach(function(n){
    if (n.id === focusName) return;
    var hasIn = edgeList.some(function(e){ return e.from === n.id && e.to === focusName; });
    var hasOut = edgeList.some(function(e){ return e.from === focusName && e.to === n.id; });
    if (hasIn && hasOut) both.push(n);
    else if (hasIn) incoming.push(n);
    else if (hasOut) outgoing.push(n);
    else ambient.push(n);
  });

  function placeArc(list, startAngle, endAngle, radius){
    if (!list.length) return;
    var span = endAngle - startAngle;
    var perRing = Math.max(5, Math.floor(Math.abs(span) / 0.42));
    for (var i=0;i<list.length;i++){
      var ring = Math.floor(i / perRing);
      var ringCount = Math.min(perRing, list.length - ring * perRing);
      var pos = i - ring * perRing;
      var angle = ringCount === 1 ? startAngle + span/2 : startAngle + span * (pos + 0.5) / ringCount;
      var r = radius + ring * 110;
      list[i].x = Math.cos(angle) * r;
      list[i].y = Math.sin(angle) * r;
    }
  }

  placeArc(incoming, Math.PI * 0.72, Math.PI * 1.28, 170);
  placeArc(outgoing, -Math.PI * 0.28, Math.PI * 0.28, 170);
  placeArc(both, Math.PI * 1.45, Math.PI * 1.95, 145);
  placeArc(ambient, Math.PI * 0.15, Math.PI * 0.85, 280);
}

// ── Sugiyama layout: barycenter crossing minimisation + bezier edges ──────────
function layoutSugiyama(nodeList, edgeList) {
  var W = gc.width/devicePixelRatio;
  if (!nodeList.length) return;
  var LAYER_H=130, NODE_GAP=86, COMP_PAD=90, TOP=68;

  // Adjacency
  var out={}, inp={};
  nodeList.forEach(function(n){ out[n.id]=[]; inp[n.id]=[]; });
  edgeList.forEach(function(e){ if(out[e.from]) out[e.from].push(e.to); if(inp[e.to]) inp[e.to].push(e.from); });

  // Connected components (undirected BFS)
  var seen={}, comps=[];
  nodeList.forEach(function(n){
    if(seen[n.id]) return;
    var comp=[], q=[n.id]; seen[n.id]=true;
    while(q.length){ var id=q.shift(); comp.push(id); out[id].concat(inp[id]).forEach(function(nb){ if(!seen[nb]){ seen[nb]=true; q.push(nb); } }); }
    comps.push(comp);
  });

  var nmap={};
  nodeList.forEach(function(n){ nmap[n.id]=n; });

  var compLayouts = comps.map(function(comp){
    var cs={}; comp.forEach(function(id){ cs[id]=true; });

    // Longest-path layer (Kahn's topo sort)
    var lyr={}; comp.forEach(function(id){ lyr[id]=0; });
    var ind={}; comp.forEach(function(id){ ind[id]=0; });
    comp.forEach(function(id){ out[id].forEach(function(to){ if(cs[to]) ind[to]++; }); });
    var q=comp.filter(function(id){ return ind[id]===0; });
    while(q.length){
      var cur=q.shift();
      out[cur].forEach(function(to){ if(!cs[to]) return; lyr[to]=Math.max(lyr[to],lyr[cur]+1); if(--ind[to]===0) q.push(to); });
    }

    var maxL=0; comp.forEach(function(id){ maxL=Math.max(maxL,lyr[id]); });
    var layers=[]; for(var i=0;i<=maxL;i++) layers.push([]);
    comp.forEach(function(id){ layers[lyr[id]].push(id); });

    // Barycenter crossing minimisation – 8 sweeps
    for(var sw=0;sw<8;sw++){
      for(var li=1;li<layers.length;li++){
        var pp={}; layers[li-1].forEach(function(id,i){ pp[id]=i; });
        layers[li].sort(function(a,b){
          var na=inp[a].filter(function(x){return pp[x]!==undefined;}), nb2=inp[b].filter(function(x){return pp[x]!==undefined;});
          var ba=na.length?na.reduce(function(s,x){return s+pp[x];},0)/na.length:1e9;
          var bb=nb2.length?nb2.reduce(function(s,x){return s+pp[x];},0)/nb2.length:1e9;
          return ba-bb;
        });
      }
      for(var li2=layers.length-2;li2>=0;li2--){
        var np2={}; layers[li2+1].forEach(function(id,i){ np2[id]=i; });
        layers[li2].sort(function(a,b){
          var na2=out[a].filter(function(x){return np2[x]!==undefined;}), nb3=out[b].filter(function(x){return np2[x]!==undefined;});
          var ba2=na2.length?na2.reduce(function(s,x){return s+np2[x];},0)/na2.length:1e9;
          var bb2=nb3.length?nb3.reduce(function(s,x){return s+np2[x];},0)/nb3.length:1e9;
          return ba2-bb2;
        });
      }
    }

    // X-coord: even spacing + 3 neighbour-centering refinement passes
    layers.forEach(function(row){
      var rw=(row.length-1)*NODE_GAP;
      row.forEach(function(id,i){ if(nmap[id]) nmap[id]._x=i*NODE_GAP-rw/2; });
    });
    for(var rp=0;rp<3;rp++){
      layers.forEach(function(row,li3){
        row.forEach(function(id){
          var n=nmap[id]; if(!n) return;
          var xs=[];
          inp[id].forEach(function(nb){ if(nmap[nb]&&lyr[nb]===li3-1) xs.push(nmap[nb]._x); });
          out[id].forEach(function(nb){ if(nmap[nb]&&lyr[nb]===li3+1) xs.push(nmap[nb]._x); });
          if(xs.length){ var avg=xs.reduce(function(s,v){return s+v;},0)/xs.length; n._x=n._x*0.6+avg*0.4; }
        });
        row.sort(function(a,b){ return (nmap[a]._x||0)-(nmap[b]._x||0); });
        for(var k=1;k<row.length;k++){
          var pn=nmap[row[k-1]], cn=nmap[row[k]]; if(!pn||!cn) continue;
          if(cn._x-pn._x<NODE_GAP) cn._x=pn._x+NODE_GAP;
        }
        if(row.length){ var mn=nmap[row[0]]._x||0, mx2=nmap[row[row.length-1]]._x||0; var mid=(mn+mx2)/2; row.forEach(function(id){ if(nmap[id]) nmap[id]._x-=mid; }); }
      });
    }

    var compW=0; layers.forEach(function(row){ var w=(row.length-1)*NODE_GAP; if(w>compW) compW=w; });
    return {layers:layers, lyr:lyr, compW:Math.max(compW,NODE_GAP)};
  });

  // Place components side by side, centred
  var totalW=compLayouts.reduce(function(s,cl){return s+cl.compW;},0)+(compLayouts.length-1)*COMP_PAD;
  var curX=Math.max(NODE_GAP/2, W/2-totalW/2);
  compLayouts.forEach(function(cl){
    var cx=curX+cl.compW/2;
    cl.layers.forEach(function(row,li){
      row.forEach(function(id){ var n=nmap[id]; if(!n) return; n.x=cx+(n._x||0); n.y=TOP+li*LAYER_H; n.vx=0; n.vy=0; delete n._x; });
    });
    curX+=cl.compW+COMP_PAD;
  });
}

function setGraphData(nodes, edges, focus){
  currentFocus = focus || null;
  graphNodes = nodes.map(function(n){ return Object.assign({},n); });
  graphEdges = edges.filter(function(e){
    return graphNodes.find(function(n){ return n.id===e.from; })
        && graphNodes.find(function(n){ return n.id===e.to;   });
  });
  if (focus) layoutFocus360(graphNodes, graphEdges, focus);
  else layoutSugiyama(graphNodes, graphEdges);
  selNode=null; offsetX=0; offsetY=0; sc=1;
  draw();
}

// ── Render ───────────────────────────────────────────────────────────────────
function draw(){
  var W=gc.width/devicePixelRatio, H=gc.height/devicePixelRatio;
  ctx.clearRect(0,0,W,H);
  ctx.save();
  ctx.translate(offsetX,offsetY);
  ctx.scale(sc,sc);

  // Edges – bezier S-curves with colour-coded relationship type
  for (var i=0;i<graphEdges.length;i++){
    var e=graphEdges[i];
    var a=graphNodes.find(function(n){return n.id===e.from});
    var b=graphNodes.find(function(n){return n.id===e.to});
    if (!a||!b) continue;
    var col=e.color||'#6699cc';
    var dx0=b.x-a.x, dy0=b.y-a.y, dist=Math.sqrt(dx0*dx0+dy0*dy0)||1;
    var ux=dx0/dist, uy=dy0/dist;
    var sx=a.x+ux*a.r, sy=a.y+uy*a.r;
    var ex2=b.x-ux*(b.r+7), ey2=b.y-uy*(b.r+7);

    var cp1x, cp1y, cp2x, cp2y;
    if (currentFocus){
      var bowAmt=Math.min(42, dist*0.16);
      var px=-uy*bowAmt, py=ux*bowAmt;
      cp1x=sx+ux*dist*0.33+px; cp1y=sy+uy*dist*0.33+py;
      cp2x=ex2-ux*dist*0.33+px; cp2y=ey2-uy*dist*0.33+py;
    } else {
      var yMid=(sy+ey2)/2;
      cp1x=sx; cp1y=sy+(yMid-sy)*0.85;
      cp2x=ex2; cp2y=ey2-(ey2-yMid)*0.85;
      if(Math.abs(dy0)<40){
        var bow=Math.sign(dx0||1)*Math.min(55,Math.abs(dx0)*0.45+28);
        cp1x=sx+bow; cp1y=sy-38; cp2x=ex2+bow; cp2y=ey2-38;
      }
    }

    ctx.beginPath(); ctx.moveTo(sx,sy);
    ctx.bezierCurveTo(cp1x,cp1y,cp2x,cp2y,ex2,ey2);
    ctx.strokeStyle=col; ctx.lineWidth=1.4; ctx.globalAlpha=0.38; ctx.stroke();

    // Arrowhead along curve tangent at endpoint
    var tax=ex2-cp2x, tay=ey2-cp2y, tlen=Math.sqrt(tax*tax+tay*tay)||1;
    var tx=tax/tlen, ty=tay/tlen;
    ctx.beginPath();
    ctx.moveTo(ex2,ey2);
    ctx.lineTo(ex2-tx*8+ty*3.5, ey2-ty*8-tx*3.5);
    ctx.lineTo(ex2-tx*8-ty*3.5, ey2-ty*8+tx*3.5);
    ctx.closePath();
    ctx.fillStyle=col; ctx.globalAlpha=0.62; ctx.fill();
    ctx.globalAlpha=1;
  }

  // Nodes
  var ff = getComputedStyle(document.body).fontFamily||'sans-serif';
  for (var j=0;j<graphNodes.length;j++){
    var n=graphNodes[j];
    var isSel=selNode&&selNode.id===n.id;
    var isHov=hovNode&&hovNode.id===n.id;
    var isFocus=currentFocus&&currentFocus===n.id;
    var col=n.color||'#8b949e';

    if (isSel||n.focus||isFocus){
      ctx.beginPath(); ctx.arc(n.x,n.y,n.r+(isFocus?12:5),0,Math.PI*2);
      ctx.fillStyle=col; ctx.globalAlpha=0.15; ctx.fill(); ctx.globalAlpha=1;
    }
    ctx.beginPath(); ctx.arc(n.x,n.y,n.r,0,Math.PI*2);
    ctx.fillStyle=col; ctx.globalAlpha=isHov?0.95:isSel?1:0.82; ctx.fill(); ctx.globalAlpha=1;
    if (isSel||isHov||isFocus){
      ctx.strokeStyle='#e6edf3'; ctx.lineWidth=1.5;
      ctx.globalAlpha=0.5; ctx.stroke(); ctx.globalAlpha=1;
    }
    // Type badge inside circle
    ctx.fillStyle='rgba(0,0,0,.55)';
    ctx.font='bold 8px '+ff; ctx.textAlign='center'; ctx.textBaseline='middle';
    ctx.fillText((n.short||'•').toUpperCase(),n.x,n.y);
    // Name below
    ctx.fillStyle=isSel?'#e6edf3':'#c9d1d9'; ctx.globalAlpha=isSel?1:0.75;
    ctx.font=(isSel?'600 ':'')+' 10px '+ff;
    ctx.textAlign='center'; ctx.textBaseline='top';
    var lbl=n.name||''; if(lbl.length>20) lbl=lbl.slice(0,18)+'..';
    ctx.fillText(lbl, n.x, n.y+n.r+3); ctx.globalAlpha=1;
  }

  ctx.restore();
}

function nodeAt(mx,my){
  var x=(mx-offsetX)/sc, y=(my-offsetY)/sc;
  for (var i=graphNodes.length-1;i>=0;i--){
    var n=graphNodes[i];
    var dx=x-n.x,dy=y-n.y;
    if (dx*dx+dy*dy<(n.r+5)*(n.r+5)) return n;
  }
  return null;
}

// ── Mouse ────────────────────────────────────────────────────────────────────
var pendingClick=null, clickTime=0;
gc.addEventListener('mousedown',function(e){
  var r=gc.getBoundingClientRect();
  var n=nodeAt(e.clientX-r.left, e.clientY-r.top);
  if (n){ dragNode=n; selNode=n; pendingClick=n; clickTime=Date.now(); draw(); }
  else { dragging=true; }
  lastM={x:e.clientX,y:e.clientY};
});
gc.addEventListener('mousemove',function(e){
  var r=gc.getBoundingClientRect();
  var mx=e.clientX-r.left, my=e.clientY-r.top;
  if (dragNode){
    if (Math.abs(e.clientX-lastM.x)+Math.abs(e.clientY-lastM.y)>3) pendingClick=null;
    dragNode.x+=(e.clientX-lastM.x)/sc; dragNode.y+=(e.clientY-lastM.y)/sc;
    lastM={x:e.clientX,y:e.clientY}; draw();
  } else if (dragging){
    offsetX+=e.clientX-lastM.x; offsetY+=e.clientY-lastM.y;
    lastM={x:e.clientX,y:e.clientY}; draw();
  } else {
    var n=nodeAt(mx,my);
    if (n!==hovNode){
      hovNode=n;
      gc.style.cursor=n?'pointer':'grab';
      if (n){
        var tip=document.getElementById('tip');
        var ti=tinfo(n.type);
        var conns=graphEdges.filter(function(e){return e.from===n.id||e.to===n.id}).length;
        tip.style.display='block';
        tip.style.left=(mx+14)+'px';
        tip.style.top=Math.max(4,my-70)+'px';
        tip.innerHTML='<div class="tip-name">'+esc(n.name)+'</div>'
          +'<span class="tip-badge" style="background:'+ti.color+'22;color:'+ti.color+'">'+esc(ti.label)+'</span>'
          +(n.file?'<div class="tip-file">'+esc(n.file)+'</div>':'')
          +'<div class="tip-hint">Click to drill in · Double-click to open detail<br>'
          +conns+' connection'+(conns!==1?'s':'')+'</div>';
      } else {
        document.getElementById('tip').style.display='none';
      }
      draw();
    } else if (n){
      var tip=document.getElementById('tip');
      tip.style.left=(mx+14)+'px';
      tip.style.top=Math.max(4,my-70)+'px';
    }
  }
});
gc.addEventListener('mouseup',function(){
  var n=pendingClick; pendingClick=null;
  if (n && Date.now()-clickTime<500){
    navStack.push({nodes:graphNodes.slice(),edges:graphEdges.slice(),title:currentTitle,focus:currentFocus});
    navigateTo(n.name, false);
  }
  dragNode=null; dragging=false;
});
gc.addEventListener('dblclick',function(e){
  var r=gc.getBoundingClientRect();
  var n=nodeAt(e.clientX-r.left,e.clientY-r.top);
  if (n) showDetail(n.name);
});
gc.addEventListener('mouseleave',function(){
  dragNode=null; dragging=false; hovNode=null;
  document.getElementById('tip').style.display='none'; draw();
});
gc.addEventListener('wheel',function(e){
  e.preventDefault();
  var r=gc.getBoundingClientRect();
  var mx=e.clientX-r.left, my=e.clientY-r.top;
  var z=e.deltaY<0?1.12:0.89;
  var ns=Math.max(0.1,Math.min(8,sc*z));
  offsetX=mx-(mx-offsetX)*(ns/sc); offsetY=my-(my-offsetY)*(ns/sc); sc=ns; draw();
},{passive:false});

function zoom(f){ sc=Math.max(0.1,Math.min(8,sc*f)); draw(); }
function resetView(){ offsetX=0;offsetY=0;sc=1; draw(); }

// ── Detail panel ─────────────────────────────────────────────────────────────
async function showDetail(name){
  var det=document.getElementById('detail');
  det.classList.add('open');
  document.getElementById('detName').textContent=name;
  document.getElementById('detFile').textContent='Loading…';
  document.getElementById('detBody').innerHTML='<div style="color:#8b949e;font-size:12px">Loading…</div>';

  try {
    var sym = await api('/graph/symbol/'+REPO_ID+'/'+encodeURIComponent(name));
    var ti = tinfo(sym.type);
    document.getElementById('detFile').textContent = sym.file||'';
    var html = '';
    if (sym.sig){
      html += '<div class="det-section"><h4>Signature</h4>'
        +'<div style="background:#0d1117;border-radius:6px;padding:8px 10px;font-family:monospace;font-size:11px;color:#7c3aed;word-break:break-all">'+esc(sym.sig)+'</div></div>';
    }
    if (sym.callers && sym.callers.length){
      html += '<div class="det-section"><h4>Called by <span class="det-count">'+sym.callers_count+'</span></h4>'
        + sym.callers.slice(0,20).map(function(c){
            return '<div class="det-row" onclick="navigateTo(\''+esc(c)+'\')">'
              +'<span class="sym-dot" style="background:'+tinfo('Function').color+'"></span>'
              +esc(c)+'<span class="arr">→</span></div>';
          }).join('') + '</div>';
    }
    if (sym.callees && sym.callees.length){
      html += '<div class="det-section"><h4>Calls <span class="det-count">'+sym.callees_count+'</span></h4>'
        + sym.callees.slice(0,20).map(function(c){
            return '<div class="det-row" onclick="navigateTo(\''+esc(c)+'\')">'
              +'<span class="sym-dot" style="background:'+tinfo('Function').color+'"></span>'
              +esc(c)+'<span class="arr">→</span></div>';
          }).join('') + '</div>';
    }
    if (sym.type_refs && sym.type_refs.length){
      html += '<div class="det-section"><h4>Type Links</h4>'
        + sym.type_refs.slice(0,15).map(function(c){
            return '<div class="det-row" onclick="navigateTo(\''+esc(c)+'\')">'
              +'<span class="sym-dot" style="background:'+tinfo('TypeAlias').color+'"></span>'
              +esc(c)+'<span class="arr">→</span></div>';
          }).join('') + '</div>';
    }
    if (sym.tables && sym.tables.length){
      html += '<div class="det-section"><h4>Database Tables</h4>'
        + sym.tables.slice(0,15).map(function(c){
            return '<div class="det-row" onclick="navigateTo(\''+esc(c)+'\')">'
              +'<span class="sym-dot" style="background:'+tinfo('DbTable').color+'"></span>'
              +esc(c)+'<span class="arr">→</span></div>';
          }).join('') + '</div>';
    }
    if (sym.libraries && sym.libraries.length){
      html += '<div class="det-section"><h4>Libraries</h4>'
        + sym.libraries.slice(0,15).map(function(c){
            return '<div class="det-row" onclick="navigateTo(\''+esc(c)+'\')">'
              +'<span class="sym-dot" style="background:'+tinfo('ExternalDep').color+'"></span>'
              +esc(c)+'<span class="arr">→</span></div>';
          }).join('') + '</div>';
    }
    if (sym.related_files && sym.related_files.length){
      html += '<div class="det-section"><h4>Related Files</h4>'
        + sym.related_files.slice(0,12).map(function(c){
            return '<div class="det-row"><span class="sym-dot" style="background:'+tinfo('File').color+'"></span>'
              +esc(c)+'</div>';
          }).join('') + '</div>';
    }
    if (!html) html='<div style="color:#8b949e;font-size:12px">No connection data available.</div>';
    document.getElementById('detBody').innerHTML=html;
  } catch(e){
    document.getElementById('detBody').innerHTML='<div style="color:#8b949e;font-size:12px">Failed to load symbol data.</div>';
  }
}

function closeDetail(){
  document.getElementById('detail').classList.remove('open');
}

// ── Search ───────────────────────────────────────────────────────────────────
var searchTimer;
document.getElementById('searchInp').addEventListener('input',function(){
  clearTimeout(searchTimer);
  var q=this.value.trim();
  if (!q){ document.getElementById('searchDropdown').style.display='none'; return; }
  searchTimer=setTimeout(async function(){
    try {
      var data = await api('/graph/search/'+REPO_ID+'?q='+encodeURIComponent(q)+'&limit=12');
      var dd=document.getElementById('searchDropdown');
      if (!data.symbols||!data.symbols.length){ dd.style.display='none'; return; }
      dd.innerHTML=data.symbols.map(function(s){
        var ti=tinfo(s.type);
        return '<div class="sr-item" onclick="onSearchSelect(\''+esc(s.name)+'\')">'
          +'<span class="sr-badge" style="background:'+ti.color+'22;color:'+ti.color+'">'+esc(ti.label)+'</span>'
          +'<div><div class="sr-name">'+esc(s.name)+'</div>'
          +'<div class="sr-meta">'+esc(s.file||'')+'</div></div></div>';
      }).join('');
      dd.style.display='block';
    } catch(e){}
  }, 250);
});
document.getElementById('searchInp').addEventListener('keydown',function(e){
  if (e.key==='Escape'){ this.value=''; document.getElementById('searchDropdown').style.display='none'; }
});
document.addEventListener('click',function(e){
  if (!e.target.closest('.search-wrap')) document.getElementById('searchDropdown').style.display='none';
});
function onSearchSelect(name){
  document.getElementById('searchInp').value='';
  document.getElementById('searchDropdown').style.display='none';
  navigateTo(name);
}

// ── UI helpers ───────────────────────────────────────────────────────────────
function showLoading(on){
  document.getElementById('loading').className='on'[on?'toString':'constructor']===String?'on':'';
  document.getElementById('loading').style.display=on?'flex':'none';
}
function showEmpty(msg, force){
  var el=document.getElementById('emptyState');
  if (msg===null){ el.style.display='none'; return; }
  if (force || !graphNodes.length){ el.style.display='flex'; document.getElementById('emptyMsg').innerHTML=msg||''; }
}
function esc(s){ return String(s||'').replace(/&/g,'&amp;').replace(/</g,'&lt;').replace(/>/g,'&gt;'); }

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