{% extends "admin/base.html" %}
{% block title %}Manage Datastore: {{ datastore.name }}{% endblock %}
{% block header_title %}Manage Files: <span class="text-teal-500">{{ datastore.name }}</span>{% endblock %}

{% block content %}
<input type="hidden" id="ds-id-hidden" value="{{ datastore.id }}">
<!-- Vis Network for Knowledge Graph -->
<script type="text/javascript" src="{{ url_for('static', path='vendor/vis-network.min.js') }}"></script>

<div class="space-y-8">
    <div class="flex justify-between items-center">
        <a href="{{ url_for('admin_datastores') }}" class="text-[var(--color-primary-500)] hover:text-[var(--color-primary-700)]">&larr; Back to Data Stores</a>
        
        <!-- Tab Switches -->
        <div class="flex bg-black/40 p-1 rounded-xl border border-white/10">
            <button onclick="switchDSTab('files')" id="tab-btn-files" class="px-6 py-2 rounded-lg text-xs font-black uppercase transition-all bg-indigo-600 text-white">🗄️ File Manager</button>
            <button onclick="switchDSTab('graph')" id="tab-btn-graph" class="px-6 py-2 rounded-lg text-xs font-black uppercase transition-all text-gray-500 hover:text-white">🕸️ Knowledge Graph</button>
            <button onclick="switchDSTab('map')" id="tab-btn-map" class="px-6 py-2 rounded-lg text-xs font-black uppercase transition-all text-gray-500 hover:text-white">🗺️ Semantic Map</button>
        </div>
    </div>

    <!-- Live Progress Console -->
    <div id="ds-console-container" class="hidden card-style border-l-4 border-teal-500 bg-teal-500/5 mb-8">
        <div class="flex justify-between items-center mb-3">
            <div class="flex items-center gap-2">
                <div class="w-2 h-2 bg-teal-500 rounded-full animate-ping"></div>
                <span class="text-[10px] font-black uppercase tracking-widest text-teal-400">Processing Stream</span>
            </div>
            <button onclick="document.getElementById('ds-console-container').classList.add('hidden')" class="text-gray-500 hover:text-white">×</button>
        </div>
        <div id="ds-console" class="h-32 overflow-y-auto bg-black/60 rounded-lg p-3 font-mono text-[10px] text-teal-200 space-y-1 custom-scrollbar">
            <div class="text-gray-600 italic">Awaiting events...</div>
        </div>
    </div>

    <!-- VIEW: FILE MANAGER -->
    <div id="ds-view-files" class="space-y-8">
        <!-- Progress Tracking Overlays -->
        <div id="upload-progress-overlay" class="hidden card-style bg-indigo-600/5 border border-indigo-500/30 mb-8 animate-in fade-in slide-in-from-top-4">
            <div class="flex justify-between items-center mb-2">
                <div class="flex items-center gap-3">
                    <div id="progress-spinner" class="w-4 h-4 border-2 border-indigo-500 border-t-transparent rounded-full animate-spin"></div>
                    <span id="progress-title" class="text-xs font-black text-indigo-400 uppercase tracking-widest">Uploading Batch...</span>
                </div>
                <span id="progress-pct" class="text-xs font-mono text-white">0%</span>
            </div>
            <div class="h-2 w-full bg-black/40 rounded-full overflow-hidden border border-white/5">
                <div id="progress-bar-inner" class="h-full bg-indigo-500 transition-all duration-300" style="width: 0%"></div>
            </div>
            <div id="progress-subtext" class="mt-2 text-[10px] text-gray-500 uppercase font-bold tracking-tighter">Preparing data packets for cluster transmission...</div>
        </div>

        <!-- GLOBAL INGESTION POLICY -->
        <div class="card-style border-l-4 border-amber-500 bg-amber-500/5">
            <div class="flex justify-between items-center mb-4">
                <h3 class="text-xs font-black text-amber-400 uppercase tracking-widest flex items-center gap-2">
                    <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 4a1 1 0 011-1h16a1 1 0 011 1v2.586a1 1 0 01-.293.707l-6.414 6.414a1 1 0 00-.293.707V17l-4 4v-6.586a1 1 0 00-.293-.707L3.293 7.293A1 1 0 013 6.586V4z"></path></svg>
                    Master Ingestion Filter
                </h3>
                <div class="flex gap-4">
                    <button onclick="toggleAllExtensions(true)" class="text-[9px] font-bold text-gray-500 hover:text-white uppercase">Select All</button>
                    <button onclick="toggleAllExtensions(false)" class="text-[9px] font-bold text-gray-500 hover:text-white uppercase">Clear All</button>
                </div>
            </div>
            
            <div id="master-extension-grid" class="grid grid-cols-4 md:grid-cols-8 lg:grid-cols-12 gap-2 p-3 bg-black/40 rounded-xl border border-white/5">
                <!-- Populated via Javascript -->
            </div>
            <p class="mt-3 text-[10px] text-gray-500 italic">This filter applies to Direct Uploads, Folder Uploads, and Server-side scans.</p>
        </div>

        <div class="grid grid-cols-1 lg:grid-cols-3 gap-8">
        <!-- Search/Test Interface -->
        <div class="lg:col-span-1">
            <div class="card-style border-indigo-500/30 bg-indigo-500/5 h-full">
                <h2 class="card-header text-xl font-bold mb-4 flex items-center gap-2">
                    <svg class="w-5 h-5 text-indigo-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"></path></svg>
                    Semantic Search Test
                </h2>
                <div class="space-y-4">
                    <div>
                        <label class="block text-[10px] font-black text-gray-500 uppercase tracking-widest mb-1">Query</label>
                        <input type="text" id="test-query-input" placeholder="Enter a concept to search..." class="w-full p-2.5 rounded-lg bg-black/40 border border-white/10 text-sm outline-none focus:border-indigo-500">
                    </div>
                    <button onclick="runSemanticTest()" id="test-query-btn" class="w-full py-2 bg-indigo-600 hover:bg-indigo-500 text-white rounded-lg font-black text-[10px] uppercase tracking-widest transition-all">Execute Probe</button>
                    
                    <div id="test-results-container" class="hidden space-y-3 mt-4 max-h-[400px] overflow-y-auto custom-scrollbar pr-2">
                        <!-- Results injected here -->
                    </div>
                </div>
            </div>
        </div>

        <div class="lg:col-span-2 grid grid-cols-1 md:grid-cols-2 gap-8">
            <!-- Form 1: Direct File Upload -->
            <div class="card-style border-indigo-500/20">
                <h2 class="card-header text-xl font-bold mb-4 flex items-center gap-2">
                    <svg class="w-5 h-5 text-indigo-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 16a4 4 0 01-.88-7.903A5 5 0 1115.9 6L16 6a5 5 0 011 9.9M15 13l-3-3m0 0l-3 3m3-3v12"></path></svg>
                    Upload Files
                </h2>
                <form action="{{ url_for('admin_upload_datastore', ds_id=datastore.id) }}" method="post" enctype="multipart/form-data" class="space-y-4">
                    <input type="hidden" name="csrf_token" value="{{ csrf_token }}">
                    <div class="p-4 bg-black/20 rounded-xl border border-white/5">
                        <label class="block text-[10px] font-black text-gray-500 uppercase tracking-widest mb-2">Select Files</label>
                        <input type="file" name="files" multiple class="block w-full text-sm rounded-md border border-white/10 file:mr-4 file:py-2 file:px-4 file:rounded-l-md file:border-0 file:bg-indigo-600 file:text-white hover:file:bg-indigo-500 bg-black/40 text-gray-300 transition-all cursor-pointer">
                        <div class="flex items-center gap-3 mt-4">
                            <input type="checkbox" name="use_ai_metadata" id="use_ai_file" value="true" class="h-4 w-4 rounded text-indigo-600">
                            <label for="use_ai_file" class="text-[10px] font-bold text-gray-400 uppercase tracking-widest">Enable AI Metadata</label>
                        </div>
                    </div>
                    <button type="submit" class="w-full bg-indigo-600 hover:bg-indigo-500 py-2 rounded-lg font-black text-xs uppercase tracking-widest shadow-lg transition-all">Upload & Index</button>
                </form>
            </div>

            <!-- Form 2: Direct Folder Upload -->
            <div class="card-style border-indigo-500/20">
                <h2 class="card-header text-xl font-bold mb-4 flex items-center gap-2">
                    <svg class="w-5 h-5 text-indigo-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 7v10a2 2 0 002 2h14a2 2 0 002-2V9a2 2 0 00-2-2h-6l-2-2H5a2 2 0 00-2 2z"></path></svg>
                    Upload Folders
                </h2>
                <form action="{{ url_for('admin_upload_datastore', ds_id=datastore.id) }}" method="post" enctype="multipart/form-data" class="space-y-4">
                    <input type="hidden" name="csrf_token" value="{{ csrf_token }}">
                    <div class="p-4 bg-black/20 rounded-xl border border-white/5">
                        <label class="block text-[10px] font-black text-gray-500 uppercase tracking-widest mb-2">Select Folders</label>
                        <input type="file" name="files" multiple webkitdirectory directory class="block w-full text-sm rounded-md border border-white/10 file:mr-4 file:py-2 file:px-4 file:rounded-l-md file:border-0 file:bg-indigo-600 file:text-white hover:file:bg-indigo-500 bg-black/40 text-gray-300 transition-all cursor-pointer">
                        <div class="flex items-center gap-3 mt-4">
                            <input type="checkbox" name="use_ai_metadata" id="use_ai_folder" value="true" class="h-4 w-4 rounded text-indigo-600">
                            <label for="use_ai_folder" class="text-[10px] font-bold text-gray-400 uppercase tracking-widest">Enable AI Metadata</label>
                        </div>
                    </div>
                    <button type="submit" class="w-full bg-indigo-600 hover:bg-indigo-500 py-2 rounded-lg font-black text-xs uppercase tracking-widest shadow-lg transition-all">Upload & Index Folder</button>
                </form>
            </div>

            <!-- Form 3: Remote/Server-side Folder -->
            <div class="card-style border-indigo-500/20 md:col-span-2">
                <h2 class="card-header text-xl font-bold mb-4 flex items-center gap-2">
                    <svg class="w-5 h-5 text-indigo-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 12h14M5 12a2 2 0 01-2-2V6a2 2 0 012-2h14a2 2 0 012 2v4a2 2 0 01-2-2M5 12a2 2 0 00-2 2v4a2 2 0 002 2h14a2 2 0 002-2v-4a2 2 0 00-2-2m-2-4h.01M17 16h.01"></path></svg>
                    Index Server Folder
                </h2>
                <form action="{{ url_for('admin_add_folder_datastore', ds_id=datastore.id) }}" method="post" class="grid grid-cols-1 md:grid-cols-2 gap-6">
                    <input type="hidden" name="csrf_token" value="{{ csrf_token }}">
                    <div class="space-y-4">
                        <div>
                            <label class="block text-[10px] font-black text-gray-500 uppercase tracking-widest mb-1 px-1">Absolute Path on Host</label>
                            <input type="text" name="folder_path" placeholder="e.g. /home/user/docs or C:\Docs" required class="w-full p-2.5 rounded-lg bg-black/40 border border-white/10 text-xs">
                        </div>
                        <div class="flex items-center gap-3">
                            <input type="checkbox" name="use_ai_metadata" id="use_ai_remote" value="true" class="h-4 w-4 rounded text-teal-600" checked>
                            <label for="use_ai_remote" class="text-[10px] font-bold text-gray-400 uppercase tracking-widest">Generate AI Metadata Cohesion</label>
                        </div>
                    </div>

                    <div class="md:col-span-2 flex justify-end">
                        <button type="submit" onclick="compileExtensions(this.form)" class="bg-indigo-600 hover:bg-indigo-500 px-10 py-2 rounded-xl font-black text-xs uppercase tracking-widest transition-all shadow-lg">Start Indexing</button>
                    </div>
                </form>
            </div>
        </div>

        </div>

        <div class="card-style">
            <div class="flex justify-between items-center mb-4">
                <h2 class="card-header text-xl font-bold p-0 border-0">Indexed Documents</h2>
                <div id="batch-action-bar" class="hidden animate-in fade-in slide-in-from-right-4 flex items-center gap-3">
                    <span class="text-[10px] font-black text-gray-500 uppercase tracking-widest"><span id="selected-count">0</span> selected</span>
                    <button onclick="executeBatchDelete()" class="bg-red-600 hover:bg-red-500 text-white px-4 py-1.5 rounded-lg text-[10px] font-black uppercase tracking-widest shadow-lg shadow-red-900/20 transition-all flex items-center gap-2">
                        <svg class="w-3 h-3" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"></path></svg>
                        Purge Selected
                    </button>
                </div>
            </div>
            <div class="overflow-x-auto min-h-[300px] relative">
                <!-- Spinner -->
                <div id="docs-loading-spinner" class="absolute inset-0 bg-black/40 backdrop-blur-sm z-10 flex flex-col items-center justify-center gap-3">
                    <div class="w-12 h-12 border-4 border-teal-500/20 border-t-teal-500 rounded-full animate-spin"></div>
                    <span class="text-xs font-black text-teal-400 uppercase tracking-widest animate-pulse">Initializing SafeStore Engine...</span>
                    <p class="text-[10px] text-gray-500">Loading vectorizer and database connections</p>
                </div>

                <table class="w-full text-left">
                    <thead>
                        <tr class="text-gray-500 text-xs uppercase border-b border-white/10">
                            <th class="p-3 w-10">
                                <input type="checkbox" id="select-all-docs" onchange="toggleSelectAll(this)" class="h-4 w-4 rounded text-indigo-600 bg-black border-white/20">
                            </th>
                            <th class="p-3">File ID / Path</th>
                            <th class="p-3">Total Chunks</th>
                            <th class="p-3 text-right">Actions</th>
                        </tr>
                    </thead>
                    <tbody id="docs-tbody" class="divide-y divide-white/5">
                        <!-- Populated via boot AJAX -->
                    </tbody>
                </table>
            </div>
        </div>
    </div>

    <!-- VIEW: KNOWLEDGE GRAPH -->
    <div id="ds-view-graph" class="hidden space-y-8">
        <div class="card-style h-[600px] flex flex-col relative overflow-hidden">
            <div class="flex justify-between items-center mb-4 flex-shrink-0">
                <h3 class="text-xs font-black text-gray-400 uppercase tracking-widest">Entity Relationship Graph</h3>
                <form action="{{ url_for('admin_build_datastore_graph', ds_id=datastore.id) }}" method="post" class="flex gap-2">
                    <input type="hidden" name="csrf_token" value="{{ csrf_token }}">
                    <input type="hidden" name="ontology_json" value="{}">
                    <button type="submit" class="bg-fuchsia-600 hover:bg-fuchsia-500 px-4 py-2 rounded-lg text-[10px] font-bold uppercase text-white transition-colors">Extract Graph (AI)</button>
                </form>
            </div>
            <div class="flex-grow relative bg-black/20 rounded-xl border border-white/5 overflow-hidden">
                <div id="kg-empty-state" class="hidden absolute inset-0 flex flex-col items-center justify-center bg-black/60 z-20 backdrop-blur-sm pointer-events-none">
                    <p class="text-gray-400 italic pointer-events-auto bg-black/40 p-4 rounded-xl border border-white/5">No graph data extracted yet. Click 'Extract Graph' to process documents.</p>
                </div>
                <div id="kg-viz-container" class="w-full h-full"></div>
            </div>
        </div>
    </div>

    <!-- VIEW: SEMANTIC MAP -->
    <div id="ds-view-map" class="hidden space-y-8">
        <div class="card-style h-[600px] flex flex-col relative overflow-hidden">
            <div class="flex justify-between items-center mb-4 flex-shrink-0">
                <h3 class="text-xs font-black text-gray-400 uppercase tracking-widest">Semantic Topology (PCA 2D)</h3>
                <button onclick="refreshMap(true)" class="bg-sky-600 hover:bg-sky-500 px-4 py-2 rounded-lg text-[10px] font-bold uppercase text-white transition-colors">Regenerate Map</button>
            </div>
            <div class="flex-grow relative">
                <div id="map-empty-state" class="hidden absolute inset-0 flex flex-col items-center justify-center bg-black/80 z-20 backdrop-blur-md pointer-events-none">
                    <div class="bg-black/60 p-6 rounded-2xl border border-white/10 text-center pointer-events-auto shadow-2xl">
                        <p class="text-gray-400 italic mb-4">No semantic chunks found to project.</p>
                        <button onclick="refreshMap(true)" class="bg-indigo-600 hover:bg-indigo-500 text-white px-6 py-2 rounded-xl text-[10px] font-black uppercase tracking-widest transition-all shadow-lg">Force Vector Re-Scan</button>
                    </div>
                </div>
                <canvas id="ds-map-canvas" class="w-full h-full"></canvas>
            </div>
        </div>
    </div>
</div>

<script>
    (function() {
        const SUPPORTED_EXTS = {
            "Documents": [".pdf", ".docx", ".txt", ".rtf", ".odt", ".epub", ".tex"],
            "Web/Data": [".html", ".htm", ".xml", ".json", ".yaml", ".yml", ".csv", ".tsv"],
            "Programming": [".py", ".js", ".ts", ".c", ".cpp", ".h", ".hpp", ".java", ".go", ".rs", ".php", ".rb", ".pl", ".sh", ".bat", ".ps1", ".sql", ".css", ".scss", ".less"],
            "Config": [".ini", ".toml", ".conf", ".env", ".dockerfile", ".jsonl"],
            "Markdown": [".md", ".markdown", ".mdown"]
        };

        const grid = document.getElementById('master-extension-grid');
        Object.entries(SUPPORTED_EXTS).forEach(([cat, exts]) => {
            exts.forEach(ext => {
                const isDefault = [".pdf", ".md", ".txt", ".py"].includes(ext);
                grid.innerHTML += `
                    <label class="flex items-center gap-1.5 cursor-pointer hover:bg-white/5 p-1 rounded transition-colors group" title="${cat}">
                        <input type="checkbox" name="master_ext" value="${ext}" class="master-ext-cb h-3 w-3 rounded text-indigo-600 bg-black border-white/20" ${isDefault ? 'checked' : ''}>
                        <span class="text-[9px] font-mono text-gray-500 group-hover:text-indigo-300">${ext.replace('.','')}</span>
                    </label>
                `;
            });
        });

        window.toggleAllExtensions = (state) => {
            document.querySelectorAll('.master-ext-cb').forEach(cb => cb.checked = state);
        };

        window.getIngestionFilter = () => {
            return Array.from(document.querySelectorAll('.master-ext-cb:checked')).map(cb => cb.value);
        };

        // --- SURGICAL INGESTION FILTERING ---
        // We intercept the submission to ensure ONLY valid files reach the server.
        document.querySelectorAll('form[action*="upload"]').forEach(form => {
            form.addEventListener('submit', async (e) => {
                e.preventDefault();
                
                const filter = window.getIngestionFilter();
                const fileInput = form.querySelector('input[type="file"]');
                
                if (!fileInput || fileInput.files.length === 0) return;

                const allFiles = Array.from(fileInput.files);
                const validFiles = allFiles.filter(f => {
                    const ext = '.' + f.name.split('.').pop().toLowerCase();
                    return filter.includes(ext);
                });

                const skippedCount = allFiles.length - validFiles.length;

                if (validFiles.length === 0) {
                    window.showToast(`Zero valid files found for the active filter: ${filter.join(', ')}`, "error");
                    return;
                }

                if (skippedCount > 0) {
                    logToConsole(`Surgical Filter: Ignoring ${skippedCount} file(s) with invalid extensions locally.`, 'text-amber-400');
                }

                // --- Build Clean Payload ---
                const formData = new FormData();
                // Transfer standard form fields
                form.querySelectorAll('input:not([type="file"]), select, textarea').forEach(input => {
                    if (input.name) {
                        if (input.type === 'checkbox' || input.type === 'radio') {
                            if (input.checked) formData.append(input.name, input.value);
                        } else {
                            formData.append(input.name, input.value);
                        }
                    }
                });
                
                // Inject the extension list
                formData.set('extensions', filter.join(','));

                // Add ONLY valid files
                validFiles.forEach(file => formData.append('files', file));

                // --- Visual Execution ---
                const btn = form.querySelector('button[type="submit"]');
                const originalText = btn.innerText;
                const overlay = document.getElementById('upload-progress-overlay');
                const progressBar = document.getElementById('progress-bar-inner');
                const progressPct = document.getElementById('progress-pct');
                const progressTitle = document.getElementById('progress-title');
                const progressSubtext = document.getElementById('progress-subtext');

                btn.disabled = true;
                btn.innerHTML = `<span class="animate-pulse">STAGING...</span>`;

                overlay.classList.remove('hidden');
                progressBar.style.width = '0%';
                progressPct.innerText = '0%';
                progressTitle.innerText = "Uploading Batch...";
                progressSubtext.innerText = `Transferring ${validFiles.length} files to gateway staging area...`;

                const xhr = new XMLHttpRequest();
                xhr.open('POST', form.action, true);
                xhr.setRequestHeader('X-CSRF-Token', '{{ csrf_token }}');

                // Track Physical Upload Progress
                xhr.upload.onprogress = (ev) => {
                    if (ev.lengthComputable) {
                        const percent = Math.round((ev.loaded / ev.total) * 100);
                        progressBar.style.width = percent + '%';
                        progressPct.innerText = percent + '%';
                    }
                };

                xhr.onload = async () => {
                    if (xhr.status >= 200 && xhr.status < 300) {
                        const data = JSON.parse(xhr.responseText);
                        window.activeBatchId = data.batch_id; // Register for SSE listener

                        progressTitle.innerText = "Ingesting Knowledge...";
                        progressSubtext.innerText = "Upload complete. AI is now indexing documents in background.";
                        progressBar.classList.replace('bg-indigo-500', 'bg-teal-500');
                        document.getElementById('progress-spinner').classList.replace('border-indigo-500', 'border-teal-500');

                        window.showToast(`Batch staged successfully. Indexing ${data.file_count} files.`, "success");
                        fileInput.value = "";
                    } else {
                        const err = JSON.parse(xhr.responseText);
                        window.showErrorModal("Ingestion Fault", err);
                        overlay.classList.add('hidden');
                    }
                    btn.disabled = false;
                    btn.innerText = originalText;
                };

                xhr.onerror = () => {
                    window.showErrorModal("Network Interruption", { error: "XHR Transfer failed." });
                    overlay.classList.add('hidden');
                    btn.disabled = false;
                    btn.innerText = originalText;
                };

                xhr.send(formData);
            });
        });

        // Use a locally scoped variable and check for existing value
        let currentDsId = document.getElementById('ds-id-hidden').value;
        let network = null;

        window.switchDSTab = (tab) => {
            const fileView = document.getElementById('ds-view-files');
            const graphView = document.getElementById('ds-view-graph');
            const mapView = document.getElementById('ds-view-map');
            const fileBtn = document.getElementById('tab-btn-files');
            const graphBtn = document.getElementById('tab-btn-graph');
            const mapBtn = document.getElementById('tab-btn-map');

            if(fileView) fileView.classList.add('hidden');
            if(graphView) graphView.classList.add('hidden');
            if(mapView) mapView.classList.add('hidden');
            
            if(fileBtn) fileBtn.className = "px-6 py-2 rounded-lg text-xs font-black uppercase transition-all text-gray-500 hover:text-white";
            if(graphBtn) graphBtn.className = "px-6 py-2 rounded-lg text-xs font-black uppercase transition-all text-gray-500 hover:text-white";
            if(mapBtn) mapBtn.className = "px-6 py-2 rounded-lg text-xs font-black uppercase transition-all text-gray-500 hover:text-white";

            if (tab === 'files') {
                if(fileView) fileView.classList.remove('hidden');
                if(fileBtn) fileBtn.className = "px-6 py-2 rounded-lg text-xs font-black uppercase transition-all bg-indigo-600 text-white";
            } else if (tab === 'graph') {
                if(graphView) graphView.classList.remove('hidden');
                if(graphBtn) graphBtn.className = "px-6 py-2 rounded-lg text-xs font-black uppercase transition-all bg-fuchsia-600 text-white";
                refreshGraph();
            } else if (tab === 'map') {
                if(mapView) mapView.classList.remove('hidden');
                if(mapBtn) mapBtn.className = "px-6 py-2 rounded-lg text-xs font-black uppercase transition-all bg-sky-600 text-white";
                refreshMap();
            }
        };

        let mapChart = null;

        window.refreshMap = async (forceRegenerate = false) => {
            const emptyState = document.getElementById('map-empty-state');
            const canvas = document.getElementById('ds-map-canvas');
            
            if (!canvas) return;
            
            try {
                let url = `/admin/datastores/${currentDsId}/map_data`;
                if (forceRegenerate) {
                    url += `?force=1`;
                }

                const resp = await fetch(url);
                const data = await resp.json();
                
                if (!data.points || data.points.length === 0) {
                    if (emptyState) emptyState.classList.remove('hidden');
                    return;
                }
                
                if (emptyState) emptyState.classList.add('hidden');

                // Group points by document
                const datasets =[];
                const docs = [...new Set(data.points.map(p => p.document_title))];
                
                docs.forEach((doc, i) => {
                    const hue = (i / docs.length) * 360;
                    datasets.push({
                        label: doc,
                        data: data.points.filter(p => p.document_title === doc).map(p => ({
                            x: p.x, y: p.y, preview: p.chunk_text, doc: p.document_title
                        })),
                        backgroundColor: `hsla(${hue}, 70%, 60%, 0.7)`,
                        borderColor: 'white',
                        borderWidth: 1,
                        pointRadius: 6,
                        pointHoverRadius: 9
                    });
                });

                if (mapChart) mapChart.destroy();
                
                const ctx = canvas.getContext('2d');
                mapChart = new Chart(ctx, {
                    type: 'scatter',
                    data: { datasets },
                    options: {
                        responsive: true,
                        maintainAspectRatio: false,
                        onClick: (e, elements) => {
                            if (elements.length > 0) {
                                const element = elements[0];
                                const dataPoint = datasets[element.datasetIndex].data[element.index];
                                window.showChunkModal(dataPoint);
                            }
                        },
                        plugins: {
                            legend: { 
                                display: true,
                                position: 'right',
                                labels: { color: '#9ca3af' }
                            },
                            tooltip: {
                                callbacks: {
                                    title: (context) => context[0].raw.cluster,
                                    label: (context) => {
                                        const p = context.raw;
                                        const tags = (p.tags && p.tags.length > 0) ? `🏷️ ${p.tags.join(', ')}` : 'No tags';
                                        return [
                                            `📄 ${p.doc}`,
                                            tags,
                                            `📝 ${p.preview.substring(0, 80)}...`
                                        ];
                                    }
                                }
                            }
                        },
                        scales: {
                            x: { display: false },
                            y: { display: false }
                        }
                    }
                });

                // Global helper for showing the specific chunk
                window.showChunkModal = (point) => {
                    const htmlContent = marked.parse(point.preview || "*No text content available.*");
                    const tagsHtml = (point.tags && point.tags.length > 0) 
                        ? point.tags.map(t => `<span class="px-2 py-0.5 rounded bg-indigo-500/20 text-indigo-400 border border-indigo-500/30 text-[9px] font-black uppercase tracking-tighter">${t}</span>`).join('')
                        : `<span class="text-[9px] text-gray-600 italic">No tags associated</span>`;

                    const modalBody = `
                        <div class="space-y-6 flex flex-col max-h-[80vh]">
                            <div class="flex justify-between items-center bg-black/40 p-3 rounded-xl border border-white/5">
                                <div class="flex flex-col">
                                    <span class="text-[9px] font-black text-gray-500 uppercase tracking-widest">Source Document</span>
                                    <span class="text-xs font-mono text-indigo-300 truncate max-w-sm" title="${point.doc}">${point.doc}</span>
                                </div>
                                <div class="text-right">
                                    <span class="text-[9px] font-black text-sky-500 uppercase tracking-widest">Coordinates</span>
                                    <div class="text-xs font-mono text-gray-500">${point.x.toFixed(3)}, ${point.y.toFixed(3)}</div>
                                </div>
                            </div>

                            <div class="bg-indigo-600/5 border border-indigo-500/10 p-3 rounded-xl">
                                <div class="text-[8px] font-black text-gray-500 uppercase tracking-widest mb-2 px-1">Semantic Associations (Tags)</div>
                                <div class="flex flex-wrap gap-2">${tagsHtml}</div>
                            </div>

                            <div class="flex-grow overflow-hidden flex flex-col border border-white/5 rounded-xl bg-black/20">
                                <div class="p-2 px-4 bg-white/5 border-b border-white/5 text-[10px] font-black text-gray-500 uppercase tracking-widest">Chunk Content</div>
                                <div class="flex-grow overflow-y-auto custom-scrollbar p-4 prose prose-invert max-w-none text-sm text-gray-300 leading-relaxed">
                                    ${htmlContent}
                                </div>
                            </div>

                            <div class="flex justify-end pt-2">
                                <button onclick="document.getElementById('modal-close-btn').click()" class="bg-indigo-600 hover:bg-indigo-500 px-10 py-2 rounded-xl text-xs font-black uppercase text-white shadow-lg transition-all">Close</button>
                            </div>
                        </div>`;
                    
                    window.showModal("Semantic Point Inspection", modalBody);
                    document.querySelectorAll('#modal pre code').forEach(b => { if(window.hljs) hljs.highlightElement(b); });
                };
            } catch(e) {
                console.error("Map visualization error:", e);
            }
        };

        window.refreshGraph = async () => {
            const container = document.getElementById('kg-viz-container');
            const emptyState = document.getElementById('kg-empty-state');
            
            try {
                const resp = await fetch(`/admin/datastores/${currentDsId}/graph_data`);
                const data = await resp.json();
                
                if (!data.nodes || data.nodes.length === 0) {
                    emptyState.classList.remove('hidden');
                    return;
                }
                
                emptyState.classList.add('hidden');

                // Map data to vis-network format
                const nodes = data.nodes.map(n => ({
                    id: n.id,
                    label: n.label,
                    group: n.type,
                    title: `Type: ${n.type}\nProps: ${JSON.stringify(n.properties)}`
                }));

                const edges = data.edges;

                const options = {
                    nodes: {
                        shape: 'dot',
                        size: 16,
                        font: { size: 12, color: '#ffffff' },
                        borderWidth: 2,
                        shadow: true
                    },
                    edges: {
                        width: 2,
                        color: { inherit: 'from' },
                        smooth: { type: 'continuous' },
                        arrows: { to: { enabled: true, scaleFactor: 0.5 } },
                        font: { size: 10, align: 'top', color: '#888' }
                    },
                    physics: {
                        forceAtlas2Based: {
                            gravitationalConstant: -26,
                            centralGravity: 0.005,
                            springLength: 230,
                            springConstant: 0.18
                        },
                        maxVelocity: 146,
                        solver: 'forceAtlas2Based',
                        timestep: 0.35,
                        stabilization: { iterations: 150 }
                    },
                    groups: {
                        Person: { color: { background: '#f472b6', border: '#db2777' } },
                        Organization: { color: { background: '#60a5fa', border: '#2563eb' } },
                        Concept: { color: { background: '#a78bfa', border: '#7c3aed' } }
                    }
                };

                if (network) network.destroy();
                network = new vis.Network(container, { nodes, edges }, options);
                
            } catch(e) {
                console.error("Graph visualization error:", e);
            }
        };
        const consoleEl = document.getElementById('ds-console');
        const containerEl = document.getElementById('ds-console-container');

        window.viewDocument = async function(filePath) {
            const url = `/admin/datastores/${currentDsId}/view_doc?file_path=${encodeURIComponent(filePath)}`;
            window.showModal("Analyzing Structure...", '<div class="p-10 text-center animate-pulse text-teal-500 font-bold">Computing semantic topology and fetching chunks...</div>');

            try {
                const resp = await fetch(url);
                const data = await resp.json();
                if (data.error) {
                    window.showModal("Error", `<div class="p-4 text-red-400 font-mono">${data.error}</div>`);
                    return;
                }

                // --- AI METADATA PARSING ---
                let mainContent = data.content || "";
                let aiMetadata = null;

                // Improved Lenient Regex to find [Context: ...] prefix
                // Handles missing double-newlines or varying whitespace
                const metaMatch = mainContent.match(/^\[Context:\s*(.*?)\]\s*\n*/s);
                if (metaMatch && metaMatch[1].trim().length > 0) {
                    aiMetadata = metaMatch[1].trim();
                    // Strip the entire matched block from the start of the body
                    mainContent = mainContent.substring(metaMatch[0].length).trim();
                }

                const htmlContent = marked.parse(mainContent || "*No content found.*");

                const modalBody = `
                    <div class="space-y-6 flex flex-col max-h-[80vh]">
                        <!-- AI Metadata Insight (Conditional) -->
                        ${aiMetadata ? `
                        <div class="bg-purple-600/10 border border-purple-500/30 rounded-xl p-4 shadow-lg animate-in fade-in slide-in-from-top-2">
                            <div class="flex items-center gap-2 mb-2">
                                <svg class="w-4 h-4 text-purple-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9.663 17h4.673M12 3v1m6.364 1.636l-.707.707M21 12h-1M4 12H3m3.343-5.657l-.707-.707m2.828 9.9a5 5 0 117.072 0l-.548.547A3.374 3.374 0 0014 18.469V19a2 2 0 11-4 0v-.531c0-.895-.356-1.754-.988-2.386l-.548-.547z"></path></svg>
                                <span class="text-[10px] font-black text-purple-400 uppercase tracking-widest">AI Cohesion Metadata</span>
                            </div>
                            <p class="text-xs text-indigo-100 font-medium leading-relaxed">${aiMetadata}</p>
                        </div>
                        ` : ''}

                        <!-- Info Header -->
                        <div class="flex justify-between items-center bg-black/40 p-3 rounded-xl border border-white/5">
                            <div class="flex flex-col">
                                <span class="text-[9px] font-black text-gray-500 uppercase tracking-widest">Document Source</span>
                                <span class="text-xs font-mono text-indigo-300 truncate max-w-xs" title="${data.file_path}">${data.file_path}</span>
                            </div>
                            <div class="text-right">
                                <span class="text-[9px] font-black text-teal-500 uppercase tracking-widest">Structural Analysis</span>
                                <div class="text-xl font-black text-white">${data.chunk_count} <span class="text-[10px] text-gray-500">CHUNKS</span></div>
                            </div>
                        </div>

                        <!-- Analysis Visuals (PCA Plot) -->
                        ${data.pca_points && data.pca_points.length > 0 ? `
                        <div class="bg-black/60 rounded-xl border border-white/5 p-4">
                            <div class="flex justify-between items-center mb-2">
                                <span class="text-[10px] font-black text-indigo-400 uppercase tracking-widest">Semantic Topology (PCA 2D)</span>
                                <span class="text-[9px] text-gray-600 italic">Spatial distance = Semantic similarity</span>
                            </div>
                            <div class="h-48 w-full relative">
                                <canvas id="pca-canvas"></canvas>
                            </div>
                        </div>
                        ` : ''}

                        <!-- Content Preview -->
                        <div class="flex-grow overflow-hidden flex flex-col border border-white/5 rounded-xl bg-black/20">
                            <div class="p-2 px-4 bg-white/5 border-b border-white/5 text-[10px] font-black text-gray-500 uppercase tracking-widest">Reconstructed text</div>
                            <div class="flex-grow overflow-y-auto custom-scrollbar p-4 prose prose-invert max-w-none text-sm text-gray-300 leading-relaxed">
                                ${htmlContent}
                            </div>
                        </div>

                        <div class="flex justify-end pt-2">
                            <button onclick="document.getElementById('modal-close-btn').click()" class="bg-indigo-600 hover:bg-indigo-500 px-10 py-2 rounded-xl text-xs font-black uppercase text-white shadow-lg transition-all">Done</button>
                        </div>
                    </div>`;

                window.showModal("Document Insight", modalBody);

                // Initialize PCA Chart if data exists
                if (data.pca_points && data.pca_points.length > 0) {
                    setTimeout(() => {
                        const ctx = document.getElementById('pca-canvas').getContext('2d');
                        new Chart(ctx, {
                            type: 'scatter',
                            data: {
                                datasets: [{
                                    label: 'Chunks',
                                    data: data.pca_points,
                                    backgroundColor: function(context) {
                                        // Color by index to distinguish sequence
                                        const index = context.dataIndex;
                                        const total = context.dataset.data.length;
                                        const hue = (index / total) * 280; // Spread across blue-to-purple spectrum
                                        return `hsla(${hue}, 70%, 60%, 0.7)`;
                                    },
                                    pointRadius: 6,
                                    pointHoverRadius: 9,
                                    borderWidth: 1,
                                    borderColor: 'white'
                                }]
                            },
                            options: {
                                responsive: true,
                                maintainAspectRatio: false,
                                plugins: {
                                    legend: { display: false },
                                    tooltip: {
                                        callbacks: {
                                            label: (context) => {
                                                const p = context.raw;
                                                return [p.label, p.preview];
                                            }
                                        }
                                    }
                                },
                                scales: {
                                    x: { display: false },
                                    y: { display: false }
                                }
                            }
                        });
                    }, 100);
                }

                document.querySelectorAll('#modal pre code').forEach(b => { if(window.hljs) hljs.highlightElement(b); });
            } catch (e) { 
                console.error(e);
                window.showModal("Error", "Failed to retrieve document diagnostics: " + e.message); 
            }
        };

        function logToConsole(text, color = 'text-teal-200') {
            if (!containerEl || !consoleEl) return;
            containerEl.classList.remove('hidden');
            const entry = document.createElement('div');
            entry.className = color + " flex gap-2";
            entry.innerHTML = `<span class="opacity-40">[${new Date().toLocaleTimeString()}]</span> <span>${text}</span>`;
            consoleEl.appendChild(entry);
            consoleEl.scrollTop = consoleEl.scrollHeight;
        }

        const evtSource = new EventSource("{{ url_for('sse_events') }}");
        evtSource.onmessage = (e) => {
            const msg = JSON.parse(e.data);

            // Catch Batch Upload Events
            if (window.activeBatchId && msg.id === window.activeBatchId) {
                const progressBar = document.getElementById('progress-bar-inner');
                const progressPct = document.getElementById('progress-pct');
                const progressSubtext = document.getElementById('progress-subtext');

                if (msg.tokens !== undefined) {
                    progressBar.style.width = msg.tokens + '%';
                    progressPct.innerText = msg.tokens + '%';
                }
                if (msg.error) progressSubtext.innerText = msg.error;

                if (msg.type === 'completed') {
                    window.activeBatchId = null;
                    setTimeout(() => {
                        document.getElementById('upload-progress-overlay').classList.add('hidden');
                        window.location.reload();
                    }, 3000);
                }
            }

            if (msg.id === `sys_ds_${currentDsId}` || msg.id === `sys_ds_graph_${currentDsId}`) {
                let color = (msg.type === 'error') ? 'text-red-400 font-bold' : (msg.type === 'completed' ? 'text-green-400 font-bold' : 'text-teal-200');
                if (msg.error) logToConsole(msg.error, color);
                if (msg.type === 'completed' && (msg.error.toLowerCase().includes("finish") || msg.error.toLowerCase().includes("index"))) {
                    setTimeout(() => window.location.reload(), 1000);
                }
            }
        };
        // --- Semantic Test Logic ---
        window.runSemanticTest = async () => {
            const query = document.getElementById('test-query-input').value;
            const btn = document.getElementById('test-query-btn');
            const resBox = document.getElementById('test-results-container');
            
            if (!query) return;
            
            btn.disabled = true;
            btn.innerText = "QUERYING...";
            resBox.classList.remove('hidden');
            resBox.innerHTML = '<div class="p-4 text-center text-[10px] text-indigo-400 animate-pulse font-bold">Scanning vector space...</div>';

            try {
                const formData = new FormData();
                formData.append('query', query);
                formData.append('csrf_token', "{{ csrf_token }}");
                
                const resp = await fetch(`/admin/datastores/${currentDsId}/test_query`, { method: 'POST', body: formData });
                const data = await resp.json();
                
                if (data.results && data.results.length > 0) {
                    resBox.innerHTML = data.results.map(r => `
                        <div class="bg-black/40 border border-white/5 p-3 rounded-lg">
                            <div class="flex justify-between items-center mb-2">
                                <span class="text-[9px] font-black px-1.5 py-0.5 rounded bg-emerald-500/20 text-emerald-400">${r.score}% Match</span>
                                <span class="text-[9px] text-gray-600 truncate max-w-[150px]">${r.source}</span>
                            </div>
                            <p class="text-[11px] text-gray-300 leading-relaxed">${r.text}</p>
                        </div>
                    `).join('');
                } else {
                    resBox.innerHTML = '<div class="p-4 text-center text-xs text-gray-500 italic">No relevant chunks found.</div>';
                }
            } catch(e) {
                resBox.innerHTML = `<div class="p-2 text-red-400 text-[10px]">Error: ${e.message}</div>`;
            } finally {
                btn.disabled = false;
                btn.innerText = "Execute Probe";
            }
        };

        // --- ASYNC ENGINE BOOT ---
        async function bootEngine() {
            const spinner = document.getElementById('docs-loading-spinner');
            const tbody = document.getElementById('docs-tbody');
            const csrfToken = "{{ csrf_token }}";

            try {
                const resp = await fetch(`/admin/datastores/${currentDsId}/boot`, {
                    method: 'POST',
                    headers: { 'X-CSRF-Token': csrfToken }
                });
                const data = await resp.json();

                if (data.success) {
                    renderDocuments(data.documents);
                } else {
                    tbody.innerHTML = `<tr><td colspan="3" class="p-10 text-center text-red-400">Failed to load engine: ${data.error}</td></tr>`;
                }
            } catch (e) {
                tbody.innerHTML = `<tr><td colspan="3" class="p-10 text-center text-red-400">Connection Error during boot.</td></tr>`;
            } finally {
                if (spinner) spinner.classList.add('hidden');
            }
        }

        function renderDocuments(docs) {
            const tbody = document.getElementById('docs-tbody');
            if (!docs || docs.length === 0) {
                tbody.innerHTML = '<tr><td colspan="4" class="p-10 text-center text-gray-500 italic">No documents indexed in this store yet.</td></tr>';
                return;
            }

            tbody.innerHTML = docs.map(doc => {
                const safePath = doc.file_path.replace(/"/g, '&quot;');
                const ext = doc.file_path.split('.').pop().toUpperCase();

                // Choose badge color based on extension
                const colors = { 
                    'PDF': 'red', 'PY': 'emerald', 'JS': 'amber', 'MD': 'indigo', 'TXT': 'gray', 'DOCX': 'blue' 
                };
                const color = colors[ext] || 'gray';

                return `
                <tr class="group hover:bg-white/5 transition-all">
                    <td class="p-3">
                        <input type="checkbox" class="doc-checkbox h-4 w-4 rounded text-indigo-600 bg-black border-white/20" 
                               onchange="updateSelectionUI()" value="${safePath}">
                    </td>
                    <td class="p-3">
                        <div class="flex items-center gap-3">
                            <span class="px-2 py-0.5 rounded bg-${color}-500/10 text-${color}-400 text-[9px] font-black border border-${color}-500/20 w-12 text-center">${ext}</span>
                            <span class="text-xs font-mono text-indigo-300 truncate max-w-md" title="${doc.file_path}">${doc.file_path}</span>
                        </div>
                    </td>
                    <td class="p-3 text-xs">
                        <span class="px-2 py-0.5 rounded bg-black/40 text-gray-300 font-black border border-white/5 group-hover:border-teal-500/30 transition-colors">${doc.chunk_count}</span>
                    </td>
                    <td class="p-3 text-right">
                        <div class="flex justify-end gap-3">
                            <button 
                                onclick="viewDocument(this.dataset.path)" 
                                data-path="${safePath}" 
                                class="text-indigo-400 font-bold text-xs uppercase hover:text-indigo-300">
                                View
                            </button>
                            <form action="/admin/datastores/${currentDsId}/delete_doc" method="post" onsubmit="return confirm('Delete chunks for this file?');" class="m-0">
                                <input type="hidden" name="csrf_token" value="{{ csrf_token }}">
                                <input type="hidden" name="file_path" value="${safePath}">
                                <button type="submit" class="text-red-400 font-bold text-xs uppercase hover:text-red-300">Delete</button>
                            </form>
                        </div>
                    </td>
                </tr>
            `;
            }).join('');
        }

        window.toggleSelectAll = (el) => {
            document.querySelectorAll('.doc-checkbox').forEach(cb => cb.checked = el.checked);
            updateSelectionUI();
        };

        window.updateSelectionUI = () => {
            const checked = document.querySelectorAll('.doc-checkbox:checked');
            const bar = document.getElementById('batch-action-bar');
            const count = document.getElementById('selected-count');

            if (checked.length > 0) {
                bar.classList.remove('hidden');
                count.innerText = checked.length;
            } else {
                bar.classList.add('hidden');
                document.getElementById('select-all-docs').checked = false;
            }
        };

        window.executeBatchDelete = async () => {
            const selected = Array.from(document.querySelectorAll('.doc-checkbox:checked')).map(cb => cb.value);
            if (!confirm(`Permanently purge all fragments for ${selected.length} files from the cluster index?`)) return;

            const btn = document.getElementById('batch-action-bar').querySelector('button');
            btn.disabled = true;
            btn.innerHTML = `<svg class="animate-spin h-3 w-3 text-white inline" viewBox="0 0 24 24">...</svg> PURGING...`;

            try {
                const resp = await fetch(`/admin/datastores/${currentDsId}/batch_delete`, {
                    method: 'POST',
                    headers: { 
                        'Content-Type': 'application/json',
                        'X-CSRF-Token': '{{ csrf_token }}'
                    },
                    body: JSON.stringify({ file_paths: selected })
                });
                if (resp.ok) {
                    window.showToast("Batch deletion successful.", "success");
                    setTimeout(() => window.location.reload(), 1000);
                }
            } catch(e) { 
                window.showErrorModal("Batch Action Failed", { error: e.message }); 
                btn.disabled = false;
            }
        };

        bootEngine();
    })();    

    function compileExtensions(form) {
        const checked = Array.from(form.querySelectorAll('input[name="ext_choice"]:checked')).map(i => i.value);
        form.querySelector('#final-extensions-input').value = checked.join(',');
    }
</script>
{% endblock %}