{% extends "base.html" %}
{% block content %}
<style>
    @keyframes pulse-soft {

        0%,
        100% {
            opacity: 1;
        }

        50% {
            opacity: 0.7;
        }
    }

    .animate-pulse-soft {
        animation: pulse-soft 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
    }

    .dna-donut {
        border-radius: 50%;
        background: conic-gradient(#38bdf8 0% var(--core-pct), #818cf8 var(--core-pct) var(--extra-pct), #34d399 var(--extra-pct) 100%);
    }

    .stats-card-glow {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: radial-gradient(circle at 100% 0%, rgba(var(--glow-color), 0.1) 0%, transparent 50%);
        pointer-events: none;
    }
</style>

<div class="container mx-auto p-4 md:p-8 lg:p-12 relative max-w-7xl">
    <div class="space-y-8 pb-12">
        <!-- Header Area -->
        <div class="flex flex-col md:flex-row md:items-end justify-between gap-6">
            <div>
                <h1 class="text-3xl font-bold text-white tracking-tight flex items-center gap-3">
                    Dashboard
                    <span
                        class="px-2 py-0.5 rounded bg-sky-500/10 text-sky-400 text-[10px] font-bold uppercase tracking-widest border border-sky-500/20">{{
                        mirror_total_size }}</span>

                    <button id="sync-icon-btn" onclick="triggerSync()"
                        class="ml-2 p-2 rounded-xl bg-white/5 border border-white/5 hover:bg-white/10 hover:border-white/10 transition-all group relative overflow-hidden"
                        title="Manual Sync">
                        <svg id="sync-icon" class="w-5 h-5 text-slate-400 group-hover:text-sky-400 transition-colors"
                            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" />
                        </svg>
                        <div class="stats-card-glow opacity-0 group-hover:opacity-100"></div>
                    </button>

                    <button id="benchmark-header-btn" onclick="runBenchmark()"
                        class="p-2 rounded-xl bg-white/5 border border-white/5 hover:bg-white/10 hover:border-white/10 transition-all group relative overflow-hidden"
                        title="Mirror Optimizer">
                        <svg id="benchmark-icon"
                            class="w-5 h-5 text-slate-400 group-hover:text-amber-400 transition-colors" 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" />
                        </svg>
                        <div class="stats-card-glow opacity-0 group-hover:opacity-100"
                            style="--glow-color: 245, 158, 11"></div>
                    </button>

                    <button id="update-header-btn" onclick="startArchMirrorUpdate()"
                        class="p-2 rounded-xl bg-white/5 border border-white/5 hover:bg-white/10 hover:border-white/10 transition-all group relative overflow-hidden"
                        title="Update ArchMirror from Gitssy">
                        <svg id="update-icon"
                            class="w-5 h-5 text-slate-400 group-hover:text-emerald-400 transition-colors" fill="none"
                            stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                d="M7 16a4 4 0 01-.88-7.903A5 5 0 1115.9 6L16 6a5 5 0 011 9.9M9 19l3 3m0 0l3-3m-3 3V10" />
                        </svg>
                        <span
                            class="update-available-badge hidden absolute -top-0.5 -right-0.5 w-2.5 h-2.5 rounded-full bg-emerald-500 shadow-[0_0_8px_rgba(52,211,153,0.8)]"></span>
                        <div class="stats-card-glow opacity-0 group-hover:opacity-100"
                            style="--glow-color: 52, 211, 153"></div>
                    </button>
                </h1>
                <p class="text-slate-500 text-sm mt-1 font-medium">Real-time mirror telemetry & sync engine</p>
            </div>
        </div>

        <!-- Sync Alert (Conditional) -->
        <div id="sync-progress-container" class="hidden animate-in fade-in zoom-in-95 duration-500">
            <div class="glass-panel p-6 rounded-3xl border-sky-500/30 overflow-hidden relative">
                <div class="absolute top-0 left-0 w-full h-1 bg-slate-800/50">
                    <div id="sync-progress-bar"
                        class="h-full bg-gradient-to-r from-sky-400 via-indigo-400 to-sky-400 transition-all duration-1000 ease-out"
                        style="width: 0%"></div>
                </div>
                <div class="flex flex-col md:flex-row md:items-center justify-between gap-4 mt-2">
                    <div class="flex items-center gap-4">
                        <div class="w-10 h-10 rounded-xl bg-sky-500/10 flex items-center justify-center">
                            <svg class="w-6 h-6 text-sky-400 animate-spin" 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>
                        </div>
                        <div>
                            <div class="text-white font-bold text-sm">Synchronizing Metadata...</div>
                            <div class="text-slate-500 text-[10px] font-bold uppercase tracking-widest mt-0.5"
                                id="sync-speed-val">FETCHING DATA</div>
                        </div>
                    </div>
                    <div class="flex items-center gap-4">
                        <div class="text-right">
                            <div class="text-white text-xl font-mono font-bold" id="sync-percent-val">0%</div>
                            <div class="text-[9px] text-slate-500 font-bold uppercase tracking-widest">Job Progress
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- Core Telemetry Grid -->
        <div class="grid grid-cols-2 lg:grid-cols-4 gap-6">
            <!-- Status Card -->
            <div class="glass-panel rounded-3xl p-6 relative overflow-hidden group hover:border-emerald-500/30 transition-all duration-500"
                style="--glow-color: 52, 211, 153">
                <div class="stats-card-glow"></div>
                <div class="relative z-10">
                    <div class="text-[10px] text-slate-500 font-bold uppercase tracking-[0.2em] mb-4">Status</div>
                    <div class="text-2xl font-bold text-white tracking-tight truncate" id="ui-status">{{ settings.status
                        }}
                    </div>
                    <div class="flex items-center gap-2 mt-4 text-[10px] font-mono text-slate-500 font-bold">
                        <span class="w-1.5 h-1.5 rounded-full bg-emerald-500 animate-pulse"></span>
                        {{ settings.last_run or 'Never' }}
                    </div>
                </div>
            </div>

            <!-- CPU Card -->
            <div class="glass-panel rounded-3xl p-6 relative overflow-hidden group hover:border-amber-500/30 transition-all duration-500"
                style="--glow-color: 251, 191, 36">
                <div class="stats-card-glow"></div>
                <div class="relative z-10">
                    <div class="text-[10px] text-slate-500 font-bold uppercase tracking-[0.2em] mb-4">CPU</div>
                    <div class="text-2xl font-bold text-white font-mono tracking-tight" id="cpu-val">0%</div>
                    <div class="w-full bg-slate-800/50 h-1 rounded-full mt-4 overflow-hidden">
                        <div id="cpu-bar" class="bg-amber-400 h-full transition-all duration-1000 rounded-full"
                            style="width: 0%"></div>
                    </div>
                </div>
            </div>

            <!-- RAM Card -->
            <div class="glass-panel rounded-3xl p-6 relative overflow-hidden group hover:border-violet-500/30 transition-all duration-500"
                style="--glow-color: 167, 139, 250">
                <div class="stats-card-glow"></div>
                <div class="relative z-10">
                    <div class="text-[10px] text-slate-500 font-bold uppercase tracking-[0.2em] mb-4">RAM</div>
                    <div class="text-2xl font-bold text-white font-mono tracking-tight truncate" id="ram-val">—</div>
                    <div class="w-full bg-slate-800/50 h-1 rounded-full mt-4 overflow-hidden">
                        <div id="ram-bar" class="bg-violet-400 h-full transition-all duration-1000 rounded-full"
                            style="width: 0%"></div>
                    </div>
                </div>
            </div>

            <!-- Uptime Card -->
            <div class="glass-panel rounded-3xl p-6 relative overflow-hidden group hover:border-sky-500/30 transition-all duration-500"
                style="--glow-color: 56, 189, 248">
                <div class="stats-card-glow"></div>
                <div class="relative z-10">
                    <div class="text-[10px] text-slate-500 font-bold uppercase tracking-[0.2em] mb-4">Node Uptime</div>
                    <div class="text-2xl font-bold text-white font-mono tracking-tight" id="sys-uptime">—</div>
                    <div class="flex items-center gap-2 mt-4 text-[10px] font-mono text-slate-500 font-bold">
                        <span class="w-1.5 h-1.5 rounded-full bg-sky-500 animate-pulse"></span>
                        SYSTEM ACTIVE
                    </div>
                </div>
            </div>
        </div>


        <!-- Main Intelligence Grid -->
        <div class="grid grid-cols-1 lg:grid-cols-3 gap-8">
            <!-- Intelligence Column -->
            <div class="lg:col-span-2 space-y-8">
                <!-- Repository DNA -->
                <div class="glass-panel p-8 rounded-3xl relative overflow-hidden group">
                    <div class="flex items-center justify-between mb-8">
                        <div class="flex items-center gap-4">
                            <div class="w-10 h-10 rounded-xl bg-sky-500/10 flex items-center justify-center">
                                <svg class="w-5 h-5 text-sky-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                        d="M19.428 15.428a2 2 0 00-1.022-.547l-2.387-.477a6 6 0 00-3.86.517l-.318.158a6 6 0 01-3.86.517L6.05 15.21a2 2 0 00-1.806.547M8 4h8l-1 1v5.172a2 2 0 00.586 1.414l5 5c1.26 1.26.367 3.414-1.415 3.414H4.828c-1.782 0-2.674-2.154-1.414-3.414l5-5A2 2 0 009 10.172V5L8 4z" />
                                </svg>
                            </div>
                            <div>
                                <h3 class="text-sm font-bold text-white tracking-wide uppercase">Repositories</h3>
                            </div>
                        </div>
                    </div>

                    <div class="flex flex-col md:flex-row items-center gap-10">
                        <!-- Donut Visualization -->
                        <div class="relative flex-shrink-0">
                            <div class="dna-donut w-36 h-36 p-4 animate-in fade-in duration-1000" id="dna-donut"
                                style="--core-pct: 0%; --extra-pct: 0%;">
                                <div class="w-full h-full rounded-full bg-[#020617] flex items-center justify-center">
                                    <div class="text-center">
                                        <div class="text-xl font-bold text-white font-mono" id="dna-total-pkgs">—</div>
                                        <div class="text-[8px] text-slate-600 font-bold uppercase tracking-widest">
                                            Packages
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <!-- Repository Metadata -->
                        <div class="grid grid-cols-1 sm:grid-cols-3 gap-4 flex-1 w-full" id="dna-container">
                            <div
                                class="p-4 rounded-2xl bg-white/[0.02] border border-white/5 group hover:bg-white/[0.04] transition-all">
                                <div class="flex items-center gap-2 mb-2">
                                    <div
                                        class="w-1.5 h-1.5 rounded-full bg-sky-400 shadow-[0_0_8px_rgba(56,189,248,0.5)]">
                                    </div>
                                    <span
                                        class="text-[9px] text-slate-500 font-bold uppercase tracking-widest">Core</span>
                                </div>
                                <div class="text-lg font-bold text-white font-mono" id="dna-core-pkgs">—</div>
                                <div class="text-[9px] text-slate-600 font-mono mt-0.5" id="dna-core-size">—</div>
                            </div>
                            <div
                                class="p-4 rounded-2xl bg-white/[0.02] border border-white/5 group hover:bg-white/[0.04] transition-all">
                                <div class="flex items-center gap-2 mb-2">
                                    <div
                                        class="w-1.5 h-1.5 rounded-full bg-indigo-400 shadow-[0_0_8px_rgba(129,140,248,0.5)]">
                                    </div>
                                    <span
                                        class="text-[9px] text-slate-500 font-bold uppercase tracking-widest">Extra</span>
                                </div>
                                <div class="text-lg font-bold text-white font-mono" id="dna-extra-pkgs">—</div>
                                <div class="text-[9px] text-slate-600 font-mono mt-0.5" id="dna-extra-size">—</div>
                            </div>
                            <div
                                class="p-4 rounded-2xl bg-white/[0.02] border border-white/5 group hover:bg-white/[0.04] transition-all">
                                <div class="flex items-center gap-2 mb-2">
                                    <div
                                        class="w-1.5 h-1.5 rounded-full bg-emerald-400 shadow-[0_0_8px_rgba(52,211,153,0.5)]">
                                    </div>
                                    <span
                                        class="text-[9px] text-slate-500 font-bold uppercase tracking-widest">Multilib</span>
                                </div>
                                <div class="text-lg font-bold text-white font-mono" id="dna-multilib-pkgs">—</div>
                                <div class="text-[9px] text-slate-600 font-mono mt-0.5" id="dna-multilib-size">—</div>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Mirror Consumption (30 Days) -->
                <div class="glass-panel p-8 rounded-3xl relative overflow-hidden group hover:border-sky-500/30 transition-all cursor-pointer"
                    onclick="openTrafficModal()">
                    <div class="flex items-center justify-between mb-8">
                        <div class="flex items-center gap-4">
                            <div class="w-10 h-10 rounded-xl bg-sky-500/10 flex items-center justify-center">
                                <svg class="w-5 h-5 text-sky-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                        d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z" />
                                </svg>
                            </div>
                            <div>
                                <h3 class="text-sm font-bold text-white tracking-wide uppercase">Mirror Consumption</h3>
                                <p class="text-[9px] text-slate-500 font-bold uppercase tracking-widest mt-1">Last 30
                                    Days</p>
                            </div>
                        </div>
                        <div class="flex items-center gap-2">
                            <span class="text-[10px] text-sky-400 font-mono font-bold uppercase">View Details</span>
                            <svg class="w-3 h-3 text-sky-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                    d="M9 5l7 7-7 7" />
                            </svg>
                        </div>
                    </div>

                    <div class="grid grid-cols-2 gap-6">
                        <div class="p-6 rounded-2xl bg-white/[0.02] border border-white/5">
                            <div class="text-[9px] text-slate-500 font-bold uppercase tracking-widest mb-2">Packages
                                Transferred</div>
                            <div class="text-3xl font-bold text-white font-mono" id="stats-30d-pkgs">—</div>
                        </div>
                        <div class="p-6 rounded-2xl bg-white/[0.02] border border-white/5">
                            <div class="text-[9px] text-slate-500 font-bold uppercase tracking-widest mb-2">Total Volume
                                Ingested</div>
                            <div class="text-3xl font-bold text-sky-400 font-mono" id="stats-30d-size">—</div>
                        </div>
                    </div>
                </div>



            </div>


            <!-- Disk Topology -->
            <div class="glass-panel p-8 rounded-3xl relative overflow-hidden">
                <h3 class="text-[10px] text-slate-500 font-bold uppercase tracking-[0.2em] mb-6">Storage Utility
                </h3>

                <div class="space-y-4">
                    <div class="flex justify-between text-xs mb-2">
                        <span class="text-slate-400 font-medium">/srv/archlinux</span>
                        <span class="text-white font-mono text-[11px]" id="disk-val">—</span>
                    </div>
                    <div class="w-full bg-slate-900 h-2 rounded-full overflow-hidden border border-white/5">
                        <div id="disk-bar"
                            class="h-full bg-gradient-to-r from-sky-500 to-indigo-500 transition-all duration-1000"
                            style="width: 0%"></div>
                    </div>
                    <div class="flex justify-between text-[9px] text-slate-600 font-mono pt-2">
                        <span>VOLUME POOL</span>
                        <span id="disk-total">—</span>
                    </div>
                </div>
            </div>

        </div>

        <!-- Package Commits -->
        <div class="glass-panel p-8 rounded-3xl relative overflow-hidden">
            <div class="flex flex-col lg:flex-row lg:items-center justify-between gap-6 mb-8">
                <div class="flex items-center gap-4">
                    <div class="w-10 h-10 rounded-xl bg-emerald-500/10 flex items-center justify-center">
                        <svg class="w-5 h-5 text-emerald-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" />
                        </svg>
                    </div>
                    <div>
                        <h3 class="text-sm font-bold text-white tracking-wide uppercase">Package Commits</h3>
                        <p class="text-[9px] text-slate-500 font-bold uppercase tracking-widest mt-1">
                            New, updated, and removed packages after each sync
                        </p>
                    </div>
                </div>
                <div class="flex flex-wrap items-center gap-2" id="package-commit-filters">
                    <button type="button" data-filter="all"
                        class="pkg-filter-btn px-3 py-1.5 rounded-full text-[9px] font-bold uppercase tracking-widest bg-white/10 text-white border border-white/10">All</button>
                    <button type="button" data-filter="added"
                        class="pkg-filter-btn px-3 py-1.5 rounded-full text-[9px] font-bold uppercase tracking-widest bg-white/5 text-emerald-400 border border-emerald-500/20">New</button>
                    <button type="button" data-filter="updated"
                        class="pkg-filter-btn px-3 py-1.5 rounded-full text-[9px] font-bold uppercase tracking-widest bg-white/5 text-sky-400 border border-sky-500/20">Updated</button>
                    <button type="button" data-filter="removed"
                        class="pkg-filter-btn px-3 py-1.5 rounded-full text-[9px] font-bold uppercase tracking-widest bg-white/5 text-rose-400 border border-rose-500/20">Removed</button>
                </div>
            </div>

            <div class="grid grid-cols-3 gap-4 mb-6">
                <div class="p-4 rounded-2xl bg-emerald-500/5 border border-emerald-500/10 text-center">
                    <div class="text-[9px] text-emerald-500/80 font-bold uppercase tracking-widest mb-1">New</div>
                    <div class="text-xl font-bold text-emerald-400 font-mono" id="pkg-commit-added">0</div>
                </div>
                <div class="p-4 rounded-2xl bg-sky-500/5 border border-sky-500/10 text-center">
                    <div class="text-[9px] text-sky-500/80 font-bold uppercase tracking-widest mb-1">Updated</div>
                    <div class="text-xl font-bold text-sky-400 font-mono" id="pkg-commit-updated">0</div>
                </div>
                <div class="p-4 rounded-2xl bg-rose-500/5 border border-rose-500/10 text-center">
                    <div class="text-[9px] text-rose-500/80 font-bold uppercase tracking-widest mb-1">Removed</div>
                    <div class="text-xl font-bold text-rose-400 font-mono" id="pkg-commit-removed">0</div>
                </div>
            </div>

            <div class="max-h-[420px] overflow-y-auto scrollbar-hide rounded-2xl border border-white/5">
                <table class="w-full text-left">
                    <thead
                        class="sticky top-0 bg-[#0f172a] text-slate-600 text-[9px] font-bold uppercase tracking-wider border-b border-white/5 z-10">
                        <tr>
                            <th class="py-3 px-4">Change</th>
                            <th class="py-3 px-4">Package</th>
                            <th class="py-3 px-4">Repo</th>
                            <th class="py-3 px-4">Version</th>
                            <th class="py-3 px-4 text-right">Synced At</th>
                        </tr>
                    </thead>
                    <tbody id="package-commits-body" class="text-slate-300 divide-y divide-white/5"></tbody>
                </table>
                <div id="package-commits-empty" class="hidden py-16 text-center">
                    <div class="text-slate-600 text-[11px] font-mono uppercase tracking-[0.2em]">
                        No package commits yet — run a sync to populate
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>


<!-- Ghost Sync Modal -->
<div id="ghost-modal" class="fixed inset-0 z-[100] hidden items-center justify-center bg-slate-950/80 backdrop-blur-sm">
    <div class="glass-panel p-8 rounded-3xl max-w-md w-full mx-6 border-amber-500/30 shadow-2xl shadow-amber-900/20">
        <div class="flex items-center gap-4 mb-6">
            <div class="w-12 h-12 rounded-2xl bg-amber-500/20 flex items-center justify-center text-amber-500">
                <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="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z" />
                </svg>
            </div>
            <div>
                <h3 class="text-xl font-bold text-white">Ghost Sync Detected</h3>
                <p class="text-amber-500/80 text-xs font-mono">No rsync activity for 120s</p>
            </div>
        </div>
        <p class="text-slate-400 text-sm mb-8 leading-relaxed">
            The sync process appears stalled. This might be caused by a bad mirror connection. Would you like to
            remove
            the lock and reset?
        </p>
        <div class="flex gap-3">
            <button onclick="document.getElementById('ghost-modal').classList.add('hidden')"
                class="flex-1 px-4 py-3 rounded-xl bg-slate-800 text-slate-300 text-sm font-medium hover:bg-slate-700 transition-colors">
                Ignore
            </button>
            <button id="ghost-btn" onclick="removeGhostLock()"
                class="flex-1 px-4 py-3 rounded-xl bg-amber-600 text-white text-sm font-bold hover:bg-amber-500 transition-all active:scale-95">
                Remove Lock
            </button>
        </div>
    </div>
</div>

<!-- Mirror Finder Benchmark Modal -->
<div id="benchmark-modal"
    class="fixed inset-0 z-[100] hidden items-center justify-center bg-slate-950/90 backdrop-blur-md">
    <div
        class="glass-panel p-10 rounded-3xl max-w-sm w-full mx-6 border-amber-500/20 shadow-2xl shadow-amber-900/10 text-center">
        <div class="relative mb-8">
            <div class="w-16 h-16 border-2 border-amber-500/20 border-t-amber-500 rounded-full animate-spin mx-auto">
            </div>
            <div class="absolute inset-0 flex items-center justify-center">
                <svg class="w-6 h-6 text-amber-500/40" 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" />
                </svg>
            </div>
        </div>

        <h3 class="text-lg font-bold text-white mb-2 uppercase tracking-widest">Mirror Optimizer</h3>
        <p id="benchmark-step" class="text-amber-500 text-[10px] font-bold uppercase tracking-[0.2em]">Initializing
            Engine</p>

        <div class="mt-8 p-4 bg-white/[0.02] border border-white/5 rounded-2xl">
            <p id="benchmark-host"
                class="text-slate-400 text-[9px] font-mono truncate uppercase tracking-widest mb-4 h-3">Checking
                Candidates...</p>
            <div class="w-full bg-slate-900 h-1.5 rounded-full overflow-hidden">
                <div id="benchmark-progress-bar"
                    class="bg-gradient-to-r from-amber-600 to-amber-400 h-full transition-all duration-700 ease-in-out"
                    style="width: 0%"></div>
            </div>
            <div class="flex justify-between mt-3">
                <span class="text-[8px] text-slate-600 font-bold uppercase tracking-widest">Throughput
                    Progress</span>
                <span id="benchmark-progress-val" class="text-[8px] text-amber-500 font-mono font-bold">0%</span>
            </div>
        </div>

        <p class="text-slate-500 text-[9px] mt-8 uppercase tracking-[0.2em] leading-relaxed">
            Evaluating network topology and <br /> protocol stability
        </p>
    </div>
</div>

<!-- Mirror Discovery Results Modal -->
<div id="benchmark-results-modal"
    class="fixed inset-0 z-[110] hidden items-center justify-center bg-slate-950/90 backdrop-blur-md">
    <div
        class="glass-panel p-10 rounded-[2.5rem] max-w-4xl w-full mx-6 border-white/10 shadow-2xl relative overflow-hidden flex flex-col max-h-[90vh]">
        <button onclick="closeBenchmarkResults()"
            class="absolute top-8 right-8 text-slate-500 hover:text-white transition-colors">
            <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="M6 18L18 6M6 6l12 12" />
            </svg>
        </button>

        <div class="flex items-center gap-5 mb-10">
            <div class="w-14 h-14 rounded-2xl bg-amber-500/10 flex items-center justify-center text-amber-500">
                <svg class="w-7 h-7" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                        d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2" />
                </svg>
            </div>
            <div>
                <h3 class="text-2xl font-bold text-white tracking-tight">Optimization Results</h3>
                <p class="text-slate-500 text-[10px] font-bold uppercase tracking-widest mt-1">Optimal Upstream
                    Candidates</p>
            </div>
        </div>

        <div class="overflow-y-auto scrollbar-hide pr-2">
            <table class="w-full text-left">
                <thead
                    class="sticky top-0 bg-[#0f172a] text-slate-600 text-[10px] font-bold uppercase tracking-wider border-b border-white/5 z-10">
                    <tr>
                        <th class="py-4 px-4">Mirror Host</th>
                        <th class="py-4 px-4">Latency</th>
                        <th class="py-4 px-4">Bandwidth</th>
                        <th class="py-4 px-4 text-right">Action</th>
                    </tr>
                </thead>
                <tbody id="benchmark-body" class="text-slate-300 divide-y divide-white/5">
                    <!-- Injected -->
                </tbody>
            </table>
        </div>

        <div class="mt-8 pt-6 border-t border-white/5 flex items-center justify-between">
            <p class="text-[10px] text-slate-500 font-bold uppercase tracking-widest">
                Results are sorted by reliability and throughput
            </p>
            <button onclick="closeBenchmarkResults()"
                class="px-8 py-3 rounded-xl bg-white/5 hover:bg-white/10 text-white text-xs font-bold transition-all">
                Dismiss
            </button>
        </div>
    </div>
</div>

<!-- Mirror Switch Confirmation Modal -->
<div id="mirror-switch-modal"
    class="fixed inset-0 z-[250] hidden items-center justify-center bg-slate-950/90 backdrop-blur-md">
    <div
        class="modal-content glass-panel p-10 rounded-[2.5rem] max-w-md w-full mx-6 border-sky-500/20 shadow-2xl shadow-sky-900/10 text-center scale-95 opacity-0 transition-all duration-300">
        <div
            class="w-20 h-20 rounded-3xl bg-sky-500/10 flex items-center justify-center mx-auto mb-8 shadow-xl shadow-sky-500/5">
            <svg class="w-10 h-10 text-sky-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                    d="M8 7h12m0 0l-4-4m4 4l-4 4m0 6H4m0 0l4 4m-4-4l4-4" />
            </svg>
        </div>

        <h3 class="text-2xl font-bold text-white mb-2 tracking-tight">Switch Upstream?</h3>
        <p class="text-slate-400 text-sm leading-relaxed mb-8">
            This will update your primary source mirror. Subsequent sync operations will ingest data from:
            <span id="pending-mirror-url"
                class="block mt-4 p-4 bg-black/40 rounded-2xl font-mono text-[10px] text-sky-400 border border-white/5 break-all"></span>
        </p>

        <div class="flex items-center gap-3">
            <button onclick="closeMirrorSwitchModal()"
                class="flex-1 px-6 py-4 rounded-2xl bg-white/5 hover:bg-white/10 text-slate-300 font-bold transition-all border border-white/5 uppercase tracking-widest text-[10px]">
                Cancel
            </button>
            <button id="mirror-confirm-btn" onclick="confirmMirrorSwitch()"
                class="flex-1 px-6 py-4 rounded-2xl bg-sky-500 hover:bg-sky-400 text-white font-bold transition-all shadow-lg shadow-sky-500/20 active:scale-95 uppercase tracking-widest text-[10px]">
                Confirm Switch
            </button>
        </div>
    </div>
</div>

<!-- Traffic Details Modal -->
<div id="traffic-modal"
    class="fixed inset-0 z-[200] hidden items-center justify-center bg-slate-950/90 backdrop-blur-md">
    <div class="glass-panel p-10 rounded-3xl max-w-5xl w-full mx-6 border-white/10 shadow-2xl relative overflow-hidden">
        <button onclick="closeTrafficModal()"
            class="absolute top-6 right-6 text-slate-500 hover:text-white transition-colors">
            <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="M6 18L18 6M6 6l12 12" />
            </svg>
        </button>

        <div class="flex items-center gap-4 mb-10">
            <div class="w-12 h-12 rounded-2xl bg-sky-500/10 flex items-center justify-center text-sky-400">
                <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="M12 4.354a4 4 0 110 5.292M15 21H3v-1a6 6 0 0112 0v1zm0 0h6v-1a6 6 0 00-9-5.197M13 7a4 4 0 11-8 0 4 4 0 018 0z" />
                </svg>
            </div>
            <div>
                <h3 class="text-2xl font-bold text-white">Mirror Consumption</h3>
                <p class="text-slate-500 text-[10px] font-bold uppercase tracking-widest mt-1">Last 30 days · sorted by
                    highest data usage first</p>
            </div>
        </div>

        <div class="max-h-[500px] overflow-y-auto scrollbar-hide">
            <table class="w-full text-left">
                <thead
                    class="sticky top-0 bg-[#0f172a] text-slate-600 text-[9px] font-bold uppercase tracking-wider border-b border-white/5 z-10">
                    <tr>
                        <th class="py-4 px-6">Source IP</th>
                        <th class="py-4 px-6">Location</th>
                        <th class="py-4 px-6">Total Hits</th>
                        <th class="py-4 px-6">Data Usage</th>
                        <th class="py-4 px-6 text-right">Last Seen</th>
                    </tr>
                </thead>
                <tbody id="traffic-modal-body" class="text-slate-300 divide-y divide-white/5">
                    <!-- Injected -->
                </tbody>
            </table>
        </div>
        <div id="traffic-modal-empty" class="hidden py-20 text-center">
            <div class="text-slate-700 text-[11px] font-mono uppercase tracking-[0.2em]">No Consumption Data Found
            </div>
        </div>
    </div>
</div>

<script>
    function formatSize(bytes) {
        if (bytes >= 1024 ** 3) return (bytes / 1024 ** 3).toFixed(1) + ' GB';
        if (bytes >= 1024 ** 2) return (bytes / 1024 ** 2).toFixed(1) + ' MB';
        if (bytes >= 1024) return (bytes / 1024).toFixed(0) + ' KB';
        return bytes + ' B';
    }

    let lastSyncStatus = null;
    let syncToastId = null;
    let benchmarkResultsShown = false;
    let packageCommitFilter = 'all';

    const PKG_COMMIT_STYLES = {
        added: { label: 'New', class: 'bg-emerald-500/10 text-emerald-400 border-emerald-500/20' },
        updated: { label: 'Updated', class: 'bg-sky-500/10 text-sky-400 border-sky-500/20' },
        removed: { label: 'Removed', class: 'bg-rose-500/10 text-rose-400 border-rose-500/20' },
    };

    function formatSyncTime(ts) {
        const d = new Date(ts * 1000);
        return `${d.toLocaleDateString()} ${d.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' })}`;
    }

    function renderPackageVersion(item) {
        if (item.change_type === 'updated' && item.previous_version) {
            return `<span class="font-mono text-[11px] text-slate-500">${item.previous_version}</span>
                    <span class="text-slate-600 mx-1">→</span>
                    <span class="font-mono text-[11px] text-white">${item.version || '—'}</span>`;
        }
        if (item.change_type === 'removed') {
            return `<span class="font-mono text-[11px] text-rose-300/80">${item.version || '—'}</span>`;
        }
        return `<span class="font-mono text-[11px] text-white">${item.version || '—'}</span>`;
    }

    async function updatePackageCommits() {
        const body = document.getElementById('package-commits-body');
        const empty = document.getElementById('package-commits-empty');
        if (!body) return;

        try {
            const typeParam = packageCommitFilter === 'all' ? '' : `?type=${packageCommitFilter}`;
            const res = await fetch(`/api/package-changelog${typeParam}`);
            const data = await res.json();
            if (!res.ok) throw new Error(data.error || 'Failed to load package commits');

            document.getElementById('pkg-commit-added').innerText = (data.counts?.added || 0).toLocaleString();
            document.getElementById('pkg-commit-updated').innerText = (data.counts?.updated || 0).toLocaleString();
            document.getElementById('pkg-commit-removed').innerText = (data.counts?.removed || 0).toLocaleString();

            const items = data.items || [];
            if (items.length === 0) {
                body.innerHTML = '';
                empty.classList.remove('hidden');
                return;
            }

            empty.classList.add('hidden');
            body.innerHTML = items.map(item => {
                const style = PKG_COMMIT_STYLES[item.change_type] || PKG_COMMIT_STYLES.added;
                return `
                <tr class="hover:bg-white/[0.02] transition-colors">
                    <td class="py-3 px-4">
                        <span class="text-[8px] px-2 py-0.5 rounded-full font-bold uppercase tracking-widest border ${style.class}">${style.label}</span>
                    </td>
                    <td class="py-3 px-4">
                        <div class="text-xs font-bold text-white font-mono">${item.pkgname}</div>
                    </td>
                    <td class="py-3 px-4">
                        <span class="text-[10px] text-slate-500 font-bold uppercase tracking-widest">${item.repo}</span>
                    </td>
                    <td class="py-3 px-4">${renderPackageVersion(item)}</td>
                    <td class="py-3 px-4 text-right">
                        <div class="text-[10px] text-slate-500 font-mono">${formatSyncTime(item.sync_ts)}</div>
                    </td>
                </tr>`;
            }).join('');
        } catch (e) {
            console.error('Package commits update failed:', e);
        }
    }

    function bindPackageCommitFilters() {
        document.querySelectorAll('.pkg-filter-btn').forEach(btn => {
            btn.addEventListener('click', () => {
                packageCommitFilter = btn.dataset.filter || 'all';
                document.querySelectorAll('.pkg-filter-btn').forEach(b => {
                    b.classList.remove('bg-white/10', 'text-white', 'border-white/10');
                    b.classList.add('bg-white/5', 'border-white/5');
                });
                btn.classList.add('bg-white/10', 'text-white', 'border-white/10');
                btn.classList.remove('bg-white/5', 'border-white/5');
                updatePackageCommits();
            });
        });
    }

    async function updateStats() {
        try {
            const [statsRes, settingsRes] = await Promise.all([
                fetch('/api/stats'),
                fetch('/api/settings')
            ]);

            const data = await statsRes.json();
            const settings = await settingsRes.json();

            // Top cards
            document.getElementById('cpu-val').innerText = data.cpu.toFixed(1) + '%';
            document.getElementById('cpu-bar').style.width = data.cpu + '%';

            const ramUsedGB = (data.ram.total - data.ram.available) / (1024 ** 3);
            const ramTotalGB = data.ram.total / (1024 ** 3);
            document.getElementById('ram-val').innerText = `${ramUsedGB.toFixed(1)}/${ramTotalGB.toFixed(1)} GB`;
            document.getElementById('ram-bar').style.width = data.ram.percent + '%';

            const diskFreeGB = data.disk.free / (1024 ** 3);
            const diskTotalGB = data.disk.total / (1024 ** 3);
            const diskUsedPct = data.disk.percent;
            document.getElementById('disk-val').innerText = `${diskFreeGB.toFixed(0)} GB Free`;
            document.getElementById('disk-total').innerText = `Total: ${diskTotalGB.toFixed(0)} GB`;
            document.getElementById('disk-bar').style.width = diskUsedPct + '%';

            if (data.uptime) {
                document.getElementById('sys-uptime').innerText = data.uptime;
            }

            // Sync Engine UI
            const syncIcon = document.getElementById('sync-icon');
            const syncBtn = document.getElementById('sync-icon-btn');

            if (settings.status === "Syncing...") {
                syncIcon.classList.add('animate-spin', 'text-sky-400');
                syncBtn.disabled = true;

                // Show/Update Progress Toast
                const message = `Ingesting mirror updates: ${settings.sync_progress || '0%'} (${settings.sync_speed || 'Initializing...'})`;
                if (!syncToastId) {
                    syncToastId = 'sync-' + Date.now();
                    showToast('Mirror Ingestion', message, 60000); // Long duration for persistent status
                } else {
                    // Find and update existing toast
                    const progressToast = document.querySelector('.toast-card.show');
                    if (progressToast && progressToast.innerText.includes('Mirror Ingestion')) {
                        progressToast.querySelector('.text-slate-400').innerText = message;
                    } else {
                        showToast('Mirror Ingestion', message, 60000);
                    }
                }

                if (lastSyncStatus !== "Syncing...") {
                    showToast('Notification', 'Sync Started');
                }
            } else {
                syncIcon.classList.remove('animate-spin', 'text-sky-400');
                syncBtn.disabled = false;

                if (lastSyncStatus === "Syncing...") {
                    showToast('Notification', 'Sync Completed', 8000);
                    updatePackageCommits();
                    // Clear progress toast if it exists
                    const progressToast = document.querySelector('.toast-card.show');
                    if (progressToast && progressToast.innerText.includes('Mirror Ingestion')) {
                        progressToast.classList.remove('show');
                        setTimeout(() => progressToast.remove(), 500);
                    }
                    syncToastId = null;
                }
            }
            lastSyncStatus = settings.status;

            // Ghost Sync
            const ghostModal = document.getElementById('ghost-modal');
            if (settings.is_ghost && settings.status === "Syncing...") {
                ghostModal.classList.remove('hidden');
                ghostModal.classList.add('flex');
            } else {
                ghostModal.classList.add('hidden');
                ghostModal.classList.remove('flex');
            }

            // Repository DNA
            if (data.repo_dna) {
                const dna = data.repo_dna;
                const coreP = dna.core ? dna.core.packages : 0;
                const extraP = dna.extra ? dna.extra.packages : 0;
                const multiP = dna.multilib ? dna.multilib.packages : 0;
                const total = coreP + extraP + multiP;

                document.getElementById('dna-total-pkgs').innerText = total > 0 ? total.toLocaleString() : '—';
                document.getElementById('dna-core-pkgs').innerText = coreP > 0 ? coreP.toLocaleString() : '—';
                document.getElementById('dna-extra-pkgs').innerText = extraP > 0 ? extraP.toLocaleString() : '—';
                document.getElementById('dna-multilib-pkgs').innerText = multiP > 0 ? multiP.toLocaleString() : '—';
                document.getElementById('dna-core-size').innerText = dna.core ? formatSize(dna.core.size) : '—';
                document.getElementById('dna-extra-size').innerText = dna.extra ? formatSize(dna.extra.size) : '—';
                document.getElementById('dna-multilib-size').innerText = dna.multilib ? formatSize(dna.multilib.size) : '—';

                // Update donut chart
                if (total > 0) {
                    const corePct = (coreP / total * 100);
                    const extraPct = corePct + (extraP / total * 100);
                    const donut = document.getElementById('dna-donut');
                    donut.style.setProperty('--core-pct', corePct.toFixed(1) + '%');
                    donut.style.setProperty('--extra-pct', extraPct.toFixed(1) + '%');
                }
            }

            // --- Mirror Benchmark Updates ---
            if (data.benchmark) {
                const b = data.benchmark;
                const modal = document.getElementById('benchmark-modal');
                const btn = document.getElementById('benchmark-header-btn');
                const icon = document.getElementById('benchmark-icon');

                if (b.active) {
                    benchmarkResultsShown = false;
                    modal.classList.replace('hidden', 'flex');
                    if (btn) btn.disabled = true;
                    if (icon) icon.classList.add('animate-pulse', 'text-amber-500');

                    document.getElementById('benchmark-step').innerText = b.step;
                    document.getElementById('benchmark-host').innerText = b.current_host || 'Searching for candidates...';
                    document.getElementById('benchmark-progress-bar').style.width = b.progress + '%';
                    document.getElementById('benchmark-progress-val').innerText = b.progress + '%';
                } else {
                    modal.classList.replace('flex', 'hidden');
                    if (btn) btn.disabled = false;
                    if (icon) icon.classList.remove('animate-pulse', 'text-amber-500');

                    if (b.results && b.results.length > 0 && !benchmarkResultsShown && !document.getElementById('benchmark-results-modal').classList.contains('flex')) {
                        displayBenchmarkResults(b.results);
                        openBenchmarkResults();
                        benchmarkResultsShown = true;
                    }

                    if (b.error) {
                        console.error("Benchmark error:", b.error);
                    }
                }
            }
        } catch (e) {
            console.error('Update failed:', e);
        }
    }

    async function updateTrafficStats() {
        try {
            const res = await fetch('/api/stats/30days');
            const data = await res.json();
            document.getElementById('stats-30d-pkgs').innerText = data.package_count.toLocaleString();
            document.getElementById('stats-30d-size').innerText = formatSize(data.total_size);
        } catch (e) { }
    }

    function renderLocationBadge(geo, ip) {
        const retryable = geo === 'Unknown' || geo === 'Resolving...';
        const baseClass = 'text-[9px] px-2 py-0.5 rounded-full font-bold uppercase tracking-widest';
        if (retryable) {
            return `<button type="button" data-ip="${ip}" class="geo-retry-btn ${baseClass} bg-amber-500/10 text-amber-400 hover:bg-amber-500/20 hover:text-amber-300 cursor-pointer transition-colors" title="Click to retry GeoIP lookup">${geo}</button>`;
        }
        return `<span class="${baseClass} bg-sky-500/10 text-sky-400">${geo}</span>`;
    }

    function bindGeoRetryButtons() {
        document.querySelectorAll('.geo-retry-btn').forEach(btn => {
            btn.addEventListener('click', (e) => {
                e.stopPropagation();
                retryGeoIp(btn.dataset.ip, btn);
            });
        });
    }

    async function retryGeoIp(ip, btn) {
        const prev = btn.textContent;
        btn.disabled = true;
        btn.textContent = '…';
        btn.classList.add('opacity-60');
        try {
            const res = await fetch('/api/traffic/geoip/refresh', {
                method: 'POST',
                headers: { 'Content-Type': 'application/json' },
                body: JSON.stringify({ ip }),
            });
            const data = await res.json();
            if (!res.ok) throw new Error(data.error || 'GeoIP refresh failed');
            btn.outerHTML = renderLocationBadge(data.geo, data.ip);
            bindGeoRetryButtons();
            if (data.geo && data.geo !== 'Unknown') {
                showToast('GeoIP', `${data.ip} → ${data.geo}`);
            }
        } catch (e) {
            console.error('GeoIP retry failed:', e);
            btn.disabled = false;
            btn.textContent = prev;
            btn.classList.remove('opacity-60');
            showToast('GeoIP', 'Lookup failed — try again in a minute');
        }
    }

    async function openTrafficModal() {
        const modal = document.getElementById('traffic-modal');
        const body = document.getElementById('traffic-modal-body');
        const empty = document.getElementById('traffic-modal-empty');

        modal.classList.replace('hidden', 'flex');
        body.innerHTML = '';

        try {
            const res = await fetch('/api/traffic/clients');
            const clients = await res.json();

            if (clients.length === 0) {
                empty.classList.remove('hidden');
                return;
            }

            empty.classList.add('hidden');
            body.innerHTML = clients.map(c => `
                <tr class="hover:bg-white/[0.02] transition-colors">
                    <td class="py-4 px-6">
                        <div class="text-xs font-bold text-white font-mono">${c.ip}</div>
                    </td>
                    <td class="py-4 px-6">
                        ${renderLocationBadge(c.geo, c.ip)}
                    </td>
                    <td class="py-4 px-6">
                        <div class="text-xs font-bold text-slate-400 font-mono">${c.count.toLocaleString()}</div>
                    </td>
                    <td class="py-4 px-6">
                        <div class="text-xs font-bold text-sky-400 font-mono">${formatSize(c.size)}</div>
                    </td>
                    <td class="py-4 px-6 text-right">
                        <div class="text-[10px] text-slate-500 font-mono">${new Date(c.last_seen * 1000).toLocaleDateString()} ${new Date(c.last_seen * 1000).toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' })}</div>
                    </td>
                </tr>
            `).join('');
            bindGeoRetryButtons();
        } catch (e) {
            console.error('Failed to load traffic modal:', e);
        }
    }

    function closeTrafficModal() {
        document.getElementById('traffic-modal').classList.replace('flex', 'hidden');
    }

    function openBenchmarkResults() {
        const modal = document.getElementById('benchmark-results-modal');
        modal.classList.remove('hidden');
        modal.classList.add('flex');
    }

    function closeBenchmarkResults() {
        const modal = document.getElementById('benchmark-results-modal');
        modal.classList.remove('flex');
        modal.classList.add('hidden');
        benchmarkResultsShown = true; // Mark as shown to prevent re-opening during transition
    }

    async function removeGhostLock() {
        if (!confirm('This will force-stop the current sync state. Continue?')) return;
        const btn = document.getElementById('ghost-btn');
        btn.disabled = true;
        btn.innerText = 'Removing...';
        try {
            await fetch('/api/sync/clear-lock', { method: 'POST' });
            location.reload();
        } catch (e) {
            alert('Failed to remove lock');
            btn.disabled = false;
        }
    }


    async function runBenchmark() {
        const btn = document.getElementById('benchmark-header-btn');
        const icon = document.getElementById('benchmark-icon');

        benchmarkResultsShown = false;

        if (btn) btn.disabled = true;
        if (icon) icon.classList.add('animate-pulse', 'text-amber-500');

        try {
            // Get country from settings
            const settRes = await fetch('/api/settings');
            const sett = await settRes.json();
            const country = sett.benchmark_country || 'United States';

            const res = await fetch('/api/mirrors/benchmark', {
                method: 'POST',
                headers: { 'Content-Type': 'application/json' },
                body: JSON.stringify({ country })
            });
            const data = await res.json();
            if (data.error) throw new Error(data.error);

            showToast('Mirror Optimizer', `Analysis started for ${country}`);
        } catch (e) {
            showToast('Error', 'Analysis failure: ' + e.message);
            btn.disabled = false;
            icon.classList.remove('animate-pulse', 'text-amber-500');
        }
    }

    function displayBenchmarkResults(results) {
        const body = document.getElementById('benchmark-body');
        if (!body) return;
        body.innerHTML = '';
        results.forEach((m, i) => {
            const row = document.createElement('tr');
            row.className = 'group/row transition-all hover:bg-white/[0.02]';
            const latencyColor = m.latency < 50 ? 'text-emerald-400' : (m.latency < 150 ? 'text-amber-400' : 'text-rose-400');
            const speedColor = m.speed > 50 ? 'text-emerald-400' : (m.speed > 10 ? 'text-sky-400' : 'text-rose-400');
            const host = m.url.replace('rsync://', '').replace(/\/+$/, '');
            const rsyncBadge = m.rsync_ok
                ? '<span class="text-[8px] px-2 py-0.5 bg-emerald-500/10 text-emerald-500 rounded-full font-bold uppercase tracking-widest border border-emerald-500/20">rsync ✓</span>'
                : '<span class="text-[8px] px-2 py-0.5 bg-rose-500/10 text-rose-400 rounded-full font-bold uppercase tracking-widest border border-rose-500/20">rsync ✗</span>';
            const fastestBadge = (i === 0 && m.rsync_ok) ? '<span class="text-[8px] px-2 py-0.5 bg-sky-500/10 text-sky-400 rounded-full font-bold uppercase tracking-widest border border-sky-500/20 ml-2">fastest candidate</span>' : '';
            const useBtn = m.rsync_ok
                ? `<button onclick="useMirror('${m.url}')" class="px-5 py-2.5 rounded-xl bg-sky-500 hover:bg-sky-400 text-white text-[10px] font-bold uppercase tracking-widest transition-all active:scale-95 shadow-lg shadow-sky-500/10">Lock Candidate</button>`
                : `<span class="text-[10px] text-slate-600 font-bold uppercase tracking-widest italic opacity-50">Link Unstable</span>`;
            row.innerHTML = `
                <td class="py-5 px-4">
                    <div class="text-[11px] font-bold text-white font-mono break-all">${host}</div>
                    <div class="flex items-center mt-2">${rsyncBadge}${fastestBadge}</div>
                </td>
                <td class="py-5 px-4">
                    <div class="flex flex-col">
                        <span class="text-xs font-bold font-mono ${latencyColor}">${m.latency === 9999 ? 'TIMED OUT' : m.latency + ' ms'}</span>
                        <span class="text-[8px] text-slate-500 font-bold uppercase tracking-widest mt-1">Latency</span>
                    </div>
                </td>
                <td class="py-5 px-4">
                    <div class="flex flex-col">
                        <span class="text-xs font-bold font-mono ${speedColor}">${m.speed > 0 ? m.speed + ' MBPS' : '0 MBPS'}</span>
                        <span class="text-[8px] text-slate-500 font-bold uppercase tracking-widest mt-1">Throughput</span>
                    </div>
                </td>
                <td class="py-5 px-4 text-right">${useBtn}</td>
            `;
            body.appendChild(row);
        });
    }

    let pendingMirrorUrl = null;

    function useMirror(url) {
        pendingMirrorUrl = url;
        const modal = document.getElementById('mirror-switch-modal');
        const content = modal.querySelector('.modal-content');
        const urlDisplay = document.getElementById('pending-mirror-url');

        closeBenchmarkResults(); // Close results modal when selecting a candidate

        urlDisplay.innerText = url;
        modal.classList.replace('hidden', 'flex');
        setTimeout(() => {
            content.classList.remove('scale-95', 'opacity-0');
        }, 10);
    }

    function closeMirrorSwitchModal() {
        const modal = document.getElementById('mirror-switch-modal');
        const content = modal.querySelector('.modal-content');

        content.classList.add('scale-95', 'opacity-0');
        setTimeout(() => {
            modal.classList.replace('flex', 'hidden');
            pendingMirrorUrl = null;
        }, 300);
    }

    async function confirmMirrorSwitch() {
        if (!pendingMirrorUrl) return;

        const btn = document.getElementById('mirror-confirm-btn');
        const originalText = btn.innerText;
        btn.disabled = true;
        btn.innerText = 'Updating...';

        try {
            await fetch('/api/mirrors/set', {
                method: 'POST',
                headers: { 'Content-Type': 'application/json' },
                body: JSON.stringify({ url: pendingMirrorUrl })
            });
            closeBenchmarkResults(); // Secondary safeguard
            localStorage.setItem('mirror_switch_success', 'true');
            location.reload();
        } catch (e) {
            showToast('Error', 'Failed to update upstream mirror');
            btn.disabled = false;
            btn.innerText = originalText;
            closeMirrorSwitchModal();
        }
    }

    async function triggerSync() {
        const icon = document.getElementById('sync-icon');
        const btn = document.getElementById('sync-icon-btn');
        btn.disabled = true;
        icon.classList.add('animate-spin');
        try {
            const res = await fetch('/api/sync/start', { method: 'POST' });
            if (res.ok) {
                // Success handled by updateStats loop
            }
        } catch (e) {
            showToast('Error', 'Sync failed to start');
            btn.disabled = false;
            icon.classList.remove('animate-spin');
        }
    }

    window.addEventListener('load', async () => {
        bindPackageCommitFilters();
        setInterval(updateStats, 2000);
        setInterval(updateTrafficStats, 10000);
        setInterval(updatePackageCommits, 30000);
        updateStats();
        updateTrafficStats();
        updatePackageCommits();

        // Version check — prompt if Gitssy has a newer release
        await checkForUpdates(true);
        setInterval(() => checkForUpdates(false), 300000);

        if (new URLSearchParams(window.location.search).get('update') === '1') {
            history.replaceState({}, '', '/dashboard');
            startArchMirrorUpdate();
        }

        // Resume only if an update is actively running
        try {
            const res = await fetch('/api/update/status');
            if (res.ok) {
                const data = await res.json();
                if (['running', 'restarting'].includes(data.status)) {
                    openUpdateProgressModal();
                    renderUpdateStatus(data);
                    startUpdatePolling();
                }
            }
        } catch (e) { }

        // Check for successful mirror switch toast
        if (localStorage.getItem('mirror_switch_success') === 'true') {
            showToast('Mirror Optimizer', 'Updated Successfully', 5000);
            localStorage.removeItem('mirror_switch_success');
        }
    });
</script>
{% endblock %}