{% extends "base.html" %}
{% block content %}
<div class="relative w-full min-h-screen flex flex-col items-center justify-center py-12 lg:py-20 overflow-hidden">
    <!-- Decorative Glows -->
    <div
        class="absolute -top-48 -left-48 w-[600px] h-[600px] bg-sky-500/10 rounded-full blur-[120px] pointer-events-none">
    </div>
    <div
        class="absolute -bottom-48 -right-48 w-[600px] h-[600px] bg-indigo-500/10 rounded-full blur-[120px] pointer-events-none">
    </div>

    <div class="relative z-10 w-full max-w-4xl text-center">
        <!-- Main Title -->
        <h1 class="text-5xl md:text-7xl font-bold tracking-tight text-white mb-8 leading-[1.1]">
            Selfhosted Mirror for <br />
            <span
                class="bg-clip-text text-transparent bg-gradient-to-r from-sky-400 via-indigo-400 to-sky-400 animate-gradient-x">Arch
                Linux</span>
        </h1>

        <!-- Subtitle -->
        <p class="text-slate-400 text-lg md:text-xl leading-relaxed max-w-2xl mx-auto mb-16">
            Global recursive synchronization with zero-latency delivery.
            Engineered for high-bandwidth package distribution and extreme mirror reliability.
        </p>

        <!-- Stats Grid -->
        <div class="grid grid-cols-1 md:grid-cols-2 gap-6 max-w-3xl mx-auto mb-20 px-4">
            <div
                class="glass-panel group p-8 rounded-3xl transition-all duration-500 hover:border-sky-500/30 hover:bg-sky-500/[0.02]">
                <div class="flex flex-col items-center">
                    <span class="text-[10px] text-slate-500 font-bold uppercase tracking-[0.2em] mb-4">Real-time
                        Throughput</span>
                    <div class="flex items-baseline gap-2">
                        <span id="speed-display"
                            class="text-5xl font-mono font-bold text-white group-hover:text-sky-400 transition-colors">0.00</span>
                        <span class="text-xs text-slate-600 font-bold uppercase">Mbps</span>
                    </div>
                </div>
            </div>

            <div
                class="glass-panel group p-8 rounded-3xl transition-all duration-500 hover:border-indigo-500/30 hover:bg-indigo-500/[0.02]">
                <div class="flex flex-col items-center">
                    <span class="text-[10px] text-slate-500 font-bold uppercase tracking-[0.2em] mb-4">Last
                        Sync</span>
                    <div class="text-2xl font-mono font-bold text-white group-hover:text-indigo-400 transition-colors">
                        {{ settings.last_run or 'Standby' }}
                    </div>
                </div>
            </div>
        </div>

        <!-- Configuration -->
        <div class="max-w-2xl mx-auto px-4">
            <div onclick="copyMirrorUrl()"
                class="group bg-slate-950/50 border border-white/5 rounded-2xl p-2 md:p-3 flex flex-col md:flex-row items-stretch md:items-center gap-2 md:gap-4 transition-all hover:border-sky-500/30 hover:bg-sky-500/[0.02] cursor-pointer relative overflow-hidden">
                <div class="flex-grow px-4 md:px-6 py-4 font-mono text-xs md:text-sm text-slate-300 overflow-x-auto whitespace-nowrap scrollbar-hide text-left flex items-center bg-black/20 rounded-xl group-hover:text-sky-400 transition-colors"
                    id="mirror-code">
                    Server = http://{{ request.host }}/archlinux/$repo/os/$arch
                </div>
                <div
                    class="px-6 py-2 md:py-0 flex items-center justify-center gap-2 text-[10px] font-bold text-slate-500 uppercase tracking-widest group-hover:text-sky-500 transition-colors">
                    <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 5H6a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2v-1M8 5a2 2 0 002 2h2a2 2 0 002-2M8 5a2 2 0 012-2h2a2 2 0 012 2m0 0h2a2 2 0 012 2v3m2 4H10m0 0l3-3m-3 3l3 3" />
                    </svg>
                    Click to Copy
                </div>
                <!-- Subtle hover glow -->
                <div
                    class="absolute inset-0 bg-gradient-to-r from-sky-500/0 via-sky-500/5 to-sky-500/0 translate-x-[-100%] group-hover:translate-x-[100%] transition-transform duration-1000">
                </div>
            </div>
            <p class="mt-4 text-[9px] md:text-[10px] text-slate-600 font-bold uppercase tracking-widest">Add to
                /etc/pacman.d/mirrorlist</p>
        </div>
    </div>
</div>

<script>
    let displayMbps = 0;

    async function updateSpeed() {
        try {
            const response = await fetch('/api/speed');
            const data = await response.json();
            const target = Number(data.throughput_mbps) || 0;
            // Smooth spikes so the readout is readable
            displayMbps = displayMbps * 0.35 + target * 0.65;
            document.getElementById('speed-display').innerText = displayMbps.toFixed(2);
        } catch (error) {
            console.error("Speed API Error:", error);
        }
    }

    function copyMirrorUrl() {
        const code = document.getElementById('mirror-code').innerText;
        navigator.clipboard.writeText(code);
        showToast('Configuration', 'Mirror URL copied to clipboard');
    }

    setInterval(updateSpeed, 1000);
    updateSpeed();
</script>

<style>
    @keyframes gradient-x {

        0%,
        100% {
            background-size: 200% 200%;
            background-position: left center;
        }

        50% {
            background-size: 200% 200%;
            background-position: right center;
        }
    }

    .animate-gradient-x {
        animation: gradient-x 5s ease infinite;
    }
</style>
{% endblock %}