{% extends "base.html" %}

{% block content %}
<div class="container-fluid py-3">
    <!-- Standardized Search Input -->
    <div class="search-container row g-2 mb-3">
        <div class="col">
            <div class="search-wrapper shadow-sm">
                <input type="text" 
                       id="network-search" 
                       placeholder="Unified Search: e.g., q author ~ /Wang/ rg risk"
                       onkeyup="handleSearchKey(event)"
                       oninput="updateNetworkFeedback()"
                       autocapitalize="none"
                       autocorrect="off"
                       spellcheck="false"
                       autofocus>
                <i class="bi bi-x-circle clear-input" onclick="clearNetworkInput()"></i>
            </div>
        </div>
    </div>

    <!-- Standardized Buttons Row -->
    <div class="d-flex flex-wrap align-items-center gap-2 mb-2">
        <!-- Main Actions -->
        <button id="social-btn" class="btn btn-primary px-4 fw-bold shadow-sm" onclick="executeSearch('social')">
            Social
        </button>

        <div class="btn-group shadow-sm">
            <button id="semantic-btn" class="btn btn-success px-4 fw-bold" onclick="executeSearch('semantic')">
                Semantic (Title)
            </button>
            <button type="button" class="btn btn-success dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" aria-expanded="false">
                <span class="visually-hidden">Toggle Dropdown</span>
            </button>
            <ul class="dropdown-menu shadow-sm">
                <li><h6 class="dropdown-header text-uppercase small pb-1">Analysis Source</h6></li>
                <li>
                    <div class="dropdown-item py-1">
                        <div class="form-check">
                            <input class="form-check-input" type="radio" name="source-select" id="radio-title" value="title" checked onclick="setSemanticSource('title')">
                            <label class="form-check-label small w-100 cursor-pointer" for="radio-title">
                                <i class="bi bi-fonts me-1"></i> Title & Metadata
                            </label>
                        </div>
                    </div>
                </li>
                <li>
                    <div class="dropdown-item py-1">
                        <div class="form-check">
                            <input class="form-check-input" type="radio" name="source-select" id="radio-text" value="text" onclick="setSemanticSource('text')">
                            <label class="form-check-label small w-100 cursor-pointer" for="radio-text">
                                <i class="bi bi-file-text me-1"></i> Full Text (2k chars)
                            </label>
                        </div>
                    </div>
                </li>
                <li>
                    <div class="dropdown-item py-1">
                        <div class="form-check">
                            <input class="form-check-input" type="radio" name="source-select" id="radio-text-4k" value="text-4k" onclick="setSemanticSource('text-4k')">
                            <label class="form-check-label small w-100 cursor-pointer" for="radio-text-4k">
                                <i class="bi bi-file-earmark-text me-1"></i> Full Text (4k chars)
                            </label>
                        </div>
                    </div>
                </li>
            </ul>
        </div>
        <input type="hidden" id="semantic-source-input" value="title">

        {% set id_prefix = 'net' %}
        {% set input_id = 'network-search' %}
        {% include "components/export_button.html" with context %}

        {% set id_prefix = 'net' %}
        {% set onclick_report = 'openNetworkReport()' %}
        {% set disabled = true %}
        {% set disabled_class = 'opacity-50' %}
        {% include "components/report_button.html" %}
        
        <!-- Options Dropdown -->
        <div class="dropdown">
            <button class="btn btn-outline-secondary px-3 shadow-sm dropdown-toggle" type="button" data-bs-toggle="dropdown">
                <i class="bi bi-gear-fill me-1"></i> Options
            </button>
            <ul class="dropdown-menu dropdown-menu-end shadow-sm p-3" style="min-width: 250px;">
                <li><h6 class="dropdown-header px-0 text-uppercase small pb-2 border-bottom mb-2">Verbosity</h6></li>
                <li>
                    <div class="form-check mb-2">
                        <input class="form-check-input" type="radio" name="verbosity" id="verb-minimal" value="minimal">
                        <label class="form-check-label small" for="verb-minimal">Minimal</label>
                    </div>
                </li>
                <li>
                    <div class="form-check">
                        <input class="form-check-input" type="radio" name="verbosity" id="verb-verbose" value="verbose" checked>
                        <label class="form-check-label small" for="verb-verbose">Verbose</label>
                    </div>
                </li>
                <li><h6 class="dropdown-header px-0 text-uppercase small pb-2 border-bottom mb-2 mt-3">Ripgrep</h6></li>
                <li>
                    <div class="form-check">
                        <input class="form-check-input" type="checkbox" id="network-case-sensitive">
                        <label class="form-check-label small" for="network-case-sensitive">Case sensitive rg</label>
                    </div>
                </li>
            </ul>
        </div>
        
        <div id="network-indicator" class="htmx-indicator d-flex align-items-center gap-2 text-primary small ms-2">
            <div id="graph-loader-spinner" class="spinner-border spinner-border-sm" role="status" style="display: none;"></div>
        </div>
    </div>

    <div class="mb-3">
        <div id="network-status-area" class="small text-muted font-monospace overflow-auto bg-light border rounded p-2 w-100" style="height: 5rem;">
            Enter "q querex rg regex" to begin analysis...
        </div>
        <div id="network-stats" class="text-end text-secondary small fw-medium mt-2">
            <!-- Stats will be injected here -->
        </div>
    </div>

    <!-- Main Content: Graph and Controls -->
    <div class="row g-3">
        <!-- Graph Area -->
        <div class="col-lg-9">
            <div id="cy-container" class="card shadow-sm border-0 overflow-hidden" style="height: calc(100vh - 250px); transition: height 0.3s ease;">
                <div id="cy" style="width: 100%; height: 100%; background-color: #f8f9fa;"></div>
                
                <!-- Overlay Legend/Controls -->
                <div class="position-absolute top-0 end-0 m-3 p-3 bg-white bg-opacity-75 rounded shadow-sm border" style="z-index: 100;">
                    <h6 class="fw-bold small mb-2">Graph Controls</h6>
                    <div id="social-controls">
                        <div class="mb-2">
                            <label class="form-label small mb-1">Min Papers: <span id="min-papers-val">1</span></label>
                            <input type="range" class="form-range" id="min-papers" min="1" max="10" value="1" oninput="updateFilters()">
                        </div>
                        <div class="form-check form-switch mb-2">
                            <input class="form-check-input" type="checkbox" id="toggle-lcc" onchange="updateFilters()">
                            <label class="form-check-label small" for="toggle-lcc">Largest Island Only</label>
                        </div>
                    </div>
                    <div class="form-check form-switch mb-2">
                        <input class="form-check-input" type="checkbox" id="toggle-labels" checked onchange="updateFilters()">
                        <label class="form-check-label small" for="toggle-labels">Show Labels</label>
                    </div>
                    <button class="btn btn-outline-secondary btn-sm w-100" onclick="resetLayout()">
                        <i class="bi bi-arrows-fullscreen me-1"></i> Reset View
                    </button>
                </div>

                <!-- Loading Spinner -->
                <div id="graph-loader" class="position-absolute top-50 start-50 translate-middle d-none" style="z-index: 200;">
                    <div class="spinner-border text-primary" role="status">
                        <span class="visually-hidden">Loading...</span>
                    </div>
                </div>
            </div>
        </div>

        <!-- Right Panel: Info -->
        <div class="col-lg-3">
            <div id="info-container" class="card shadow-sm border-0 d-flex flex-column" style="height: calc(100vh - 250px); transition: height 0.3s ease;">
                <div class="card-header bg-white py-3 border-bottom-0">
                    <h6 class="fw-bold mb-0">Analysis Details</h6>
                </div>
                <div class="card-body p-0 overflow-auto flex-grow-1" id="network-info">
                    <div class="p-4 text-center text-muted mt-5">
                        <i class="bi bi-graph-up fs-1 opacity-25 d-block mb-3"></i>
                        Select an author, paper, or edge in the graph to see details.
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Cluster Summary (Thematic Overview) -->
    <div id="cluster-summary-container" class="mt-4 d-none">
        <div class="card shadow-sm border-0 border-start border-success border-4">
            <div class="card-header bg-white py-3">
                <h6 class="fw-bold mb-0"><i class="bi bi-collection me-2"></i>Thematic Constellations</h6>
            </div>
            <div class="card-body p-0 overflow-auto" style="max-height: 400px;">
                <table class="table table-hover table-sm mb-0 align-middle">
                    <thead class="table-light sticky-top">
                        <tr>
                            <th class="ps-3" style="width: 250px;">Theme</th>
                            <th class="text-center" style="width: 100px;">Papers</th>
                            <th>Representative Samples</th>
                        </tr>
                    </thead>
                    <tbody id="cluster-summary-body"></tbody>
                </table>
            </div>
        </div>
    </div>

    <!-- Details Table (Visible in Semantic Mode) -->
    <div id="semantic-details" class="mt-4 d-none">
        <div class="card shadow-sm border-0">
            <div class="card-header bg-white py-3 d-flex justify-content-between align-items-center">
                <h6 class="fw-bold mb-0">Galaxy Map Data</h6>
                <div class="small text-muted">Sorted by Constellation</div>
            </div>
            <div class="card-body p-0 overflow-auto" style="max-height: 400px;">
                <table class="table table-hover table-sm mb-0 align-middle" id="galaxy-table">
                    <thead class="table-light sticky-top">
                        <tr>
                            <th class="ps-3" style="width: 100px;">Tag</th>
                            <th class="text-center" style="width: 60px;">ID</th>
                            <th>Author</th>
                            <th>Title</th>
                            <th class="text-center" style="width: 60px;">Year</th>
                        </tr>
                    </thead>
                    <tbody id="galaxy-table-body"></tbody>
                </table>
            </div>
        </div>
    </div>
</div>

<!-- Scripts -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/cytoscape/3.26.0/cytoscape.min.js"></script>
<script>
    let cy;
    let currentData = null;

    function handleSearchKey(e) {
        updateNetworkFeedback();
        if (e.key === 'Enter') {
            const lastMode = (currentData && currentData.mode) ? currentData.mode : 'social';
            executeSearch(lastMode);
        }
    }

    function clearNetworkInput() {
        const input = document.getElementById('network-search');
        input.value = '';
        input.focus();
        updateNetworkFeedback();
    }

    function splitNetworkUniverse(raw) {
        const text = raw.trim();
        const rgSplit = text.match(/^(.*?)\s+rg\s+([\s\S]*)$/i);
        if (rgSplit) {
            let qPart = rgSplit[1].trim();
            if (qPart.toLowerCase().startsWith('q ')) qPart = qPart.slice(2).trim();
            return { q: qPart, rg: rgSplit[2].trim() };
        }
        if (text.toLowerCase().startsWith('q ')) return { q: text.slice(2).trim(), rg: '' };
        if (text.toLowerCase().startsWith('rg ')) return { q: '', rg: text.slice(3).trim() };
        return { q: text, rg: '' };
    }

    function updateNetworkFeedback() {
        const input = document.getElementById('network-search');
        const statusArea = document.getElementById('network-status-area');
        if (!input || !statusArea) return;

        const query = input.value.trim();
        if (!query) {
            statusArea.textContent = 'Enter "q querex rg regex" to begin analysis...';
            return;
        }

        const parts = splitNetworkUniverse(query);
        if (parts.q && parts.rg) {
            statusArea.textContent = `Querex universe: ${parts.q}; ripgrep filter: ${parts.rg}`;
        } else if (parts.rg) {
            statusArea.textContent = `Ripgrep universe: ${parts.rg}`;
        } else if (query.toLowerCase().startsWith('q ')) {
            statusArea.textContent = `Querex universe: ${parts.q}`;
        } else {
            statusArea.textContent = `Query universe: ${parts.q}`;
        }
    }

    function executeReadHistory() {
        const input = document.getElementById('network-search');
        if (input) {
            input.value = `q where read_count > 0 order by -last_read`;
            executeSearch('social');
        }
    }

    function setSemanticSource(source) {
        const input = document.getElementById('semantic-source-input');
        const btn = document.getElementById('semantic-btn');
        input.value = source;
        
        const label = source === 'title' ? 'Semantic (Title)' : 'Semantic (Text)';
        btn.innerText = label;
    }

    async function executeSearch(mode) {
        const query = document.getElementById('network-search').value.trim();
        if (!query) return;

        const btn = mode === 'social' ? document.getElementById('social-btn') : document.getElementById('semantic-btn');
        const loader = document.getElementById('graph-loader');
        
        // Use hidden input for semantic source
        const source = document.getElementById('semantic-source-input').value;
        
        const verbosityInput = document.querySelector('input[name="verbosity"]:checked');
        const verbosity = verbosityInput ? verbosityInput.value : 'verbose';
        const caseSensitive = document.getElementById('network-case-sensitive')?.checked || false;
        const caseParam = caseSensitive ? '&case=sensitive' : '';
        
        const semanticTable = document.getElementById('semantic-details');
        const socialControls = document.getElementById('social-controls');
        const cyContainer = document.getElementById('cy-container');
        const infoContainer = document.getElementById('info-container');
        const statusArea = document.getElementById('network-status-area');
        let progressTimer = null;
        const prependStatus = (message) => {
            statusArea.innerHTML = `[${new Date().toLocaleTimeString()}] ${message}<br>` + statusArea.innerHTML;
        };
        const formatSeconds = (start, end) => `${((end - start) / 1000.0).toFixed(3)}s`;
        
        btn.disabled = true;
        loader.classList.remove('d-none');
        
        const methodLabel = mode === 'social' ? 'Social Connections' : (source === 'title' ? 'Semantic (Title)' : 'Semantic (Text)');
        statusArea.innerHTML = `<i class="bi bi-cpu me-2"></i> Initializing for ${methodLabel}...`;
        if (mode === 'semantic' && source !== 'title') {
            prependStatus('<i class="bi bi-info-circle me-2"></i> Full-text semantic mode may generate missing embeddings before mapping.');
        }
        if (mode === 'semantic' && verbosity === 'verbose') {
            const startedAt = Date.now();
            const phases = [
                'resolving query universe',
                'checking embedding cache',
                'loading the transformer model if needed',
                'generating missing embeddings when needed',
                'writing embedding cache updates',
                'projecting points into 2D',
                'detecting clusters',
                'rendering graph payload'
            ];
            let phaseIndex = 0;
            progressTimer = window.setInterval(() => {
                const elapsed = Math.max(1, Math.round((Date.now() - startedAt) / 1000));
                const phase = phases[Math.min(phaseIndex, phases.length - 1)];
                const existing = document.getElementById('semantic-progress-line');
                const html = `<i class="bi bi-hourglass-split me-2"></i> Semantic analysis running for ${elapsed}s; ${phase}...`;
                if (existing) {
                    existing.innerHTML = html;
                } else {
                    statusArea.innerHTML = `<div id="semantic-progress-line">${html}</div>` + statusArea.innerHTML;
                }
                if (elapsed % 8 === 0 && phaseIndex < phases.length - 1) {
                    phaseIndex += 1;
                }
            }, 1000);
        }

        // Toggle UI elements based on mode
        if (mode === 'semantic') {
            semanticTable.classList.remove('d-none');
            socialControls.classList.add('d-none');
            cyContainer.style.height = '50vh';
            infoContainer.style.height = '50vh';
        } else {
            semanticTable.classList.add('d-none');
            socialControls.classList.remove('d-none');
            cyContainer.style.height = 'calc(100vh - 250px)';
            infoContainer.style.height = 'calc(100vh - 250px)';
        }

        try {
            const browserStarted = performance.now();
            const url = mode === 'social' 
                ? `{{ url_for('main.network_data') }}?q=${encodeURIComponent(query)}&verbosity=${verbosity}${caseParam}`
                : `{{ url_for('main.semantic_data') }}?q=${encodeURIComponent(query)}&source=${source}&verbosity=${verbosity}${caseParam}`;
            
            const response = await fetch(url);
            const responseReceived = performance.now();
            const data = await response.json();
            const jsonParsed = performance.now();
            currentData = { ...data, mode: mode };
            
            if (data.status_msg) {
                prependStatus(data.status_msg);
            }
            if (mode === 'semantic' && data.embedding_work_count > 0) {
                prependStatus(
                    `<i class="bi bi-exclamation-triangle me-2"></i> Generated ${data.embedding_work_count} missing ${source} embeddings; large first runs can take a while.`
                );
            }
            if (Array.isArray(data.log_messages)) {
                data.log_messages.slice().reverse().forEach(msg => prependStatus(msg));
            }

            if (data.error) {
                alert("Error: " + data.error);
            } else if (data.papers === 0) {
                document.getElementById('network-stats').innerHTML = '<span class="text-danger">No matches found.</span>';
                if (cy) cy.elements().remove();
            } else {
                const renderStarted = performance.now();
                if (mode === 'social') {
                    renderSocialGraph(data);
                } else {
                    renderSemanticGalaxy(data);
                    populateGalaxyTable(data.elements);
                    populateClusterSummary(data.clusters || []);
                }
                const renderFinished = performance.now();
                
                // Update stats
                const authorCount = data.nodes ? data.nodes.length : (data.authors || 0);
                let statsHtml = `<span class="badge bg-light text-dark border me-2">${data.papers} papers</span>` +
                                `<span class="badge bg-light text-dark border">${authorCount} authors</span>`;
                
                if (data.omitted_count > 0) {
                    statsHtml += ` <span class="badge bg-warning-subtle text-warning-emphasis border ms-2" title="${data.omitted_reason}">${data.omitted_count} Omitted</span>`;
                }
                document.getElementById('network-stats').innerHTML = statsHtml;
                
                // Update export button
                const exportBtn = document.getElementById('net-export-btn');
                const exportToggle = document.getElementById('net-export-toggle');
                if (exportBtn && data.hashes) {
                    exportBtn.disabled = false;
                    exportBtn.classList.remove('opacity-50', 'btn-outline-secondary');
                    exportBtn.classList.add('btn-secondary');
                    exportBtn.dataset.hashes = data.hashes;
                }
                if (exportToggle) {
                    exportToggle.disabled = false;
                    exportToggle.classList.remove('opacity-50', 'btn-outline-secondary');
                    exportToggle.classList.add('btn-secondary');
                }
                enableNetworkReport();

                if (verbosity === 'verbose') {
                    const totalFinished = performance.now();
                    [
                        `Browser timing: fetch response ${formatSeconds(browserStarted, responseReceived)}`,
                        `Browser timing: JSON parse ${formatSeconds(responseReceived, jsonParsed)}`,
                        `Browser timing: graph render ${formatSeconds(renderStarted, renderFinished)}`,
                        `Browser timing: total ${formatSeconds(browserStarted, totalFinished)}`
                    ].reverse().forEach((message) => prependStatus(message));
                }
            }

        } catch (err) {
            console.error(err);
            statusArea.innerHTML = `<span class="text-danger">Analysis failed: ${err.message}</span>`;
            alert("Analysis failed. See console for details.");
        } finally {
            if (progressTimer) {
                window.clearInterval(progressTimer);
                const existing = document.getElementById('semantic-progress-line');
                if (existing) existing.remove();
            }
            btn.disabled = false;
            loader.classList.add('d-none');
        }
    }

    function enableNetworkReport() {
        const reportBtn = document.getElementById('net-report-btn');
        [reportBtn].forEach((btn) => {
            if (!btn) return;
            btn.disabled = false;
            btn.classList.remove('opacity-50');
        });
    }

    function openNetworkReport() {
        if (!currentData || !currentData.mode) return;
        const queryInput = document.getElementById('network-search');
        const query = queryInput ? queryInput.value.trim() : '';
        if (!query) return;
        const source = currentData.mode === 'semantic' ? 'semantic' : 'social';
        const semanticSource = document.getElementById('semantic-source-input').value;
        const caseSensitive = document.getElementById('network-case-sensitive')?.checked || false;
        const params = new URLSearchParams({
            source: source,
            q: query,
            semantic_source: semanticSource,
            case: caseSensitive ? 'sensitive' : 'insensitive',
        });
        window.location.href = `{{ url_for('main.reports_page') }}?${params.toString()}`;
    }

    function renderSocialGraph(data) {
        cy = cytoscape({
            container: document.getElementById('cy'),
            elements: data.elements,
            style: [
                {
                    selector: 'node',
                    style: {
                        'label': 'data(label)',
                        'width': 'mapData(weight, 1, 20, 20, 70)',
                        'height': 'mapData(weight, 1, 20, 20, 70)',
                        'background-color': 'mapData(weight, 1, 15, #cfe2ff, #0d6efd)',
                        'color': '#212529',
                        'font-size': '9px',
                        'font-weight': 'normal',
                        'text-valign': 'bottom',
                        'text-halign': 'center',
                        'text-margin-y': '6px',
                        'text-wrap': 'wrap',
                        'text-max-width': '80px',
                        'z-index': 10,
                        'border-width': function(node) {
                            return node.data('is_central') ? 3 : 1;
                        },
                        'border-color': function(node) {
                            return node.data('is_central') ? '#ffc107' : '#dee2e6';
                        }
                    }
                },
                {
                    selector: 'edge',
                    style: {
                        'width': 'mapData(weight, 1, 5, 1, 8)',
                        'line-color': '#adb5bd',
                        'opacity': 0.3,
                        'curve-style': 'bezier',
                        'label': function(edge) {
                            return edge.data('weight') > 1 ? String(edge.data('weight')) : '';
                        },
                        'font-size': '8px',
                        'color': '#6c757d',
                        'text-background-opacity': 0.8,
                        'text-background-color': '#ffffff',
                        'text-background-padding': '2px',
                        'text-background-shape': 'roundrectangle',
                        'z-index': 5
                    }
                },
                {
                    selector: ':selected',
                    style: {
                        'background-color': '#dc3545',
                        'line-color': '#dc3545',
                        'opacity': 1,
                        'color': '#000',
                        'border-width': 2,
                        'border-color': '#343a40'
                    }
                }
            ],
            layout: {
                name: 'cose',
                animate: true,
                padding: 50,
                componentSpacing: 80,
                nodeRepulsion: 15000,
                idealEdgeLength: 100,
                edgeElasticity: 100,
                nestingFactor: 5,
                gravity: 80
            }
        });

        cy.on('tap', 'node', function(evt){
            const node = evt.target;
            showAuthorInfo(node.data(), 'Author');
        });

        cy.on('tap', 'edge', function(evt){
            const edge = evt.target;
            showAuthorInfo(edge.data(), 'Shared Papers');
        });

        updateFilters();
    }

    function renderSemanticGalaxy(data) {
        const showLabels = document.getElementById('toggle-labels').checked;

        cy = cytoscape({
            container: document.getElementById('cy'),
            elements: data.elements,
            style: [
                {
                    selector: 'node',
                    style: {
                        'width': 12,
                        'height': 12,
                        'background-color': 'data(color)',
                        'opacity': 'data(opacity)',
                        'z-index': 10,
                        'label': showLabels ? 'data(tag)' : '',
                        'font-size': '7px',
                        'color': '#666',
                        'text-valign': 'bottom',
                        'text-margin-y': '4px'
                    }
                },
                {
                    selector: ':selected',
                    style: {
                        'width': 22,
                        'height': 22,
                        'border-width': 2,
                        'border-color': '#000',
                        'opacity': 1,
                        'label': 'data(tag)',
                        'font-weight': 'bold',
                        'color': '#000'
                    }
                }
            ],
            layout: {
                name: 'preset', 
                padding: 100
            }
        });

        cy.on('tap', 'node', function(evt){
            const node = evt.target;
            showPaperInfo(node.data());
        });
    }

    function populateGalaxyTable(elements) {
        const tbody = document.getElementById('galaxy-table-body');
        const sorted = [...elements].sort((a, b) => a.data.cluster_id - b.data.cluster_id);
        
        let html = '';
        sorted.forEach(el => {
            const d = el.data;
            const rowClass = d.cluster_id < 0 ? 'table-light opacity-75' : '';
            html += `
                <tr id="row-${d.id}" class="${rowClass}" onclick="focusPaper('${d.id}')" style="cursor: pointer;">
                    <td class="ps-3"><code class="small">${d.tag}</code></td>
                    <td class="text-center">
                        <span class="badge rounded-pill" style="background-color: ${d.color}; color: ${d.cluster_id >= 0 ? '#fff' : '#333'}">
                            ${d.cluster_number || (d.cluster_id < 0 ? '?' : '!')}
                        </span>
                    </td>
                    <td class="small text-truncate" style="max-width: 150px;">${d.authors}</td>
                    <td class="small text-truncate" style="max-width: 300px;">${d.title}</td>
                    <td class="text-center small">${d.year}</td>
                </tr>
            `;
        });
        tbody.innerHTML = html;
    }

    function populateClusterSummary(clusters) {
        const tbody = document.getElementById('cluster-summary-body');
        if (!tbody) return;
        
        let html = '';
        clusters.forEach(c => {
            const samples = c.samples.map(s => `<li class="x-small mb-1">${s}</li>`).join('');
            html += `
                <tr>
                    <td class="ps-3">
                        <div class="d-flex align-items-center gap-2">
                            <span class="badge rounded-pill" style="background-color: ${c.color}">${c.number}</span>
                            <span class="fw-bold">${c.name}</span>
                        </div>
                    </td>
                    <td class="text-center fw-bold">${c.count}</td>
                    <td>
                        <ul class="list-unstyled mb-0 text-muted small">
                            ${samples}
                        </ul>
                    </td>
                </tr>
            `;
        });
        tbody.innerHTML = html;
        document.getElementById('cluster-summary-container').classList.remove('d-none');
    }

    function focusPaper(nodeId) {
        const node = cy.getElementById(nodeId);
        if (node) {
            cy.elements().unselect();
            node.select();
            cy.animate({ center: { elef: node }, zoom: 2 }, { duration: 500 });
            showPaperInfo(node.data());
        }
    }

    function scrollRowWithinContainer(row) {
        const container = row.closest('.overflow-auto');
        if (!container) return;

        const rowTop = row.offsetTop;
        const rowBottom = rowTop + row.offsetHeight;
        const visibleTop = container.scrollTop;
        const visibleBottom = visibleTop + container.clientHeight;

        if (rowTop < visibleTop || rowBottom > visibleBottom) {
            container.scrollTo({
                top: Math.max(0, rowTop - (container.clientHeight / 2) + (row.offsetHeight / 2)),
                behavior: 'smooth',
            });
        }
    }

    function updateFilters() {
        if (!cy) return;
        
        const showLabels = document.getElementById('toggle-labels').checked;
        
        if (currentData && currentData.mode === 'semantic') {
            cy.nodes().style('label', showLabels ? 'data(tag)' : '');
            return;
        }
        
        const minPapers = parseInt(document.getElementById('min-papers').value);
        const lccOnly = document.getElementById('toggle-lcc').checked;
        
        document.getElementById('min-papers-val').innerText = minPapers;

        cy.elements().show();

        cy.nodes().forEach(node => {
            if (node.data('weight') < minPapers) {
                node.hide();
            } else {
                node.style('label', showLabels ? node.data('label') : '');
            }
        });

        if (lccOnly) {
            const visibleElements = cy.elements(':visible');
            const components = visibleElements.components();
            if (components.length > 1) {
                let largest = components[0];
                components.forEach(c => {
                    if (c.length > largest.length) largest = c;
                });
                visibleElements.difference(largest).hide();
            }
        }
    }

    function resetLayout() {
        if (cy) {
            if (currentData.mode === 'social') {
                cy.layout({ name: 'cose', animate: true, nodeRepulsion: 15000, idealEdgeLength: 100 }).run();
            } else {
                cy.fit(60);
            }
        }
    }

    function rebaseSearch(author) {
        const input = document.getElementById('network-search');
        input.value = `! /${author}/`;
        executeSearch('social');
    }

    function showAuthorInfo(data, type) {
        const info = document.getElementById('network-info');
        const title = data.label;
        const sub = type === 'Author' ? `${data.weight} papers in this set` : `Co-authored ${data.weight} papers together`;
        
        let html = `
            <div class="p-4">
                <h5 class="fw-bold mb-1">${title}</h5>
                <p class="text-muted small mb-3">${sub}</p>
        `;

        if (type === 'Author') {
            html += `
                <div class="d-grid mb-4">
                    <button class="btn btn-sm btn-outline-primary" onclick="rebaseSearch('${data.id}')">
                        <i class="bi bi-geo-fill me-1"></i> Rebase Graph on Author
                    </button>
                </div>
            `;
        }

        html += `
                <h6 class="small fw-bold text-uppercase mb-3">Papers</h6>
                <div class="list-group list-group-flush">
        `;
        
        data.papers.forEach(p => {
            html += `
                <div class="list-group-item px-0 py-2 border-0 small">
                    <div class="fw-bold mb-1">${p.title}</div>
                    <div class="text-muted d-flex justify-content-between align-items-center">
                        <span>${p.year}</span>
                        <a href="/view/${p.tag}" target="_blank" class="badge bg-light text-primary border text-decoration-none">
                            <i class="bi bi-file-pdf me-1"></i>${p.tag}
                        </a>
                    </div>
                </div>
            `;
        });

        html += `</div></div>`;
        info.innerHTML = html;
    }

    function showPaperInfo(data) {
        const info = document.getElementById('network-info');
        let html = `
            <div class="p-4">
                <h5 class="fw-bold mb-1">${data.title}</h5>
                <p class="text-muted small mb-3">${data.authors}</p>
                <div class="mb-4">
                    <span class="badge" style="background-color: ${data.color}; color: ${data.cluster_id >= 0 ? '#fff' : '#333'}">
                        ${data.cluster_number ? '#' + data.cluster_number + ': ' : ''}${data.cluster_name}
                    </span>
                    <span class="badge bg-light text-dark border">${data.year}</span>
                </div>
                <div class="d-grid mb-4">
                    <a href="/view/${data.tag}" target="_blank" class="btn btn-sm btn-outline-primary">
                        <i class="bi bi-file-pdf me-1"></i> Open PDF
                    </a>
                </div>
            </div>
        `;
        info.innerHTML = html;
        
        // Highlight row in table if it exists
        const row = document.getElementById(`row-${data.id}`);
        if (row) {
            document.querySelectorAll('#galaxy-table tr').forEach(r => r.classList.remove('table-primary'));
            row.classList.add('table-primary');
            scrollRowWithinContainer(row);
        }
    }

    window.addEventListener('load', () => {
        if (typeof initSearchInput === 'function') {
            initSearchInput('network-search');
        }
        updateNetworkFeedback();
    });

    // Override component export logic for Network-specific features
    window.handleExportToCSV = function(idPrefix, inputId) {
        const input = document.getElementById(inputId);
        const query = input ? input.value.trim() : '';
        if (!query) return;
        
        if (currentData && currentData.mode === 'semantic') {
            const source = document.getElementById('semantic-source-input').value;
            const url = `{{ url_for('main.semantic_export_csv') }}?q=${encodeURIComponent(query)}&source=${source}`;
            window.location.href = url;
        } else {
            const url = `{{ url_for('main.rg_export_csv') }}?q=${encodeURIComponent(query)}`;
            window.location.href = url;
        }
    };

    window.handleExportToBibTeX = function(idPrefix, inputId) {
        handleNetworkBibTeXExport(inputId, false);
    };

    window.handleExportToBibTeXPlus = function(idPrefix, inputId) {
        handleNetworkBibTeXExport(inputId, true);
    };

    function handleNetworkBibTeXExport(inputId, plus) {
        const input = document.getElementById(inputId);
        const query = input ? input.value.trim() : '';
        if (!query) return;
        const plusArg = plus ? '&plus=1' : '';

        if (currentData && currentData.mode === 'semantic') {
            const source = document.getElementById('semantic-source-input').value;
            window.location.href = `{{ url_for('main.semantic_export_bibtex') }}?q=${encodeURIComponent(query)}&source=${source}${plusArg}`;
        } else {
            window.location.href = `{{ url_for('main.rg_export_bibtex') }}?q=${encodeURIComponent(query)}${plusArg}`;
        }
    }
</script>

<style>
    #cy:active { cursor: grabbing; }
    .list-group-item { font-size: 0.85rem; }
    .author-link { cursor: pointer; color: var(--bs-primary); text-decoration: none; }
    .author-link:hover { text-decoration: underline; }
    
    #galaxy-table { font-size: 0.85rem; table-layout: fixed; }
    #galaxy-table th { background-color: #f8f9fa; border-bottom: 2px solid #dee2e6; }
    #galaxy-table tr:hover { background-color: rgba(13, 110, 253, 0.05) !important; }
    
    /* Input UI consistency */
    .search-container { position: relative; }
    .search-wrapper { position: relative; width: 100%; }
    .search-wrapper input {
        width: 100%;
        padding: 1rem 3rem 1rem 1.5rem;
        font-size: 1.25rem;
        border: 1px solid #dee2e6;
        border-radius: 0.75rem;
        outline: none;
        transition: border-color 0.2s, box-shadow 0.2s;
    }
    .search-wrapper input:focus {
        border-color: #0d6efd;
        box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.1);
    }
    .clear-input {
        position: absolute;
        right: 1.25rem;
        top: 50%;
        transform: translateY(-50%);
        color: #adb5bd;
        cursor: pointer;
        font-size: 1.25rem;
        transition: color 0.2s;
    }
    .clear-input:hover { color: #6c757d; }
</style>
{% endblock %}