{% extends "base.html" %}

{% block title %}Admin Panel - ArchCNTL{% endblock %}

{% block page_title %}
<span class="header-page-title truncate">Admin Panel</span>
{% endblock %}

<style>
    .setting-card {
        transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    }

    .setting-card:hover {
        border-color: rgba(59, 130, 246, 0.3);
        transform: translateY(-2px);
    }

    /* Custom Toggle Switch Style */
    .toggle-dot {
        transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    }

    input:checked~.toggle-bg {
        background-color: var(--accent-primary);
    }

    input:checked~.toggle-dot {
        transform: translateX(100%);
    }

    .admin-page .btn-premium.btn-glow-amber:hover {
        box-shadow: 0 8px 24px rgba(245, 158, 11, 0.35);
    }

    .admin-page .btn-premium.btn-glow-emerald:hover {
        box-shadow: 0 8px 24px rgba(16, 185, 129, 0.35);
    }

    .admin-page .btn-premium.btn-glow-brand:hover {
        box-shadow: 0 8px 24px rgba(59, 130, 246, 0.35);
    }

    .admin-page .btn-premium.btn-glow-rose:hover {
        box-shadow: 0 8px 24px rgba(244, 63, 94, 0.35);
    }

    .admin-page .action-card-glow-amber:hover {
        border-color: rgba(245, 158, 11, 0.35);
        box-shadow: 0 0 40px -10px rgba(245, 158, 11, 0.35);
    }

    .admin-page .action-card-glow-emerald:hover {
        border-color: rgba(16, 185, 129, 0.35);
        box-shadow: 0 0 40px -10px rgba(16, 185, 129, 0.35);
    }

    .admin-page .setting-row-glow:hover {
        border-color: rgba(59, 130, 246, 0.25);
        box-shadow: 0 0 36px -12px rgba(59, 130, 246, 0.25);
    }

    .admin-page .user-row-glow:hover {
        border-color: rgba(59, 130, 246, 0.25);
        box-shadow: 0 0 36px -12px rgba(59, 130, 246, 0.25);
    }

    .admin-page .btn-premium:not([class*="btn-glow-"]):hover {
        box-shadow: none;
        transform: translateY(-1px);
    }
</style>

{% block header_actions %}
{# No specific header actions needed for the admin page #}
{% endblock %}

{% block main_content %}
<div class="p-8 space-y-12 admin-page">

    {# --- System Settings Section --- #}
    <div>
        <div class="flex items-center space-x-3 mb-6">
            <div class="p-2 bg-brand-500/10 rounded-xl">
                <i data-lucide="settings" class="h-6 w-6 text-brand-400"></i>
            </div>
            <h2 class="text-2xl font-bold text-white tracking-tight">System Configuration</h2>
        </div>

        <div class="flex flex-col gap-4">
            {# Registration Enabled Toggle #}
            <div
                class="glass-panel p-5 sm:p-6 rounded-3xl border border-white/5 setting-row-glow transition-all duration-300">
                <div class="flex flex-col sm:flex-row sm:items-center justify-between gap-4">
                    <div class="space-y-1 flex-1 min-w-0">
                        <h3 class="font-bold text-slate-100">Enable User Registration</h3>
                        <p class="text-xs text-slate-500 font-medium tracking-wide">Allow new users to register for an
                            account.</p>
                    </div>
                    <label class="relative inline-flex items-center cursor-pointer shrink-0">
                        <input type="checkbox" data-setting-key="registration_enabled" class="sr-only peer setting-toggle"
                            {% if settings.registration_enabled=='1' %}checked{% endif %}>
                        <div
                            class="w-12 h-6 bg-slate-800 rounded-full border border-white/5 transition-colors peer-checked:bg-brand-500/20 peer-checked:border-brand-500/30">
                        </div>
                        <div
                            class="absolute left-1 top-1 bg-slate-400 w-4 h-4 rounded-full transition-all peer-checked:translate-x-6 peer-checked:bg-brand-400">
                        </div>
                    </label>
                </div>
            </div>

            {# Verification Required Toggle #}
            <div
                class="glass-panel p-5 sm:p-6 rounded-3xl border border-white/5 setting-row-glow transition-all duration-300">
                <div class="flex flex-col sm:flex-row sm:items-center justify-between gap-4">
                    <div class="space-y-1 flex-1 min-w-0">
                        <h3 class="font-bold text-slate-100">Require Admin Verification</h3>
                        <p class="text-xs text-slate-500 font-medium tracking-wide">New accounts must be manually verified
                            before login.</p>
                    </div>
                    <label class="relative inline-flex items-center cursor-pointer shrink-0">
                        <input type="checkbox" data-setting-key="verification_required" class="sr-only peer setting-toggle"
                            {% if settings.verification_required=='1' %}checked{% endif %}>
                        <div
                            class="w-12 h-6 bg-slate-800 rounded-full border border-white/5 transition-colors peer-checked:bg-brand-500/20 peer-checked:border-brand-500/30">
                        </div>
                        <div
                            class="absolute left-1 top-1 bg-slate-400 w-4 h-4 rounded-full transition-all peer-checked:translate-x-6 peer-checked:bg-brand-400">
                        </div>
                    </label>
                </div>
            </div>

            {# Secret Key Display (Read-only) #}
            <div
                class="glass-panel p-5 sm:p-6 rounded-3xl border border-white/5 setting-row-glow transition-all duration-300">
                <div class="flex flex-col lg:flex-row lg:items-center justify-between gap-5">
                    <div class="space-y-1 flex-1 min-w-0">
                        <h3 class="font-bold text-slate-100">Secret Key</h3>
                        <p class="text-xs text-slate-500 font-medium tracking-wide">Used for session security. <span
                                class="text-rose-400 font-bold uppercase text-[10px]">Restart Required if Changed</span></p>
                    </div>
                    <div class="flex flex-col sm:flex-row sm:items-center gap-3 shrink-0">
                        <span id="secret-key-display"
                            class="font-mono text-xs text-brand-400 px-3 py-2 bg-slate-950/40 rounded-xl border border-white/5 selection:bg-brand-500/30">{{
                            settings.secret_key_display }}</span>
                        <button id="generate-secret-key-btn"
                            class="bg-amber-500 hover:bg-amber-600 text-white font-bold py-2.5 px-5 rounded-2xl text-xs transition-all btn-premium btn-glow-amber shadow-lg shadow-amber-500/20 whitespace-nowrap">
                            Rotate Key
                        </button>
                    </div>
                </div>
            </div>
        </div>
    </div>

    {# --- System Actions Section --- #}
    <div>
        <div class="flex items-center space-x-3 mb-6">
            <div class="p-2 bg-rose-500/10 rounded-xl">
                <i data-lucide="activity" class="h-6 w-6 text-rose-400"></i>
            </div>
            <h2 class="text-2xl font-bold text-white tracking-tight">System Actions</h2>
        </div>

        <div class="flex flex-col gap-4">
            {# Restart Service Card #}
            <div
                class="glass-panel p-5 sm:p-6 rounded-3xl border border-white/5 action-card-glow-amber transition-all duration-300">
                <div class="flex flex-col lg:flex-row lg:items-center justify-between gap-5">
                    <div class="flex-1 min-w-0">
                        <h3 class="font-bold text-white tracking-tight">Restart ArchCNTL</h3>
                        <p class="text-xs text-slate-500 font-medium leading-relaxed mt-1">Instantly restart the ArchCNTL system
                            service. This will cause a brief disruption.</p>
                    </div>
                    <button id="restart-service-btn"
                        class="w-full sm:w-auto sm:min-w-[10rem] bg-amber-500 hover:bg-amber-600 text-white font-bold py-2.5 px-5 rounded-2xl text-xs transition-all btn-premium btn-glow-amber shadow-lg shadow-amber-500/20 whitespace-nowrap">
                        Restart ArchCNTL
                    </button>
                </div>
            </div>

            {# Update Application Card #}
            <div
                class="glass-panel p-5 sm:p-6 rounded-3xl border border-white/5 action-card-glow-emerald transition-all duration-300">
                <div class="flex flex-col lg:flex-row lg:items-center justify-between gap-5">
                    <div class="flex-1 min-w-0">
                        <h3 class="font-bold text-white tracking-tight">Update ArchCNTL</h3>
                        <p class="text-xs text-slate-500 font-medium leading-relaxed mt-1">Updates clients first, then this server. Live progress opens in a modal on this page.</p>
                    </div>
                    <button id="update-app-btn"
                        class="w-full sm:w-auto sm:min-w-[10rem] bg-emerald-500 hover:bg-emerald-600 text-white font-bold py-2.5 px-5 rounded-2xl text-xs transition-all btn-premium btn-glow-emerald shadow-lg shadow-emerald-500/20 whitespace-nowrap">
                        Update ArchCNTL
                    </button>
                </div>
            </div>
        </div>
    </div>
    {# --- END: System Actions Section --- #}

    {# --- User Management Section --- #}
    <div>
        <div class="flex items-center space-x-3 mb-6">
            <div class="p-2 bg-brand-500/10 rounded-xl">
                <i data-lucide="users" class="h-6 w-6 text-brand-400"></i>
            </div>
            <h2 class="text-2xl font-bold text-white tracking-tight">Users</h2>
        </div>

        <div class="flex flex-col gap-4">
            {% for user in users %}
            <div data-user-id="{{ user.id }}"
                class="glass-panel p-5 sm:p-6 rounded-3xl border border-white/5 user-row-glow transition-all duration-300 group/user">
                <div class="flex flex-col lg:flex-row lg:items-center gap-5 lg:gap-6">
                    <div class="flex-1 min-w-0">
                        <h3 class="text-lg font-bold text-slate-100 truncate tracking-tight">{{ user.username }}</h3>
                        <p data-field="email" class="text-[11px] font-mono text-slate-500 truncate">{{ user.email }}</p>
                        <p class="text-[10px] font-mono text-brand-400/80 mt-1">ID {{ user.user_id }}</p>
                    </div>

                    <div class="flex flex-col sm:flex-row sm:items-center gap-4 lg:gap-6 lg:shrink-0">
                        <div class="flex items-center gap-2">
                            <span class="text-[10px] font-bold uppercase tracking-widest text-slate-500">Clients</span>
                            <span data-field="client-count"
                                class="client-count-badge px-3 py-1.5 rounded-xl font-mono text-xs font-bold border {% if user.total_clients == 0 %}bg-slate-800/80 text-slate-500 border-white/5{% elif user.online_clients == user.total_clients %}bg-emerald-500/10 text-emerald-400 border-emerald-500/20{% else %}bg-amber-500/10 text-amber-400 border-amber-500/20{% endif %}">
                                {{ user.online_clients }}/{{ user.total_clients }}
                            </span>
                        </div>

                        <div data-field="statuses" class="flex flex-wrap gap-2">
                            <span data-status="enabled"
                                class="status-badge {{ 'bg-emerald-500/10 text-emerald-400' if user.is_enabled else 'bg-rose-500/10 text-rose-400' }}">
                                {{ 'Enabled' if user.is_enabled else 'Disabled' }}
                            </span>
                            <span data-status="verified"
                                class="status-badge {{ 'bg-slate-500/10 text-slate-400' if user.is_verified else 'bg-amber-500/10 text-amber-400' }}">
                                {{ 'Verified' if user.is_verified else 'Unverified' }}
                            </span>
                            <span data-status="admin"
                                class="status-badge {{ 'bg-brand-500/10 text-brand-400' if user.is_admin else 'bg-slate-800 text-slate-500' }}">
                                {{ 'Admin' if user.is_admin else 'User' }}
                            </span>
                        </div>

                        <button
                            class="edit-user-btn w-full sm:w-auto sm:min-w-[10rem] bg-brand-500 hover:bg-brand-600 text-white font-bold py-2.5 px-5 rounded-2xl text-xs transition-all btn-premium btn-glow-brand shadow-lg shadow-brand-500/20"
                            data-user-id="{{ user.id }}">
                            Configure
                        </button>
                    </div>
                </div>
            </div>
            {% else %}
            <div
                class="py-20 glass-panel rounded-3xl border-dashed border-2 border-white/5 flex flex-col items-center">
                <i data-lucide="user-minus" class="h-10 w-10 text-slate-600 mb-4"></i>
                <p class="text-slate-500 font-medium">No registered users found</p>
            </div>
            {% endfor %}
        </div>
    </div>
</div>

{# --- Edit User Modal --- #}
<div id="edit-user-modal" class="hidden modal-hidden fixed inset-0 flex items-center justify-center z-50 p-4">
    <div class="modal-backdrop fixed inset-0 bg-slate-950/80 backdrop-blur-sm modal-transition z-[99]"></div>
    <div
        class="modal-content glass-panel rounded-3xl shadow-2xl w-full max-w-lg modal-content-transition relative z-[100] overflow-hidden border-white/10">
        <div class="px-8 py-6 border-b border-white/5 bg-white/5 backdrop-blur-md">
            <h3 class="text-xl font-bold text-white tracking-tight">Edit Identity <span id="modal-username"
                    class="text-brand-400"></span></h3>
        </div>

        <div class="p-8 space-y-6">
            <input type="hidden" id="modal-user-id">
            <div class="space-y-2">
                <label class="text-[10px] font-bold uppercase tracking-widest text-slate-500 ml-1">Account ID</label>
                <p id="modal-account-id"
                    class="font-mono text-sm text-brand-400 px-4 py-3 bg-slate-950/40 border border-white/10 rounded-2xl"></p>
            </div>
            <div class="space-y-2">
                <label for="modal-email"
                    class="text-[10px] font-bold uppercase tracking-widest text-slate-500 ml-1">Email Address</label>
                <input type="email" id="modal-email"
                    class="w-full bg-slate-950/40 border border-white/10 rounded-2xl py-3 px-4 text-sm text-white focus:border-brand-500/50 focus:ring-4 focus:ring-brand-500/10 outline-none transition-all font-medium">
            </div>
            <div class="space-y-2">
                <label for="modal-new-password"
                    class="text-[10px] font-bold uppercase tracking-widest text-slate-500 ml-1">Override
                    Password</label>
                <input type="password" id="modal-new-password" placeholder="Leave blank to maintain current"
                    class="w-full bg-slate-950/40 border border-white/10 rounded-2xl py-3 px-4 text-sm text-white focus:border-brand-500/50 focus:ring-4 focus:ring-brand-500/10 outline-none transition-all font-medium">
            </div>

            <div class="grid grid-cols-1 gap-3 pt-2">
                <div
                    class="flex items-center justify-between p-4 bg-white/5 rounded-2xl border border-white/5 group hover:bg-white/10 transition-all">
                    <span class="text-sm font-bold text-slate-200">Administrative Access</span>
                    <label class="relative inline-flex items-center cursor-pointer">
                        <input type="checkbox" id="modal-is-admin" class="sr-only peer">
                        <div
                            class="w-11 h-6 bg-slate-800 rounded-full border border-white/5 transition-colors peer-checked:bg-brand-500/20 peer-checked:border-brand-500/30">
                        </div>
                        <div
                            class="absolute left-1 top-1 bg-slate-400 w-4 h-4 rounded-full transition-all peer-checked:translate-x-5 peer-checked:bg-brand-400">
                        </div>
                    </label>
                </div>
                <div
                    class="flex items-center justify-between p-4 bg-white/5 rounded-2xl border border-white/5 group hover:bg-white/10 transition-all">
                    <span class="text-sm font-bold text-slate-200">Account Active</span>
                    <label class="relative inline-flex items-center cursor-pointer">
                        <input type="checkbox" id="modal-is-enabled" class="sr-only peer">
                        <div
                            class="w-11 h-6 bg-slate-800 rounded-full border border-white/5 transition-colors peer-checked:bg-brand-500/20 peer-checked:border-brand-500/30">
                        </div>
                        <div
                            class="absolute left-1 top-1 bg-slate-400 w-4 h-4 rounded-full transition-all peer-checked:translate-x-5 peer-checked:bg-brand-400">
                        </div>
                    </label>
                </div>
                <div
                    class="flex items-center justify-between p-4 bg-white/5 rounded-2xl border border-white/5 group hover:bg-white/10 transition-all">
                    <span class="text-sm font-bold text-slate-200">Identity Verified</span>
                    <label class="relative inline-flex items-center cursor-pointer">
                        <input type="checkbox" id="modal-is-verified" class="sr-only peer">
                        <div
                            class="w-11 h-6 bg-slate-800 rounded-full border border-white/5 transition-colors peer-checked:bg-brand-500/20 peer-checked:border-brand-500/30">
                        </div>
                        <div
                            class="absolute left-1 top-1 bg-slate-400 w-4 h-4 rounded-full transition-all peer-checked:translate-x-5 peer-checked:bg-brand-400">
                        </div>
                    </label>
                </div>
            </div>
        </div>

        <div class="p-6 bg-white/5 flex gap-4 border-t border-white/5">
            <button id="modal-cancel-btn"
                class="flex-1 bg-slate-800 hover:bg-white/10 text-white font-bold py-3 rounded-2xl text-xs transition-all border border-white/5">Discard</button>
            <button id="modal-save-btn"
                class="flex-1 bg-brand-500 hover:bg-brand-600 text-white font-bold py-3 rounded-2xl text-xs transition-all btn-premium btn-glow-brand shadow-lg shadow-brand-500/20">Apply
                Changes</button>
        </div>
    </div>
</div>

{# --- Confirmation Modal --- #}
<div id="confirm-modal" class="hidden modal-hidden fixed inset-0 flex items-center justify-center z-[150] p-4">
    <div class="modal-backdrop fixed inset-0 bg-slate-950/80 backdrop-blur-sm modal-transition z-[149]"></div>
    <div
        class="modal-content glass-panel rounded-3xl shadow-2xl p-8 w-full max-w-sm modal-content-transition relative z-[150] border-white/10">
        <div class="text-center">
            <div id="confirm-modal-icon-container"
                class="w-16 h-16 bg-amber-500/10 rounded-full flex items-center justify-center mx-auto mb-6">
                <i id="confirm-modal-icon" data-lucide="alert-triangle" class="h-8 w-8 text-amber-400"></i>
            </div>
            <h3 id="confirm-modal-title" class="text-xl font-bold text-white mb-2 tracking-tight">System Confirmation
            </h3>
            <p id="confirm-modal-message" class="text-sm text-slate-500 font-medium leading-relaxed mb-8"></p>
        </div>
        <div class="flex gap-4">
            <button id="confirm-modal-cancel"
                class="flex-1 bg-slate-800 hover:bg-white/10 text-white font-bold py-3 rounded-2xl text-xs transition-all border border-white/5">Discard</button>
            <button id="confirm-modal-confirm"
                class="flex-1 bg-amber-500 hover:bg-amber-600 text-white font-bold py-3 rounded-2xl text-xs transition-all btn-premium btn-glow-amber shadow-lg shadow-amber-500/20">Confirm</button>
        </div>
    </div>
</div>

{# --- Update Available Modal --- #}
<div id="update-available-modal" class="hidden modal-hidden fixed inset-0 flex items-center justify-center z-[155] p-4">
    <div class="modal-backdrop fixed inset-0 bg-slate-950/80 backdrop-blur-sm modal-transition z-[154]"></div>
    <div
        class="modal-content glass-panel rounded-3xl shadow-2xl p-8 w-full max-w-sm modal-content-transition relative z-[155] border border-emerald-500/20">
        <div class="text-center">
            <div class="w-16 h-16 bg-emerald-500/10 rounded-full flex items-center justify-center mx-auto mb-6">
                <i data-lucide="arrow-up-circle" class="h-8 w-8 text-emerald-400"></i>
            </div>
            <h3 class="text-xl font-bold text-white mb-2 tracking-tight">Update Available</h3>
            <p class="text-sm text-slate-500 font-medium leading-relaxed mb-6">
                A newer version of ArchCNTL is available. Would you like to update now?
            </p>
            <div class="flex items-center justify-center gap-3 mb-8">
                <span id="update-available-current"
                    class="px-3 py-1.5 rounded-xl bg-slate-800 text-slate-400 font-mono text-xs font-bold border border-white/5"></span>
                <i data-lucide="arrow-right" class="h-4 w-4 text-emerald-400"></i>
                <span id="update-available-remote"
                    class="px-3 py-1.5 rounded-xl bg-emerald-500/10 text-emerald-400 font-mono text-xs font-bold border border-emerald-500/20"></span>
            </div>
        </div>
        <div class="flex gap-4">
            <button id="update-available-later"
                class="flex-1 bg-slate-800 hover:bg-white/10 text-white font-bold py-3 rounded-2xl text-xs transition-all border border-white/5">Not
                Now</button>
            <button id="update-available-confirm"
                class="flex-1 bg-emerald-500 hover:bg-emerald-600 text-white font-bold py-3 rounded-2xl text-xs transition-all btn-premium btn-glow-emerald shadow-lg shadow-emerald-500/20">Update
                Now</button>
        </div>
    </div>
</div>

{# --- Infrastructure Update Modal --- #}
<div id="infra-update-modal" class="hidden modal-hidden fixed inset-0 flex items-center justify-center z-[160] p-4">
    <div class="modal-backdrop fixed inset-0 bg-slate-950/80 backdrop-blur-sm modal-transition z-[149]"></div>
    <div
        class="modal-content glass-panel rounded-3xl shadow-2xl w-full max-w-2xl modal-content-transition relative z-[150] border border-emerald-500/20 overflow-hidden">
        <div class="flex items-center justify-between px-6 py-5 border-b border-white/5 bg-emerald-500/5">
            <div class="flex items-center gap-3 min-w-0">
                <div class="p-2.5 rounded-xl bg-emerald-500/10">
                    <i data-lucide="cloud-download" class="h-5 w-5 text-emerald-400"></i>
                </div>
                <div class="min-w-0">
                    <h3 class="text-lg font-bold text-white tracking-tight">ArchCNTL Update</h3>
                    <p id="infra-update-status" class="text-xs text-slate-400 truncate">Starting...</p>
                </div>
            </div>
            <button id="infra-update-close-btn" type="button"
                class="p-2 rounded-xl text-slate-500 hover:text-white hover:bg-white/5 transition-colors"
                title="Close">
                <i data-lucide="x" class="h-4 w-4"></i>
            </button>
        </div>
        <div class="px-6 py-4 border-b border-white/5">
            <div class="flex items-center justify-between text-[10px] font-bold uppercase tracking-wider text-slate-500 mb-2">
                <span id="infra-update-phase">Phase</span>
                <span id="infra-update-progress-label">Running</span>
            </div>
            <div class="h-1.5 bg-slate-800 rounded-full overflow-hidden">
                <div id="infra-update-progress-bar"
                    class="h-full bg-emerald-500 transition-all duration-500 rounded-full"
                    style="width: 8%;"></div>
            </div>
        </div>
        <div id="infra-update-log"
            class="h-64 overflow-y-auto px-6 py-4 font-mono text-[11px] text-slate-400 leading-relaxed space-y-1 bg-slate-950/40">
        </div>
    </div>
</div>
{% endblock %}

{% block scripts %}
<script>
    // This JavaScript is copied directly from OpenGit's admin.html
    // It handles the modals, toasts, and API calls.
    (function () { // IIFE START

        // --- Modal Animation & Utility Functions ---
        const confirmModal = document.getElementById('confirm-modal');
        const confirmModalTitle = document.getElementById('confirm-modal-title');
        const confirmModalMessage = document.getElementById('confirm-modal-message');
        const confirmModalIcon = document.getElementById('confirm-modal-icon');
        let confirmModalConfirmBtn = document.getElementById('confirm-modal-confirm');
        let confirmModalCancelBtn = document.getElementById('confirm-modal-cancel');

        function confirmSettingChange(title, message, iconName = 'alert-triangle', iconColorClass = 'text-amber-400', confirmLabel = 'Confirm') {
            const iconContainer = document.getElementById('confirm-modal-icon-container');
            return new Promise(resolve => {
                confirmModalTitle.textContent = title;
                confirmModalMessage.textContent = message;
                confirmModalIcon.setAttribute('data-lucide', iconName);

                // Handle dynamic coloring
                if (iconColorClass.includes('rose') || iconColorClass.includes('red')) {
                    iconContainer.className = 'w-16 h-16 bg-rose-500/10 rounded-full flex items-center justify-center mx-auto mb-6';
                    confirmModalIcon.className = 'h-8 w-8 text-rose-400';
                    confirmModalConfirmBtn.className = 'flex-1 bg-rose-500 hover:bg-rose-600 text-white font-bold py-3 rounded-2xl text-xs transition-all btn-premium btn-glow-rose shadow-lg shadow-rose-500/20';
                } else if (iconColorClass.includes('emerald') || iconColorClass.includes('green') || iconColorClass.includes('blue')) {
                    iconContainer.className = 'w-16 h-16 bg-emerald-500/10 rounded-full flex items-center justify-center mx-auto mb-6';
                    confirmModalIcon.className = 'h-8 w-8 text-emerald-400';
                    confirmModalConfirmBtn.className = 'flex-1 bg-emerald-500 hover:bg-emerald-600 text-white font-bold py-3 rounded-2xl text-xs transition-all btn-premium btn-glow-emerald shadow-lg shadow-emerald-500/20';
                } else {
                    iconContainer.className = 'w-16 h-16 bg-amber-500/10 rounded-full flex items-center justify-center mx-auto mb-6';
                    confirmModalIcon.className = 'h-8 w-8 text-amber-400';
                    confirmModalConfirmBtn.className = 'flex-1 bg-amber-500 hover:bg-amber-600 text-white font-bold py-3 rounded-2xl text-xs transition-all btn-premium btn-glow-amber shadow-lg shadow-amber-500/20';
                }

                confirmModalConfirmBtn.textContent = confirmLabel;

                confirmModalConfirmBtn.replaceWith(confirmModalConfirmBtn.cloneNode(true));
                confirmModalCancelBtn.replaceWith(confirmModalCancelBtn.cloneNode(true));
                confirmModalConfirmBtn = document.getElementById('confirm-modal-confirm');
                confirmModalCancelBtn = document.getElementById('confirm-modal-cancel');

                confirmModalConfirmBtn.addEventListener('click', () => { window.closeModalAnimation(confirmModal); resolve(true); });
                confirmModalCancelBtn.addEventListener('click', () => { window.closeModalAnimation(confirmModal); resolve(false); });

                window.openModalAnimation(confirmModal);
                lucide.createIcons({ nodes: [confirmModal] });
            });
        }
        // --- End Modal Functions ---


        // --- System Settings Update Logic ---
        async function updateSetting(key, value) {
            try {
                const response = await fetch('/admin/update_settings', {
                    method: 'POST',
                    headers: { 'Content-Type': 'application/json' },
                    body: JSON.stringify({ key, value })
                });
                const data = await response.json();
                const toastId = window.nextToastId();
                if (response.ok) {
                    window.createToast(toastId, 'Success', data.success, true);
                    if (key === 'secret_key') {
                        document.getElementById('secret-key-display').textContent = value.substring(0, 8) + '...';
                    }
                } else {
                    window.createToast(toastId, 'Error', data.error || 'Failed to update setting.', false);
                    const inputElement = document.querySelector(`[data-setting-key="${key}"]`);
                    if (inputElement) {
                        if (inputElement.type === 'checkbox') inputElement.checked = !value;
                    }
                }
            } catch (error) {
                window.createToast(window.nextToastId(), 'Network Error', 'Could not save setting.', false);
                const inputElement = document.querySelector(`[data-setting-key="${key}"]`);
                if (inputElement && inputElement.type === 'checkbox') inputElement.checked = !value;
            }
        }

        document.querySelectorAll('.setting-toggle').forEach(toggle => {
            toggle.addEventListener('change', async (e) => {
                const key = e.target.dataset.settingKey;
                const value = e.target.checked;
                updateSetting(key, value);
            });
        });

        document.getElementById('generate-secret-key-btn').addEventListener('click', async () => {
            const proceed = await confirmSettingChange(
                'Generate New Secret Key?',
                'This will invalidate all current user sessions, forcing everyone to log in again. An application restart is required for the change to take full effect. Are you sure?',
                'key-round',
                'text-yellow-400'
            );
            if (proceed) {
                const array = new Uint8Array(24);
                window.crypto.getRandomValues(array);
                const newKey = Array.from(array, byte => byte.toString(16).padStart(2, '0')).join('');
                await updateSetting('secret_key', newKey);
            }
        });

        // --- User Management Modal ---
        const users = {{ users|tojson }};
    const modal = document.getElementById('edit-user-modal');
    const modalUserId = document.getElementById('modal-user-id');
    const modalAccountId = document.getElementById('modal-account-id');
    const modalUsername = document.getElementById('modal-username');
    const modalEmail = document.getElementById('modal-email');
    const modalNewPassword = document.getElementById('modal-new-password');
    const modalIsAdmin = document.getElementById('modal-is-admin');
    const modalIsEnabled = document.getElementById('modal-is-enabled');
    const modalIsVerified = document.getElementById('modal-is-verified');
    const modalCancelBtn = document.getElementById('modal-cancel-btn');
    const modalSaveBtn = document.getElementById('modal-save-btn');

    document.querySelectorAll('.edit-user-btn').forEach(btn => {
        btn.addEventListener('click', (e) => {
            const userId = parseInt(e.target.dataset.userId, 10);
            const user = users.find(u => u.id === userId);
            if (!user) return;

            modalUserId.value = user.id;
            if (modalAccountId) modalAccountId.textContent = user.user_id || '—';
            modalUsername.textContent = user.username;
            modalEmail.value = user.email;
            modalIsAdmin.checked = user.is_admin;
            modalIsEnabled.checked = user.is_enabled;
            modalIsVerified.checked = user.is_verified;
            modalNewPassword.value = '';

            window.openModalAnimation(modal);
        });
    });

    modalCancelBtn.addEventListener('click', () => window.closeModalAnimation(modal));

    modalSaveBtn.addEventListener('click', async () => {
        const userId = modalUserId.value;
        const originalUser = users.find(u => u.id === parseInt(userId, 10));
        const originalValues = {
            email: originalUser.email,
            is_admin: originalUser.is_admin,
            is_enabled: originalUser.is_enabled,
            is_verified: originalUser.is_verified
        };

        const updates = [
            { field: 'email', value: modalEmail.value, elementSelector: `p[data-field="email"]` },
            { field: 'is_admin', value: modalIsAdmin.checked, elementSelector: `span[data-status="admin"]` },
            { field: 'is_enabled', value: modalIsEnabled.checked, elementSelector: `span[data-status="enabled"]` },
            { field: 'is_verified', value: modalIsVerified.checked, elementSelector: `span[data-status="verified"]` }
        ];

        const newPassword = modalNewPassword.value.trim();
        if (newPassword) {
            updates.push({ field: 'password', value: newPassword });
        }

        let allSuccess = true;
        let errors = [];

        modalSaveBtn.disabled = true;
        modalSaveBtn.textContent = 'Saving...';

        for (const update of updates) {
            if (update.field !== 'password' && update.value === originalValues[update.field]) {
                continue;
            }

            try {
                const response = await fetch(`/admin/update_user/${userId}`,
                    {
                        method: 'POST',
                        headers: { 'Content-Type': 'application/json' },
                        body: JSON.stringify({ field: update.field, value: update.value })
                    });
                const data = await response.json();
                if (!response.ok) {
                    allSuccess = false;
                    errors.push(`Error updating ${update.field}: ${data.error || 'Unknown error'}`);
                }
            } catch (error) {
                allSuccess = false;
                errors.push(`Network error updating ${update.field}.`);
            }
        }

        modalSaveBtn.disabled = false;
        modalSaveBtn.textContent = 'Save Changes';

        const toastId = window.nextToastId();
        if (allSuccess) {
            window.createToast(toastId, 'Success', 'User details updated successfully.', true);
            window.closeModalAnimation(modal);

            // Update the card UI
            const userCard = document.querySelector(`div[data-user-id="${userId}"]`);
            if (userCard) {
                updates.forEach(update => {
                    if (update.elementSelector) {
                        const element = userCard.querySelector(update.elementSelector);
                        if (element) {
                            if (update.field.startsWith('is_')) {
                                const isChecked = update.value;
                                let text = '', classes = '';
                                if (update.field === 'is_enabled') {
                                    text = isChecked ? 'Enabled' : 'Disabled';
                                    classes = isChecked ? 'bg-emerald-500/10 text-emerald-400' : 'bg-rose-500/10 text-rose-400';
                                } else if (update.field === 'is_verified') {
                                    text = isChecked ? 'Verified' : 'Unverified';
                                    classes = isChecked ? 'bg-slate-500/10 text-slate-400' : 'bg-amber-500/10 text-amber-400';
                                } else if (update.field === 'is_admin') {
                                    text = isChecked ? 'Admin' : 'User';
                                    classes = isChecked ? 'bg-brand-500/10 text-brand-400' : 'bg-slate-800 text-slate-500';
                                }
                                element.textContent = text;
                                element.className = `status-badge ${classes}`;
                            } else {
                                element.textContent = update.value;
                            }
                        }
                    }
                });

                // Update the in-memory JS object
                const userIndex = users.findIndex(u => u.id === parseInt(userId, 10));
                if (userIndex > -1) {
                    users[userIndex].email = modalEmail.value;
                    users[userIndex].is_admin = modalIsAdmin.checked;
                    users[userIndex].is_enabled = modalIsEnabled.checked;
                    users[userIndex].is_verified = modalIsVerified.checked;
                }
            }
        } else {
            window.createToast(toastId, 'Error Updating User', errors.join(' '), false);
        }
    });

    // --- System Action Button Listeners ---
    const restartBtn = document.getElementById('restart-service-btn');
    const updateBtn = document.getElementById('update-app-btn');

    if (restartBtn) {
        restartBtn.addEventListener('click', async () => {
            const proceed = await confirmSettingChange(
                'Confirm Service Restart',
                'Are you sure you want to restart the ArchCNTL service? This will briefly interrupt the application.',
                'refresh-cw',
                'text-yellow-500',
                'Restart Now'
            );
            if (proceed) {
                const initialToastId = window.nextToastId();
                window.createToast(initialToastId, 'Restarting...', 'Restart command sent. Waiting for server response...', true, true);

                let pingAttempts = 0;
                const maxPingAttempts = 15;
                const pingInterval = 2000;

                async function pingServer() {
                    pingAttempts++;
                    try {
                        const response = await fetch('/ping');
                        if (response.ok) {
                            window.removeToast(initialToastId);
                            window.createToast(window.nextToastId(), 'Success', 'Server Restarted Successfully 👍', true);
                            return;
                        }
                        throw new Error(`Server responded with status: ${response.status}`);
                    } catch (error) {
                        console.log(`Ping attempt ${pingAttempts} failed: ${error.message}`);
                        if (pingAttempts >= maxPingAttempts) {
                            window.removeToast(initialToastId);
                            window.createToast(window.nextToastId(), 'Error', 'Server did not respond after restart attempt. Check service status manually. 👎', false);
                        } else {
                            setTimeout(pingServer, pingInterval);
                        }
                    }
                }

                // Send the restart command
                try {
                    // We expect this fetch to fail as the server goes down
                    await fetch('/admin/restart_service', { method: 'POST' });
                } catch (error) {
                    console.warn("Restart request fetch failed as expected:", error.message);
                }
                // Start pinging after a short delay
                setTimeout(pingServer, pingInterval);
            }
        });
    }

    if (updateBtn) {
        const infraUpdateModal = document.getElementById('infra-update-modal');
        const infraUpdateStatus = document.getElementById('infra-update-status');
        const infraUpdatePhase = document.getElementById('infra-update-phase');
        const infraUpdateProgressLabel = document.getElementById('infra-update-progress-label');
        const infraUpdateProgressBar = document.getElementById('infra-update-progress-bar');
        const infraUpdateLog = document.getElementById('infra-update-log');
        const infraUpdateCloseBtn = document.getElementById('infra-update-close-btn');
        let infraUpdateRunning = false;

        const phaseProgress = {
            idle: 0,
            starting: 8,
            fetch: 25,
            clients: 55,
            server: 85,
            complete: 100,
            failed: 100,
        };

        const adminSocket = io();
        adminSocket.on('connect', () => {
            adminSocket.emit('admin_infra_join');
        });
        adminSocket.on('infra_update_event', (state) => {
            renderInfraUpdateState(state);
        });

        function showInfraUpdateModal() {
            if (!infraUpdateModal) return;
            window.openModalAnimation(infraUpdateModal);
            lucide.createIcons({ nodes: [infraUpdateModal] });
        }

        function hideInfraUpdateModal() {
            if (!infraUpdateModal) return;
            window.closeModalAnimation(infraUpdateModal);
        }

        function appendInfraLog(line) {
            if (!infraUpdateLog || !line) return;
            const entry = document.createElement('div');
            entry.textContent = line;
            infraUpdateLog.appendChild(entry);
            infraUpdateLog.scrollTop = infraUpdateLog.scrollHeight;
        }

        function renderInfraUpdateState(state) {
            if (!state) return;
            const phase = state.phase || 'starting';
            const status = state.status || 'running';
            const progress = phaseProgress[phase] ?? 8;

            infraUpdateRunning = status === 'running';

            if (infraUpdateStatus) infraUpdateStatus.textContent = state.message || 'Update running...';
            if (infraUpdatePhase) infraUpdatePhase.textContent = phase.replace('_', ' ');
            if (infraUpdateProgressLabel) {
                infraUpdateProgressLabel.textContent = status === 'complete' ? 'Complete' : (status === 'failed' ? 'Failed' : 'Running');
            }
            if (infraUpdateProgressBar) {
                infraUpdateProgressBar.style.width = `${progress}%`;
                infraUpdateProgressBar.className = `h-full transition-all duration-500 rounded-full ${
                    status === 'failed' ? 'bg-rose-500' : 'bg-emerald-500'
                }`;
            }

            if (Array.isArray(state.log)) {
                infraUpdateLog.innerHTML = '';
                state.log.slice(-120).forEach(appendInfraLog);
            }
        }

        if (infraUpdateCloseBtn) {
            infraUpdateCloseBtn.addEventListener('click', () => {
                if (infraUpdateRunning) {
                    if (!confirm('Update is still running. Hide the modal anyway? Progress continues in the background.')) {
                        return;
                    }
                }
                hideInfraUpdateModal();
            });
        }

        if (infraUpdateModal) {
            infraUpdateModal.addEventListener('click', (e) => {
                if (e.target === infraUpdateModal || e.target.classList.contains('modal-backdrop')) {
                    if (infraUpdateRunning) return;
                    hideInfraUpdateModal();
                }
            });
        }

        async function startInfrastructureUpdate() {
            showInfraUpdateModal();
            infraUpdateLog.innerHTML = '';
            appendInfraLog('Launching update orchestrator...');
            updateBtn.disabled = true;

            try {
                const response = await fetch('/admin/update_app', { method: 'POST' });
                const data = await response.json();
                if (!response.ok) throw new Error(data.error || 'Failed to start update.');
                appendInfraLog('Update orchestrator launched. Waiting for progress...');
                adminSocket.emit('admin_infra_join');
            } catch (error) {
                appendInfraLog(`Error: ${error.message}`);
                if (infraUpdateStatus) infraUpdateStatus.textContent = error.message;
                if (infraUpdateProgressBar) {
                    infraUpdateProgressBar.style.width = '100%';
                    infraUpdateProgressBar.className = 'h-full transition-all duration-500 rounded-full bg-rose-500';
                }
            } finally {
                updateBtn.disabled = false;
            }
        }

        updateBtn.addEventListener('click', async () => {
            const proceed = await confirmSettingChange(
                'Confirm Application Update',
                'This starts a background update process: clients first, then this server. Progress streams live in a modal on this page.',
                'download-cloud',
                'text-emerald-400',
                'Run Update'
            );
            if (!proceed) return;
            await startInfrastructureUpdate();
        });

        const updateAvailableModal = document.getElementById('update-available-modal');
        const updateAvailableCurrent = document.getElementById('update-available-current');
        const updateAvailableRemote = document.getElementById('update-available-remote');
        const updateAvailableLaterBtn = document.getElementById('update-available-later');
        const updateAvailableConfirmBtn = document.getElementById('update-available-confirm');

        function showUpdateAvailableModal(currentVersion, remoteVersion) {
            if (!updateAvailableModal) return;
            if (updateAvailableCurrent) updateAvailableCurrent.textContent = currentVersion;
            if (updateAvailableRemote) updateAvailableRemote.textContent = remoteVersion;
            window.openModalAnimation(updateAvailableModal);
            lucide.createIcons({ nodes: [updateAvailableModal] });
        }

        if (updateAvailableLaterBtn) {
            updateAvailableLaterBtn.addEventListener('click', () => {
                window.closeModalAnimation(updateAvailableModal);
            });
        }

        if (updateAvailableConfirmBtn) {
            updateAvailableConfirmBtn.addEventListener('click', async () => {
                window.closeModalAnimation(updateAvailableModal);
                await startInfrastructureUpdate();
            });
        }

        if (updateAvailableModal) {
            updateAvailableModal.addEventListener('click', (e) => {
                if (e.target === updateAvailableModal || e.target.classList.contains('modal-backdrop')) {
                    window.closeModalAnimation(updateAvailableModal);
                }
            });
        }

        async function checkForUpdatesOnLoad() {
            try {
                const response = await fetch('/admin/check_update');
                const data = await response.json();
                if (!response.ok || !data.update_available) return;
                if (infraUpdateRunning) return;
                showUpdateAvailableModal(data.current_version, data.remote_version);
            } catch (error) {
                console.warn('Update check failed:', error);
            }
        }

        checkForUpdatesOnLoad();
    }

    }) (); // IIFE END
</script>
{% endblock %}