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

{% block title %}Admin Dashboard{% endblock %}

{% block header_title %}Dashboard{% endblock %}

{% block content %}
<div class="space-y-8">

    <!-- System Assessment & Report Actions -->
    <div class="flex flex-col lg:flex-row gap-6 mb-8">
        <button onclick="window.startCustomTour(DASHBOARD_TOUR, 'tour_dashboard_v1', true, true)" class="fixed bottom-4 right-4 z-40 bg-indigo-600 p-3 rounded-full shadow-2xl text-white hover:scale-110 transition-transform md:hidden" title="Help Tour">
             <svg class="w-6 h-6" 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>
        </button>
        <!-- Health Scorecard -->
        <div class="lg:w-1/3 card-style border-l-4 border-indigo-500 bg-indigo-500/5 flex flex-col justify-center relative overflow-hidden">
            <div class="absolute -right-4 -top-4 opacity-5 rotate-12">
                <svg class="w-32 h-32" fill="currentColor" viewBox="0 0 24 24"><path d="M12 2L4.5 20.29l.71.71L12 18l6.79 3 .71-.71z"/></svg>
            </div>
            <div class="flex items-center justify-between mb-4">
                <div class="flex items-center gap-2">
                    <h3 class="text-xs font-black uppercase tracking-widest text-indigo-400">System Assessment</h3>
                    <button onclick="showLatestReport()" class="text-indigo-600 hover:text-indigo-400 transition-colors" title="View Latest Assessment">
                        <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="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg>
                    </button>
                    <button onclick="window.startCustomTour(DASHBOARD_TOUR, 'tour_dashboard_v1', true, true)" class="text-gray-600 hover:text-indigo-400" title="Restart Dashboard Tour">
                        <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="M14.752 11.168l-3.197-2.132A1 1 0 0010 9.87v4.263a1 1 0 001.555.832l3.197-2.132a1 1 0 000-1.664z"></path><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg>
                    </button>
                </div>
                <span id="health-status-badge" class="px-2 py-0.5 rounded text-[10px] font-black uppercase">Loading...</span>
            </div>
            <div class="flex items-end gap-4">
                <div class="text-6xl font-black text-white" id="health-score">--</div>
                <div class="flex-grow pb-2">
                    <div class="flex justify-between text-[9px] font-bold text-gray-500 uppercase mb-1">
                        <span>Reliability Index</span>
                        <span id="health-percent">--%</span>
                    </div>
                    <div class="h-2 bg-black/40 rounded-full overflow-hidden">
                        <div id="health-progress" class="h-full bg-indigo-500 transition-all duration-1000" style="width: 0%"></div>
                    </div>
                </div>
            </div>
        </div>

        <!-- AI Management Actions -->
        <div class="lg:w-2/3 card-style border-l-4 border-purple-600 bg-purple-600/5 flex flex-col justify-between 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="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>
                </div>
                <div>
                    <h2 class="text-xl font-black text-white uppercase tracking-tighter">AI Management Insight</h2>
                    <p class="text-xs text-purple-300 font-bold uppercase tracking-widest">Deploy Management Agent to audit cluster state</p>
                </div>
            </div>
            <div id="report-console" class="hidden h-24 bg-black/60 rounded-xl p-3 border border-purple-500/20 mb-4 overflow-y-auto custom-scrollbar font-mono text-[10px] text-purple-300 space-y-1">
                <div class="text-gray-600 italic">Initializing Audit Protocol...</div>
            </div>
            <div class="flex gap-2 w-full mt-auto">
                <button onclick="generateSystemReport()" id="report-btn" class="flex-grow bg-purple-600 hover:bg-purple-500 text-white px-8 py-3 rounded-2xl font-black text-xs uppercase tracking-widest transition-all shadow-lg shadow-purple-900/20 transform active:scale-95">Generate Audit Report</button>
                <button onclick="showReportHistory('system')" class="bg-purple-600/20 hover:bg-purple-600/40 text-purple-300 px-6 py-3 rounded-2xl font-black text-xs uppercase tracking-widest transition-all border border-purple-500/30">History</button>
            </div>
        </div>
    </div>

    <!-- System Status -->
    <div class="card-style">
        <h2 class="card-header text-2xl font-bold mb-4 pb-2">Hardware Vitality</h2>
        <div id="system-info-container" class="grid grid-cols-1 sm:grid-cols-4 gap-6 text-center">
            <!-- CPU -->
            <div class="p-4 rounded-lg">
                <h3 class="text-sm font-medium uppercase text-gray-400">CPU Usage</h3>
                <div class="relative w-24 h-24 mx-auto mt-2">
                    <svg class="w-full h-full" viewBox="0 0 36 36">
                        <path class="text-gray-700/50" d="M18 2.0845 a 15.9155 15.9155 0 0 1 0 31.831 a 15.9155 15.9155 0 0 1 0 -31.831" fill="none" stroke-width="3"></path>
                        <path id="cpu-progress" class="text-[var(--color-primary-500)]" stroke-width="3" fill="none" stroke-dasharray="0, 100" d="M18 2.0845 a 15.9155 15.9155 0 0 1 0 31.831 a 15.9155 15.9155 0 0 1 0 -31.831" stroke-linecap="round"></path>
                    </svg>
                    <div id="cpu-percent" class="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 text-xl font-bold">--%</div>
                </div>
            </div>
            <!-- Memory -->
            <div class="p-4 rounded-lg">
                <h3 class="text-sm font-medium uppercase text-gray-400">Memory Usage</h3>
                <div class="relative w-24 h-24 mx-auto mt-2">
                     <svg class="w-full h-full" viewBox="0 0 36 36">
                        <path class="text-gray-700/50" d="M18 2.0845 a 15.9155 15.9155 0 0 1 0 31.831 a 15.9155 15.9155 0 0 1 0 -31.831" fill="none" stroke-width="3"></path>
                        <path id="mem-progress" class="text-[var(--color-primary-500)]" stroke-width="3" fill="none" stroke-dasharray="0, 100" d="M18 2.0845 a 15.9155 15.9155 0 0 1 0 31.831 a 15.9155 15.9155 0 0 1 0 -31.831" stroke-linecap="round"></path>
                    </svg>
                    <div id="mem-percent" class="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 text-xl font-bold">--%</div>
                </div>
                <div id="mem-details" class="text-xs text-gray-400 mt-2">-- / -- GB</div>
            </div>
            <!-- Disk -->
            <div class="p-4 rounded-lg">
                <h3 class="text-sm font-medium uppercase text-gray-400">Disk Usage (/)</h3>
                 <div class="relative w-24 h-24 mx-auto mt-2">
                     <svg class="w-full h-full" viewBox="0 0 36 36">
                        <path class="text-gray-700/50" d="M18 2.0845 a 15.9155 15.9155 0 0 1 0 31.831 a 15.9155 15.9155 0 0 1 0 -31.831" fill="none" stroke-width="3"></path>
                        <path id="disk-progress" class="text-[var(--color-primary-500)]" stroke-width="3" fill="none" stroke-dasharray="0, 100" d="M18 2.0845 a 15.9155 15.9155 0 0 1 0 31.831 a 15.9155 15.9155 0 0 1 0 -31.831" stroke-linecap="round"></path>
                    </svg>
                    <div id="disk-percent" class="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 text-xl font-bold">--%</div>
                </div>
                <div id="disk-details" class="text-xs text-gray-400 mt-2">-- / -- GB</div>
            </div>
            <!-- GPU VRAM -->
            <div class="p-4 rounded-lg">
                <h3 class="text-sm font-medium uppercase text-gray-400">VRAM Usage</h3>
                 <div class="relative w-24 h-24 mx-auto mt-2">
                     <svg class="w-full h-full" viewBox="0 0 36 36">
                        <path class="text-gray-700/50" d="M18 2.0845 a 15.9155 15.9155 0 0 1 0 31.831 a 15.9155 15.9155 0 0 1 0 -31.831" fill="none" stroke-width="3"></path>
                        <path id="vram-progress" class="text-[var(--color-primary-500)]" stroke-width="3" fill="none" stroke-dasharray="0, 100" d="M18 2.0845 a 15.9155 15.9155 0 0 1 0 31.831 a 15.9155 15.9155 0 0 1 0 -31.831" stroke-linecap="round"></path>
                    </svg>
                    <div id="vram-percent" class="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 text-xl font-bold">--%</div>
                </div>
                <div id="vram-details" class="text-xs text-gray-400 mt-2">-- / -- GB</div>
            </div>
        </div>
    </div>

<!-- System Assessment & Sustainability -->
<div class="grid grid-cols-1 lg:grid-cols-3 gap-6 mb-8">
    <!-- Health Scorecard (Already included above, can be removed or kept as per preference) -->

        <!-- Sustainability & Green Intelligence -->
        <div class="card-style border-l-4 border-emerald-500 bg-emerald-500/5 relative overflow-hidden group">
            <div class="flex justify-between items-center mb-4">
                <h3 class="text-xs font-black uppercase tracking-widest text-emerald-400 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.055 11H5a2 2 0 012 2v1a2 2 0 002 2 2 2 0 012 2v2.945M8 3.935V5.5A2.5 2.5 0 0010.5 8h.5a2 2 0 012 2 2 2 0 002 2 2 2 0 012 2v.65M18 20.41L18 18.34C18 17.51 17.65 16.59 17.02 16.02L15.35 14.35"></path></svg>
                    Green Intelligence
                </h3>
                <button onclick="showSustainabilityGuide()" class="text-emerald-600 hover:text-emerald-400 transition-colors">
                    <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="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg>
                </button>
            </div>

            <div class="grid grid-cols-2 gap-4 mb-4">
                <div>
                    <div class="text-[9px] font-bold text-gray-500 uppercase">Estimated Impact</div>
                    <div id="total-co2" class="text-2xl font-black text-white">0.00g</div>
                    <div class="text-[8px] text-emerald-400/70 font-bold uppercase tracking-tighter">CO₂e Total Footprint</div>
                </div>
                <div class="border-l border-white/5 pl-4">
                    <div class="text-[9px] font-bold text-gray-500 uppercase">Cluster Efficiency</div>
                    <div id="session-gain" class="text-2xl font-black text-indigo-400">+0.00g</div>
                    <div class="text-[8px] text-indigo-400/70 font-bold uppercase tracking-tighter">Avoided via Auto-Routing</div>
                </div>
            </div>

            <div class="flex justify-between items-center pt-2 border-t border-white/5">
                <div class="flex gap-3">
                    <div class="flex flex-col items-center">
                        <span class="text-lg">📱</span>
                        <span id="eq-phones" class="text-[10px] font-bold text-white">0</span>
                    </div>
                    <div class="flex flex-col items-center">
                        <span class="text-lg">🚗</span>
                        <span id="eq-km" class="text-[10px] font-bold text-white">0</span>
                    </div>
                    <div class="flex flex-col items-center">
                        <span class="text-lg">☕</span>
                        <span id="eq-liters" class="text-[10px] font-bold text-white">0</span>
                    </div>
                </div>
                <div class="text-right">
                    <span class="text-[8px] text-gray-500 block uppercase font-bold">Session Load</span>
                    <span id="session-co2" class="text-xs font-black text-gray-300">0.000g</span>
                </div>
            </div>
        </div>

        <!-- AI Management Actions (Ecology) -->
        <div class="card-style border-l-4 border-emerald-600 bg-emerald-600/5 flex flex-col justify-between">
            <div class="flex items-center gap-4 mb-4">
                <div class="p-2 bg-emerald-600 rounded-xl shadow-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="M3.055 11H5a2 2 0 012 2v1a2 2 0 002 2 2 2 0 012 2v2.945M8 3.935V5.5A2.5 2.5 0 0010.5 8h.5a2 2 0 012 2 2 2 0 002 2 2 2 0 012 2v.65M18 20.41L18 18.34C18 17.51 17.65 16.59 17.02 16.02L15.35 14.35"></path></svg>
                </div>
                <div>
                    <h2 class="text-lg font-black text-white uppercase tracking-tighter">Eco Insight</h2>
                    <p class="text-[10px] text-emerald-300 font-bold">Sustainability Agent active</p>
                </div>
            </div>
            {% if settings.admin_agent_name %}
            <div class="flex gap-2 w-full mt-auto">
                <button onclick="generateEcoReport()" id="eco-report-btn" class="flex-grow bg-emerald-600 hover:bg-emerald-500 text-white py-3 rounded-xl font-black text-xs uppercase tracking-widest transition-all transform active:scale-95 shadow-lg">Generate Eco Audit</button>
                <button onclick="showReportHistory('eco')" class="bg-emerald-600/20 hover:bg-emerald-600/40 text-emerald-300 px-4 py-3 rounded-xl font-black text-xs uppercase tracking-widest transition-all border border-emerald-500/30">History</button>
            </div>
            {% else %}
            <a href="{{ url_for('admin_settings') }}" class="w-full text-center bg-white/5 hover:bg-white/10 text-emerald-400 py-3 rounded-xl font-black text-xs uppercase tracking-widest transition-all mt-auto">Configure Agent</a>
            {% endif %}
        </div>

        <!-- NEW: Main Agent & Services Card -->
        <div class="card-style border-l-4 border-indigo-600 bg-indigo-600/5 flex flex-col">
            <div class="flex items-center gap-4 mb-4">
                <div class="p-2 bg-indigo-600 rounded-xl shadow-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="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z"></path></svg>
                </div>
                <div class="min-w-0">
                    <h2 class="text-lg font-black text-white uppercase tracking-tighter truncate">Main Architect</h2>
                    <p id="agent-status-text" class="text-[10px] font-bold uppercase tracking-widest text-indigo-300">Loading State...</p>
                </div>
            </div>
            
            <div class="space-y-3 mb-4">
                <div class="flex justify-between items-center border-b border-white/5 pb-1">
                    <span class="text-[10px] text-gray-500 font-black uppercase">Model</span>
                    <span id="agent-model-val" class="text-xs font-mono text-white">--</span>
                </div>
                <div class="flex justify-between items-center border-b border-white/5 pb-1">
                    <span class="text-[10px] text-gray-500 font-black uppercase">Capabilities</span>
                    <span class="text-xs text-indigo-400 font-bold">LTP + Recursive ROM</span>
                </div>
                <div>
                    <span class="text-[10px] text-gray-500 font-black uppercase block mb-1">External Links</span>
                    <div id="active-services-list" class="flex flex-wrap gap-2 min-h-[20px]">
                        <span class="text-[9px] text-gray-600 italic">No active listeners</span>
                    </div>
                </div>
            </div>

            <a href="{{ url_for('admin_conception') }}{% if settings.admin_agent_name %}?name={{ settings.admin_agent_name }}{% endif %}" class="mt-auto w-full text-center py-2 bg-indigo-600 hover:bg-indigo-500 text-white rounded-lg font-black text-[10px] uppercase tracking-widest transition-all">Configure Architect</a>
        </div>
    </div>
    
    <!-- GPU Cluster View -->
    <div class="card-style">
        <h2 class="card-header text-2xl font-bold mb-4 pb-2">GPU Cluster</h2>
        <div id="gpu-grid" class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
            <div class="p-6 text-center text-gray-500 italic">Scanning GPUs...</div>
        </div>
    </div>

    <!-- Active Models -->
    <div class="card-style">
        <h2 class="card-header text-2xl font-bold mb-4 pb-2">Active Models</h2>
        <div class="overflow-x-auto">
            <table class="min-w-full">
                <thead>
                    <tr>
                        <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-400 uppercase tracking-wider">Model</th>
                        <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-400 uppercase tracking-wider">Server</th>
                        <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-400 uppercase tracking-wider">Placement</th>
                        <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-400 uppercase tracking-wider">Context</th>
                        <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-400 uppercase tracking-wider">Size</th>
                        <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-400 uppercase tracking-wider">Expires In</th>
                        <th scope="col" class="px-6 py-3 text-right text-xs font-medium text-gray-400 uppercase tracking-wider">Actions</th>
                    </tr>
                </thead>
                <tbody id="running-models-tbody" class="divide-y divide-white/10">
                    <!-- Loading state -->
                    <tr>
                        <td colspan="6" class="px-6 py-10 text-center text-gray-400">
                            <svg class="animate-spin h-5 w-5 mx-auto" 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>
                            <span class="mt-2 block">Loading active models...</span>
                        </td>
                    </tr>
                </tbody>
            </table>
        </div>
    </div>

    <!-- Live User Activity -->
    <div id="live-activity-container" class="hidden card-style border-l-4 border-indigo-500 bg-indigo-500/5 transition-all">
        <h2 class="card-header text-2xl font-bold mb-4 pb-2 flex items-center gap-3">
            <span class="relative flex h-3 w-3">
                <span class="animate-ping absolute inline-flex h-full w-full rounded-full bg-indigo-400 opacity-75"></span>
                <span class="relative inline-flex rounded-full h-3 w-3 bg-indigo-500"></span>
            </span>
            Live User Activity
        </h2>
        <div class="overflow-x-auto">
            <table class="min-w-full">
                <thead>
                    <tr>
                        <th class="px-6 py-3 text-left text-xs font-bold text-gray-400 uppercase">User</th>
                        <th class="px-6 py-3 text-left text-xs font-bold text-gray-400 uppercase">Model</th>
                        <th class="px-6 py-3 text-left text-xs font-bold text-gray-400 uppercase">Server</th>
                        <th class="px-6 py-3 text-left text-xs font-bold text-gray-400 uppercase">Status</th>
                        <th class="px-6 py-3 text-right text-xs font-bold text-gray-400 uppercase">Latency/Speed</th>
                    </tr>
                </thead>
                <tbody id="live-sessions-tbody" class="divide-y divide-white/10">
                </tbody>
            </table>
        </div>
    </div>

    <!-- Load Balancer & Queue Status -->
    <div class="grid grid-cols-1 lg:grid-cols-2 gap-8">
        <!-- Load Balancer Status -->
        <div class="card-style">
            <h2 class="card-header text-2xl font-bold mb-4 pb-2">Load Balancer Status</h2>
            <div class="overflow-x-auto">
                <table class="min-w-full">
                    <thead>
                        <tr>
                            <th class="px-6 py-3 text-left text-xs font-medium text-gray-400 uppercase tracking-wider">Server</th>
                            <th class="px-6 py-3 text-left text-xs font-medium text-gray-400 uppercase tracking-wider">Status</th>
                            <th class="px-6 py-3 text-right text-xs font-medium text-gray-400 uppercase tracking-wider">Total Requests</th>
                        </tr>
                    </thead>
                    <tbody id="load-balancer-tbody" class="divide-y divide-white/10">
                        <tr>
                            <td colspan="3" class="px-6 py-10 text-center text-gray-400">Loading server status...</td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </div>

        <!-- Rate Limit Queue Status -->
        <div class="card-style">
            <h2 class="card-header text-2xl font-bold mb-4 pb-2">Rate Limit Queue Status</h2>
            <div class="overflow-y-auto max-h-96">
                <table class="min-w-full">
                    <thead>
                        <tr>
                            <th class="px-6 py-3 text-left text-xs font-medium text-gray-400 uppercase tracking-wider">Key Prefix</th>
                            <th class="px-6 py-3 text-left text-xs font-medium text-gray-400 uppercase tracking-wider">Usage</th>
                            <th class="px-6 py-3 text-right text-xs font-medium text-gray-400 uppercase tracking-wider">Window Resets In</th>
                        </tr>
                    </thead>
                    <tbody id="rate-limit-tbody" class="divide-y divide-white/10">
                        <tr>
                            <td colspan="3" class="px-6 py-10 text-center text-gray-400">Loading rate limit data...</td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </div>
    </div>
</div>

<script>
document.addEventListener('DOMContentLoaded', () => {
    const systemInfoUrl = "{{ url_for('admin_system_info') }}";

    function updateSystemInfo(data) {
        try {
            if (!data || !data.health) return;

            // --- UPDATE AGENT CARD ---
            const agent = data.agent;
            if (agent) {
                const statusEl = document.getElementById('agent-status-text');
                const modelEl = document.getElementById('agent-model-val');
                const servicesEl = document.getElementById('active-services-list');

                if (statusEl) {
                    statusEl.innerText = agent.status;
                    statusEl.className = `text-[10px] font-bold uppercase tracking-widest ${agent.status === 'Online' ? 'text-emerald-400 animate-pulse' : 'text-red-400'}`;
                }
                if (modelEl) modelEl.innerText = agent.model;
                
                if (servicesEl) {
                    if (agent.active_services && agent.active_services.length > 0) {
                        servicesEl.innerHTML = agent.active_services.map(s => `
                            <span class="px-2 py-0.5 rounded bg-indigo-500/20 border border-indigo-500/30 text-[9px] font-black text-indigo-300 uppercase flex items-center gap-1">
                                <span class="w-1 h-1 rounded-full bg-indigo-400 animate-ping"></span>
                                ${s.platform}
                            </span>
                        `).join('');
                    } else {
                        servicesEl.innerHTML = '<span class="text-[9px] text-gray-600 italic">No active listeners</span>';
                    }
                }
            }

            const health = data.health;

            const scoreEl = document.getElementById('health-score');
            if (scoreEl) scoreEl.innerText = health.score || "0";

            const badgeEl = document.getElementById('health-status-badge');
            if (badgeEl && health.status && health.color) {
                badgeEl.innerText = health.status;
                const color = health.color;
                badgeEl.className = `px-2 py-0.5 rounded text-[10px] font-black uppercase bg-${color}-500/20 text-${color}-400`;
            }

            const progressEl = document.getElementById('health-progress');
            if (progressEl && health.score !== undefined && health.color) {
                progressEl.style.width = `${health.score}%`;
                const color = health.color;
                progressEl.className = `h-full bg-${color}-500 transition-all duration-1000`;
            }
            const pctEl = document.getElementById('health-percent');
            if (pctEl) pctEl.innerText = `${health.score}%`;

            const sys = data.system_info;
            if (!sys) return;
        const gpu = data.gpu_stats;
        if (document.getElementById('cpu-percent')) document.getElementById('cpu-percent').textContent = `${sys.cpu.percent.toFixed(1)}%`;
        if (document.getElementById('cpu-progress')) document.getElementById('cpu-progress').style.strokeDasharray = `${sys.cpu.percent.toFixed(1)}, 100`;
        if (document.getElementById('mem-percent')) document.getElementById('mem-percent').textContent = `${sys.memory.percent.toFixed(1)}%`;
        if (document.getElementById('mem-progress')) document.getElementById('mem-progress').style.strokeDasharray = `${sys.memory.percent.toFixed(1)}, 100`;
        document.getElementById('mem-details').textContent = `${sys.memory.used_gb} / ${sys.memory.total_gb} GB`;
        document.getElementById('disk-percent').textContent = `${sys.disk.percent.toFixed(1)}%`;
        document.getElementById('disk-progress').style.strokeDasharray = `${sys.disk.percent.toFixed(1)}, 100`;
        document.getElementById('disk-details').textContent = `${sys.disk.used_gb} / ${sys.disk.total_gb} GB`;
        
            const vramPercent = (gpu.vram_used_gb / gpu.vram_total_gb) * 100;
            const vpEl = document.getElementById('vram-percent');
            if (vpEl) vpEl.textContent = `${vramPercent.toFixed(1)}%`;
            const vprEl = document.getElementById('vram-progress');
            if (vprEl) vprEl.style.strokeDasharray = `${vramPercent.toFixed(1)}, 100`;
            const vdEl = document.getElementById('vram-details');
            if (vdEl) vdEl.textContent = `${gpu.vram_used_gb} / ${gpu.vram_total_gb} GB`;
        } catch (err) {
            console.warn("Dashboard update suppressed null element:", err);
        }
    }

    function updateRunningModels(data) {
        const models = data.running_models;
        const tbody = document.getElementById('running-models-tbody');
        const csrfToken = "{{ csrf_token }}";
        tbody.innerHTML = '';
        if (models.length === 0) {
            tbody.innerHTML = `<tr><td colspan="7" class="px-6 py-10 text-center text-current">No models currently in VRAM.</td></tr>`;
            return;
        }
        models.forEach(model => {
            const sizeGb = (model.size / (1024 ** 3)).toFixed(2);
            const isOllamaModel = model.expires_at && !String(model.expires_at).startsWith('N/A');

            let expiresIn = 'N/A';
            if (isOllamaModel) {
                const expiresDate = new Date(model.expires_at);
                const now = new Date();
                const diffSeconds = Math.round((expiresDate - now) / 1000);
                if (diffSeconds > 0) {
                    const minutes = Math.floor(diffSeconds / 60);
                    const seconds = diffSeconds % 60;
                    expiresIn = `${minutes}m ${seconds}s`;
                }
            } else if (model.expires_at) {
                expiresIn = model.expires_at;
            }

            let placement = '';
            if (model.size > 0) {
                const gpuPercent = Math.round((model.size_vram / model.size) * 100);
                if (gpuPercent >= 100) {
                    placement = '<span class="gpu-badge">100% GPU</span>';
                } else if (gpuPercent <= 0) {
                    placement = '<span class="cpu-badge">100% CPU</span>';
                } else {
                    placement = `<span class="gpu-badge" style="background: linear-gradient(90deg, var(--color-primary-500) ${gpuPercent}%, #6b7280 ${gpuPercent}%) !important; color: white !important;">${gpuPercent}% GPU</span>`;
                }
            } else {
                placement = model.size_vram > 0 ? '<span class="gpu-badge">GPU</span>' : '<span class="cpu-badge">CPU</span>';
            }

            const chatUrl = `{{ url_for('admin_playground') }}?model=${encodeURIComponent(model.name)}`;
            
            const unloadForm = `
                <form action="{{ url_for('admin_unload_model_dashboard') }}" method="post" class="inline">
                    <input type="hidden" name="csrf_token" value="${csrfToken}">
                    <input type="hidden" name="model_name" value="${model.name}">
                    <input type="hidden" name="server_name" value="${model.server_name}">
                    <button type="submit" class="text-red-400 hover:text-red-600">Unload</button>
                </form>
            `;
            const contextDisplay = model.context && model.context !== 'Unknown' 
                ? `<span class="font-mono text-[var(--color-primary-500)] font-bold">${model.context >= 1024 ? (model.context / 1024).toFixed(0) + 'k' : model.context}</span>`
                : `<span class="text-gray-500 italic">--</span>`;

            const row = `
                <tr>
                    <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-current">${model.name}</td>
                    <td class="px-6 py-4 whitespace-nowrap text-sm">${model.server_name}</td>
                    <td class="px-6 py-4 whitespace-nowrap text-sm">${placement}</td>
                    <td class="px-6 py-4 whitespace-nowrap text-sm">${contextDisplay}</td>
                    <td class="px-6 py-4 whitespace-nowrap text-sm">${sizeGb > 0 ? (sizeGb + ' GB') : 'N/A'}</td>
                    <td class="px-6 py-4 whitespace-nowrap text-sm">${expiresIn}</td>
                    <td class="px-6 py-4 whitespace-nowrap text-right text-sm font-medium">
                        <div class="flex justify-end gap-4">
                            <a href="${chatUrl}" class="text-[var(--color-primary-500)] hover:text-[var(--color-primary-700)]">Chat</a>
                            ${ isOllamaModel ? unloadForm : '' }
                        </div>
                    </td>
                </tr>`;
            tbody.innerHTML += row;
        });
    }

    function updateLoadBalancerStatus(data) {
        const servers = data.load_balancer_status;
        const tbody = document.getElementById('load-balancer-tbody');
        tbody.innerHTML = '';
        if (servers.length === 0) {
            tbody.innerHTML = `<tr><td colspan="3" class="px-6 py-10 text-center text-gray-400">No backend servers configured.</td></tr>`;
            return;
        }
        servers.forEach(server => {
            let statusBadge = '';
            if (server.is_penalized) {
                statusBadge = `<span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-black bg-amber-500/20 text-amber-500 border border-amber-500/30 animate-pulse"><span class="w-2 h-2 mr-1.5 bg-amber-500 rounded-full"></span>Quarantined (${server.penalty_remaining}s)</span>`;
            } else if (server.status === 'Online') {
                statusBadge = `<span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-green-200 text-green-800"><span class="w-2 h-2 mr-1.5 bg-green-500 rounded-full"></span>Online</span>`;
            } else {
                statusBadge = `<span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-red-200 text-red-800" title="${server.reason || ''}"><span class="w-2 h-2 mr-1.5 bg-red-500 rounded-full"></span>Offline</span>`;
            }
            const row = `<tr><td class="px-6 py-4 whitespace-nowrap"><div class="text-sm font-medium text-current">${server.name}</div><div class="text-sm text-gray-400 font-mono">${server.url}</div></td><td class="px-6 py-4 whitespace-nowrap text-sm">${statusBadge}</td><td class="px-6 py-4 whitespace-nowrap text-right text-sm font-medium text-current">${server.request_count.toLocaleString()}</td></tr>`;
            tbody.innerHTML += row;
        });
    }

    function updateRateLimitStatus(data) {
        const limits = data.queue_status;
        const tbody = document.getElementById('rate-limit-tbody');
        tbody.innerHTML = '';
        if (limits.length === 0) {
            tbody.innerHTML = `<tr><td colspan="3" class="px-6 py-10 text-center text-gray-400">No active rate limits. Either Redis is disconnected or there is no traffic.</td></tr>`;
            return;
        }
        limits.forEach(limit => {
            const percentage = limit.limit > 0 ? (limit.count / limit.limit) * 100 : 0;
            const row = `<tr><td class="px-6 py-4 whitespace-nowrap text-sm font-mono text-current">${limit.prefix}</td><td class="px-6 py-4 whitespace-nowrap text-sm"><div>${limit.count} / ${limit.limit} reqs</div><div class="w-full bg-gray-700/50 rounded-full h-1.5 mt-1"><div class="bg-[var(--color-primary-600)] h-1.5 rounded-full" style="width: ${percentage.toFixed(2)}%"></div></div></td><td class="px-6 py-4 whitespace-nowrap text-right text-sm">${limit.ttl_seconds}s</td></tr>`;
            tbody.innerHTML += row;
        });
    }

    function updateLiveSessions(data) {
        const sessions = data.live_sessions || [];
        const userSummary = data.active_users_summary || {};
        const sustain = data.sustainability;
        
        const container = document.getElementById('live-activity-container');
        const tbody = document.getElementById('live-sessions-tbody');
        
        // Update Sustainability Gauges
        if (sustain) {
            document.getElementById('session-co2').textContent = `${sustain.session_co2_g.toFixed(3)}g`;
            document.getElementById('total-co2').textContent = `${sustain.total_co2_g.toLocaleString()}g`;
            document.getElementById('session-gain').textContent = `+${sustain.carbon_saved_g}g`;
            
            // Update Equivalents
            document.getElementById('eq-phones').textContent = Math.round(sustain.equivalents.smartphone_charges);
            document.getElementById('eq-km').textContent = sustain.equivalents.kilometers_driven.toFixed(2);
            document.getElementById('eq-liters').textContent = Math.round(sustain.equivalents.liters_boiled);
        }

        if (sessions.length === 0) {
            container.classList.add('hidden');
            return;
        }
        
        container.classList.remove('hidden');
        tbody.innerHTML = '';
        
        // Render detailed session lines
        sessions.forEach(s => {
            const statusColors = {'received': 'text-indigo-400', 'assigned': 'text-amber-400', 'active': 'text-emerald-400 animate-pulse'};
            const colorClass = statusColors[s.type] || 'text-gray-400';
            
            // Look up how many requests THIS user has in total
            const userStats = userSummary[s.sender] || {count: 1, state: 'unknown'};

            const row = `
                <tr class="bg-white/5 border-b border-white/5 last:border-0">
                    <td class="px-6 py-3 whitespace-nowrap">
                        <div class="text-sm font-black text-white">${s.sender}</div>
                        <div class="text-[9px] text-indigo-400 uppercase font-bold">${userStats.count} concurrent reqs</div>
                    </td>
                    <td class="px-6 py-3 whitespace-nowrap text-sm font-mono text-indigo-300">${s.model}</td>
                    <td class="px-6 py-3 whitespace-nowrap text-sm text-gray-400">${s.server || '---'}</td>
                    <td class="px-6 py-3 whitespace-nowrap">
                        <span class="text-xs font-bold uppercase ${colorClass}">${s.type}</span>
                    </td>
                    <td class="px-6 py-3 whitespace-nowrap text-right text-xs font-mono">
                        ${s.ttft ? `<span class="text-amber-400">${s.ttft}ms</span>` : ''} 
                        ${s.tps ? `<span class="text-emerald-400 ml-2">${s.tps} t/s</span>` : ''}
                    </td>
                </tr>
            `;
            tbody.innerHTML += row;
        });
    }

    async function fetchData() {
        try {
            const [systemResp, gpuResp] = await Promise.all([
                fetch(systemInfoUrl),
                fetch("{{ url_for('admin_gpu_stats') }}")
            ]);
            
            if (systemResp.ok) {
                const data = await systemResp.json();
                updateSystemInfo(data);
                updateRunningModels(data);
                updateLoadBalancerStatus(data);
                updateRateLimitStatus(data);
                updateLiveSessions(data);
            }
            
            if (gpuResp.ok) {
                const gpuData = await gpuResp.json();
                updateGpuGrid(gpuData);
            }
        } catch (error) {
            console.error("Error fetching dashboard data:", error);
        }
    }

    let cachedGpuData = [];

    function updateGpuGrid(data) {
        const grid = document.getElementById('gpu-grid');
        if (!data.success) {
            grid.innerHTML = `<div class="p-6 text-center text-red-500">${data.error}</div>`;
            return;
        }
        cachedGpuData = data.gpus;
        grid.innerHTML = '';
        data.gpus.forEach((gpu, idx) => {
            const memPercent = (gpu.vram_used_gb / gpu.vram_total_gb) * 100;
            const utilColor = gpu.utilization > 80 ? 'bg-red-500' : (gpu.utilization > 50 ? 'bg-amber-500' : 'bg-green-500');
            const memColor = memPercent > 80 ? 'bg-red-500' : (memPercent > 50 ? 'bg-amber-500' : 'bg-green-500');

            grid.innerHTML += `
                <div onclick="showGpuDetails(${idx})" class="bg-black/20 p-4 rounded-xl border border-white/10 hover:border-indigo-500/50 hover:bg-white/5 cursor-pointer transition-all transform hover:scale-[1.01] group">
                    <div class="flex justify-between items-start mb-2">
                        <div class="text-indigo-400 font-bold truncate pr-2 group-hover:text-indigo-300" title="${gpu.name}">${gpu.name}</div>
                        <span class="text-[10px] font-mono bg-white/5 px-1.5 py-0.5 rounded text-gray-500">#${gpu.index}</span>
                    </div>
                    <div class="space-y-3">
                        <div>
                            <div class="flex justify-between text-[10px] text-gray-400 uppercase font-bold mb-1">
                                <span>VRAM (${gpu.vram_used_gb} / ${gpu.vram_total_gb} GB)</span>
                                <span>${Math.round(memPercent)}%</span>
                            </div>
                            <div class="h-1.5 bg-gray-700 rounded-full overflow-hidden">
                                <div class="${memColor} h-full" style="width: ${memPercent}%"></div>
                            </div>
                        </div>
                        <div>
                            <div class="flex justify-between text-[10px] text-gray-400 uppercase font-bold mb-1">
                                <span>Utilization</span>
                                <span>${gpu.utilization}%</span>
                            </div>
                            <div class="h-1.5 bg-gray-700 rounded-full overflow-hidden">
                                <div class="${utilColor} h-full" style="width: ${gpu.utilization}%"></div>
                            </div>
                        </div>
                    </div>
                    <div class="mt-4 text-[9px] text-indigo-500/50 uppercase font-black text-center tracking-widest opacity-0 group-hover:opacity-100 transition-opacity">Click for Diagnostics</div>
                </div>
            `;
        });
    }

    window.showGpuDetails = function(cacheIdx) {
        const gpu = cachedGpuData[cacheIdx];
        if (!gpu) return;

        const memPercent = (gpu.vram_used_gb / gpu.vram_total_gb) * 100;
        const utilColor = gpu.utilization > 80 ? 'text-red-500' : (gpu.utilization > 50 ? 'text-amber-500' : 'text-green-500');

        let processList = gpu.processes && gpu.processes.length > 0 ? gpu.processes.map(p => `
            <div class="flex items-center justify-between p-3 rounded-lg ${p.is_system ? 'bg-indigo-500/5 border border-indigo-500/10' : 'bg-white/5'}">
                <div class="flex flex-col">
                    <span class="text-sm font-bold ${p.is_system ? 'text-indigo-300' : 'text-white'}">${p.name}</span>
                    <span class="text-[10px] text-gray-500 font-mono">
                        ${p.pid !== 0 ? `PID ${p.pid} • ` : ''}${p.vram_mb} MB Allocated ${p.type ? `• ${p.type}` : ''}
                    </span>
                </div>
                ${!p.is_system ? `
                <button onclick="killProcess(${p.pid})" class="bg-red-600 hover:bg-red-500 text-white px-3 py-1 rounded text-xs font-bold transition-colors">
                    Terminate
                </button>` : `<span class="text-[10px] text-indigo-500/50 font-black uppercase tracking-tighter">System Protected</span>`}
            </div>
        `).join('') : '<div class="p-6 text-center text-gray-500 italic">No active compute or graphics processes detected.</div>';

        const modalBody = `
            <div class="space-y-6">
                <div class="grid grid-cols-2 gap-4">
                    <div class="bg-black/40 p-4 rounded-xl border border-white/5">
                        <div class="text-[10px] text-gray-500 font-bold uppercase mb-1">VRAM Occupancy</div>
                        <div class="text-2xl font-black text-white">${gpu.vram_used_gb} <span class="text-sm text-gray-500">/ ${gpu.vram_total_gb} GB</span></div>
                        <div class="mt-2 w-full bg-gray-800 h-2 rounded-full overflow-hidden">
                            <div class="bg-indigo-500 h-full" style="width: ${memPercent}%"></div>
                        </div>
                    </div>
                    <div class="bg-black/40 p-4 rounded-xl border border-white/5">
                        <div class="text-[10px] text-gray-500 font-bold uppercase mb-1">Active Utilization</div>
                        <div class="text-2xl font-black ${utilColor}">${gpu.utilization}%</div>
                        <div class="mt-2 w-full bg-gray-800 h-2 rounded-full overflow-hidden">
                            <div class="bg-current h-full" style="width: ${gpu.utilization}%"></div>
                        </div>
                    </div>
                </div>
                
                <div>
                    <h4 class="text-xs font-black text-gray-400 uppercase tracking-widest mb-3 px-1">Resource Allocation Table</h4>
                    <div class="space-y-2 max-h-[40vh] overflow-y-auto pr-2 custom-scrollbar">
                        ${processList}
                    </div>
                </div>
            </div>
        `;

        window.showModal(`Hardware Diagnostics: ${gpu.name} (#${gpu.index})`, modalBody);
    };

    window.killProcess = async function(pid) {
        if (!confirm(`Are you sure you want to terminate process ${pid}? Any unsaved AI generation logic in that app will be lost.`)) return;
        
        try {
            const formData = new FormData();
            formData.append('csrf_token', "{{ csrf_token }}");
            
            const resp = await fetch(`/admin/gpu-stats/kill/${pid}`, {
                method: 'POST',
                body: formData
            });
            const data = await resp.json();
            if (data.success) {
                fetchData(); // Refresh immediately
                window.showToast(`Process ${pid} terminated.`, 'info');
            } else {
                window.showErrorModal("Termination Failed", data);
            }
        } catch(e) {
            window.showErrorModal("Network Fault", { error: e.message });
        }
    };

    // Shared helper for Audit Report rendering
    window.openAuditModal = (data) => {
        const title = data.type === 'eco' ? 'Eco Audit Report' : 'System Audit Report';
        const modalBody = `
            <div class="space-y-4">
                <div class="flex justify-between items-center text-[10px] font-black text-purple-400 uppercase tracking-widest border-b border-white/5 pb-2">
                    <span>${title} #${data.id}</span>
                    <span>Gen: ${data.timestamp}</span>
                </div>
                <div id="audit-report-raw" class="hidden">${data.report}</div>
                <div id="audit-report-md" class="prose prose-invert max-w-none text-sm leading-relaxed custom-scrollbar max-h-[60vh] overflow-y-auto pr-4 bg-black/20 p-4 rounded-xl border border-white/5">
                    ${marked.parse(data.report)}
                </div>
                <div class="flex justify-between items-center pt-4 border-t border-white/10">
                    <div class="flex gap-2">
                        <button onclick="deleteAuditReport(${data.id})" class="px-3 py-1.5 bg-red-900/40 hover:bg-red-600 rounded text-[10px] font-bold uppercase text-red-200 transition-all flex items-center gap-2">
                            Delete
                        </button>
                        <button onclick="copyAuditToClipboard()" class="px-3 py-1.5 bg-white/5 hover:bg-white/10 rounded text-[10px] font-bold uppercase text-indigo-400 flex items-center gap-2">
                            <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="M8 16H6a2 2 0 01-2-2V6a2 2 0 012-2h8a2 2 0 012 2v2m-6 12h8a2 2 0 002-2v-8a2 2 0 00-2-2h-8a2 2 0 00-2 2v8a2 2 0 002 2z"></path></svg>
                            Copy
                        </button>
                    </div>
                    <div class="flex gap-2">
                        <button onclick="downloadPdfReport('${title}', '${data.timestamp}')" class="px-3 py-1.5 bg-indigo-600/20 hover:bg-indigo-600/40 border border-indigo-500/30 rounded text-[10px] font-bold uppercase text-indigo-300 flex items-center gap-2 transition-all">
                            Export PDF
                        </button>
                        <button onclick="downloadAuditReport('${data.timestamp}')" class="px-3 py-1.5 bg-emerald-600/20 hover:bg-emerald-600/40 border border-emerald-500/30 rounded text-[10px] font-bold uppercase text-emerald-300 flex items-center gap-2 transition-all">
                            <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 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4"></path></svg>
                            Save .md
                        </button>
                        <button onclick="document.getElementById('modal-close-btn').click()" class="px-6 py-1.5 bg-purple-600 rounded text-[10px] font-black uppercase text-white hover:bg-purple-500 shadow-lg transition-all">Close</button>
                    </div>
                </div>
            </div>
        `;
        window.showModal("AI System Insight", modalBody);
    };

    window.copyAuditToClipboard = () => {
        const text = document.getElementById('audit-report-raw').innerText;
        navigator.clipboard.writeText(text).then(() => {
            window.showToast("Report copied to clipboard.", 'success');
        });
    };

    window.deleteAuditReport = async (id) => {
        if(!confirm("Are you sure you want to permanently delete this report?")) return;
        try {
            const formData = new FormData();
            formData.append('csrf_token', '{{ csrf_token }}');
            await fetch('/admin/logs/analysis/' + id, {
                method: 'DELETE',
                headers: { 'X-CSRF-Token': '{{ csrf_token }}' }
            });
            document.getElementById('modal-close-btn').click();
            window.showToast("Report deleted.", 'info');
        } catch(e) {
            window.showErrorModal("Delete Failed", { error: e.message });
        }
    };

    window.downloadPdfReport = (title, ts) => {
        const htmlContent = document.getElementById('audit-report-md').innerHTML;
        const form = document.createElement('form');
        form.method = 'POST';
        form.action = '{{ url_for("admin_export_report_pdf_post") }}';
        form.target = '_blank';
        
        const fields = {
            html_content: htmlContent,
            title: title,
            timestamp: ts,
            csrf_token: '{{ csrf_token }}'
        };

        Object.entries(fields).forEach(([k, v]) => {
            const input = document.createElement('input');
            input.type = 'hidden';
            input.name = k;
            input.value = v;
            form.appendChild(input);
        });
        
        document.body.appendChild(form);
        form.submit();
        document.body.removeChild(form);
    };

    window.showReportHistory = async (type) => {
        const title = type === 'eco' ? 'Eco Audit History' : 'System Audit History';
        window.showModal(title, '<div class="p-10 text-center animate-pulse text-indigo-400 font-bold">Loading history...</div>');
        
        try {
            const resp = await fetch(`/admin/system/report/history?type=${type}`);
            const data = await resp.json();
            
            if (data.length === 0) {
                window.showModal(title, '<div class="p-10 text-center text-gray-500 italic">No reports found. Generate one first.</div>');
                return;
            }
            
            let listHtml = '<div class="space-y-2 max-h-[60vh] overflow-y-auto custom-scrollbar pr-2">';
            data.forEach((r) => {
                listHtml += `
                    <button onclick="openSpecificReport(${r.id})" class="w-full text-left p-4 bg-white/5 hover:bg-white/10 border border-white/5 rounded-xl transition-colors flex justify-between items-center group">
                        <div>
                            <div class="text-xs font-bold text-white group-hover:text-indigo-400">Report #${r.id}</div>
                            <div class="text-[10px] text-gray-500 font-mono mt-1">${r.timestamp}</div>
                        </div>
                        <span class="text-indigo-500 opacity-0 group-hover:opacity-100 transition-opacity font-bold text-xs uppercase tracking-widest">View &rarr;</span>
                    </button>
                `;
            });
            listHtml += '</div>';
            window.showModal(title, listHtml);
        } catch(e) {
            window.showErrorModal("History Load Failed", { error: e.message });
        }
    };

    window.openSpecificReport = async (id) => {
        try {
            const resp = await fetch(`/admin/system/report/${id}`);
            const data = await resp.json();
            if (resp.ok) {
                window.openAuditModal(data);
            } else {
                window.showErrorModal("Load Failed", data);
            }
        } catch (e) {
            window.showErrorModal("Network Fault", { error: e.message });
        }
    };

    window.downloadAuditReport = (ts) => {
        const text = document.getElementById('audit-report-raw').innerText;
        const blob = new Blob([text], { type: 'text/markdown' });
        const url = URL.createObjectURL(blob);
        const a = document.createElement('a');
        a.href = url;
        a.download = `Fortress_Audit_${ts.replace(/[: ]/g, '_')}.md`;
        a.click();
        URL.revokeObjectURL(url);
    };

    window.showLatestEcoReport = async () => {
        try {
            const resp = await fetch("{{ url_for('admin_get_latest_eco_report') }}");
            const data = await resp.json();
            if (resp.ok) {
                window.openAuditModal(data);
            } else {
                window.showToast("No previous eco report found.", 'info');
            }
        } catch (e) { window.showErrorModal("Sync Fault", { error: e.message }); }
    };

    window.showLatestReport = async () => {
        try {
            const resp = await fetch("{{ url_for('admin_get_latest_report') }}");
            const data = await resp.json();
            if (resp.ok) {
                window.openAuditModal(data);
            } else {
                window.showToast("No previous report found.", 'info');
            }
        } catch (e) { window.showErrorModal("Sync Fault", { error: e.message }); }
    };

    window.generateEcoReport = async () => {
        const btn = document.getElementById('eco-report-btn');
        if (!btn) return;
        const originalText = btn.innerHTML;
        btn.disabled = true;
        btn.innerHTML = `<svg class="animate-spin -ml-1 mr-3 h-4 w-4 text-white inline-block" 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> AUDITING ECOLOGY...`;

        try {
            const resp = await fetch("{{ url_for('admin_generate_eco_report') }}", { 
                method: 'POST', 
                headers: { 'X-CSRF-Token': "{{ csrf_token }}" } 
            });
            const data = await resp.json(); // Read ONCE here
            
            if (!resp.ok) {
                window.showErrorModal("Eco Audit Failed", data);
                return;
            }

            if (data.report) {
                window.openAuditModal(data);
            }
        } catch (e) {
            window.showErrorModal("Client/Network Fault", { error: e.message });
        } finally {
            btn.disabled = false;
            btn.innerHTML = originalText;
        }
    };

    window.generateSystemReport = async () => {
        const btn = document.getElementById('report-btn');
        const consoleEl = document.getElementById('report-console');
        if (!btn) return;
        
        const originalText = btn.innerHTML;
        btn.disabled = true;
        btn.innerHTML = "AUDITING CLUSTER...";
        consoleEl.classList.remove('hidden');
        consoleEl.innerHTML = '<div class="text-purple-400 font-bold">[Architect] Protocol Handshake...</div>';

        try {
            const response = await fetch("{{ url_for('admin_generate_system_report') }}", { 
                method: 'POST', 
                headers: { 'X-CSRF-Token': "{{ csrf_token }}" } 
            });

            const reader = response.body.getReader();
            const decoder = new TextDecoder();
            let buffer = '';

            while (true) {
                const { done, value } = await reader.read();
                if (done) break;

                buffer += decoder.decode(value, { stream: true });
                const lines = buffer.split('\n');
                buffer = lines.pop();

                for (const line of lines) {
                    if (!line.trim()) continue;
                    const data = JSON.parse(line);

                    if (data.type === 'trace' && data.content) {
                        const entry = document.createElement('div');
                        entry.className = "text-indigo-300 opacity-80 animate-in fade-in slide-in-from-left-1 duration-300";
                        // Clean XML tags from the display string
                        const cleanText = data.content.replace(/<[^>]*>?/gm, '').trim();
                        if (cleanText) {
                            entry.innerText = cleanText;
                            consoleEl.appendChild(entry);
                            consoleEl.scrollTop = consoleEl.scrollHeight;
                        }
                    } else if (data.error) {
                        window.showErrorModal("System Audit Failed", data);
                        consoleEl.classList.add('hidden');
                    } else if (data.report) {
                        // SUCCESS: Report received
                        window.openAuditModal(data);
                        consoleEl.classList.add('hidden');
                        
                        // FIX: Only attempt to update health UI if the data was included in this packet
                        if (data.health) {
                            updateSystemInfo(data);
                        }
                        
                        window.showToast("Audit complete. Report saved to archive.", "success");
                        return; // Exit stream reader
                    } else if (data.done && !data.report) {
                        // We hit done but no report text came?
                        console.warn("Audit stream ended without report content.");
                    }
                }
            }
        } catch (e) {
            window.showErrorModal("Cluster Connectivity Error", { error: e.message });
        } finally {
            btn.disabled = false;
            btn.innerHTML = originalText;
        }
    };

    const DASHBOARD_TOUR = [
        {
            target: null,
            text: "Welcome back! I've detected you're looking at the cluster's heartbeat. Let me show you around."
        },
        {
            target: '#health-score',
            text: "This is your <b>Reliability Index</b>. It calculates server uptime and request success rates to give you a real-time 'Vitality' score."
        },
        {
            target: '#report-btn',
            text: "Need a deep dive? Click here to have the <b>Management Agent</b> generate a structured Markdown audit of your entire cluster."
        },
        {
            target: '#system-info-container',
            text: "Monitor the hardware load of the Gateway server itself, including <b>CPU, RAM, and Disk</b> occupancy."
        },
        {
            target: '.gpu-badge',
            text: "<b>VRAM Tracking</b>: See which models are currently consuming GPU memory across all connected compute nodes."
        }
    ];

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

    window.showSustainabilityGuide = () => {
        const modalBody = `
            <div class="space-y-6">
                <div class="p-4 bg-emerald-950/20 border border-emerald-500/30 rounded-2xl">
                    <h4 class="text-xs font-black text-emerald-400 uppercase tracking-widest mb-2">The Token-Energy Paradox</h4>
                    <p class="text-sm text-gray-300 leading-relaxed">
                        Large Language Models are hungry. A <b>70B parameter model</b> can consume up to 10x more energy per token than a <b>7B model</b>. 
                        The Fortress calculates impact using a <b>Weighted Carbon Model</b> based on your specific cluster activity.
                    </p>
                </div>

                <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                    <div class="bg-black/40 p-4 rounded-xl border border-white/5">
                        <span class="text-[10px] font-black text-gray-500 uppercase block mb-1">Impact Analogy</span>
                        <p class="text-xs text-gray-300">
                            Current lifetime consumption is roughly equivalent to <b>boiling ${document.getElementById('eq-liters').innerText} liters of water</b> 
                            or charging a smartphone <b>${document.getElementById('eq-phones').innerText} times</b>.
                        </p>
                    </div>
                    <div class="bg-indigo-950/20 p-4 rounded-xl border border-indigo-500/30">
                        <span class="text-[10px] font-black text-indigo-400 uppercase block mb-1">Smart Routing Gain</span>
                        <p class="text-xs text-indigo-200">
                            By using <b>Auto-Routing</b>, you've avoided <b>${document.getElementById('session-gain').innerText}</b> of CO₂e 
                            compared to using your cluster's largest model for every query.
                        </p>
                    </div>
                </div>

                <div class="bg-black/40 p-4 rounded-xl border border-white/5">
                    <h4 class="text-[10px] font-black text-gray-400 uppercase tracking-widest mb-2">Technical Breakdown</h4>
                    <ul class="text-[11px] text-gray-500 space-y-2 list-disc list-inside">
                        <li><b>Small Models (<8B):</b> ~0.5g / 1k Tokens</li>
                        <li><b>Medium Models (8B-30B):</b> ~1.2g / 1k Tokens</li>
                        <li><b>Expert Models (>30B):</b> ~3.0g / 1k Tokens</li>
                    </ul>
                </div>
            </div>
        `;
        window.showModal("Sustainability Audit Guide", modalBody);
    };

    fetchData();
    setInterval(fetchData, 5000);
});
</script>
{% endblock %}