{% extends "base.html" %}
{% set active = 'graph' %}
{% block title %}关系图 · DocGraph{% endblock %}
{% block content %}
<h1>关系图</h1>

{% set default_node_kinds = 'register,bitfield,module,interface,signal,figure'.split(',') %}
{% set default_edge_kinds = 'has_bitfield,belongs_to,contained_in,connects_to,controls,depends_on,references'.split(',') %}
<form class="filter-bar graph-filters" id="graph-controls">
  <div class="filter-group">
    <span class="filter-label">节点类型</span>
    <div class="checkbox-group" id="node-kind-cbs">
      {% for k, c in node_kind_counts.items() %}
      <label class="cb-item" title="{{ k }}（{{ c }} 个）">
        <input type="checkbox" name="node_kind" value="{{ k }}"
               {% if k in default_node_kinds %}checked{% endif %}>
        <span class="dot dot-{{ k }}"></span>{{ k }}
        <span class="muted">({{ c }})</span>
      </label>
      {% endfor %}
    </div>
  </div>

  <div class="filter-group">
    <span class="filter-label">边类型</span>
    <div class="checkbox-group" id="edge-kind-cbs">
      {% for k, c in edge_kind_counts.items() %}
      <label class="cb-item" title="{{ k }}（{{ c }} 条）">
        <input type="checkbox" name="edge_kind" value="{{ k }}"
               {% if k in default_edge_kinds %}checked{% endif %}>
        {{ k }}
        <span class="muted">({{ c }})</span>
      </label>
      {% endfor %}
    </div>
  </div>

  <div class="filter-group filter-row">
    <span class="filter-label">数量上限</span>
    <input type="number" name="limit" value="300" min="10" max="5000" class="limit-input">
    <button type="submit">刷新</button>
  </div>
</form>

<div id="graph-status" class="muted">加载中…</div>
<div id="graph"></div>

{% endblock %}
{% block scripts %}
<script>
// 3D 力导向图（three.js + d3-force-3d）。多 CDN 回退以适应网络。
const KIND_COLORS = {
  register: '#5b8def', bitfield: '#92c5fd',
  section:  '#9c8df0', pin:      '#f59e0b',
  parameter:'#10b981', figure:   '#ec4899',
  term:     '#64748b', module:   '#a78bfa',
  signal:   '#fb7185', chunk:    '#cbd5e1', document: '#0ea5e9',
  interrupt:'#ef4444', clock:    '#06b6d4', memory_map:'#8b5cf6',
  power_domain:'#84cc16', requirement:'#f97316', errata: '#dc2626',
};

function fetchGraph() {
  const nodeKinds = [...document.querySelectorAll('input[name=node_kind]:checked')].map(cb => cb.value).join(',');
  const edgeKinds = [...document.querySelectorAll('input[name=edge_kind]:checked')].map(cb => cb.value).join(',');
  const limit = document.querySelector('input[name=limit]').value || '300';
  const params = new URLSearchParams();
  if (nodeKinds) params.set('kinds', nodeKinds);
  if (edgeKinds) params.set('edge_kinds', edgeKinds);
  params.set('limit', limit);
  document.getElementById('graph-status').textContent = '加载中…';
  return fetch('/api/graph?' + params.toString()).then(r => r.json());
}

function render(data) {
  const status = document.getElementById('graph-status');
  status.textContent = `${data.nodes.length} 节点 · ${data.edges.length} 边`;
  if (!data.nodes.length) {
    status.textContent += '（空图。先 docgraph build 或调整过滤器）';
    return;
  }

  const nodeIdx = new Map(data.nodes.map(n => [n.id, n]));
  const links = data.edges.map(e => ({
    source: e.src, target: e.dst,
    kind: e.kind, confidence: e.confidence,
  })).filter(l => nodeIdx.has(l.source) && nodeIdx.has(l.target));

  const elem = document.getElementById('graph');
  elem.innerHTML = '';

  ForceGraph3D()(elem)
    .graphData({ nodes: data.nodes, links })
    .backgroundColor('#fafafa')
    .nodeRelSize(4)
    .nodeVal(d => d.kind === 'register' ? 2 : d.kind === 'section' ? 1.2 : 1)
    .nodeColor(d => KIND_COLORS[d.kind] || '#9ca3af')
    .nodeOpacity(0.9)
    .nodeLabel(d => `<div style="padding:4px 8px;font:12px sans-serif">${d.kind}: ${d.name}</div>`)
    .linkColor(() => '#9ca3af')
    .linkOpacity(0.35)
    .linkWidth(0.4)
    .cooldownTicks(150)
    .onNodeClick(d => {
      if (d.kind === 'register') {
        window.location = '/registers/' + encodeURIComponent(d.id);
      } else {
        window.location = '/search?q=' + encodeURIComponent(d.name);
      }
    });
}

function initGraphUI() {
  document.getElementById('graph-controls').addEventListener('submit', e => {
    e.preventDefault();
    fetchGraph().then(render);
  });
  document.querySelectorAll('#graph-controls input').forEach(el => {
    el.addEventListener('change', () => fetchGraph().then(render));
  });
  fetchGraph().then(render);
}

function loadScript(url) {
  return new Promise((resolve, reject) => {
    const s = document.createElement('script');
    s.src = url;
    s.onload = resolve;
    s.onerror = reject;
    document.head.appendChild(s);
  });
}

const CDNS = [
  'https://registry.npmmirror.com/3d-force-graph/latest/files/dist/3d-force-graph.min.js',
  'https://cdn.jsdelivr.net/npm/3d-force-graph/dist/3d-force-graph.min.js',
  'https://unpkg.com/3d-force-graph',
];

(async () => {
  for (const url of CDNS) {
    try {
      await loadScript(url);
      if (typeof ForceGraph3D !== 'undefined') {
        initGraphUI();
        return;
      }
    } catch (e) { /* try next CDN */ }
  }
  document.getElementById('graph-status').textContent = '3D 库加载失败，请检查网络后刷新（已尝试 npmmirror / jsdelivr / unpkg）';
})();
</script>
{% endblock %}