{% extends "base.html" %}
{% block title %}{{ t('graph.local_title') }}: {{ center_title }} - {{ wiki_name }}{% endblock %}
{% block content %}
<div class="graph-page">
  <h1>{{ t('graph.local_title') }}: <a href="/article/{{ center_id }}">{{ center_title }}</a></h1>
  <p class="result-count">{{ t('graph.local_summary', nodes=nodes|length, edges=edges|length) }}</p>
  <p class="graph-hint">
    <a href="/graph">{{ t('graph.all_graph') }}</a> &nbsp;|&nbsp;
    <span class="badge badge-cat">Center</span> = {{ t('graph.center') }} &nbsp;
    <span class="badge badge-type">Step 1</span> = {{ t('graph.step1') }} &nbsp;
    <span style="color:var(--muted);font-size:0.85rem">{{ t('graph.step2') }}</span>
  </p>

  <div class="graph-toolbar">
    <div class="graph-search-wrap">
      <input type="text" id="graphSearch" placeholder="{{ t('graph.node_search_placeholder') }}" class="graph-search-input">
      <button id="graphSearchBtn" class="btn-graph-search">{{ t('common.search') }}</button>
      <button id="graphSearchClear" class="btn-graph-clear">{{ t('common.clear') }}</button>
    </div>
  </div>

  <div id="graph-container">
    <div class="graph-legend">
      <div><span style="background:#ffeb3b;border-radius:0"></span> Center</div>
      <div><span style="background:#58a6ff"></span> Step 1</div>
      <div><span style="background:#8b949e;opacity:0.5"></span> Step 2</div>
    </div>
    <div class="graph-controls">{{ t('graph.local_controls') }}</div>
  </div>
</div>

<script src="https://d3js.org/d3.v7.min.js"></script>
<script>
const nodes = {{ nodes | tojson }};
const edges = {{ edges | tojson }};
const centerId = {{ center_id | tojson }};

const catColors = {
  history: '#f85149', technology: '#58a6ff', misc: '#8b949e',
  test: '#d29922', politics: '#bc8cff', science: '#3fb950',
  military: '#f0883e', law: '#d29922', economics: '#a5d6ff',
  project: '#7ee787', philosophy: '#d2a8ff', geography: '#56d364',
  society: '#db61a2',
};
const maturityRadius = { stub: 6, draft: 9, review: 12, mature: 16, unknown: 8 };

function nodeColor(d) {
  if (d.id === centerId) return '#ffeb3b';
  if (d.distance === 1) return catColors[d.category] || '#58a6ff';
  return '#555';
}
function nodeRadius(d) {
  const base = maturityRadius[d.maturity] || 8;
  if (d.id === centerId) return base + 8;
  if (d.distance === 1) return base + 2;
  return Math.max(base - 2, 4);
}
function nodeOpacity(d) {
  if (d.id === centerId || d.distance === 1) return 1;
  return 0.55;
}

const container = document.getElementById('graph-container');
const width = container.clientWidth || 1100;
const height = Math.max(600, window.innerHeight - 300);

const svg = d3.select('#graph-container').append('svg')
  .attr('width', width).attr('height', height);
const g = svg.append('g');
const zoom = d3.zoom().scaleExtent([0.2, 5]).on('zoom', (event) => g.attr('transform', event.transform));
svg.call(zoom);

svg.append('defs').append('marker')
  .attr('id', 'arrow').attr('viewBox', '0 0 10 10')
  .attr('refX', 22).attr('refY', 5)
  .attr('markerWidth', 6).attr('markerHeight', 6).attr('orient', 'auto')
  .append('path').attr('d', 'M0,0 L10,5 L0,10 Z').attr('fill', '#30363d');

const simulation = d3.forceSimulation(nodes)
  .force('link', d3.forceLink(edges).id(d => d.id).distance(d => {
    const src = d.source.distance ?? 0;
    const tgt = d.target.distance ?? 0;
    return 80 + (src + tgt) * 30;
  }))
  .force('charge', d3.forceManyBody().strength(d => d.id === centerId ? -800 : -300))
  .force('center', d3.forceCenter(width / 2, height / 2))
  .force('collision', d3.forceCollide().radius(d => nodeRadius(d) + 8))
  .force('x', d3.forceX(width / 2).strength(0.04))
  .force('y', d3.forceY(height / 2).strength(0.04));

const link = g.append('g')
  .selectAll('line').data(edges).join('line')
  .attr('stroke', '#30363d').attr('stroke-width', 1.5).attr('stroke-opacity', 0.5)
  .attr('marker-end', 'url(#arrow)');

const nodeG = g.append('g').selectAll('g').data(nodes).join('g')
  .attr('opacity', d => nodeOpacity(d))
  .call(d3.drag()
    .on('start', (event, d) => { if (!event.active) simulation.alphaTarget(0.3).restart(); d.fx = d.x; d.fy = d.y; })
    .on('drag', (event, d) => { d.fx = event.x; d.fy = event.y; })
    .on('end', (event, d) => { if (!event.active) simulation.alphaTarget(0); d.fx = null; d.fy = null; })
  );

nodeG.append('circle')
  .attr('r', d => nodeRadius(d))
  .attr('fill', d => nodeColor(d))
  .attr('stroke', d => d.id === centerId ? '#fff' : '#e6edf3')
  .attr('stroke-width', d => d.id === centerId ? 3 : 1.5)
  .style('cursor', 'pointer')
  .on('click', (event, d) => { window.location.href = '/article/' + d.id; });

nodeG.append('text')
  .text(d => d.title.length > 20 ? d.title.slice(0, 20) + '...' : d.title)
  .attr('x', d => nodeRadius(d) + 5)
  .attr('y', 4)
  .attr('fill', d => d.id === centerId ? '#ffeb3b' : '#e6edf3')
  .attr('font-size', d => d.id === centerId ? '13px' : '11px')
  .attr('font-weight', d => d.id === centerId ? '700' : '400')
  .style('pointer-events', 'none');

nodeG.append('title').text(d => `${d.title}
${d.category} | ${d.maturity} | conf ${Math.round(d.confidence * 100)}%
Step ${d.distance}`);

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 highlightSearch(query) {
  const q = query.toLowerCase().trim();
  if (!q) {
    nodeG.attr('opacity', d => nodeOpacity(d));
    link.attr('stroke-opacity', 0.5);
    return;
  }
  const matchIds = new Set(nodes.filter(n => n.title.toLowerCase().includes(q) || n.id.toLowerCase().includes(q)).map(n => n.id));
  nodeG.attr('opacity', d => matchIds.has(d.id) ? 1 : 0.1);
  link.attr('stroke-opacity', l => {
    const sid = typeof l.source === 'object' ? l.source.id : l.source;
    const tid = typeof l.target === 'object' ? l.target.id : l.target;
    return (matchIds.has(sid) || matchIds.has(tid)) ? 0.8 : 0.05;
  });
  const first = simulation.nodes().find(n => matchIds.has(n.id));
  if (first) {
    const target = d3.zoomIdentity.translate(width / 2 - first.x, height / 2 - first.y).scale(1.8);
    svg.transition().duration(750).call(zoom.transform, target);
  }
}
document.getElementById('graphSearchBtn').addEventListener('click', () => highlightSearch(document.getElementById('graphSearch').value));
document.getElementById('graphSearch').addEventListener('keydown', event => {
  if (event.key === 'Enter') highlightSearch(event.target.value);
});
document.getElementById('graphSearchClear').addEventListener('click', () => {
  document.getElementById('graphSearch').value = '';
  nodeG.attr('opacity', d => nodeOpacity(d));
  link.attr('stroke-opacity', 0.5);
});
</script>
{% endblock %}