{% extends "admin/base.html" %}

{% block title %}Models Manager{% endblock %}

{% block header_title %}Models Manager & Auto-Routing{% endblock %}

{% block content %}
<div class="space-y-8">
    <!-- AI Auto-Config Section -->
    <div class="card-style border-l-4 border-purple-600 bg-purple-600/5 mb-8">
        <div class="flex flex-col md:flex-row justify-between items-center gap-6">
            <div class="flex items-center gap-4">
                <div class="p-3 bg-purple-600 rounded-2xl shadow-xl shadow-purple-500/20">
                    <svg class="w-8 h-8 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z"></path></svg>
                </div>
                <div>
                    <h2 class="text-xl font-black text-white uppercase tracking-tighter">AI Auto-Config</h2>
                    <p class="text-xs text-purple-300 font-bold uppercase tracking-widest">Ground model metadata in industry standard scorecards</p>
                </div>
            </div>
            <div class="flex flex-grow max-w-xl gap-2">
                <input type="text" id="ai-config-url" value="https://grumpified-oggvct.github.io/model-trust-scorecard/" class="flex-grow bg-black/40 border border-purple-500/30 rounded-xl px-4 py-2 text-sm text-white outline-none focus:border-purple-500">
                <button onclick="runAIConfig()" id="ai-config-btn" class="bg-purple-600 hover:bg-purple-500 text-white px-6 py-2 rounded-xl font-black text-xs uppercase tracking-widest transition-all transform active:scale-95 shadow-lg shadow-purple-900/20">Sync Metadata</button>
                <button onclick="stopAIConfig()" id="ai-stop-btn" class="hidden bg-red-600 hover:bg-red-500 text-white px-4 py-2 rounded-xl font-black text-xs uppercase transition-all shadow-lg">STOP</button>
            </div>
        </div>
        
        <div id="ai-config-progress-container" class="hidden mt-6">
            <div class="flex justify-between text-[10px] font-black text-purple-400 uppercase tracking-widest mb-1">
                <span id="ai-progress-label">Syncing Cluster Intelligence...</span>
                <span id="ai-progress-percent">0%</span>
            </div>
            <div class="h-1.5 w-full bg-black/40 rounded-full border border-white/5 overflow-hidden">
                <div id="ai-progress-bar" class="h-full bg-purple-600 transition-all duration-500 shadow-[0_0_10px_rgba(168,85,247,0.5)]" style="width: 0%"></div>
            </div>
        </div>
        
        <div id="ai-config-console" class="hidden mt-4 bg-black/60 border border-white/5 rounded-xl p-4 font-mono text-[10px] text-purple-300 space-y-1 h-32 overflow-y-auto custom-scrollbar">
            <div class="text-gray-600 italic">Waiting for architect...</div>
        </div>
    </div>

    <!-- Server Filter Bar -->
    <div class="card-style mb-6">
        <div class="flex flex-col gap-4">
            <div class="flex items-center justify-between">
                <h3 class="text-xs font-black text-gray-500 uppercase tracking-widest">Filter by Infrastructure</h3>
                <button onclick="clearServerFilters()" class="text-[10px] font-bold text-indigo-400 hover:text-white uppercase">Reset Filters</button>
            </div>
            <div class="flex flex-wrap gap-2" id="server-filter-container">
                <button onclick="toggleServerFilter('all', this)" class="server-filter-btn px-4 py-2 rounded-xl text-[10px] font-black uppercase tracking-widest border border-indigo-500/30 bg-indigo-600 text-white shadow-lg shadow-indigo-900/20 transition-all" data-server-id="all">
                    All Servers
                </button>
                {% for server in servers %}
                <button onclick="toggleServerFilter({{ server.id }}, this)" class="server-filter-btn px-4 py-2 rounded-xl text-[10px] font-black uppercase tracking-widest border border-white/5 bg-white/5 text-gray-500 hover:text-indigo-300 transition-all" data-server-id="{{ server.id }}">
                    {{ server.name }}
                </button>
                {% endfor %}
            </div>
        </div>
    </div>

    <div class="card-style">
        <div class="flex justify-between items-center">
            <div class="flex items-center gap-4 cursor-pointer" onclick="document.getElementById('doc-body').classList.toggle('hidden'); this.querySelector('.arrow').classList.toggle('rotate-180')">
                <h2 class="text-2xl font-bold">Auto-Routing Logic & Metadata</h2>
                <svg class="arrow w-6 h-6 transition-transform" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path></svg>
            </div>
            <button onclick="window.startCustomTour(MODELS_TOUR, 'tour_models_v1', true, true)" class="flex items-center gap-2 text-[10px] font-black uppercase text-indigo-400 hover:text-white transition-colors bg-white/5 px-3 py-1 rounded-lg">
                <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="M8.228 9c.549-1.165 2.03-2 3.772-2 2.21 0 4 1.79 4 4 0 2.21-1.79 4-4 4-1.742 0-3.223-.835-3.772-2M12 18.5v.01M12 5.5v.01"></path></svg>
                Replay Tour
            </button>
        </div>
        
        <div id="doc-body" class="mt-4 border-t border-white/5 pt-4">
            <p class="text-current">
                The Models Manager defines the "Intelligence DNA" for the virtual <code class="inline-code">auto</code> model. 
                Instead of managing server hardware here (which has moved to **Workflows**), this page focuses on tagging models so the Gateway knows how to route requests based on prompt content.
            </p>
            <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4 mt-6">
            <div class="p-3 bg-white/5 rounded border border-white/10">
                <span class="block text-indigo-400 font-bold text-xs uppercase mb-1">👁️ Supports Images</span>
                <p class="text-[11px] text-gray-400 leading-relaxed">Required for vision tasks. If a user attaches an image, the 'auto' router filters for these models only.</p>
            </div>
            <div class="p-3 bg-white/5 rounded border border-white/10">
                <span class="block text-amber-400 font-bold text-xs uppercase mb-1">🧠 Think (CoT)</span>
                <p class="text-[11px] text-gray-400 leading-relaxed">Enable for models supporting internal reasoning (DeepSeek R1, etc). Prevents 'think' parameter stripping.</p>
            </div>
            <div class="p-3 bg-white/5 rounded border border-white/10">
                <span class="block text-emerald-400 font-bold text-xs uppercase mb-1">💻 Code</span>
                <p class="text-[11px] text-gray-400 leading-relaxed">Tagged as programming experts. Used when the router detects code keywords (e.g. 'def', 'class', 'import').</p>
            </div>
            <div class="p-3 bg-white/5 rounded border border-white/10">
                <span class="block text-sky-400 font-bold text-xs uppercase mb-1">⚡ Fast</span>
                <p class="text-[11px] text-gray-400 leading-relaxed">Small, optimized models. Used when 'fast_model' option is set in the request for low-latency tasks.</p>
            </div>
            <div class="p-3 bg-white/5 rounded border border-white/10">
                <span class="block text-purple-400 font-bold text-xs uppercase mb-1">🧩 Reasoning</span>
                <p class="text-[11px] text-gray-400 leading-relaxed">Complex logic models. Triggered by keywords like 'solve', 'math', 'why', or 'step by step'.</p>
            </div>
            <div class="p-3 bg-white/5 rounded border border-white/10">
                <span class="block text-rose-400 font-bold text-xs uppercase mb-1">📏 Max Context</span>
                <p class="text-[11px] text-gray-400 leading-relaxed">Token limit. The router checks if the current chat history fits before selecting the model.</p>
            </div>
            </div>
        </div>
    </div>

    <form id="metadata-form" action="{{ url_for('admin_update_model_metadata') }}" method="post" class="card-style flex flex-col h-[70vh]">
        <input type="hidden" name="csrf_token" value="{{ csrf_token }}">
        
        <div class="flex flex-col md:flex-row justify-between items-start md:items-center gap-4 mb-6 flex-shrink-0">
            <h2 class="text-2xl font-bold">Configure Model Capabilities</h2>
            
            <div class="flex items-center gap-4 w-full md:w-auto">
                <!-- Search Bar -->
                <div class="relative flex-grow md:w-80">
                    <span class="absolute inset-y-0 left-0 pl-3 flex items-center text-gray-500">
                        <svg class="h-4 w-4" 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>
                    </span>
                    <input type="text" id="model-search" onkeyup="filterModels()" placeholder="Search names, tags, servers..." class="w-full pl-10 pr-4 py-2 bg-black/40 border border-white/10 rounded-xl text-sm focus:border-indigo-500 outline-none transition-all">
                </div>
                
                <button type="button" onclick="window.location.reload()" class="p-2 bg-white/5 hover:bg-white/10 rounded-xl text-indigo-400 transition-colors" title="Refresh list from Database">
                    <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15"></path></svg>
                </button>
            </div>
        </div>
        
        <div class="flex-grow overflow-auto border border-white/5 rounded-xl bg-black/20 custom-scrollbar">
            <table class="min-w-full" id="models-table">
                <thead class="sticky top-0 bg-[#0f0f15] z-10 shadow-md">
                    <tr>
                        <th class="px-4 py-3 text-left text-xs font-medium text-gray-400 uppercase tracking-wider">Model Name</th>
                        <th class="px-4 py-3 text-left text-xs font-medium text-gray-400 uppercase tracking-wider">Servers</th>
                        <th class="px-4 py-3 text-left text-xs font-medium text-gray-400 uppercase tracking-wider">Description</th>
                        <th class="px-4 py-3 text-center text-xs font-medium text-gray-400 uppercase tracking-wider">
                            <div class="mb-1">Embedding</div>
                            <div class="flex justify-center gap-2 text-[9px] font-bold">
                                <button type="button" onclick="toggleColumn('is_embedding_model_', true)" class="text-indigo-400 hover:text-white uppercase">All</button>
                                <span class="text-gray-600">|</span>
                                <button type="button" onclick="toggleColumn('is_embedding_model_', false)" class="text-gray-500 hover:text-white uppercase">None</button>
                            </div>
                        </th>
                        <th class="px-4 py-3 text-center text-xs font-medium text-gray-400 uppercase tracking-wider">
                            <div class="mb-1">Supports Images</div>
                            <div class="flex justify-center gap-2 text-[9px] font-bold">
                                <button type="button" onclick="toggleColumn('supports_images_', true)" class="text-indigo-400 hover:text-white uppercase">All</button>
                                <span class="text-gray-600">|</span>
                                <button type="button" onclick="toggleColumn('supports_images_', false)" class="text-gray-500 hover:text-white uppercase">None</button>
                            </div>
                        </th>
                        <th class="px-4 py-3 text-center text-xs font-medium text-gray-400 uppercase tracking-wider">
                            <div class="mb-1">Think (CoT)</div>
                            <div class="flex justify-center gap-2 text-[9px] font-bold">
                                <button type="button" onclick="toggleColumn('supports_thinking_', true)" class="text-indigo-400 hover:text-white uppercase">All</button>
                                <span class="text-gray-600">|</span>
                                <button type="button" onclick="toggleColumn('supports_thinking_', false)" class="text-gray-500 hover:text-white uppercase">None</button>
                            </div>
                        </th>
                        <th class="px-4 py-3 text-center text-xs font-medium text-gray-400 uppercase tracking-wider">
                            <div class="mb-1">Code</div>
                            <div class="flex justify-center gap-2 text-[9px] font-bold">
                                <button type="button" onclick="toggleColumn('is_code_model_', true)" class="text-indigo-400 hover:text-white uppercase">All</button>
                                <span class="text-gray-600">|</span>
                                <button type="button" onclick="toggleColumn('is_code_model_', false)" class="text-gray-500 hover:text-white uppercase">None</button>
                            </div>
                        </th>
                        <th class="px-4 py-3 text-center text-xs font-medium text-gray-400 uppercase tracking-wider">
                            <div class="mb-1">Fast</div>
                            <div class="flex justify-center gap-2 text-[9px] font-bold">
                                <button type="button" onclick="toggleColumn('is_fast_model_', true)" class="text-indigo-400 hover:text-white uppercase">All</button>
                                <span class="text-gray-600">|</span>
                                <button type="button" onclick="toggleColumn('is_fast_model_', false)" class="text-gray-500 hover:text-white uppercase">None</button>
                            </div>
                        </th>
                        <th class="px-4 py-3 text-center text-xs font-medium text-gray-400 uppercase tracking-wider">
                            <div class="mb-1">Reasoning</div>
                            <div class="flex justify-center gap-2 text-[9px] font-bold">
                                <button type="button" onclick="toggleColumn('is_reasoning_model_', true)" class="text-indigo-400 hover:text-white uppercase">All</button>
                                <span class="text-gray-600">|</span>
                                <button type="button" onclick="toggleColumn('is_reasoning_model_', false)" class="text-gray-500 hover:text-white uppercase">None</button>
                            </div>
                        </th>
                        <th class="px-4 py-3 text-center text-xs font-medium text-gray-400 uppercase tracking-wider">Max Context</th>
                        <th class="px-4 py-3 text-center text-xs font-medium text-gray-400 uppercase tracking-wider">Size (B)</th>
                        <th class="px-4 py-3 text-center text-xs font-medium text-gray-400 uppercase tracking-wider">Scale</th>
                        <th class="px-4 py-3 text-center text-xs font-medium text-gray-400 uppercase tracking-wider">Priority</th>
                    </tr>
                </thead>
                <tbody class="divide-y divide-white/10" id="metadata-tbody">
                    {% for meta in metadata_list %}
                    <tr class="align-top metadata-row">
                        <td class="px-4 py-4 whitespace-nowrap text-sm font-medium text-current font-mono">{{ meta.model_name }}</td>
                        <td class="px-4 py-4 whitespace-nowrap text-xs">
                            <div class="flex flex-wrap gap-1">
                                {% for srv in meta.origin_servers %}
                                <button type="button" 
                                        onclick="toggleModelOnServer(event, {{ srv.id }}, '{{ meta.model_name }}')"
                                        class="server-badge px-2 py-1 rounded-full border transition-all hover:scale-105 active:scale-95
                                               {% if srv.is_allowed %}
                                               bg-emerald-500/10 text-emerald-400 border-emerald-500/30
                                               {% else %}
                                               bg-red-500/10 text-red-400 border-red-500/30
                                               {% endif %}"
                                        title="{{ 'Active: Click to Deactivate' if srv.is_allowed else 'Blocked: Click to Activate' }} on {{ srv.name }}">
                                    {{ srv.name }}
                                </button>
                                {% endfor %}
                            </div>
                        </td>
                        <td class="px-4 py-4 whitespace-nowrap">
                            <input type="text" name="description_{{ meta.id }}" value="{{ meta.description or '' }}" placeholder="A short description..." class="w-full min-w-48 px-2 py-1 rounded-md shadow-sm sm:text-sm">
                        </td>
                        <td class="px-4 py-4 whitespace-nowrap text-center">
                            <input type="checkbox" name="is_embedding_model_{{ meta.id }}" value="true" class="embedding-toggle h-5 w-5 rounded text-amber-500" data-meta-id="{{ meta.id }}" {% if meta.is_embedding_model %}checked{% endif %}>
                        </td>
                        <td class="px-4 py-4 whitespace-nowrap text-center">
                            <input type="checkbox" name="supports_images_{{ meta.id }}" value="true" class="capability-toggle h-5 w-5 rounded text-[var(--color-primary-600)]" {% if meta.supports_images %}checked{% endif %}>
                        </td>
                        <td class="px-4 py-4 whitespace-nowrap text-center">
                            <input type="checkbox" name="supports_images_{{ meta.id }}" value="true" class="capability-toggle h-5 w-5 rounded text-[var(--color-primary-600)]" data-meta-id="{{ meta.id }}" {% if meta.supports_images %}checked{% endif %}>
                        </td>
                        <td class="px-4 py-4 whitespace-nowrap text-center">
                            <input type="checkbox" name="supports_thinking_{{ meta.id }}" value="true" class="h-5 w-5 rounded text-[var(--color-primary-600)]" {% if meta.supports_thinking %}checked{% endif %}>
                        </td>
                        <td class="px-4 py-4 whitespace-nowrap text-center">
                            <input type="checkbox" name="is_code_model_{{ meta.id }}" value="true" class="h-5 w-5 rounded text-[var(--color-primary-600)]" {% if meta.is_code_model %}checked{% endif %}>
                        </td>
                        <td class="px-4 py-4 whitespace-nowrap text-center">
                            <input type="checkbox" name="is_fast_model_{{ meta.id }}" value="true" class="h-5 w-5 rounded text-[var(--color-primary-600)]" {% if meta.is_fast_model %}checked{% endif %}>
                        </td>
                        <td class="px-4 py-4 whitespace-nowrap text-center">
                            <input type="checkbox" name="is_reasoning_model_{{ meta.id }}" value="true" class="h-5 w-5 rounded text-[var(--color-primary-600)]" {% if meta.is_reasoning_model %}checked{% endif %}>
                        </td>
                        <td class="px-4 py-4 whitespace-nowrap text-center">
                             <div class="flex items-center justify-center gap-1">
                                <input type="number" id="ctx_input_{{ meta.id }}" name="max_context_{{ meta.id }}" value="{{ meta.max_context }}" step="1024" class="w-24 px-2 py-1 rounded-md shadow-sm sm:text-sm text-center">
                                <button type="button" onclick="refreshContext('{{ meta.model_name }}', 'ctx_input_{{ meta.id }}')" class="p-1.5 hover:bg-white/10 rounded-md text-gray-500 hover:text-indigo-400 transition-colors" title="Sync from server">
                                    <svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15"></path></svg>
                                </button>
                             </div>
                        </td>
                        <td class="px-4 py-4 whitespace-nowrap text-center">
                            <input type="number" step="0.1" name="model_size_{{ meta.id }}" value="{{ meta.model_size }}" 
                                   class="w-16 px-2 py-1 rounded-md shadow-sm sm:text-sm text-center {% if meta.model_size < 0 %}text-red-400 font-bold{% endif %}"
                                   title="{{ 'Size Unknown - AI config or manual entry needed' if meta.model_size < 0 else 'Parameter count in Billions' }}">
                        </td>
                        <td class="px-4 py-4 whitespace-nowrap text-center">
                            <select name="model_scale_{{ meta.id }}" class="bg-black/40 border border-white/10 rounded p-1 text-[10px] font-bold uppercase">
                                <option value="1" {% if meta.model_scale == 1 %}selected{% endif %}>Small</option>
                                <option value="2" {% if meta.model_scale == 2 %}selected{% endif %}>Medium</option>
                                <option value="3" {% if meta.model_scale == 3 %}selected{% endif %}>Large</option>
                            </select>
                        </td>
                        <td class="px-4 py-4 whitespace-nowrap text-center">
                             <input type="number" name="priority_{{ meta.id }}" value="{{ meta.priority }}" class="w-16 px-2 py-1 rounded-md shadow-sm sm:text-sm text-center">
                        </td>
                    </tr>
                    {% else %}
                    <tr>
                        <td colspan="6" class="px-6 py-10 text-center text-gray-400">
                           No models found across any active servers. Go to the <a href="{{ url_for('admin_servers') }}" class="font-semibold text-[var(--color-primary-500)] hover:underline">Server Management</a> page and refresh your servers to discover models.
                        </td>
                    </tr>
                    {% endfor %}
                </tbody>
            </table>
        </div>

        <div class="flex justify-end pt-6 border-t border-white/10 mt-6">
            <button type="submit" class="w-full md:w-auto justify-center py-2 px-6 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-[var(--color-primary-600)] hover:bg-[var(--color-primary-700)] focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-[var(--color-primary-500)]">
                Save All Changes
            </button>
        </div>
    </form>
</div>

<script>
    let activeServerFilters = new Set(['all']);

    function toggleServerFilter(serverId, btn) {
        if (serverId === 'all') {
            activeServerFilters.clear();
            activeServerFilters.add('all');
            document.querySelectorAll('.server-filter-btn').forEach(b => {
                b.className = "server-filter-btn px-4 py-2 rounded-xl text-[10px] font-black uppercase tracking-widest border border-white/5 bg-white/5 text-gray-500 hover:text-indigo-300 transition-all";
            });
            btn.className = "server-filter-btn px-4 py-2 rounded-xl text-[10px] font-black uppercase tracking-widest border border-indigo-500/30 bg-indigo-600 text-white shadow-lg shadow-indigo-900/20 transition-all";
        } else {
            // Remove 'all' if present
            if (activeServerFilters.has('all')) {
                activeServerFilters.delete('all');
                const allBtn = document.querySelector('[data-server-id="all"]');
                allBtn.className = "server-filter-btn px-4 py-2 rounded-xl text-[10px] font-black uppercase tracking-widest border border-white/5 bg-white/5 text-gray-500 hover:text-indigo-300 transition-all";
            }

            if (activeServerFilters.has(serverId)) {
                activeServerFilters.delete(serverId);
                btn.className = "server-filter-btn px-4 py-2 rounded-xl text-[10px] font-black uppercase tracking-widest border border-white/5 bg-white/5 text-gray-500 hover:text-indigo-300 transition-all";
            } else {
                activeServerFilters.add(serverId);
                btn.className = "server-filter-btn px-4 py-2 rounded-xl text-[10px] font-black uppercase tracking-widest border border-indigo-500/30 bg-indigo-600 text-white shadow-lg shadow-indigo-900/20 transition-all";
            }

            // If nothing selected, reset to all
            if (activeServerFilters.size === 0) {
                toggleServerFilter('all', document.querySelector('[data-server-id="all"]'));
                return;
            }
        }
        filterModels();
    }

    function clearServerFilters() {
        toggleServerFilter('all', document.querySelector('[data-server-id="all"]'));
    }

    /**
     * Filters the table rows based on search input and server selection.
     */
    function filterModels() {
        const input = document.getElementById('model-search');
        const searchFilter = input.value.toLowerCase();
        const rows = document.querySelectorAll('#metadata-tbody tr');

        rows.forEach(row => {
            const name = row.cells[0].textContent.toLowerCase();
            const desc = row.querySelector('input[name^="description_"]').value.toLowerCase();
            
            // Server matching
            let serverMatch = activeServerFilters.has('all');
            if (!serverMatch) {
                // Get server IDs from badges in the second cell
                const badges = row.cells[1].querySelectorAll('.server-badge');
                badges.forEach(badge => {
                    // Extract ID from the onclick attribute: toggleModelOnServer(event, ID, 'name')
                    const match = badge.getAttribute('onclick').match(/toggleModelOnServer\(event,\s*(\d+),/);
                    if (match && activeServerFilters.has(parseInt(match[1]))) {
                        serverMatch = true;
                    }
                });
            }

            // Capability search tags
            const isVision = row.querySelector('input[name^="supports_images_"]').checked;
            const isCode = row.querySelector('input[name^="is_code_model_"]').checked;
            const isFast = row.querySelector('input[name^="is_fast_model_"]').checked;
            const isReasoning = row.querySelector('input[name^="is_reasoning_model_"]').checked;
            const tags = [];
            if(isVision) tags.push("vision", "images");
            if(isCode) tags.push("code", "programming");
            if(isFast) tags.push("fast", "small");
            if(isReasoning) tags.push("reasoning", "logic");
            const tagStr = tags.join(" ");

            const textMatch = name.includes(searchFilter) || desc.includes(searchFilter) || tagStr.includes(searchFilter);

            if (serverMatch && textMatch) {
                row.style.display = "";
            } else {
                row.style.display = "none";
            }
        });
    }

    /**
     * Calls the backend to fetch current context length for a model.
     */
    async function refreshContext(modelName, inputId) {
        const input = document.getElementById(inputId);
        const btn = input.nextElementSibling;
        
        // Visual feedback
        btn.classList.add('animate-spin', 'text-indigo-400');
        
        try {
            const response = await fetch(`{{ url_for('admin_refresh_model_context') }}?model_name=${encodeURIComponent(modelName)}`);
            const data = await response.json();
            
            if (data.success) {
                input.value = data.context_length;
                input.classList.add('ring-2', 'ring-green-500');
                setTimeout(() => input.classList.remove('ring-2', 'ring-green-500'), 2000);
                window.showToast(`Context for ${modelName} updated.`, 'success');
            } else {
                window.showErrorModal("Sync Failed", data);
            }
        } catch (e) {
            window.showErrorModal("Connection Fault", { error: e.message });
        } finally {
            btn.classList.remove('animate-spin', 'text-indigo-400');
        }
    }

    /**
     * Handle Row Selection/Highlighting
     */
    document.getElementById('metadata-tbody').addEventListener('click', (e) => {
        const row = e.target.closest('.metadata-row');
        if (!row) return;

        // Optional: Clear other highlights if you want "Single Selection" mode
        // document.querySelectorAll('.metadata-row').forEach(r => r.classList.remove('active-row'));

        row.classList.toggle('active-row');
    });

    /**
     * Toggles all checkboxes in a column based on the name prefix.
     */
    function toggleColumn(prefix, value) {
        const checkboxes = document.querySelectorAll(`input[name^="${prefix}"]`);
        checkboxes.forEach(cb => {
            cb.checked = value;
            // Trigger change event to run the exclusivity logic
            cb.dispatchEvent(new Event('change', { bubbles: true }));
        });
    }

    /**
     * Mutual Exclusivity: If Embedding is selected, disable and clear other capabilities.
     */
    document.addEventListener('change', function(e) {
        if (e.target.classList.contains('embedding-toggle')) {
            const row = e.target.closest('tr');
            const otherCheckboxes = row.querySelectorAll('input[type="checkbox"]:not(.embedding-toggle)');
            
            if (e.target.checked) {
                otherCheckboxes.forEach(cb => {
                    cb.checked = false;
                    cb.disabled = true;
                    cb.parentElement.classList.add('opacity-30');
                });
            } else {
                otherCheckboxes.forEach(cb => {
                    cb.disabled = false;
                    cb.parentElement.classList.remove('opacity-30');
                });
            }
        }
    });

    // Run on load for existing state
    document.querySelectorAll('.embedding-toggle').forEach(el => {
        if (el.checked) el.dispatchEvent(new Event('change', { bubbles: true }));
    });

    /**
     * Toggles administrative allowed status of a model on a specific server via AJAX.
     */
    async function toggleModelOnServer(event, serverId, modelName) {
        const btn = event.currentTarget;
        const originalClasses = btn.className;
        
        // Visual feedback for processing
        btn.classList.add('opacity-50', 'animate-pulse');
        btn.disabled = true;

        try {
            const response = await fetch("{{ url_for('admin_toggle_model_server') }}", {
                method: "POST",
                headers: {
                    "Content-Type": "application/json",
                    "X-CSRF-Token": "{{ csrf_token }}"
                },
                body: JSON.stringify({
                    server_id: serverId,
                    model_name: modelName
                })
            });

            const data = await response.json();
            if (data.success) {
                // Update styling based on new state
                if (data.new_state) {
                    btn.className = "server-badge px-2 py-1 rounded-full border transition-all hover:scale-105 active:scale-95 bg-emerald-500/10 text-emerald-400 border-emerald-500/30";
                    btn.title = "Active: Click to Deactivate on " + btn.innerText;
                    window.showToast(`${modelName} enabled on server.`, 'success');
                } else {
                    btn.className = "server-badge px-2 py-1 rounded-full border transition-all hover:scale-105 active:scale-95 bg-red-500/10 text-red-400 border-red-500/30";
                    btn.title = "Blocked: Click to Activate on " + btn.innerText;
                    window.showToast(`${modelName} blocked on server.`, 'info');
                }
            } else {
                window.showErrorModal("Toggle Failed", data);
                btn.className = originalClasses;
            }
        } catch (e) {
            window.showErrorModal("Network Fault", { error: e.message });
            btn.className = originalClasses;
        } finally {
            btn.classList.remove('opacity-50', 'animate-pulse');
            btn.disabled = false;
        }
    }

    // --- Page Tour Logic ---
    const MODELS_TOUR = [
        {
            target: '#metadata-tbody tr:first-child td:first-child',
            text: "This is your <b>Hub Identity</b>. Every discovered model across your cluster is listed here uniquely."
        },
        {
            target: '.capability-toggle',
            text: "<b>Supports Images</b>: Vital for VLM routing. If a user attaches a file, the Hub only considers models with this checked."
        },
        {
            target: 'input[name^="supports_thinking_"]',
            text: "<b>Think (CoT)</b>: Enable this for Reasoning models. It prevents the Gateway from stripping the 'think' parameter."
        },
        {
            target: 'input[name^="max_context_"]',
            text: "<b>Max Context</b>: The token ceiling. The 'auto' router will bypass small models if the chat history is too long."
        },
        {
            target: 'input[name^="priority_"]',
            text: "<b>Priority</b>: Tie-breaker. If two models match the request, the one with the <b>lowest value</b> (e.g., 1 vs 10) wins."
        },
        {
            target: '#btn-save-all',
            text: "Don't forget to <b>Save All Changes</b> to update the cluster metadata."
        }
    ];

    // Ensure tour triggers after all components are settled
    window.addEventListener('load', () => {
        if (window.startCustomTour) {
            window.startCustomTour(MODELS_TOUR, 'tour_models_v1', {{ settings.tour_models | tojson }});
        }
    });

    let currentConfigTaskId = null;

    window.stopAIConfig = async () => {
        if (!currentConfigTaskId) return;
        const resp = await fetch(`/admin/system/stop-task/${currentConfigTaskId}`, { 
            method: 'POST', 
            headers: { 'X-CSRF-Token': "{{ csrf_token }}" } 
        });
        document.getElementById('ai-stop-btn').classList.add('hidden');
    };

    window.runAIConfig = async () => {
        const btn = document.getElementById('ai-config-btn');
        const stopBtn = document.getElementById('ai-stop-btn');
        const console = document.getElementById('ai-config-console');
        const url = document.getElementById('ai-config-url').value;
        
        if(!url) return alert("Scorecard URL required.");
        
        btn.disabled = true;
        btn.innerText = "CONFIGURING...";
        console.classList.remove('hidden');
        console.innerHTML = '<div class="text-purple-400 font-bold">[Architect] Handshaking with cluster...</div>';

        const formData = new FormData();
        formData.append('url', url);
        formData.append('csrf_token', "{{ csrf_token }}");

        try {
            const resp = await fetch("{{ url_for('admin_ai_configure_models') }}", { 
                method: 'POST', 
                body: formData 
            });
            const data = await resp.json();
            if(data.success) {
                currentConfigTaskId = data.task_id;
                stopBtn.classList.remove('hidden');
                console.innerHTML += `<div class="text-indigo-400">[System] Task ${data.task_id} shifted to background. You can navigate away.</div>`;
            } else {
                console.innerHTML += `<div class="text-red-400">[Error] ${data.error}</div>`;
                btn.disabled = false;
                btn.innerText = "Sync Metadata";
            }
        } catch(e) { 
            console.innerHTML += `<div class="text-red-500">[Network Error] ${e.message}</div>`;
            btn.disabled = false;
        }
    };

    // SSE Listener for Config Trace & Progress
    window.showNotification = (text) => {
        const toast = document.getElementById('global-notification');
        document.getElementById('notif-text').innerText = text;
        toast.classList.remove('translate-x-full');
        setTimeout(hideNotification, 6000);
    };

    window.hideNotification = () => {
        document.getElementById('global-notification').classList.add('translate-x-full');
    };

    const configSource = new EventSource("{{ url_for('sse_events') }}");
    configSource.onmessage = (e) => {
        const msg = JSON.parse(e.data);
        if (msg.type === 'completed' && msg.id.startsWith('sys_')) {
            window.showNotification(msg.error || "System background task finished.");
        }
        if(msg.id && msg.id.startsWith('sys_build_config_')) {
            const consoleEl = document.getElementById('ai-config-console');
            const progressContainer = document.getElementById('ai-config-progress-container');
            const progressBar = document.getElementById('ai-progress-bar');
            const progressPercent = document.getElementById('ai-progress-percent');
            
            progressContainer.classList.remove('hidden');
            
            // Update Progress Bar using the 'tokens' field mapped in Python
            if (msg.tokens !== undefined) {
                const pct = msg.tokens + '%';
                progressBar.style.width = pct;
                progressPercent.innerText = pct;
            }

            const color = msg.type === 'error' ? 'text-red-400' : 'text-purple-300';
            consoleEl.innerHTML += `<div class="${color} opacity-80">${msg.error || 'Analyzing node data...'}</div>`;
            consoleEl.scrollTop = consoleEl.scrollHeight;

            if (msg.type === 'completed') {
                progressBar.style.width = '100%';
                progressPercent.innerText = '100%';
            }
        }
    };
</script>
{% endblock %}