{% extends "base.html" %}

{% block title %}Feature Topology · Run #{{ run.id }}{% endblock %}

{% block extra_head %}
<script type="text/javascript" src="https://unpkg.com/vis-network/standalone/umd/vis-network.min.js"></script>
<script src="https://polyfill.io/v3/polyfill.min.js?features=es6"></script>
<script id="MathJax-script" async src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js"></script>
<style>
    /* --- THEME SETTINGS --- */
    :root {
        /* Inherit from base, but ensure local overrides match if needed */
        --bg-panel: #161616;
        --border-color: #333;
    }

    /* --- LAYOUT COMPONENTS --- */
    /* --- LAYOUT COMPONENTS --- */
    /* Custom toggle buttons removed in favor of Bootstrap classes */

    /* --- GRAPH CONTAINER --- */
    #mynetwork {
        width: 100%;
        height: 600px;
        background-color: #0f0f0f;
        /* Slightly darker than panel */
        border: 1px solid var(--border-color);
        border-radius: 6px;
        position: relative;
    }

    .graph-loading {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        color: #666;
        font-family: 'Fira Code', monospace;
    }

    /* --- LIST VIEW (ACCORDION) --- */
    .family-row {
        background-color: var(--bg-panel);
        border: 1px solid var(--border-color);
        margin-bottom: 0.5rem;
        border-radius: 4px;
        overflow: hidden;
    }

    .family-header {
        padding: 0.75rem 1rem;
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: space-between;
        transition: background 0.15s;
    }

    .family-header:hover {
        background-color: rgba(255, 255, 255, 0.03);
    }

    .family-body {
        border-top: 1px solid var(--border-color);
        background-color: rgba(0, 0, 0, 0.2);
        padding: 1rem;
        display: none;
        /* Hidden by default */
    }

    .family-body.show {
        display: block;
    }

    /* --- BADGES & PILLS --- */
    .tech-badge {
        font-family: 'Fira Code', monospace;
        font-size: 0.7rem;
        padding: 2px 6px;
        background: rgba(255, 255, 255, 0.05);
        color: #888;
        border-radius: 2px;
    }

    .child-node {
        display: inline-flex;
        align-items: center;
        background: rgba(255, 255, 255, 0.03);
        border: 1px solid rgba(255, 255, 255, 0.08);
        padding: 4px 8px;
        margin-right: 6px;
        margin-bottom: 6px;
        border-radius: 20px;
        font-size: 0.75rem;
        color: #ccc;
        text-decoration: none;
        transition: all 0.2s;
    }

    .child-node:hover {
        border-color: var(--accent);
        color: white;
        background: var(--accent-dim);
    }

    .child-id {
        font-family: 'Fira Code', monospace;
        opacity: 0.5;
        margin-left: 6px;
        font-size: 0.65rem;
    }

    /* UTILS */
    .text-accent {
        color: var(--accent) !important;
    }

    .bg-accent {
        background-color: var(--accent) !important;
    }
</style>
{% endblock %}

{% block content %}

<div class="d-flex justify-content-between align-items-end mb-4 border-bottom border-secondary border-opacity-10 pb-3">
    <div>
        <h6 class="text-uppercase text-muted mb-1 small ls-1">Structural Analysis</h6>
        <h2 class="mb-0 text-white fw-bold font-monospace">
            TOPOLOGY GRAPH <span class="text-accent fs-4">/ {{ run.families.count }} CLUSTERS</span>
        </h2>
    </div>

    <div class="d-flex gap-3 align-items-center">
        <div class="btn-group" role="group">
            <button type="button" class="btn btn-sm btn-outline-secondary active text-uppercase"
                style="font-size: 0.7rem; letter-spacing: 1px;" id="btn-graph" onclick="switchView('graph')">
                <i class="bi bi-share-fill me-2"></i> Graph
            </button>
            <button type="button" class="btn btn-sm btn-outline-secondary text-uppercase"
                style="font-size: 0.7rem; letter-spacing: 1px;" id="btn-list" onclick="switchView('list')">
                <i class="bi bi-list-ul me-2"></i> List
            </button>
        </div>

        <a href="{% url 'explorer:build_families' run.id %}" class="btn btn-sm btn-outline-secondary text-uppercase"
            style="font-size: 0.7rem; letter-spacing: 1px;">
            <i class="bi bi-arrow-repeat me-1"></i> Re-Build Topology
        </a>
    </div>
</div>

<p class="text-muted small mb-4">
    This page visualizes the semantic topology of the features.
    It groups features into families based on their co-occurrence and correlation, allowing you to explore the
    relationships between different concepts learned by the SAE.
</p>


{% if families %}

<div id="view-graph">
    <div class="d-flex justify-content-between align-items-center mb-2">
        <small class="text-muted fst-italic"><i class="bi bi-mouse"></i> Scroll to zoom, Drag to move, Click to view
            details.</small>
        <div class="btn-group">
            <button id="toggleBridgesBtn" class="btn btn-sm btn-outline-secondary" onclick="toggleBridges()">
                <i class="bi bi-diagram-3"></i> Highlight Bridges
            </button>
            <button id="togglePhysicsBtn" class="btn btn-sm btn-outline-secondary" onclick="togglePhysics()">
                <i class="bi bi-pause-fill"></i> Pause Physics
            </button>
        </div>
    </div>
    <div id="mynetwork">
        <div class="graph-loading">Initializing Physics Engine...</div>
    </div>
</div>

<div id="view-list" style="display: none;">
    <div class="d-flex justify-content-between align-items-center mb-3">
        <div class="d-flex gap-2 align-items-center w-50">
            <input type="text" id="familySearch"
                class="form-control form-control-sm bg-dark border-secondary text-white w-50" placeholder="Filter..."
                onkeyup="filterFamilies()">

            <!-- VIEW MODE TOGGLE -->
            <div class="btn-group btn-group-sm" role="group">
                <input type="radio" class="btn-check" name="listMode" id="modeParent" autocomplete="off" checked
                    onclick="toggleListMode('parent')">
                <label class="btn btn-outline-secondary" for="modeParent">By Parent</label>

                <input type="radio" class="btn-check" name="listMode" id="modeChild" autocomplete="off"
                    onclick="toggleListMode('child')">
                <label class="btn btn-outline-secondary" for="modeChild">By Child</label>
            </div>
        </div>
        <small class="text-muted" id="count-display">{{ families|length }} Families found</small>
    </div>

    <!-- LIST BY PARENT (Default) -->
    <div id="list-by-parent">
        {% for family in families %}
        <div class="family-row">
            <div class="family-header" onclick="toggleFamily(this)">
                <div class="d-flex align-items-center gap-3">
                    <span class="tech-badge text-accent border border-accent border-opacity-25">FAMILY #{{ family.id }}</span>
                    <span class="fw-bold text-white fs-5">{{ family.parent_feature.label|default:"Unlabeled Concept"}}</span>
                    <span
                        class="badge bg-dark border border-secondary border-opacity-25 text-muted font-monospace small"> Parent #{{ family.parent_feature.feature_index }}
                    </span>
                </div>
                <div class="d-flex align-items-center gap-3">
                    <span class="badge bg-dark border border-secondary border-opacity-25 text-white">
                        {{ family.children_features.count }} Children
                    </span>
                    <i class="bi bi-chevron-down text-muted"></i>
                </div>
            </div>

            <div class="family-body">
                <div class="mb-2 text-muted small text-uppercase fw-bold" style="font-size: 0.65rem;">Children Nodes
                </div>
                <div class="d-flex flex-wrap">
                    {% for child in family.children_features.all %}
                    <a href="{% url 'explorer:feature_detail' run.id child.feature_index %}" class="child-node">
                        {{ child.label }} <span class="child-id">#{{ child.feature_index }}</span>
                    </a>
                    {% endfor %}
                </div>
                <div class="mt-3 pt-2 border-top border-secondary border-opacity-10 text-end">
                    <a href="{% url 'explorer:feature_detail' run.id family.parent_feature.feature_index %}"
                        class="text-accent small text-decoration-none text-uppercase fw-bold">
                        View Parent Analysis <i class="bi bi-arrow-right"></i>
                    </a>
                </div>
            </div>
        </div>
        {% endfor %}

    </div>

    <!-- LIST BY CHILD (Inverted) -->
    <div id="list-by-child" style="display: none;">
        {% for item in inverted_families %}
        <div class="family-row">
            <div class="family-header" onclick="toggleFamily(this)">
                <div class="d-flex align-items-center gap-3">
                    <span class="tech-badge text-info border border-info border-opacity-25">CHILD #{{ item.child.feature_index}}</span>
                    <span class="fw-bold text-white">{{ item.child.label|default:"Unlabeled Feature" }}</span>
                </div>
                <div class="d-flex align-items-center gap-3">
                    <span class="text-muted small">{{ item.families|length }} Parents</span>
                    <i class="bi bi-chevron-down text-muted"></i>
                </div>
            </div>

            <div class="family-body">
                <div class="mb-2 text-muted small text-uppercase fw-bold" style="font-size: 0.65rem;">Belongs to
                    Families (Parents)</div>
                <div class="d-flex flex-wrap">
                    {% for fam in item.families %}
                    <a href="{% url 'explorer:feature_detail' run.id fam.parent_feature.feature_index %}"
                        class="child-node" style="border-color: rgba(139, 92, 246, 0.5); color: #c4b5fd;">
                        {{ fam.parent_feature.label }} <span class="child-id">#{{ fam.parent_feature.feature_index}}</span>
                    </a>
                    {% endfor %}
                </div>
                <div class="mt-3 pt-2 border-top border-secondary border-opacity-10 text-end">
                    <a href="{% url 'explorer:feature_detail' run.id item.child.feature_index %}"
                        class="text-info small text-decoration-none text-uppercase fw-bold">
                        View Child Analysis <i class="bi bi-arrow-right"></i>
                    </a>
                </div>
            </div>
        </div>
        {% endfor %}
    </div>
</div>

{% else %}
<div class="text-center py-5 border border-dashed border-secondary rounded" style="background: rgba(255,255,255,0.01);">
    <div class="mb-3 text-muted opacity-25">
        <i class="bi bi-diagram-2" style="font-size: 4rem;"></i>
    </div>
    <h4 class="text-white">No Topology Built</h4>
    <p class="text-muted mb-4">Run the MST algorithm to detect semantic clusters in the SAE latent space.</p>
    <a href="{% url 'explorer:build_families' run.id %}" class="btn btn-accent text-uppercase px-4 shadow">
        Start Graph Algorithm
    </a>
</div>
{% endif %}

<br>


<!-- MATRIX ANALYSIS SECTION -->
{% if run.matrix_s_heatmap or run.matrix_c_heatmap or run.matrix_d_heatmap %}
<div class="mb-5">
    <h6 class="text-uppercase text-muted mb-3 small ls-1">Matrix Analysis</h6>
    <div class="row g-4">
        <!-- S Matrix -->
        <div class="col-md-4">
            <div class="panel p-0 overflow-hidden h-100">
                <div class="p-3 border-bottom border-secondary border-opacity-10 bg-dark">
                    <h6 class="text-white mb-1 small">Similarity (S)</h6>
                    <small class="text-muted d-block mb-2" style="font-size: 0.7rem;">Decoder Weights Cosine Sim</small>
                    <div class="text-muted small font-mono" style="font-size: 0.75rem;">
                        $$S = W_{dec} W_{dec}^T$$
                    </div>
                </div>
                <div class="p-3 text-center" style="background-color: black;">
                    {% if run.matrix_s_heatmap %}
                    <a href="#" data-bs-toggle="modal" data-bs-target="#matrixSModal">
                        <img src="{{ run.matrix_s_heatmap.url }}"
                            class="img-fluid border border-secondary border-opacity-25" alt="S Matrix">
                    </a>
                    {% else %}
                    <span class="text-muted small">Not Available</span>
                    {% endif %}
                </div>
            </div>
        </div>

        <!-- C Matrix -->
        <div class="col-md-4">
            <div class="panel p-0 overflow-hidden h-100">
                <div class="p-3 border-bottom border-secondary border-opacity-10 bg-dark">
                    <h6 class="text-white mb-1 small">Co-occurrence (C)</h6>
                    <small class="text-muted d-block mb-2" style="font-size: 0.7rem;">Normalized Co-activations</small>
                    <div class="text-muted small font-mono" style="font-size: 0.75rem;">
                        $$C_{ij}^{norm} = \frac{C_{ij}}{f_i + \epsilon}$$
                    </div>
                </div>
                <div class="p-3 text-center" style="background-color: black;">
                    {% if run.matrix_c_heatmap %}
                    <a href="#" data-bs-toggle="modal" data-bs-target="#matrixCModal">
                        <img src="{{ run.matrix_c_heatmap.url }}"
                            class="img-fluid border border-secondary border-opacity-25" alt="C Matrix">
                    </a>
                    {% else %}
                    <span class="text-muted small">Not Available</span>
                    {% endif %}
                </div>
            </div>
        </div>

        <!-- D Matrix -->
        <div class="col-md-4">
            <div class="panel p-0 overflow-hidden h-100">
                <div class="p-3 border-bottom border-secondary border-opacity-10 bg-dark">
                    <h6 class="text-white mb-1 small">Dense Similarity (D)</h6>
                    <small class="text-muted d-block mb-2" style="font-size: 0.7rem;">Activation Value
                        Similarity</small>
                    <div class="text-muted small font-mono" style="font-size: 0.75rem;">
                        $$D_{ij} = \frac{V_i \cdot V_j}{\|V_i\| \|V_j\|}$$
                    </div>
                </div>
                <div class="p-3 text-center" style="background-color: black;">
                    {% if run.matrix_d_heatmap %}
                    <a href="#" data-bs-toggle="modal" data-bs-target="#matrixDModal">
                        <img src="{{ run.matrix_d_heatmap.url }}"
                            class="img-fluid border border-secondary border-opacity-25" alt="D Matrix">
                    </a>
                    {% else %}
                    <span class="text-muted small">Not Available</span>
                    {% endif %}
                </div>
            </div>
        </div>
    </div>
</div>

<!-- MODALS FOR MATRICES -->
{% if run.matrix_s_heatmap %}
<div class="modal fade" id="matrixSModal" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog modal-xl modal-dialog-centered">
        <div class="modal-content bg-dark border-secondary">
            <div class="modal-body p-0 text-center" style="background-color: black;">
                <img src="{{ run.matrix_s_heatmap.url }}" class="img-fluid" alt="S Matrix Full">
            </div>
        </div>
    </div>
</div>
{% endif %}

{% if run.matrix_c_heatmap %}
<div class="modal fade" id="matrixCModal" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog modal-xl modal-dialog-centered">
        <div class="modal-content bg-dark border-secondary">
            <div class="modal-body p-0 text-center" style="background-color: black;">
                <img src="{{ run.matrix_c_heatmap.url }}" class="img-fluid" alt="C Matrix Full">
            </div>
        </div>
    </div>
</div>
{% endif %}

{% if run.matrix_d_heatmap %}
<div class="modal fade" id="matrixDModal" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog modal-xl modal-dialog-centered">
        <div class="modal-content bg-dark border-secondary">
            <div class="modal-body p-0 text-center" style="background-color: black;">
                <img src="{{ run.matrix_d_heatmap.url }}" class="img-fluid" alt="D Matrix Full">
            </div>
        </div>
    </div>
</div>
{% endif %}

{% endif %}

<script type="text/javascript">
    let network = null;
    let physicsEnabled = true;
    let bridgesEnabled = false;
    let originalNodes = null;

    function switchView(viewName) {
        // Toggle Buttons
        document.getElementById('btn-graph').classList.toggle('active', viewName === 'graph');
        document.getElementById('btn-list').classList.toggle('active', viewName === 'list');

        // Toggle Containers
        document.getElementById('view-graph').style.display = viewName === 'graph' ? 'block' : 'none';
        document.getElementById('view-list').style.display = viewName === 'list' ? 'block' : 'none';
    }

    function togglePhysics() {
        if (!network) return;

        const btn = document.getElementById('togglePhysicsBtn');
        if (physicsEnabled) {
            network.physics.stopSimulation();
            physicsEnabled = false;
            btn.innerHTML = '<i class="bi bi-play-fill"></i> Resume Physics';
            btn.classList.replace('btn-outline-secondary', 'btn-outline-success');
        } else {
            network.physics.startSimulation();
            physicsEnabled = true;
            btn.innerHTML = '<i class="bi bi-pause-fill"></i> Pause Physics';
            btn.classList.replace('btn-outline-success', 'btn-outline-secondary');
        }
    }

    function toggleBridges() {
        if (!network) return;
        const btn = document.getElementById('toggleBridgesBtn');
        const nodes = network.body.data.nodes;

        if (!bridgesEnabled) {
            // ENABLE BRIDGE MODE
            bridgesEnabled = true;
            btn.classList.replace('btn-outline-secondary', 'btn-outline-info');

            // Calculate connections for all nodes
            const updates = [];
            nodes.forEach(node => {
                const connected = network.getConnectedNodes(node.id).length;

                if (node.group === 'child') {
                    if (connected > 1) {
                        // BRIDGE: High visibility
                        updates.push({
                            id: node.id,
                            size: 25,
                            color: { background: '#3498db', border: '#2980b9' }, // Blue
                            font: { size: 14, color: '#fff', background: '#000' },
                            label: node.title // Show label
                        });
                    } else {
                        // NORMAL CHILD: Medium visibility
                        updates.push({
                            id: node.id,
                            size: 10,
                            color: { background: '#555', border: '#333' }
                        });
                    }
                } else if (node.group === 'parent') {
                    // PARENT: Reduce visibility
                    updates.push({
                        id: node.id,
                        size: 10,
                        color: { background: '#444', border: '#222' },
                        font: { size: 10, color: '#888' }
                    });
                }
            });
            nodes.update(updates);

        } else {
            // DISABLE BRIDGE MODE (Restore defaults)
            bridgesEnabled = false;
            btn.classList.replace('btn-outline-info', 'btn-outline-secondary');

            const updates = [];
            nodes.forEach(node => {
                if (node.group === 'parent') {
                    updates.push({
                        id: node.id,
                        size: 20,
                        color: { background: '#8b5cf6', border: '#7c3aed' },
                        font: { size: 14, color: '#fff', background: '#161616' }
                    });
                } else {
                    updates.push({
                        id: node.id,
                        size: 5,
                        color: { background: '#444', border: '#222' },
                        font: { size: 14, color: '#ccc' },
                        label: '' // Hide label
                    });
                }
            });
            nodes.update(updates);
        }
    }

    function toggleFamily(header) {
        const body = header.nextElementSibling;
        const icon = header.querySelector('.bi-chevron-down');

        if (body.style.display === 'block') {
            body.style.display = 'none';
            icon.style.transform = 'rotate(0deg)';
        } else {
            body.style.display = 'block';
            icon.style.transform = 'rotate(180deg)';
        }
    }

    function filterFamilies() {
        const query = document.getElementById('familySearch').value.toLowerCase();
        // Filter visible rows only
        const activeContainer = document.getElementById('list-by-parent').style.display !== 'none'
            ? document.getElementById('list-by-parent')
            : document.getElementById('list-by-child');

        const rows = activeContainer.querySelectorAll('.family-row');
        let visibleCount = 0;

        rows.forEach(row => {
            const text = row.innerText.toLowerCase();
            if (text.includes(query)) {
                row.style.display = 'block';
                visibleCount++;
            } else {
                row.style.display = 'none';
            }
        });

        // Update count
        const label = activeContainer.id === 'list-by-parent' ? 'Families' : 'Children';
        document.getElementById('count-display').innerText = `${visibleCount} ${label} found`;
    }

    function toggleListMode(mode) {
        const parentList = document.getElementById('list-by-parent');
        const childList = document.getElementById('list-by-child');
        const searchInput = document.getElementById('familySearch');

        if (mode === 'parent') {
            parentList.style.display = 'block';
            childList.style.display = 'none';
            searchInput.placeholder = "Filter families...";
        } else {
            parentList.style.display = 'none';
            childList.style.display = 'block';
            searchInput.placeholder = "Filter children...";
        }
        // Re-apply filter to update counts and visibility
        filterFamilies();
    }

    // --- VIS.JS GRAPH INITIALIZATION ---
    document.addEventListener("DOMContentLoaded", function () {
        {% if families %}

        // 1. Prepare Data (Python -> JS)
        const nodes = [];
        const edges = [];
        const addedNodes = new Set();

        {% for family in families %}
        // Parent Node
        if (!addedNodes.has('p_{{ family.id }}')) {
            nodes.push({
                id: 'p_{{ family.id }}',
                label: '{{ family.parent_feature.label|escapejs }}',
                group: 'parent',
                title: 'Family #{{ family.id }} (Parent)',
                value: 20, // Size
                featureId: {{ family.parent_feature.feature_index }}
    });
    addedNodes.add('p_{{ family.id }}');
        }

    // Child Nodes
    {% for child in family.children_features.all %}
    if (!addedNodes.has('c_{{ child.feature_index }}')) {
        nodes.push({
            id: 'c_{{ child.feature_index }}',
            label: '', // Labels hidden for clean graph, hover to see
            group: 'child',
            title: '{{ child.label|escapejs }} (#{{ child.feature_index }})',
            value: 5, // Size
            featureId: {{ child.feature_index }}
            });
    addedNodes.add('c_{{ child.feature_index }}');
        }
    // Edge
    edges.push({ from: 'p_{{ family.id }}', to: 'c_{{ child.feature_index }}' });
    {% endfor %}
    {% endfor %}

    // 2. Configuration
    const container = document.getElementById("mynetwork");
    const data = { nodes: new vis.DataSet(nodes), edges: new vis.DataSet(edges) };
    const options = {
        nodes: {
            shape: 'dot',
            font: { face: 'Fira Code', color: '#ccc', size: 14 }
        },
        groups: {
            parent: {
                color: { background: '#8b5cf6', border: '#7c3aed' }, // Violet Accent
                font: { color: '#fff', background: '#161616' }
            },
            child: {
                color: { background: '#444', border: '#222' }, // Grey
            }
        },
        edges: {
            color: { color: '#333', opacity: 0.4 },
            smooth: { type: 'continuous' }
        },
        physics: {
            stabilization: false,
            barnesHut: {
                gravitationalConstant: -2000,
                centralGravity: 0.3,
                springLength: 95
            }
        },
        interaction: { hover: true, tooltipDelay: 200 }
    };

    // 3. Render
    network = new vis.Network(container, data, options);

    // 4. Interaction: Click opens detail
    network.on("click", function (params) {
        if (params.nodes.length > 0) {
            const nodeId = params.nodes[0];
            const nodeData = data.nodes.get(nodeId);

            if (nodeData && nodeData.featureId !== undefined) {
                const url = "{% url 'explorer:feature_detail' run.id 999999 %}".replace('999999', nodeData.featureId);
                window.open(url, '_blank');
            }
        }
    });

    {% endif %}
    });
</script>
{% endblock %}