{% extends "admin/base.html" %}
{% block title %}Ollama Instance Manager{% endblock %}
{% block header_title %}Local Instance Manager{% endblock %}

{% block content %}
<div class="space-y-8">
    <!-- Creation Form -->
    <!-- Binary Hub Status -->
    <!-- System Task Console (Hidden by default) -->
    <div id="system-task-panel" class="hidden card-style border-l-4 border-indigo-500 bg-indigo-500/5 mb-8">
        <div class="flex justify-between items-center mb-4">
            <div class="flex items-center gap-3">
                <div class="w-2 h-2 bg-indigo-500 rounded-full animate-ping"></div>
                <h2 class="text-sm font-black uppercase tracking-widest text-indigo-400">System Task in Progress</h2>
            </div>
            <button onclick="this.closest('#system-task-panel').classList.add('hidden')" class="text-gray-500 hover:text-white">×</button>
        </div>
        <div id="system-console" class="h-48 overflow-y-auto bg-black/60 rounded-lg p-4 font-mono text-[11px] text-indigo-200 space-y-1">
            <div class="text-gray-500 italic">Awaiting telemetry...</div>
        </div>
    </div>

    <!-- Environment Status -->
    <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
        <!-- Ollama Status -->
        <div class="card-style border-l-4 {% if is_installed %}border-green-500{% else %}border-red-500{% endif %}">
            <div class="flex justify-between items-center">
                <div>
                    <h2 class="text-lg font-bold">Ollama</h2>
                    <p class="text-[10px] text-gray-400 uppercase font-black">
                        {% if is_installed %}
                            <span class="text-green-400">Detected</span>
                        {% else %}
                            <span class="text-red-400">Not Found</span>
                        {% endif %}
                    </p>
                </div>
                <div class="flex gap-2">
                    <button onclick="triggerSystemTask('{{ url_for('admin_install_ollama') }}')" class="bg-indigo-600 hover:bg-indigo-500 px-3 py-1.5 rounded text-[10px] font-black uppercase">
                        {{ 'Update' if is_installed else 'Install' }}
                    </button>
                </div>
            </div>
        </div>

        <!-- vLLM Status -->
        <div class="card-style border-l-4 {% if is_vllm_installed %}border-green-500{% else %}border-amber-500{% endif %}">
            <div class="flex justify-between items-center">
                <div>
                    <h2 class="text-lg font-bold">vLLM</h2>
                    <p class="text-[10px] text-gray-400 uppercase font-black">
                        {% if is_vllm_installed %}<span class="text-green-400">Detected</span>{% else %}<span class="text-amber-400">Optional</span>{% endif %}
                    </p>
                </div>
                <div class="flex gap-2">
                    {% if is_vllm_installed %}
                    <button onclick="triggerSystemTask('{{ url_for('admin_update_vllm') }}')" class="bg-indigo-600/20 text-indigo-400 border border-indigo-500/30 hover:bg-indigo-500/30 px-3 py-1.5 rounded text-[10px] font-black uppercase">Update</button>
                    {% else %}
                    <button onclick="triggerSystemTask('{{ url_for('admin_install_vllm') }}')" class="bg-amber-600 hover:bg-amber-500 px-3 py-1.5 rounded text-[10px] font-black uppercase">Install</button>
                    {% endif %}
                </div>
            </div>
        </div>

        <!-- OpenLLM Status -->
        <div class="card-style border-l-4 {% if is_openllm_installed %}border-green-500{% else %}border-amber-500{% endif %}">
            <div class="flex justify-between items-center">
                <div>
                    <h2 class="text-lg font-bold">OpenLLM</h2>
                    <p class="text-[10px] text-gray-400 uppercase font-black">
                        {% if is_openllm_installed %}<span class="text-green-400">Detected</span>{% else %}<span class="text-amber-400">Optional</span>{% endif %}
                    </p>
                </div>
                <div class="flex gap-2">
                    {% if is_openllm_installed %}
                    <button onclick="triggerSystemTask('{{ url_for('admin_update_openllm') }}')" class="bg-indigo-600/20 text-indigo-400 border border-indigo-500/30 hover:bg-indigo-500/30 px-3 py-1.5 rounded text-[10px] font-black uppercase">Update</button>
                    {% else %}
                    <button onclick="triggerSystemTask('{{ url_for('admin_install_openllm') }}')" class="bg-amber-600 hover:bg-amber-500 px-3 py-1.5 rounded text-[10px] font-black uppercase">Install</button>
                    {% endif %}
                </div>
            </div>
        </div>

        <div class="card-style border-l-4 border-purple-500">
            <div class="flex justify-between items-center">
                <div>
                    <h2 class="text-lg font-bold">Binary Hub</h2>
                    <p class="text-xs text-gray-400">Internal llama.cpp/vLLM engines.</p>
                </div>
                <button onclick="triggerSystemTask('{{ url_for('admin_update_binaries') }}')" class="bg-purple-600/20 text-purple-400 border border-purple-500/30 px-4 py-2 rounded text-xs font-bold hover:bg-purple-600/30 transition-all">Check for Updates</button>
            </div>
        </div>
    </div>

    <!-- HF Hub Downloader Modal Trigger -->
    <div class="card-style border-l-4 border-sky-500 bg-sky-500/5 mb-8">
        <div class="flex flex-col md:flex-row justify-between items-center gap-4">
            <div class="flex items-center gap-3">
                <div class="p-2 bg-sky-600 rounded-lg">
                    <svg class="w-6 h-6 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4"></path></svg>
                </div>
                <div>
                    <h2 class="text-lg font-bold">Integrated Model Downloader</h2>
                    <p class="text-xs text-gray-400">Search Hugging Face and download GGUF or Safetensors directly to your server.</p>
                </div>
            </div>
            <button onclick="openHFDownloader()" class="bg-sky-600 hover:bg-sky-500 px-6 py-2 rounded-xl font-black text-xs uppercase tracking-widest text-white shadow-lg transition-all">Open HF Hub Browser</button>
        </div>
    </div>

    <div class="card-style">
        <h2 class="card-header text-xl font-bold mb-4">Deploy New Instance</h2>
        <form action="{{ url_for('admin_add_instance') }}" method="post" class="grid grid-cols-1 md:grid-cols-3 gap-4">
            <div class="md:col-span-3">
                <label class="block text-xs text-gray-400 uppercase font-bold">Engine Backend</label>
                <select id="backend_selector" name="backend_type" class="w-full p-2 rounded bg-black/20 border border-white/10 text-indigo-400 font-bold">
                    <option value="ollama">Ollama (Multi-Model / Managed)</option>
                    <option value="llamacpp">Llama.cpp (Single GGUF / Lightweight)</option>
                    <option value="vllm">vLLM (High Throughput / HF Path)</option>
                </select>
            </div>
            <input type="hidden" name="csrf_token" value="{{ csrf_token }}">
            <div>
                <label class="block text-xs text-gray-400 uppercase font-bold">Instance Name</label>
                <input type="text" name="name" placeholder="e.g. RTX-3090-Instance" required class="w-full p-2 rounded bg-black/20 border border-white/10">
            </div>
            <div>
                <label class="block text-xs text-gray-400 uppercase font-bold">Port</label>
                <input type="number" name="port" value="11435" required class="w-full p-2 rounded bg-black/20 border border-white/10">
            </div>
            <div>
                <label class="block text-xs text-gray-400 uppercase font-bold">GPU IDs (CUDA_VISIBLE_DEVICES)</label>
                <input type="text" name="gpu_ids" placeholder="0" class="w-full p-2 rounded bg-black/20 border border-white/10">
            </div>
            <div class="md:col-span-2">
                <label id="path_label" class="block text-xs text-gray-400 uppercase font-bold">Model File / Folder Path</label>
                <div class="flex gap-2">
                    <input type="text" id="model_path_input" name="model_path" placeholder="/data/ollama/models" class="flex-grow p-2 rounded bg-black/20 border border-white/10">
                    <button type="button" onclick="browseLocalModels()" class="px-3 bg-white/5 border border-white/10 rounded-lg text-xs hover:bg-white/10" title="Auto-fill from default directory">📁</button>
                </div>
            </div>
            <div>
                <label class="block text-xs text-gray-400 uppercase font-bold">Keep Alive</label>
                <input type="text" name="keep_alive" value="5m" class="w-full p-2 rounded bg-black/20 border border-white/10">
            </div>
            <div class="md:col-span-3 flex justify-end">
                <button type="submit" class="bg-indigo-600 hover:bg-indigo-500 px-6 py-2 rounded font-bold text-sm">Deploy Instance</button>
            </div>
        </form>
    </div>

    <!-- Discovery Section -->
    {% if discovered %}
    <div class="card-style border-l-4 border-yellow-500 bg-yellow-500/5">
        <div class="flex items-center gap-3 mb-4">
            <svg class="w-6 h-6 text-yellow-500 animate-pulse" 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>
            <h2 class="text-lg font-bold text-yellow-500">Unmanaged Local Instances Detected</h2>
        </div>
        <p class="text-sm text-gray-400 mb-4">The following Ollama instances are running locally but are not yet managed by the Fortress supervisor.</p>
        <div class="space-y-3">
            {% for found in discovered %}
            <form action="{{ url_for('admin_adopt_instance') }}" method="post" class="flex items-center justify-between p-3 bg-black/40 rounded-lg border border-white/5">
                <input type="hidden" name="csrf_token" value="{{ csrf_token }}">
                <input type="hidden" name="port" value="{{ found.port }}">
                <div class="flex items-center gap-4">
                    <span class="text-xs font-mono bg-white/10 px-2 py-1 rounded text-indigo-300">PORT {{ found.port }}</span>
                    <input type="text" name="name" placeholder="Give this instance a name..." required class="text-sm bg-transparent border-b border-white/20 focus:border-indigo-500 outline-none px-1">
                </div>
                <button type="submit" class="text-xs font-black text-yellow-500 hover:text-yellow-400 uppercase tracking-widest">Adopt Management</button>
            </form>
            {% endfor %}
        </div>
    </div>
    {% endif %}

    <!-- Instance List -->
    <div class="card-style">
        <h2 class="card-header text-xl font-bold mb-4">Managed Instances</h2>
        <table class="w-full text-left">
            <thead>
                <tr class="text-gray-500 text-xs uppercase">
                    <th class="p-3">Name</th>
                    <th class="p-3">Port</th>
                    <th class="p-3">Config</th>
                    <th class="p-3">Status</th>
                    <th class="p-3 text-right">Actions</th>
                </tr>
            </thead>
            <tbody class="divide-y divide-white/5">
                {% for item in instances %}
                <tr>
                    <td class="p-3 font-bold">{{ item.config.name }}</td>
                    <td class="p-3 font-mono text-indigo-400">{{ item.config.port }}</td>
                    <td class="p-3 text-xs text-gray-400">
                        GPU: {{ item.config.gpu_ids or 'All' }} | Alive: {{ item.config.keep_alive }}
                    </td>
                    <td class="p-3">
                        {% if item.state == 'RUNNING' %}
                            <span class="px-2 py-1 bg-green-500/20 text-green-400 text-[10px] font-black rounded border border-green-500/30 animate-pulse" title="PID: {{ item.pid }}">MANAGED</span>
                        {% elif item.state == 'SYSTEM' %}
                            <span class="px-2 py-1 bg-blue-500/20 text-blue-400 text-[10px] font-black rounded border border-blue-500/30" title="Managed by Windows/Systemd (PID: {{ item.pid }})">SYSTEM SERVICE</span>
                        {% elif item.state == 'CONFLICT' %}
                            <span class="px-2 py-1 bg-red-500/20 text-red-400 text-[10px] font-black rounded border border-red-500/30" title="Port occupied by non-Ollama process">PORT CONFLICT</span>
                        {% else %}
                            <span class="px-2 py-1 bg-gray-500/20 text-gray-400 text-[10px] font-black rounded border border-white/10">OFFLINE</span>
                        {% endif %}
                    </td>
                    <td class="p-3 text-right">
                        {% if item.state == 'SYSTEM' %}
                            <span class="text-[10px] text-gray-500 italic">Manage via OS</span>
                        {% else %}
                        <form action="{{ url_for('admin_toggle_instance', instance_id=item.config.id) }}" method="post" class="inline">
                            <input type="hidden" name="csrf_token" value="{{ csrf_token }}">
                            <button type="submit" 
                                    {% if item.state == 'CONFLICT' %}disabled{% endif %}
                                    class="text-xs font-bold uppercase {{ 'text-red-400' if item.state == 'RUNNING' else 'text-green-400' }} {{ 'opacity-20 cursor-not-allowed' if item.state == 'CONFLICT' else '' }}">
                                {{ 'Stop' if item.state == 'RUNNING' else 'Start' }}
                            </button>
                        </form>
                        {% endif %}
                    </td>
                </tr>
                {% endfor %}
            </tbody>
        </table>
    </div>
</div>

<script>
    document.addEventListener('DOMContentLoaded', () => {
        const backendSelector = document.getElementById('backend_selector');
        const pathLabel = document.getElementById('path_label');
        const pathInput = document.getElementById('model_path_input');

        function updateUI() {
            const val = backendSelector.value;
            if (val === 'ollama') {
                pathLabel.innerText = "Custom Models Folder (Optional)";
                pathInput.placeholder = "/data/ollama/models";
                pathInput.required = false;
            } else if (val === 'llamacpp') {
                pathLabel.innerHTML = 'Model File Path <span class="text-red-500">*</span>';
                pathInput.placeholder = "C:\\path\\to\\model.gguf";
                pathInput.required = true;
            } else if (val === 'vllm') {
                pathLabel.innerHTML = 'Model Path / HF ID <span class="text-red-500">*</span>';
                pathInput.placeholder = "facebook/opt-125m or /local/path";
                pathInput.required = true;
            }
        }

        backendSelector.addEventListener('change', updateUI);
        updateUI();
    });

    const systemConsole = document.getElementById('system-console');
    const taskPanel = document.getElementById('system-task-panel');

    function logToConsole(text, color = 'text-indigo-200') {
        const entry = document.createElement('div');
        entry.className = color;
        entry.innerText = `[${new Date().toLocaleTimeString()}] ${text}`;
        systemConsole.appendChild(entry);
        systemConsole.scrollTop = systemConsole.scrollHeight;
    }

    async function triggerSystemTask(url) {
        taskPanel.classList.remove('hidden');
        systemConsole.innerHTML = '';
        logToConsole("Initializing background task...", "text-indigo-400 font-bold");
        
        try {
            const resp = await fetch(url, {
                method: 'POST',
                headers: { 'X-CSRF-Token': '{{ csrf_token }}' }
            });
            const data = await resp.json();
            if (resp.ok && data.success) {
                logToConsole(data.message, "text-amber-400");
            } else {
                window.showErrorModal("System Task Failed", data);
            }
        } catch (e) {
            window.showErrorModal("Connection Fault", { error: e.message });
        }
    }

    window.browseLocalModels = async (event) => {
        let btn = null;
        let originalHTML = '📁';
        if (event && event.currentTarget) {
            btn = event.currentTarget;
            originalHTML = btn.innerHTML;
            btn.innerHTML = '<svg class="animate-spin h-3 w-3 text-white" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle><path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path></svg>';
        }

        try {
            const resp = await fetch('{{ url_for("admin_local_files") }}');
            const data = await resp.json();
            
            let fileListHTML = '';
            if (data.files && data.files.length > 0) {
                fileListHTML = data.files.map(f => `
                    <div class="p-2 bg-white/5 hover:bg-indigo-500/20 border border-white/5 rounded cursor-pointer text-[10px] font-mono truncate text-indigo-200 hover:text-white transition-colors" onclick="selectLocalFile('${f.replace(/\\/g, '\\\\')}')" title="${f}">
                        ${f}
                    </div>
                `).join('');
            } else {
                fileListHTML = `<div class="p-4 text-center text-gray-500 italic text-xs">No local models found in the default models path (${data.base_dir || 'configured path'}). Try downloading one via the HF Downloader first.</div>`;
            }
            
            const modalBody = `
                <div class="space-y-4">
                    <div class="p-3 bg-indigo-500/10 border border-indigo-500/30 rounded-lg">
                        <h4 class="text-[10px] font-black text-indigo-400 uppercase tracking-widest mb-1">Local Model Browser</h4>
                        <p class="text-[11px] text-gray-400 leading-relaxed">Select a downloaded model file (.gguf, .safetensors, .pt, etc.) to auto-fill the path.</p>
                    </div>
                    <div class="max-h-64 overflow-y-auto custom-scrollbar space-y-1">
                        ${fileListHTML}
                    </div>
                </div>
            `;
            window.showModal("Select Local Model", modalBody);
        } catch(e) {
            alert("Failed to list local models: " + e.message);
        } finally {
            if (btn) btn.innerHTML = originalHTML;
        }
    };
    
    window.selectLocalFile = (filepath) => {
        document.getElementById('model_path_input').value = filepath;
        document.getElementById('modal-close-btn').click();
    };

    window.showButtonSpinner = (form, loadingText, selector = 'button[type="submit"]') => {
        const btn = form.querySelector(selector);
        if (btn) {
            btn.dataset.originalContent = btn.innerHTML;
            btn.innerHTML = `<svg class="animate-spin -ml-1 mr-2 h-3 w-3 text-current inline" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle><path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path></svg>${loadingText}`;
            btn.classList.add('opacity-50', 'cursor-not-allowed');
            btn.style.pointerEvents = 'none';
        }
    };

    window.openHFDownloader = () => {
        const modalBody = `
            <div class="space-y-6 text-left" id="hf-downloader-root">
                <div>
                    <label class="block text-[10px] font-black text-gray-500 uppercase tracking-widest mb-1">Search Models</label>
                    <div class="flex gap-2">
                        <input type="text" id="hf-search-q" placeholder="e.g. Llama-3.2-GGUF" class="flex-grow p-2.5 bg-black/40 border border-white/10 rounded-xl text-sm outline-none focus:border-sky-500">
                        <button onclick="searchHF()" class="bg-sky-600 px-6 py-2 rounded-xl text-xs font-black uppercase">Search</button>
                    </div>
                </div>

                <div id="hf-results" class="space-y-2 max-h-60 overflow-y-auto custom-scrollbar"></div>
                
                <div id="hf-file-selection" class="hidden space-y-4 pt-4 border-t border-white/10">
                    <div class="flex justify-between items-center">
                        <h4 class="text-[10px] font-black text-indigo-400 uppercase tracking-widest">Select Files from Repository</h4>
                        <span id="selected-repo-label" class="text-[9px] font-mono text-gray-500"></span>
                    </div>
                    <div id="hf-file-list" class="space-y-1 max-h-48 overflow-y-auto custom-scrollbar p-2 bg-black/40 rounded-lg"></div>
                    
                    <div class="flex justify-end gap-3">
                        <button onclick="document.getElementById('hf-file-selection').classList.add('hidden')" class="px-4 py-2 text-xs font-bold text-gray-500">Back</button>
                        <button id="hf-start-dl-btn" onclick="startHFDownload()" class="bg-green-600 px-8 py-2 rounded-xl text-xs font-black uppercase shadow-lg shadow-green-900/20">Start Download</button>
                    </div>
                </div>
            </div>
        `;
        window.showModal("Hugging Face Hub Browser", modalBody);
    };

    window.searchHF = async () => {
        const q = document.getElementById('hf-search-q').value;
        const res = document.getElementById('hf-results');
        res.innerHTML = '<div class="text-center py-8 animate-pulse text-sky-400 font-bold">Scanning HF Hub...</div>';
        
        try {
            const resp = await fetch(`/admin/hf/search?q=${encodeURIComponent(q)}`);
            const data = await resp.json();
            res.innerHTML = data.map(m => `
                <button onclick="selectHFRepo('${m.id}')" class="w-full text-left p-3 rounded-lg bg-white/5 border border-white/5 hover:border-sky-500/50 hover:bg-white/10 transition-all flex justify-between items-center group">
                    <div>
                        <div class="text-xs font-bold text-white group-hover:text-sky-400">${m.id}</div>
                        <div class="text-[9px] text-gray-500 uppercase font-black">${m.pipeline_tag} • ${m.downloads.toLocaleString()} DLs</div>
                    </div>
                    <span class="text-sky-500 opacity-0 group-hover:opacity-100">→</span>
                </button>
            `).join('');
        } catch(e) { res.innerHTML = `<div class="text-red-400 text-xs">${e.message}</div>`; }
    };

    let currentHFRepo = null;
    window.selectHFRepo = async (repoId) => {
        currentHFRepo = repoId;
        const list = document.getElementById('hf-file-list');
        document.getElementById('hf-file-selection').classList.remove('hidden');
        document.getElementById('selected-repo-label').innerText = repoId;
        list.innerHTML = '<div class="p-4 text-center animate-pulse text-indigo-400">Fetching file manifest...</div>';
        
        try {
            const resp = await fetch(`/admin/hf/files?repo_id=${encodeURIComponent(repoId)}`);
            const data = await resp.json();
            
            list.innerHTML = data.files.map(f => {
                const isSharded = f.includes("-of-");
                return `
                <label class="flex items-center gap-3 p-2 rounded hover:bg-white/5 cursor-pointer">
                    <input type="checkbox" name="hf_files" value="${f}" class="rounded text-sky-600 bg-black border-white/20">
                    <div class="flex flex-col">
                        <span class="text-[11px] font-mono ${f.endsWith('.gguf') ? 'text-amber-400 font-bold' : 'text-gray-300'}">${f}</span>
                        ${isSharded ? '<span class="text-[8px] text-indigo-400 font-black uppercase">Shard Component</span>' : ''}
                    </div>
                </label>`;
            }).join('');
        } catch(e) { list.innerHTML = `<div class="text-red-400 text-xs">${e.message}</div>`; }
    };

    window.startHFDownload = async () => {
        const checked = Array.from(document.querySelectorAll('input[name="hf_files"]:checked')).map(c => c.value);
        if (checked.length === 0) {
            window.showToast("Select at least one file to download.", "error");
            return;
        }
        
        const btn = document.getElementById('hf-start-dl-btn');
        btn.disabled = true;
        btn.innerText = "QUEUEING...";

        try {
            const resp = await fetch("/admin/hf/download", {
                method: 'POST',
                headers: { 'Content-Type': 'application/json', 'X-CSRF-Token': '{{ csrf_token }}' },
                body: JSON.stringify({ repo_id: currentHFRepo, filenames: checked })
            });
            const data = await resp.json();
            if (data.success) {
                document.getElementById('modal-close-btn').click();
                taskPanel.classList.remove('hidden');
                logToConsole(`Initiating background download for ${currentHFRepo}...`, "text-sky-400 font-bold");
            } else {
                window.showErrorModal("Download Task Rejected", data);
                btn.disabled = false;
                btn.innerText = "Start Download";
            }
        } catch(e) { 
            window.showErrorModal("Network Fault", { error: e.message });
            btn.disabled = false; 
            btn.innerText = "Start Download";
        }
    };

    // Connect to SSE for real-time logs
    const sysEvtSource = new EventSource("{{ url_for('sse_events') }}");
    sysEvtSource.onmessage = (e) => {
        const msg = JSON.parse(e.data);
        // We filter for "sys_" request IDs used in our updated instance_manager.py
        if (msg.id && (msg.id.startsWith('sys_') || msg.id.startsWith('sys_hf_'))) {
            taskPanel.classList.remove('hidden');
            
            let color = 'text-indigo-200';
            if (msg.type === 'error') color = 'text-red-400';
            if (msg.type === 'completed') color = 'text-green-400 font-bold';
            if (msg.type === 'received') color = 'text-indigo-400 font-bold';

            if (msg.error) {
                logToConsole(msg.error, color);
            }
            
            if (msg.type === 'completed') {
                setTimeout(() => {
                    logToConsole("Task finished. Reloading environment status...", "text-gray-500 italic");
                    setTimeout(() => window.location.reload(), 2000);
                }, 1000);
            }
        }
    };
</script>
{% endblock %}