{% extends "base.html" %}
{% block content %}
<div class="container mx-auto p-4 md:p-8 lg:p-12 relative max-w-7xl">
    <div class="max-w-5xl mx-auto space-y-8">
        <!-- Header -->
        <div class="flex flex-col md:flex-row md:items-end justify-between gap-4 mb-10">
            <div>
                <h1 class="text-4xl font-bold text-white tracking-tight flex items-center gap-4">
                    Settings
                    <div class="flex items-center gap-2">
                        <button onclick="handleSystem('restart')" id="btn-restart-header"
                            class="p-2.5 rounded-xl bg-white/5 border border-white/5 hover:bg-rose-500/10 hover:border-rose-500/20 hover:text-rose-400 text-slate-400 transition-all group relative overflow-hidden"
                            title="Restart Node">
                            <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                    d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15" />
                            </svg>
                        </button>
                        <button onclick="handleSystem('update')" id="btn-update-header"
                            class="p-2.5 rounded-xl bg-white/5 border border-white/5 hover:bg-sky-500/10 hover:border-sky-500/20 hover:text-sky-400 text-slate-400 transition-all group relative overflow-hidden"
                            title="Check for Updates">
                            <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                    d="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>
                        </button>
                    </div>
                </h1>
                <p class="text-slate-400 text-sm mt-3 font-medium leading-relaxed max-w-2xl">
                    Configure your mirror preferences, synchronization schedules, and regional settings to ensure peak
                    performance and reliability.
                </p>
            </div>
        </div>


        <!-- Search Configuration -->
        <div class="glass-panel p-10 rounded-3xl relative overflow-hidden group">
            <div class="flex flex-col lg:flex-row gap-10">
                <div class="lg:w-1/3">
                    <div class="w-12 h-12 rounded-2xl bg-sky-500/10 flex items-center justify-center mb-6">
                        <svg class="w-6 h-6 text-sky-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" />
                        </svg>
                    </div>
                    <h3 class="text-xl font-bold text-white mb-3">Search Settings</h3>
                    <p class="text-slate-500 text-sm leading-relaxed">
                        Adjust how many packages are shown per page. Higher limits may slow down page loading.
                    </p>
                </div>
                <div class="lg:w-2/3">
                    <form id="search-settings-form" class="space-y-6">
                        <div class="space-y-4">
                            <div
                                class="flex justify-between text-[10px] font-bold text-slate-500 uppercase tracking-widest px-1">
                                <span>Packages Per Page</span>
                                <span class="text-sky-400 font-mono" id="per-page-display">50</span>
                            </div>
                            <input type="range" id="search_per_page" min="10" max="250" step="10" value="50"
                                class="w-full h-2 bg-slate-900 rounded-full appearance-none cursor-pointer accent-sky-500"
                                oninput="document.getElementById('per-page-display').innerText = this.value">
                            <div class="flex justify-between text-[8px] text-slate-600 font-mono">
                                <span>Fast</span>
                                <span>Slow</span>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>

        <!-- Sync Settings -->
        <div class="glass-panel p-10 rounded-3xl relative overflow-hidden group">
            <div class="flex flex-col lg:flex-row gap-10">
                <div class="lg:w-1/3">
                    <div class="w-12 h-12 rounded-2xl bg-indigo-500/10 flex items-center justify-center mb-6">
                        <svg class="w-6 h-6 text-indigo-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z" />
                        </svg>
                    </div>
                    <h3 class="text-xl font-bold text-white mb-3">Sync Settings</h3>
                    <p class="text-slate-500 text-sm leading-relaxed">
                        Configure how often your mirror updates. Shorter intervals keep packages fresh but use more
                        bandwidth.
                    </p>
                </div>
                <div class="lg:w-2/3">
                    <form id="scheduler-form" class="space-y-6">
                        <div
                            class="flex items-center justify-between p-6 bg-slate-900/50 rounded-2xl border border-white/5">
                            <div>
                                <div class="text-xs font-bold text-white uppercase tracking-wider">Automatic Syncing
                                </div>
                                <div class="text-[10px] text-slate-500 mt-1 uppercase tracking-widest font-bold">
                                    Sync in background</div>
                            </div>
                            <label class="relative inline-flex items-center cursor-pointer">
                                <input type="checkbox" id="sync_enabled" class="sr-only peer">
                                <div
                                    class="w-11 h-6 bg-slate-800 rounded-full peer peer-checked:after:translate-x-5 after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-indigo-500 shadow-inner">
                                </div>
                            </label>
                        </div>

                        <div class="space-y-4">
                            <div
                                class="flex justify-between text-[10px] font-bold text-slate-500 uppercase tracking-widest px-1">
                                <span>Sync Frequency</span>
                                <span class="text-indigo-400 font-mono" id="freq-display">1h</span>
                            </div>
                            <input type="range" id="frequency_hours" min="1" max="24" step="1" value="1"
                                class="w-full h-2 bg-slate-900 rounded-full appearance-none cursor-pointer accent-indigo-500"
                                oninput="document.getElementById('freq-display').innerText = this.value + 'h'">
                        </div>

                    </form>
                </div>
            </div>
        </div>

        <!-- Reverse Proxy -->
        <div class="glass-panel p-10 rounded-3xl relative overflow-hidden group">
            <div class="flex flex-col lg:flex-row gap-10">
                <div class="lg:w-1/3">
                    <div class="w-12 h-12 rounded-2xl bg-emerald-500/10 flex items-center justify-center mb-6">
                        <svg class="w-6 h-6 text-emerald-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                d="M21 12a9 9 0 01-9 9m9-9a9 9 0 00-9-9m9 9H3m9 9a9 9 0 01-9-9m9 9v5m0-5V3" />
                        </svg>
                    </div>
                    <h3 class="text-xl font-bold text-white mb-3">Reverse Proxy</h3>
                    <p class="text-slate-500 text-sm leading-relaxed">
                        When homelab nginx forwards traffic, AMWI reads <code class="text-slate-400">X-Real-IP</code>
                        only when the direct TCP connection is from a trusted proxy IP you list below.
                    </p>
                </div>
                <div class="lg:w-2/3">
                    <div class="space-y-4">
                        <label class="text-[10px] font-bold text-slate-500 uppercase tracking-widest px-1">
                            Trusted proxy IPs / CIDRs
                        </label>
                        <textarea id="trusted_proxies" rows="4"
                            placeholder="192.168.1.222"
                            class="w-full bg-slate-900 border border-white/5 text-white text-sm rounded-2xl py-4 px-6 focus:outline-none focus:ring-2 focus:ring-emerald-500/50 font-mono"></textarea>
                        <p class="text-[10px] text-slate-600 leading-relaxed">
                            Add only your homelab nginx IP (e.g. 192.168.1.222) — not the whole LAN or router (.1).
                            LAN users should resolve this hostname to the homelab LAN IP (split DNS) to avoid NAT hairpin.
                        </p>
                    </div>
                </div>
            </div>
        </div>

        <!-- Mirror Discovery Configuration -->
        <div class="glass-panel p-10 rounded-3xl relative overflow-hidden group">
            <div class="flex flex-col lg:flex-row gap-10">
                <div class="lg:w-1/3">
                    <div class="w-12 h-12 rounded-2xl bg-amber-500/10 flex items-center justify-center mb-6">
                        <svg class="w-6 h-6 text-amber-500" 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>
                    <h3 class="text-xl font-bold text-white mb-3">Mirror Region</h3>
                    <p class="text-slate-500 text-sm leading-relaxed">
                        Select your region to prioritize local mirrors. This improves download speeds and reduces
                        latency.
                    </p>
                </div>
                <div class="lg:w-2/3">
                    <form id="discovery-form" class="space-y-6">
                        <div class="space-y-4">
                            <label
                                class="text-[10px] font-bold text-slate-500 uppercase tracking-widest px-1">Region</label>
                            <select id="benchmark_country"
                                class="w-full bg-slate-900 border border-white/5 text-white text-sm rounded-2xl py-4 px-6 focus:outline-none focus:ring-2 focus:ring-amber-500/50 appearance-none">
                                <!-- Injected -->
                            </select>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>
</div>

<!-- Custom System Action Modal -->
<div id="system-modal" class="fixed inset-0 z-[100] hidden flex items-center justify-center p-4">
    <div id="modal-backdrop"
        class="absolute inset-0 bg-black/60 backdrop-blur-md opacity-0 transition-opacity duration-300"></div>
    <div
        class="modal-content glass-panel max-w-md w-full p-8 rounded-[2rem] relative z-10 scale-95 opacity-0 transition-all duration-300 shadow-2xl border-white/10">
        <div class="flex flex-col items-center text-center">
            <div id="modal-icon-container" class="w-20 h-20 rounded-3xl mb-6 flex items-center justify-center">
                <!-- Icon Injected -->
            </div>
            <h3 id="modal-title" class="text-2xl font-bold text-white mb-2">System Action</h3>
            <p id="modal-description" class="text-slate-400 text-sm leading-relaxed mb-8">
                Confirming this action will temporarily affect service availability.
            </p>
            <div class="flex items-center gap-3 w-full">
                <button onclick="closeSystemModal()"
                    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">
                    Cancel
                </button>
                <button id="modal-confirm-btn" onclick="confirmSystemAction()"
                    class="flex-1 px-6 py-4 rounded-2xl font-bold transition-all shadow-lg active:scale-95">
                    Confirm
                </button>
            </div>
        </div>
    </div>
</div>
</div>

<!-- Floating Save Button -->
<div id="floating-save-container"
    class="fixed bottom-8 left-1/2 -translate-x-1/2 z-50 pointer-events-none opacity-0 translate-y-10 transition-all duration-500 ease-out">
    <div
        class="glass-panel p-2 rounded-2xl shadow-2xl shadow-sky-500/20 flex items-center gap-3 border-sky-500/30 backdrop-blur-xl pointer-events-auto">
        <div class="px-4 py-2">
            <p class="text-[10px] font-bold text-slate-400 uppercase tracking-widest leading-none">Settings Modified</p>
            <p class="text-xs text-white font-medium mt-1" id="pending-count">1 change pending</p>
        </div>
        <button onclick="applyAllChanges()"
            class="bg-sky-500 hover:bg-sky-400 text-white font-bold px-6 py-3 rounded-xl transition-all active:scale-95 flex items-center gap-2 group">
            Apply Changes
            <svg class="w-4 h-4 group-hover:translate-x-1 transition-transform" fill="none" stroke="currentColor"
                viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M14 5l7 7m0 0l-7 7m7-7H3" />
            </svg>
        </button>
    </div>
</div>

<script>
    let originalSettings = {};
    let currentSettings = {};

    async function loadSettings() {
        try {
            const [settRes, countriesRes] = await Promise.all([
                fetch('/api/settings'),
                fetch('/api/mirrors/countries')
            ]);
            originalSettings = await settRes.json();
            const countries = await countriesRes.json();

            // Clone for tracking
            currentSettings = JSON.parse(JSON.stringify(originalSettings));

            // Scheduler
            document.getElementById('sync_enabled').checked = originalSettings.enabled || false;
            document.getElementById('frequency_hours').value = originalSettings.frequency_hours || 1;
            document.getElementById('freq-display').innerText = (originalSettings.frequency_hours || 1) + 'h';

            // Mirror Discovery
            const countrySelect = document.getElementById('benchmark_country');
            countrySelect.innerHTML = countries.map(c => `<option value="${c}" ${c === originalSettings.benchmark_country ? 'selected' : ''}>${c}</option>`).join('');

            // Search
            const perPage = originalSettings.search_per_page || 50;
            document.getElementById('search_per_page').value = perPage;
            document.getElementById('per-page-display').innerText = perPage;

            const proxies = originalSettings.trusted_proxies || [];
            document.getElementById('trusted_proxies').value = Array.isArray(proxies) ? proxies.join('\n') : '';

            attachListeners();
        } catch (e) { }
    }

    function attachListeners() {
        const inputs = [
            { id: 'sync_enabled', key: 'enabled', type: 'checked' },
            { id: 'frequency_hours', key: 'frequency_hours', type: 'value', isInt: true },
            { id: 'benchmark_country', key: 'benchmark_country', type: 'value' },
            { id: 'search_per_page', key: 'search_per_page', type: 'value', isInt: true },
            { id: 'trusted_proxies', key: 'trusted_proxies', type: 'value', isProxyList: true }
        ];

        inputs.forEach(input => {
            const el = document.getElementById(input.id);
            const handler = () => {
                let val = input.type === 'checked' ? el.checked : el.value;
                if (input.isInt) val = parseInt(val);
                if (input.isProxyList) {
                    val = val.split(/[\n,]+/).map(s => s.trim()).filter(Boolean);
                }
                currentSettings[input.key] = val;
                checkChanges();
            };
            el.addEventListener('change', handler);
            if (el.type === 'range') el.addEventListener('input', handler);
        });
    }

    function checkChanges() {
        const keysToCheck = ['enabled', 'frequency_hours', 'benchmark_country', 'search_per_page', 'trusted_proxies'];
        const changedKeys = keysToCheck.filter(key => {
            if (key === 'trusted_proxies') {
                return JSON.stringify(currentSettings[key] || []) !== JSON.stringify(originalSettings[key] || []);
            }
            return currentSettings[key] !== originalSettings[key];
        });

        const container = document.getElementById('floating-save-container');
        const countEl = document.getElementById('pending-count');

        if (changedKeys.length > 0) {
            countEl.innerText = `${changedKeys.length} change${changedKeys.length > 1 ? 's' : ''} pending`;
            container.classList.remove('opacity-0', 'translate-y-10', 'pointer-events-none');
        } else {
            container.classList.add('opacity-0', 'translate-y-10', 'pointer-events-none');
        }
    }

    async function applyAllChanges() {
        const changedData = {};
        const keysToSync = ['enabled', 'frequency_hours', 'benchmark_country', 'search_per_page', 'trusted_proxies'];

        keysToSync.forEach(key => {
            const changed = key === 'trusted_proxies'
                ? JSON.stringify(currentSettings[key] || []) !== JSON.stringify(originalSettings[key] || [])
                : currentSettings[key] !== originalSettings[key];
            if (changed) {
                changedData[key] = currentSettings[key];
            }
        });

        if (Object.keys(changedData).length === 0) return;

        const btn = document.querySelector('#floating-save-container button');
        const originalText = btn.innerHTML;
        btn.disabled = true;
        btn.innerHTML = `<svg class="w-4 h-4 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> Applying...`;

        try {
            const res = await fetch('/api/settings/update', {
                method: 'POST',
                headers: { 'Content-Type': 'application/json' },
                body: JSON.stringify(changedData)
            });

            if (res.ok) {
                showToast('Settings Updated', 'All pending changes have been applied successfully.');
                originalSettings = JSON.parse(JSON.stringify(currentSettings));
                checkChanges();
            } else {
                showToast('Error', 'Failed to update settings.');
            }
        } catch (e) {
            showToast('Error', 'Network failure while updating settings.');
        } finally {
            btn.disabled = false;
            btn.innerHTML = originalText;
        }
    }

    loadSettings();

    let pendingAction = null;

    function showSystemModal(action) {
        pendingAction = action;
        const modal = document.getElementById('system-modal');
        const title = document.getElementById('modal-title');
        const desc = document.getElementById('modal-description');
        const iconContainer = document.getElementById('modal-icon-container');
        const confirmBtn = document.getElementById('modal-confirm-btn');
        const content = modal.querySelector('.modal-content');

        const backdrop = document.getElementById('modal-backdrop');

        if (action === 'restart') {
            title.innerText = 'Restart Node';
            desc.innerText = 'Are you sure you want to restart the system service? This will temporarily interrupt mirror availability and reset active connections.';
            iconContainer.className = 'w-20 h-20 rounded-3xl mb-6 flex items-center justify-center bg-rose-500/10 text-rose-500';
            iconContainer.innerHTML = `<svg class="w-10 h-10" 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>`;
            confirmBtn.className = 'flex-1 px-6 py-4 rounded-2xl bg-rose-500 hover:bg-rose-600 text-white font-bold transition-all shadow-lg shadow-rose-500/20 active:scale-95';
        } else {
            title.innerText = 'Update System';
            desc.innerText = 'This will fetch the latest core updates from the repository and reboot the service. All local configurations are preserved.';
            iconContainer.className = 'w-20 h-20 rounded-3xl mb-6 flex items-center justify-center bg-sky-500/10 text-sky-500';
            iconContainer.innerHTML = `<svg class="w-10 h-10" 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>`;
            confirmBtn.className = 'flex-1 px-6 py-4 rounded-2xl bg-sky-500 hover:bg-sky-600 text-white font-bold transition-all shadow-lg shadow-sky-500/20 active:scale-95';
        }

        modal.classList.remove('hidden');
        setTimeout(() => {
            backdrop.classList.remove('opacity-0');
            content.classList.remove('scale-95', 'opacity-0');
        }, 10);
    }

    function closeSystemModal() {
        const modal = document.getElementById('system-modal');
        const backdrop = document.getElementById('modal-backdrop');
        const content = modal.querySelector('.modal-content');

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

    async function confirmSystemAction() {
        const action = pendingAction;
        closeSystemModal();
        if (action) await executeSystemAction(action);
    }

    async function handleSystem(action) {
        showSystemModal(action);
    }

    async function waitForServer(action) {
        const check = async () => {
            try {
                const res = await fetch('/api/settings');
                if (res.ok) return true;
            } catch (e) { }
            return false;
        };

        // Poll every 2 seconds
        const poll = setInterval(async () => {
            if (await check()) {
                clearInterval(poll);
                showToast('System Recovery', `${action.charAt(0).toUpperCase() + action.slice(1)} Successful`, 5000);

                const btn = document.getElementById(`btn-${action}-header`);
                if (btn) btn.disabled = false;

                if (action === 'restart') {
                    setTimeout(() => location.href = '/dashboard', 1500);
                }
            }
        }, 2000);
    }

    async function executeSystemAction(action) {
        const btn = document.getElementById(`btn-${action}-header`);

        if (action === 'update') {
            window.location.href = '/dashboard?update=1';
            return;
        }

        const title = 'Node Restart';
        btn.disabled = true;
        showToast(title, 'Restart sequence started...', 10000);

        try {
            await fetch(`/api/system/${action}`, { method: 'POST' });
            waitForServer(action);
        } catch (e) {
            waitForServer(action);
        }
    }
</script>
{% endblock %}