{% extends "base.html" %}
{% set active = "graph" %}
{% block title %}Knowledge Graph — GeoSIGINT{% endblock %}

{% block head %}
<script src="https://d3js.org/d3.v7.min.js"></script>
{% endblock %}

{% block content %}
<div class="page-header page-header--compact">
    <h1>Knowledge Graph</h1>
    <div class="page-header__actions">
        <select id="kg-relation" class="input-select">
            <option value="">All Relations</option>
        </select>
        <select id="kg-limit" class="input-select">
            <option value="100">100 edges</option>
            <option value="300" selected>300 edges</option>
            <option value="500">500 edges</option>
        </select>
        <button class="btn btn--primary btn--sm" onclick="loadGraph()">Refresh</button>
    </div>
</div>

<div class="grid-kg">
    <div class="card card--full">
        <div class="card__body card__body--no-pad">
            <svg id="kg-svg" class="kg-svg"></svg>
        </div>
    </div>
    <div class="card">
        <div class="card__header">Relationship Types</div>
        <div class="card__body" id="kg-legend"></div>
    </div>
</div>
{% endblock %}

{% block scripts %}
<script>
const NODE_COLORS = {
    station: '#22c55e', emitter: '#ef4444', signal: '#6366f1',
    band: '#f59e0b', pattern: '#a855f7', anomaly: '#ec4899'
};
const EDGE_COLORS = {
    detected_by: '#4ade80', transmits_on: '#fbbf24', located_near: '#38bdf8',
    co_occurs: '#c084fc', correlated_with: '#f472b6', caused_by: '#ef4444'
};

function loadGraph() {
    const rel = document.getElementById('kg-relation').value;
    const limit = document.getElementById('kg-limit').value;
    let url = `/api/graph?limit=${limit}`;
    if (rel) url += `&relation=${rel}`;

    fetch(url).then(r=>r.json()).then(data => {
        renderGraph(data);
        renderLegend(data.relation_counts);
        populateRelationFilter(data.relation_counts);
    });
}

function populateRelationFilter(counts) {
    const sel = document.getElementById('kg-relation');
    if (sel.options.length <= 1) {
        counts.forEach(r => {
            const opt = document.createElement('option');
            opt.value = r.relation;
            opt.textContent = `${r.relation} (${r.count})`;
            sel.appendChild(opt);
        });
    }
}

function renderLegend(counts) {
    document.getElementById('kg-legend').innerHTML = `
        <div class="kg-legend-section">
            <h4>Node Types</h4>
            ${Object.entries(NODE_COLORS).map(([t,c]) => `
                <div class="kg-legend-item">
                    <span class="legend-dot" style="background:${c}"></span> ${t}
                </div>
            `).join('')}
        </div>
        <div class="kg-legend-section">
            <h4>Edge Types</h4>
            ${counts.map(r => `
                <div class="kg-legend-item">
                    <span class="legend-line" style="background:${EDGE_COLORS[r.relation]||'#666'}"></span>
                    ${r.relation} <span class="text-muted">(${r.count})</span>
                </div>
            `).join('')}
        </div>
    `;
}

function renderGraph(data) {
    const svg = d3.select('#kg-svg');
    svg.selectAll('*').remove();

    const container = svg.node().parentElement;
    const width = container.clientWidth;
    const height = Math.max(500, window.innerHeight - 280);
    svg.attr('width', width).attr('height', height);

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

    const g = svg.append('g');

    // Zoom
    svg.call(d3.zoom().scaleExtent([0.1, 4]).on('zoom', e => g.attr('transform', e.transform)));

    // Edges
    const link = g.append('g').selectAll('line')
        .data(data.links).join('line')
        .attr('stroke', d => EDGE_COLORS[d.relation] || '#444')
        .attr('stroke-opacity', d => Math.max(0.2, d.weight * 0.6))
        .attr('stroke-width', d => Math.max(0.5, d.weight * 2));

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

    node.append('circle')
        .attr('r', d => d.type === 'station' ? 8 : d.type === 'emitter' ? 7 : 5)
        .attr('fill', d => NODE_COLORS[d.type] || '#888')
        .attr('stroke', '#1e1e2e')
        .attr('stroke-width', 1.5);

    node.append('title').text(d => `${d.type}: ${d.label}`);

    // Labels for larger nodes
    node.filter(d => ['station','emitter','band'].includes(d.type))
        .append('text')
        .text(d => d.label.length > 16 ? d.label.slice(0,14)+'…' : d.label)
        .attr('x', 12).attr('y', 4)
        .attr('fill', '#ccc').attr('font-size', '10px').attr('font-family', 'monospace');

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

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