{% extends "base.html" %}
{% block title %}Knowledge Graph — MemoTrail{% endblock %}
{% block content %}
<h1>Knowledge Graph</h1>
<p>{{ entity_count }} entities, {{ relation_count }} relations</p>

<div id="graph-container" style="width: 100%; height: 600px; border: 1px solid var(--pico-muted-border-color); border-radius: var(--pico-border-radius); overflow: hidden;">
</div>

<script src="https://d3js.org/d3.v7.min.js"></script>
<script>
const nodes = {{ nodes_json | safe }};
const links = {{ edges_json | safe }};

if (nodes.length === 0) {
    document.getElementById('graph-container').innerHTML = '<p style="text-align:center; padding: 2rem;">No entities in the knowledge graph yet. Index some sessions first.</p>';
} else {
    const container = document.getElementById('graph-container');
    const width = container.clientWidth;
    const height = container.clientHeight;

    const colorMap = {
        library: '#3b82f6',
        framework: '#8b5cf6',
        language: '#10b981',
        service: '#f59e0b',
        file: '#6b7280',
        concept: '#ec4899',
    };

    const svg = d3.select('#graph-container')
        .append('svg')
        .attr('width', width)
        .attr('height', height);

    const simulation = d3.forceSimulation(nodes)
        .force('link', d3.forceLink(links).id(d => d.id).distance(80))
        .force('charge', d3.forceManyBody().strength(-200))
        .force('center', d3.forceCenter(width / 2, height / 2))
        .force('collision', d3.forceCollide().radius(30));

    const link = svg.append('g')
        .selectAll('line')
        .data(links)
        .join('line')
        .attr('stroke', '#555')
        .attr('stroke-opacity', 0.6)
        .attr('stroke-width', 1.5);

    const node = svg.append('g')
        .selectAll('g')
        .data(nodes)
        .join('g')
        .call(d3.drag()
            .on('start', dragstarted)
            .on('drag', dragged)
            .on('end', dragended));

    node.append('circle')
        .attr('r', d => 5 + Math.min(d.mentions * 2, 15))
        .attr('fill', d => colorMap[d.type] || '#999');

    node.append('text')
        .text(d => d.name)
        .attr('x', 12)
        .attr('y', 4)
        .style('font-size', '11px')
        .style('fill', '#ccc');

    node.append('title')
        .text(d => `${d.name} (${d.type}, ${d.mentions} mentions)`);

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

        node.attr('transform', d => `translate(${d.x},${d.y})`);
    });

    function dragstarted(event) {
        if (!event.active) simulation.alphaTarget(0.3).restart();
        event.subject.fx = event.subject.x;
        event.subject.fy = event.subject.y;
    }

    function dragged(event) {
        event.subject.fx = event.x;
        event.subject.fy = event.y;
    }

    function dragended(event) {
        if (!event.active) simulation.alphaTarget(0);
        event.subject.fx = null;
        event.subject.fy = null;
    }
}
</script>

<h2>Legend</h2>
<div class="grid">
    <div><span style="color: #3b82f6;">&#9679;</span> Library</div>
    <div><span style="color: #8b5cf6;">&#9679;</span> Framework</div>
    <div><span style="color: #10b981;">&#9679;</span> Language</div>
    <div><span style="color: #f59e0b;">&#9679;</span> Service</div>
    <div><span style="color: #6b7280;">&#9679;</span> File</div>
    <div><span style="color: #ec4899;">&#9679;</span> Concept</div>
</div>
{% endblock %}