{% extends "base.html" %}

{% block title %}System Administration - Delphi Database{% endblock %}

{% block bridge_css %}{% endblock %}

{% block content %}
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-6">
    <!-- Page Header -->
    <div class="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4 mb-8">
        <div class="flex items-center gap-3">
            <div class="flex items-center justify-center w-12 h-12 bg-primary-100 dark:bg-primary-800 text-primary-600 dark:text-primary-400 rounded-xl">
                <i class="fa-solid fa-shield-halved text-xl"></i>
            </div>
            <div>
                <h1 class="text-3xl font-bold text-neutral-900 dark:text-neutral-100">System Administration</h1>
                <p class="text-neutral-600 dark:text-neutral-400">Manage users, settings, and system operations</p>
            </div>
        </div>
        <div class="flex items-center gap-2">
            <button id="refreshStatsBtn" class="flex items-center gap-2 px-4 py-2 bg-neutral-100 dark:bg-neutral-700 text-neutral-700 dark:text-neutral-300 hover:bg-neutral-200 dark:hover:bg-neutral-600 rounded-lg transition-colors duration-200">
                <i class="fa-solid fa-rotate-right"></i>
                <span>Refresh</span>
            </button>
            <div class="flex items-center gap-2 px-3 py-2 bg-green-50 dark:bg-green-900/20 text-green-700 dark:text-green-400 rounded-lg border border-green-200 dark:border-green-800">
                <div class="w-2 h-2 bg-green-500 rounded-full animate-pulse"></div>
                <span class="text-sm font-medium">System Online</span>
            </div>
        </div>
    </div>

    <!-- Enhanced Stats Cards -->
    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-8">
        <!-- System Status Card -->
        <div class="bg-white dark:bg-neutral-900 rounded-xl shadow-sm dark:shadow-none border border-neutral-200 dark:border-neutral-700 hover:shadow-md dark:hover:shadow-lg dark:hover:shadow-black/20 transition-all duration-200">
            <div class="p-6">
                <div class="flex items-center justify-between mb-4">
                    <div class="flex items-center justify-center w-12 h-12 bg-green-100 dark:bg-green-800 text-green-600 dark:text-green-300 rounded-lg">
                        <i class="fa-solid fa-heart-pulse text-xl"></i>
                    </div>
                    <div id="system-status" class="text-2xl">
                        <i class="fas fa-circle text-green-500"></i>
                    </div>
                </div>
                <div>
                    <h3 class="text-sm font-medium text-neutral-600 dark:text-neutral-300 uppercase tracking-wide">System Status</h3>
                    <p class="text-2xl font-bold text-neutral-900 dark:text-white mt-1" id="system-status-text">Healthy</p>
                    <div class="mt-2 flex items-center text-xs text-green-600 dark:text-green-400">
                        <i class="fa-solid fa-arrow-up mr-1"></i>
                        <span>All systems operational</span>
                    </div>
                </div>
            </div>
        </div>

        <!-- Users Card -->
        <div class="bg-white dark:bg-neutral-900 rounded-xl shadow-sm dark:shadow-none border border-neutral-200 dark:border-neutral-700 hover:shadow-md dark:hover:shadow-lg dark:hover:shadow-black/20 transition-all duration-200">
            <div class="p-6">
                <div class="flex items-center justify-between mb-4">
                    <div class="flex items-center justify-center w-12 h-12 bg-blue-100 dark:bg-blue-800 text-blue-600 dark:text-blue-300 rounded-lg">
                        <i class="fa-solid fa-users text-xl"></i>
                    </div>
                    <button class="text-neutral-400 hover:text-neutral-600 dark:text-neutral-500 dark:hover:text-neutral-300" onclick="openTab(event, 'users')">
                        <i class="fa-solid fa-external-link"></i>
                    </button>
                </div>
                <div>
                    <h3 class="text-sm font-medium text-neutral-600 dark:text-neutral-300 uppercase tracking-wide">Total Users</h3>
                    <p class="text-3xl font-bold text-neutral-900 dark:text-white mt-1" id="total-users">0</p>
                    <div class="mt-2 flex items-center text-xs text-blue-600 dark:text-blue-400">
                        <span id="active-users-count">0 active</span>
                    </div>
                </div>
            </div>
        </div>

        <!-- Database Card -->
        <div class="bg-white dark:bg-neutral-900 rounded-xl shadow-sm dark:shadow-none border border-neutral-200 dark:border-neutral-700 hover:shadow-md dark:hover:shadow-lg dark:hover:shadow-black/20 transition-all duration-200">
            <div class="p-6">
                <div class="flex items-center justify-between mb-4">
                    <div class="flex items-center justify-center w-12 h-12 bg-purple-100 dark:bg-purple-800 text-purple-600 dark:text-purple-300 rounded-lg">
                        <i class="fa-solid fa-database text-xl"></i>
                    </div>
                    <button class="text-neutral-400 hover:text-neutral-600 dark:text-neutral-500 dark:hover:text-neutral-300" onclick="openTab(event, 'maintenance')">
                        <i class="fa-solid fa-external-link"></i>
                    </button>
                </div>
                <div>
                    <h3 class="text-sm font-medium text-neutral-600 dark:text-neutral-300 uppercase tracking-wide">Database Size</h3>
                    <p class="text-2xl font-bold text-neutral-900 dark:text-white mt-1" id="db-size">0 MB</p>
                    <div class="mt-2 flex items-center text-xs text-purple-600 dark:text-purple-400">
                        <span id="db-growth">+0% this week</span>
                    </div>
                </div>
            </div>
        </div>

        <!-- Uptime Card -->
        <div class="bg-white dark:bg-neutral-900 rounded-xl shadow-sm dark:shadow-none border border-neutral-200 dark:border-neutral-700 hover:shadow-md dark:hover:shadow-lg dark:hover:shadow-black/20 transition-all duration-200">
            <div class="p-6">
                <div class="flex items-center justify-between mb-4">
                    <div class="flex items-center justify-center w-12 h-12 bg-amber-100 dark:bg-amber-800 text-amber-600 dark:text-amber-300 rounded-lg">
                        <i class="fa-solid fa-clock text-xl"></i>
                    </div>
                    <div class="text-xs text-neutral-500 dark:text-neutral-400">
                        99.9% uptime
                    </div>
                </div>
                <div>
                    <h3 class="text-sm font-medium text-neutral-600 dark:text-neutral-300 uppercase tracking-wide">System Uptime</h3>
                    <p class="text-xl font-bold text-neutral-900 dark:text-white mt-1" id="system-uptime">Unknown</p>
                    <div class="mt-2 flex items-center text-xs text-amber-600 dark:text-amber-400">
                        <span>Last restart: Never</span>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Modern Navigation Tabs -->
    <div class="bg-white dark:bg-neutral-900 rounded-xl shadow-sm dark:shadow-none border border-neutral-200 dark:border-neutral-700 mb-8">
        <nav class="flex flex-wrap border-b border-neutral-200 dark:border-neutral-700" role="tablist">
            <button class="flex items-center gap-2 px-6 py-4 text-sm font-medium border-b-2 border-primary-600 text-primary-600 dark:text-primary-400 bg-primary-50 dark:bg-primary-900/20 transition-all duration-200 rounded-t-xl active" id="overview-tab" data-tab-target="#overview" type="button" role="tab">
                <i class="fa-solid fa-chart-line"></i>
                <span>Overview</span>
            </button>
            <button class="flex items-center gap-2 px-6 py-4 text-sm font-medium border-b-2 border-transparent hover:border-primary-300 text-neutral-600 dark:text-neutral-400 hover:text-primary-600 dark:hover:text-primary-400 hover:bg-neutral-50 dark:hover:bg-neutral-700/50 transition-all duration-200" id="users-tab" data-tab-target="#users" type="button" role="tab">
                <i class="fa-solid fa-users-gear"></i>
                <span>Users</span>
                <span class="ml-1 px-2 py-0.5 bg-blue-100 dark:bg-blue-800 text-blue-700 dark:text-blue-400 text-xs rounded-full" id="users-badge">0</span>
            </button>
            <button class="flex items-center gap-2 px-6 py-4 text-sm font-medium border-b-2 border-transparent hover:border-primary-300 text-neutral-600 dark:text-neutral-400 hover:text-primary-600 dark:hover:text-primary-400 hover:bg-neutral-50 dark:hover:bg-neutral-700/50 transition-all duration-200" id="settings-tab" data-tab-target="#settings" type="button" role="tab">
                <i class="fa-solid fa-sliders"></i>
                <span>Settings</span>
            </button>
            <button class="flex items-center gap-2 px-6 py-4 text-sm font-medium border-b-2 border-transparent hover:border-primary-300 text-neutral-600 dark:text-neutral-400 hover:text-primary-600 dark:hover:text-primary-400 hover:bg-neutral-50 dark:hover:bg-neutral-700/50 transition-all duration-200" id="maintenance-tab" data-tab-target="#maintenance" type="button" role="tab">
                <i class="fa-solid fa-wrench"></i>
                <span>Maintenance</span>
            </button>
            <button class="flex items-center gap-2 px-6 py-4 text-sm font-medium border-b-2 border-transparent hover:border-primary-300 text-neutral-600 dark:text-neutral-400 hover:text-primary-600 dark:hover:text-primary-400 hover:bg-neutral-50 dark:hover:bg-neutral-700/50 transition-all duration-200" id="printers-tab" data-tab-target="#printers" type="button" role="tab">
                <i class="fa-solid fa-print"></i>
                <span>Printers</span>
            </button>
            <button class="flex items-center gap-2 px-6 py-4 text-sm font-medium border-b-2 border-transparent hover:border-primary-300 text-neutral-600 dark:text-neutral-400 hover:text-primary-600 dark:hover:text-primary-400 hover:bg-neutral-50 dark:hover:bg-neutral-700/50 transition-all duration-200" id="qdro-notifications-tab" data-tab-target="#qdro-notifications" type="button" role="tab">
                <i class="fa-solid fa-bell"></i>
                <span>QDRO Notifications</span>
            </button>
            <button class="flex items-center gap-2 px-6 py-4 text-sm font-medium border-b-2 border-transparent hover:border-primary-300 text-neutral-600 dark:text-neutral-400 hover:text-primary-600 dark:hover:text-primary-400 hover:bg-neutral-50 dark:hover:bg-neutral-700/50 transition-all duration-200" id="issues-tab" data-tab-target="#issues" type="button" role="tab">
                <i class="fa-solid fa-bug"></i>
                <span>Issues</span>
                <span class="ml-1 px-2 py-0.5 bg-red-100 dark:bg-red-800 text-red-700 dark:text-red-400 text-xs rounded-full hidden" id="issues-badge">0</span>
            </button>
            <button class="flex items-center gap-2 px-6 py-4 text-sm font-medium border-b-2 border-transparent hover:border-primary-300 text-neutral-600 dark:text-neutral-400 hover:text-primary-600 dark:hover:text-primary-400 hover:bg-neutral-50 dark:hover:bg-neutral-700/50 transition-all duration-200" id="backup-tab" data-tab-target="#backup" type="button" role="tab">
                <i class="fa-solid fa-shield-halved"></i>
                <span>Backup</span>
            </button>
        </nav>

        <!-- Tab Content -->
        <div id="adminTabContent" class="space-y-6">
            <!-- Overview Tab -->
            <div id="overview" role="tabpanel" class="space-y-6">
                <!-- Live Batch Progress -->
                <div class="bg-white dark:bg-neutral-900 rounded-xl shadow-sm dark:shadow-none border border-neutral-200 dark:border-neutral-700">
                    <div class="px-6 py-4 border-b border-neutral-200 dark:border-neutral-700 flex items-center justify-between">
                        <h3 class="text-lg font-semibold text-neutral-900 dark:text-white flex items-center gap-2">
                            <i class="fa-solid fa-list-check text-primary-600 dark:text-primary-400"></i>
                            Live Batch Progress
                        </h3>
                        <button id="refreshBatchesBtn" class="text-neutral-400 hover:text-neutral-600 dark:text-neutral-500 dark:hover:text-neutral-300">
                            <i class="fa-solid fa-rotate-right"></i>
                        </button>
                    </div>
                    <div class="p-6">
                        <div id="batchProgressList" class="space-y-3" aria-live="polite"></div>
                        <div id="batchProgressEmpty" class="text-sm text-neutral-500 dark:text-neutral-400">No active batches</div>
                    </div>
                </div>
                <!-- Quick Stats Overview -->
                <div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
                    <!-- System Statistics -->
                    <div class="lg:col-span-2">
                        <div class="bg-white dark:bg-neutral-900 rounded-xl shadow-sm dark:shadow-none border border-neutral-200 dark:border-neutral-700">
                            <div class="px-6 py-4 border-b border-neutral-200 dark:border-neutral-700">
                                <div class="flex items-center justify-between">
                                    <h3 class="text-lg font-semibold text-neutral-900 dark:text-white flex items-center gap-2">
                                        <i class="fa-solid fa-chart-bar text-primary-600 dark:text-primary-400"></i>
                                        System Statistics
                                    </h3>
                                    <button class="text-neutral-400 hover:text-neutral-600 dark:text-neutral-500 dark:hover:text-neutral-300" onclick="loadSystemStats()">
                                        <i class="fa-solid fa-rotate-right"></i>
                                    </button>
                                </div>
                            </div>
                            <div class="p-6">
                                <div class="grid grid-cols-2 gap-6">
                                    <div class="flex items-center justify-between p-4 bg-neutral-50 dark:bg-neutral-800/50 rounded-lg">
                                        <div>
                                            <p class="text-sm text-neutral-600 dark:text-neutral-300">Total Customers</p>
                                            <p class="text-2xl font-bold text-neutral-900 dark:text-white" id="stat-customers">0</p>
                                        </div>
                                        <div class="w-10 h-10 bg-blue-100 dark:bg-blue-800 text-blue-600 dark:text-blue-300 rounded-lg flex items-center justify-center">
                                            <i class="fa-solid fa-users"></i>
                                        </div>
                                    </div>
                                    <div class="flex items-center justify-between p-4 bg-neutral-50 dark:bg-neutral-800/50 rounded-lg">
                                        <div>
                                            <p class="text-sm text-neutral-600 dark:text-neutral-300">Total Files</p>
                                            <p class="text-2xl font-bold text-neutral-900 dark:text-white" id="stat-files">0</p>
                                        </div>
                                        <div class="w-10 h-10 bg-green-100 dark:bg-green-800 text-green-600 dark:text-green-300 rounded-lg flex items-center justify-center">
                                            <i class="fa-solid fa-folder"></i>
                                        </div>
                                    </div>
                                    <div class="flex items-center justify-between p-4 bg-neutral-50 dark:bg-neutral-800/50 rounded-lg">
                                        <div>
                                            <p class="text-sm text-neutral-600 dark:text-neutral-300">Transactions</p>
                                            <p class="text-2xl font-bold text-neutral-900 dark:text-white" id="stat-transactions">0</p>
                                        </div>
                                        <div class="w-10 h-10 bg-purple-100 dark:bg-purple-800 text-purple-600 dark:text-purple-300 rounded-lg flex items-center justify-center">
                                            <i class="fa-solid fa-receipt"></i>
                                        </div>
                                    </div>
                                    <div class="flex items-center justify-between p-4 bg-neutral-50 dark:bg-neutral-800/50 rounded-lg">
                                        <div>
                                            <p class="text-sm text-neutral-600 dark:text-neutral-300">QDROs</p>
                                            <p class="text-2xl font-bold text-neutral-900 dark:text-white" id="stat-qdros">0</p>
                                        </div>
                                        <div class="w-10 h-10 bg-amber-100 dark:bg-amber-800 text-amber-600 dark:text-amber-300 rounded-lg flex items-center justify-center">
                                            <i class="fa-solid fa-file-contract"></i>
                                        </div>
                                    </div>
                                </div>
                                <div class="mt-6 pt-6 border-t border-neutral-200 dark:border-neutral-700">
                                    <div class="flex items-center justify-between">
                                        <div class="flex items-center gap-4">
                                            <div class="text-center">
                                                <p class="text-lg font-bold text-neutral-900 dark:text-white" id="stat-active-users">0</p>
                                                <p class="text-xs text-neutral-600 dark:text-neutral-300">Active Users</p>
                                            </div>
                                            <div class="text-center">
                                                <p class="text-lg font-bold text-neutral-900 dark:text-white" id="stat-admins">0</p>
                                                <p class="text-xs text-neutral-600 dark:text-neutral-300">Admin Users</p>
                                            </div>
                                        </div>
                                        <div class="text-right">
                                            <p class="text-sm text-neutral-600 dark:text-neutral-300">Last updated</p>
                                            <p class="text-sm font-medium" id="stats-updated">Loading...</p>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- System Alerts -->
                    <div class="lg:col-span-1">
                        <div class="bg-white dark:bg-neutral-900 rounded-xl shadow-sm dark:shadow-none border border-neutral-200 dark:border-neutral-700">
                            <div class="px-6 py-4 border-b border-neutral-200 dark:border-neutral-700">
                                <h3 class="text-lg font-semibold text-neutral-900 dark:text-white flex items-center gap-2">
                                    <i class="fa-solid fa-bell text-amber-500"></i>
                                    System Alerts
                                </h3>
                            </div>
                            <div class="p-6">
                                <div id="system-alerts" class="space-y-3">
                                    <div class="flex items-center gap-3 p-3 bg-green-50 dark:bg-green-900/20 text-green-700 dark:text-green-400 rounded-lg">
                                        <i class="fa-solid fa-check-circle"></i>
                                        <div>
                                            <p class="text-sm font-medium">All Systems Normal</p>
                                            <p class="text-xs opacity-75">No issues detected</p>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <!-- Quick Actions -->
                        <div class="mt-6 bg-white dark:bg-neutral-900 rounded-xl shadow-sm dark:shadow-none border border-neutral-200 dark:border-neutral-700">
                            <div class="px-6 py-4 border-b border-neutral-200 dark:border-neutral-700">
                                <h3 class="text-lg font-semibold text-neutral-900 dark:text-white flex items-center gap-2">
                                    <i class="fa-solid fa-bolt text-primary-600 dark:text-primary-400"></i>
                                    Quick Actions
                                </h3>
                            </div>
                            <div class="p-6 space-y-3">
                                <button class="w-full flex items-center gap-3 p-3 text-left hover:bg-neutral-50 dark:hover:bg-neutral-800/50 rounded-lg transition-colors" onclick="openTab(event, 'users')">
                                    <div class="w-8 h-8 bg-blue-100 dark:bg-blue-800 text-blue-600 dark:text-blue-300 rounded-lg flex items-center justify-center">
                                        <i class="fa-solid fa-user-plus text-sm"></i>
                                    </div>
                                    <div>
                                        <p class="text-sm font-medium text-neutral-900 dark:text-white">Add User</p>
                                        <p class="text-xs text-neutral-600 dark:text-neutral-300">Create new user account</p>
                                    </div>
                                </button>
                                <button class="w-full flex items-center gap-3 p-3 text-left hover:bg-neutral-50 dark:hover:bg-neutral-800/50 rounded-lg transition-colors" onclick="openTab(event, 'backup')">
                                    <div class="w-8 h-8 bg-green-100 dark:bg-green-800 text-green-600 dark:text-green-300 rounded-lg flex items-center justify-center">
                                        <i class="fa-solid fa-download text-sm"></i>
                                    </div>
                                    <div>
                                        <p class="text-sm font-medium text-neutral-900 dark:text-white">Backup Now</p>
                                        <p class="text-xs text-neutral-600 dark:text-neutral-300">Create system backup</p>
                                    </div>
                                </button>
                                <button class="w-full flex items-center gap-3 p-3 text-left hover:bg-neutral-50 dark:hover:bg-neutral-800/50 rounded-lg transition-colors" onclick="openTab(event, 'settings')">
                                    <div class="w-8 h-8 bg-purple-100 dark:bg-purple-800 text-purple-600 dark:text-purple-300 rounded-lg flex items-center justify-center">
                                        <i class="fa-solid fa-cog text-sm"></i>
                                    </div>
                                    <div>
                                        <p class="text-sm font-medium text-neutral-900 dark:text-white">System Settings</p>
                                        <p class="text-xs text-neutral-600 dark:text-neutral-300">Configure system options</p>
                                    </div>
                                </button>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Recent Activity -->
                <div class="bg-white dark:bg-neutral-900 rounded-xl shadow-sm dark:shadow-none border border-neutral-200 dark:border-neutral-700">
                    <div class="px-6 py-4 border-b border-neutral-200 dark:border-neutral-700">
                        <div class="flex items-center justify-between">
                            <h3 class="text-lg font-semibold text-neutral-900 dark:text-white flex items-center gap-2">
                                <i class="fa-solid fa-clock-rotate-left text-primary-600 dark:text-primary-400"></i>
                                Recent Activity
                            </h3>
                            <button class="text-neutral-400 hover:text-neutral-600 dark:text-neutral-500 dark:hover:text-neutral-300 text-sm">
                                View All
                            </button>
                        </div>
                    </div>
                    <div class="p-6">
                        <div id="recent-activity" class="space-y-4">
                            <div class="flex items-center gap-4 p-4 bg-neutral-50 dark:bg-neutral-800/50 rounded-lg">
                                <div class="w-10 h-10 bg-blue-100 dark:bg-blue-800 text-blue-600 dark:text-blue-300 rounded-full flex items-center justify-center">
                                    <i class="fa-solid fa-user text-sm"></i>
                                </div>
                                <div class="flex-1">
                                    <p class="text-sm font-medium text-neutral-900 dark:text-white">Loading recent activity...</p>
                                    <p class="text-xs text-neutral-600 dark:text-neutral-300">Please wait...</p>
                                </div>
                                <div class="text-xs text-neutral-500 dark:text-neutral-400">
                                    --
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Users Tab -->
            <div id="users" role="tabpanel" class="hidden space-y-6">
                <div class="bg-white dark:bg-neutral-900 rounded-xl shadow-sm dark:shadow-none border border-neutral-200 dark:border-neutral-700">
                    <div class="px-6 py-4 border-b border-neutral-200 dark:border-neutral-700">
                        <div class="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4">
                            <div>
                                <h3 class="text-lg font-semibold text-neutral-900 dark:text-white flex items-center gap-2">
                                    <i class="fa-solid fa-users-gear text-primary-600 dark:text-primary-400"></i>
                                    User Management
                                </h3>
                                <p class="text-sm text-neutral-600 dark:text-neutral-300 mt-1">Manage user accounts and permissions</p>
                            </div>
                            <button type="button" class="flex items-center gap-2 px-4 py-2 bg-primary-600 hover:bg-primary-700 text-white rounded-lg transition-colors duration-200" onclick="showCreateUserModal()">
                                <i class="fa-solid fa-user-plus"></i>
                                <span>Add User</span>
                            </button>
                        </div>
                    </div>
                    
                    <!-- Search and Filter Controls -->
                    <div class="px-6 py-4 bg-neutral-50 dark:bg-neutral-800/50 border-b border-neutral-200 dark:border-neutral-700">
                        <div class="flex flex-col sm:flex-row gap-4">
                            <div class="flex-1">
                                <div class="relative">
                                    <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
                                        <i class="fa-solid fa-magnifying-glass text-neutral-400"></i>
                                    </div>
                                    <input type="text" class="w-full pl-10 pr-4 py-2 bg-white dark:bg-neutral-800 border border-neutral-300 dark:border-neutral-600 rounded-lg focus:ring-2 focus:ring-primary-500 focus:border-transparent placeholder-neutral-500" 
                                           id="user-search" placeholder="Search users by name, email, or username..." onkeyup="searchUsers()">
                                </div>
                            </div>
                            <div class="flex gap-2">
                                <select class="px-4 py-2 bg-white dark:bg-neutral-800 border border-neutral-300 dark:border-neutral-600 rounded-lg focus:ring-2 focus:ring-primary-500 focus:border-transparent" id="user-filter" onchange="filterUsers()">
                                    <option value="all">All Users</option>
                                    <option value="active">Active Only</option>
                                    <option value="inactive">Inactive Only</option>
                                    <option value="admin">Admins Only</option>
                                </select>
                                <button type="button" class="px-4 py-2 border border-neutral-300 dark:border-neutral-600 rounded-lg hover:bg-neutral-50 dark:hover:bg-neutral-700 transition-colors" onclick="loadUsers()">
                                    <i class="fa-solid fa-rotate-right"></i>
                                </button>
                            </div>
                        </div>
                    </div>

                    <!-- Users Table -->
                    <div class="overflow-x-auto">
                        <table class="w-full">
                            <thead>
                                <tr class="border-b border-neutral-200 dark:border-neutral-700">
                                    <th class="px-6 py-4 text-left text-xs font-medium text-neutral-600 dark:text-neutral-400 uppercase tracking-wider">User</th>
                                    <th class="px-6 py-4 text-left text-xs font-medium text-neutral-600 dark:text-neutral-400 uppercase tracking-wider">Status</th>
                                    <th class="px-6 py-4 text-left text-xs font-medium text-neutral-600 dark:text-neutral-400 uppercase tracking-wider">Role</th>
                                    <th class="px-6 py-4 text-left text-xs font-medium text-neutral-600 dark:text-neutral-400 uppercase tracking-wider">Last Login</th>
                                    <th class="px-6 py-4 text-right text-xs font-medium text-neutral-600 dark:text-neutral-400 uppercase tracking-wider">Actions</th>
                                </tr>
                            </thead>
                            <tbody id="users-table-body" class="divide-y divide-neutral-200 dark:divide-neutral-700">
                                <tr>
                                    <td colspan="5" class="px-6 py-12 text-center">
                                        <div class="flex flex-col items-center gap-3">
                                            <div class="w-12 h-12 bg-neutral-100 dark:bg-neutral-700 rounded-full flex items-center justify-center">
                                                <i class="fa-solid fa-spinner fa-spin text-neutral-400"></i>
                                            </div>
                                            <p class="text-neutral-600 dark:text-neutral-400">Loading users...</p>
                                        </div>
                                    </td>
                                </tr>
                            </tbody>
                        </table>
                    </div>

                    <!-- Pagination -->
                    <div class="px-6 py-4 border-t border-neutral-200 dark:border-neutral-700">
                        <nav class="flex items-center justify-between">
                            <div class="flex items-center gap-2">
                                <p class="text-sm text-neutral-600 dark:text-neutral-400">
                                    <span id="users-count-display">0 users total</span>
                                </p>
                            </div>
                            <div class="flex items-center gap-2" id="users-pagination">
                                <!-- Pagination will be inserted here -->
                            </div>
                        </nav>
                    </div>
                </div>
            </div>

        <!-- Settings Tab -->
        <div id="settings" role="tabpanel" class="hidden">
            <div class="bg-white dark:bg-neutral-800 border border-neutral-200 dark:border-neutral-700 rounded-lg shadow">
                <div class="px-4 py-3 border-b border-neutral-200 dark:border-neutral-700 flex items-center justify-between">
                    <h5 class="m-0 font-semibold"><i class="fas fa-sliders-h"></i> System Settings</h5>
                    <button type="button" class="px-3 py-1.5 bg-primary-600 hover:bg-primary-700 text-white rounded text-sm" onclick="showCreateSettingModal()">
                        <i class="fas fa-plus"></i> Add Setting
                    </button>
                </div>
                <div class="p-4">
                    <!-- Quick Setting: Inactivity Warning Minutes -->
                    <div class="mb-4 p-4 bg-neutral-50 dark:bg-neutral-900 border border-neutral-200 dark:border-neutral-700 rounded-lg">
                        <div class="flex items-end gap-3 flex-wrap">
                            <div class="flex-1 min-w-[220px]">
                                <label for="inactivityMinutesInput" class="block text-sm font-medium mb-1">Inactivity warning (minutes)</label>
                                <input id="inactivityMinutesInput" type="number" min="1" step="1" class="w-full px-3 py-2 bg-white dark:bg-neutral-800 border border-neutral-300 dark:border-neutral-600 rounded-lg focus:ring-2 focus:ring-primary-500 focus:border-transparent" placeholder="e.g. 240">
                                <p class="text-xs text-neutral-500 dark:text-neutral-400 mt-1">User will see a warning after this many minutes of inactivity. Auto-logout occurs a few minutes after the warning.</p>
                            </div>
                            <div class="flex items-center gap-2">
                                <button type="button" class="px-3 py-2 bg-primary-600 hover:bg-primary-700 text-white rounded" onclick="saveInactivitySetting()">
                                    <i class="fa-solid fa-floppy-disk"></i> Save
                                </button>
                            </div>
                        </div>
                    </div>

                    <div class="overflow-x-auto rounded-lg border border-neutral-200 dark:border-neutral-700">
                        <table class="min-w-full divide-y divide-neutral-200 dark:divide-neutral-700">
                            <thead class="bg-primary-600 text-white">
                                <tr>
                                    <th class="px-4 py-3 text-left text-xs font-semibold uppercase tracking-wider">Setting Key</th>
                                    <th class="px-4 py-3 text-left text-xs font-semibold uppercase tracking-wider">Value</th>
                                    <th class="px-4 py-3 text-left text-xs font-semibold uppercase tracking-wider">Type</th>
                                    <th class="px-4 py-3 text-left text-xs font-semibold uppercase tracking-wider">Description</th>
                                    <th class="px-4 py-3 text-left text-xs font-semibold uppercase tracking-wider">Actions</th>
                                </tr>
                            </thead>
                            <tbody id="settings-table-body" class="bg-white dark:bg-neutral-800 divide-y divide-neutral-200 dark:divide-neutral-700">
                                <tr>
                                    <td colspan="5" class="text-center px-4 py-4 text-neutral-500">Loading settings...</td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>

        <!-- Maintenance Tab -->
        <div id="maintenance" role="tabpanel" class="hidden">
            <div class="flex flex-wrap -mx-4">
                <div class="w-full md:w-1/2 px-4">
                    <div class="bg-white dark:bg-neutral-800 border border-neutral-200 dark:border-neutral-700 rounded-lg shadow">
                        <div class="px-4 py-3 border-b border-neutral-200 dark:border-neutral-700">
                            <h5 class="m-0 font-semibold"><i class="fas fa-database"></i> Database Maintenance</h5>
                        </div>
                        <div class="p-4">
                            <p class="text-neutral-700 dark:text-neutral-300">Optimize database performance and clean up data.</p>
                            <div class="grid gap-2">
                                <button type="button" class="px-4 py-2 bg-warning-600 hover:bg-warning-700 text-white rounded" onclick="vacuumDatabase()">
                                    <i class="fas fa-compress-alt"></i> Vacuum Database
                                </button>
                                <button type="button" class="px-4 py-2 bg-info-600 hover:bg-info-700 text-white rounded" onclick="analyzeDatabase()">
                                    <i class="fas fa-chart-line"></i> Analyze Statistics
                                </button>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="w-full md:w-1/2 px-4 mt-4 md:mt-0">
                    <div class="bg-white dark:bg-neutral-800 border border-neutral-200 dark:border-neutral-700 rounded-lg shadow">
                        <div class="px-4 py-3 border-b border-neutral-200 dark:border-neutral-700">
                            <h5 class="m-0 font-semibold"><i class="fas fa-table"></i> Lookup Tables</h5>
                        </div>
                        <div class="p-4">
                            <div id="lookup-tables">
                                <p class="text-neutral-500 dark:text-neutral-400">Loading lookup table information...</p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="mt-4">
                <div class="bg-white dark:bg-neutral-800 border border-neutral-200 dark:border-neutral-700 rounded-lg shadow">
                    <div class="px-4 py-3 border-b border-neutral-200 dark:border-neutral-700">
                        <h5 class="m-0 font-semibold"><i class="fas fa-history"></i> Maintenance Log</h5>
                    </div>
                    <div class="p-4">
                        <div id="maintenance-log">
                            <p class="text-neutral-500 dark:text-neutral-400">No maintenance operations performed yet.</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- Printers Tab -->
        <div id="printers" role="tabpanel" class="hidden">
            <div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
                <div class="lg:col-span-1">
                    <div class="bg-white dark:bg-neutral-800 border border-neutral-200 dark:border-neutral-700 rounded-lg shadow">
                        <div class="px-4 py-3 border-b border-neutral-200 dark:border-neutral-700 flex items-center justify-between">
                            <h5 class="m-0 font-semibold"><i class="fa-solid fa-list"></i> Printers</h5>
                            <button type="button" class="px-3 py-1.5 bg-primary-600 hover:bg-primary-700 text-white rounded text-sm" onclick="showCreatePrinterForm()">
                                <i class="fas fa-plus"></i> Add
                            </button>
                        </div>
                        <div class="p-4">
                            <ul id="printers-list" class="divide-y divide-neutral-200 dark:divide-neutral-700">
                                <li class="py-2 text-neutral-500">Loading...</li>
                            </ul>
                        </div>
                    </div>
                </div>
                <div class="lg:col-span-2">
                    <div class="bg-white dark:bg-neutral-800 border border-neutral-200 dark:border-neutral-700 rounded-lg shadow">
                        <div class="px-4 py-3 border-b border-neutral-200 dark:border-neutral-700">
                            <h5 class="m-0 font-semibold"><i class="fa-solid fa-pen-to-square"></i> Edit Printer</h5>
                        </div>
                        <div class="p-4">
                            <form id="printer-form" class="grid grid-cols-1 md:grid-cols-2 gap-4" onsubmit="return savePrinter(event)">
                                <div>
                                    <label class="block text-sm font-medium mb-1">Printer Name *</label>
                                    <input id="printer_name" class="w-full px-3 py-2 bg-white dark:bg-neutral-800 border border-neutral-300 dark:border-neutral-600 rounded-lg" required>
                                </div>
                                <div>
                                    <label class="block text-sm font-medium mb-1">Description</label>
                                    <input id="description" class="w-full px-3 py-2 bg-white dark:bg-neutral-800 border border-neutral-300 dark:border-neutral-600 rounded-lg">
                                </div>
                                <div>
                                    <label class="block text-sm font-medium mb-1">Driver</label>
                                    <input id="driver" class="w-full px-3 py-2 bg-white dark:bg-neutral-800 border border-neutral-300 dark:border-neutral-600 rounded-lg">
                                </div>
                                <div>
                                    <label class="block text-sm font-medium mb-1">Port</label>
                                    <input id="port" class="w-full px-3 py-2 bg-white dark:bg-neutral-800 border border-neutral-300 dark:border-neutral-600 rounded-lg">
                                </div>
                                <div>
                                    <label class="block text-sm font-medium mb-1">Number</label>
                                    <input id="number" type="number" class="w-full px-3 py-2 bg-white dark:bg-neutral-800 border border-neutral-300 dark:border-neutral-600 rounded-lg">
                                </div>
                                <div class="flex items-center gap-2 mt-6">
                                    <input id="default_printer" type="checkbox" class="rounded border-neutral-300 text-primary-600 focus:ring-primary-500">
                                    <label class="text-sm">Default Printer</label>
                                </div>

                                <div class="md:col-span-2 grid grid-cols-1 md:grid-cols-2 gap-4 mt-2">
                                    <div>
                                        <label class="block text-sm font-medium mb-1">Page Break</label>
                                        <input id="page_break" class="w-full px-3 py-2 bg-white dark:bg-neutral-800 border border-neutral-300 dark:border-neutral-600 rounded-lg" placeholder="e.g., \f">
                                    </div>
                                    <div>
                                        <label class="block text-sm font-medium mb-1">Setup Sequence</label>
                                        <input id="setup_st" class="w-full px-3 py-2 bg-white dark:bg-neutral-800 border border-neutral-300 dark:border-neutral-600 rounded-lg">
                                    </div>
                                    <div>
                                        <label class="block text-sm font-medium mb-1">Reset Sequence</label>
                                        <input id="reset_st" class="w-full px-3 py-2 bg-white dark:bg-neutral-800 border border-neutral-300 dark:border-neutral-600 rounded-lg">
                                    </div>
                                    <div>
                                        <label class="block text-sm font-medium mb-1">Bold Start</label>
                                        <input id="b_bold" class="w-full px-3 py-2 bg-white dark:bg-neutral-800 border border-neutral-300 dark:border-neutral-600 rounded-lg">
                                    </div>
                                    <div>
                                        <label class="block text-sm font-medium mb-1">Bold End</label>
                                        <input id="e_bold" class="w-full px-3 py-2 bg-white dark:bg-neutral-800 border border-neutral-300 dark:border-neutral-600 rounded-lg">
                                    </div>
                                    <div>
                                        <label class="block text-sm font-medium mb-1">Underline Start</label>
                                        <input id="b_underline" class="w-full px-3 py-2 bg-white dark:bg-neutral-800 border border-neutral-300 dark:border-neutral-600 rounded-lg">
                                    </div>
                                    <div>
                                        <label class="block text-sm font-medium mb-1">Underline End</label>
                                        <input id="e_underline" class="w-full px-3 py-2 bg-white dark:bg-neutral-800 border border-neutral-300 dark:border-neutral-600 rounded-lg">
                                    </div>
                                </div>

                                <div class="md:col-span-2 grid grid-cols-2 md:grid-cols-4 gap-3 mt-2">
                                    <label class="inline-flex items-center gap-2"><input id="phone_book" type="checkbox" class="rounded border-neutral-300 text-primary-600 focus:ring-primary-500"> Phone Book</label>
                                    <label class="inline-flex items-center gap-2"><input id="rolodex_info" type="checkbox" class="rounded border-neutral-300 text-primary-600 focus:ring-primary-500"> Rolodex Info</label>
                                    <label class="inline-flex items-center gap-2"><input id="envelope" type="checkbox" class="rounded border-neutral-300 text-primary-600 focus:ring-primary-500"> Envelope</label>
                                    <label class="inline-flex items-center gap-2"><input id="file_cabinet" type="checkbox" class="rounded border-neutral-300 text-primary-600 focus:ring-primary-500"> File Cabinet</label>
                                    <label class="inline-flex items-center gap-2"><input id="accounts" type="checkbox" class="rounded border-neutral-300 text-primary-600 focus:ring-primary-500"> Accounts</label>
                                    <label class="inline-flex items-center gap-2"><input id="statements" type="checkbox" class="rounded border-neutral-300 text-primary-600 focus:ring-primary-500"> Statements</label>
                                    <label class="inline-flex items-center gap-2"><input id="calendar" type="checkbox" class="rounded border-neutral-300 text-primary-600 focus:ring-primary-500"> Calendar</label>
                                </div>

                                <div class="md:col-span-2 flex gap-2 mt-4">
                                    <button type="submit" class="px-4 py-2 bg-primary-600 hover:bg-primary-700 text-white rounded">
                                        <i class="fa-solid fa-floppy-disk"></i> Save
                                    </button>
                                    <button type="button" class="px-4 py-2 border border-neutral-300 dark:border-neutral-600 rounded" onclick="clearPrinterForm()">Clear</button>
                                </div>
                            </form>
                        </div>
                    </div>
                </div>
            </div>
        </div>


        <!-- QDRO Notifications Tab -->
        <div id="qdro-notifications" role="tabpanel" class="hidden">
            <div class="grid grid-cols-1 gap-6">
                <div class="bg-white dark:bg-neutral-800 border border-neutral-200 dark:border-neutral-700 rounded-lg shadow">
                    <div class="px-4 py-3 border-b border-neutral-200 dark:border-neutral-700 flex items-center justify-between">
                        <h5 class="m-0 font-semibold"><i class="fa-solid fa-bell"></i> QDRO Notification Routes</h5>
                        <div class="flex items-center gap-2">
                            <select id="qdro-route-scope-filter" class="px-2 py-1 bg-white dark:bg-neutral-800 border border-neutral-300 dark:border-neutral-600 rounded text-sm">
                                <option value="">All scopes</option>
                                <option value="file">file</option>
                                <option value="plan">plan</option>
                            </select>
                            <button type="button" class="px-3 py-1.5 bg-primary-600 hover:bg-primary-700 text-white rounded text-sm" onclick="showCreateNotificationRouteModal()">
                                <i class="fas fa-plus"></i> Add Route
                            </button>
                        </div>
                    </div>
                    <div class="p-4">
                        <div class="overflow-x-auto rounded-lg border border-neutral-200 dark:border-neutral-700">
                            <table class="min-w-full divide-y divide-neutral-200 dark:divide-neutral-700">
                                <thead class="bg-primary-600 text-white">
                                    <tr>
                                        <th class="px-4 py-3 text-left text-xs font-semibold uppercase tracking-wider">Scope</th>
                                        <th class="px-4 py-3 text-left text-xs font-semibold uppercase tracking-wider">Identifier</th>
                                        <th class="px-4 py-3 text-left text-xs font-semibold uppercase tracking-wider">Email To</th>
                                        <th class="px-4 py-3 text-left text-xs font-semibold uppercase tracking-wider">Webhook URL</th>
                                        <th class="px-4 py-3 text-left text-xs font-semibold uppercase tracking-wider">Actions</th>
                                    </tr>
                                </thead>
                                <tbody id="qdro-routes-table-body" class="bg-white dark:bg-neutral-800 divide-y divide-neutral-200 dark:divide-neutral-700">
                                    <tr>
                                        <td colspan="5" class="text-center px-4 py-4 text-neutral-500">Loading routes...</td>
                                    </tr>
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </div>


        <!-- Backup Tab -->
        <div id="backup" role="tabpanel" class="hidden">
            <div class="flex flex-wrap -mx-4">
                <div class="w-full md:w-1/2 px-4">
                    <div class="bg-white dark:bg-neutral-800 border border-neutral-200 dark:border-neutral-700 rounded-lg shadow">
                        <div class="px-4 py-3 border-b border-neutral-200 dark:border-neutral-700">
                            <h5 class="m-0 font-semibold"><i class="fas fa-download"></i> Create Backup</h5>
                        </div>
                        <div class="p-4">
                            <p class="text-neutral-700 dark:text-neutral-300">Create a manual backup of the database.</p>
                            <button type="button" class="w-full px-4 py-2 bg-success-600 hover:bg-success-700 text-white rounded text-lg" onclick="createBackup()">
                                <i class="fas fa-download"></i> Create Backup Now
                            </button>
                        </div>
                    </div>
                </div>
                <div class="w-full md:w-1/2 px-4 mt-4 md:mt-0">
                    <div class="bg-white dark:bg-neutral-800 border border-neutral-200 dark:border-neutral-700 rounded-lg shadow">
                        <div class="px-4 py-3 border-b border-neutral-200 dark:border-neutral-700">
                            <h5 class="m-0 font-semibold"><i class="fas fa-info-circle"></i> Backup Information</h5>
                        </div>
                        <div class="p-4">
                            <p><strong>Last Backup:</strong> <span id="last-backup">Unknown</span></p>
                            <p><strong>Backup Location:</strong> ./backups/</p>
                            <p><strong>Retention:</strong> 10 most recent backups</p>
                        </div>
                    </div>
                </div>
            </div>

            <div class="mt-4">
                <div class="bg-white dark:bg-neutral-800 border border-neutral-200 dark:border-neutral-700 rounded-lg shadow">
                    <div class="px-4 py-3 border-b border-neutral-200 dark:border-neutral-700">
                        <h5 class="m-0 font-semibold"><i class="fas fa-list"></i> Available Backups</h5>
                    </div>
                    <div class="p-4">
                        <div class="overflow-x-auto rounded-lg border border-neutral-200 dark:border-neutral-700">
                            <table class="min-w-full divide-y divide-neutral-200 dark:divide-neutral-700">
                                <thead class="bg-primary-600 text-white">
                                    <tr>
                                        <th class="px-4 py-3 text-left text-xs font-semibold uppercase tracking-wider">Filename</th>
                                        <th class="px-4 py-3 text-left text-xs font-semibold uppercase tracking-wider">Size</th>
                                        <th class="px-4 py-3 text-left text-xs font-semibold uppercase tracking-wider">Created</th>
                                        <th class="px-4 py-3 text-left text-xs font-semibold uppercase tracking-wider">Type</th>
                                        <th class="px-4 py-3 text-left text-xs font-semibold uppercase tracking-wider">Actions</th>
                                    </tr>
                                </thead>
                                <tbody id="backup-list" class="bg-white dark:bg-neutral-800 divide-y divide-neutral-200 dark:divide-neutral-700">
                                    <tr>
                                        <td colspan="5" class="text-center px-4 py-4 text-neutral-500">Loading backups...</td>
                                    </tr>
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- Issues Tab -->
        <div id="issues" role="tabpanel" class="hidden">
            <div class="mb-4 grid grid-cols-1 md:grid-cols-4 gap-4">
                <!-- Issue Statistics Cards -->
                <div class="bg-white dark:bg-neutral-800 border border-danger-300 dark:border-danger-700 rounded-lg shadow p-4 text-center">
                    <h2 class="text-danger-600 text-2xl font-semibold" id="high-priority-count">0</h2>
                    <h6>High Priority</h6>
                </div>
                <div class="bg-white dark:bg-neutral-800 border border-warning-300 dark:border-warning-700 rounded-lg shadow p-4 text-center">
                    <h2 class="text-warning-600 text-2xl font-semibold" id="open-issues-count">0</h2>
                    <h6>Open Issues</h6>
                </div>
                <div class="bg-white dark:bg-neutral-800 border border-info-300 dark:border-info-700 rounded-lg shadow p-4 text-center">
                    <h2 class="text-info-600 text-2xl font-semibold" id="in-progress-count">0</h2>
                    <h6>In Progress</h6>
                </div>
                <div class="bg-white dark:bg-neutral-800 border border-success-300 dark:border-success-700 rounded-lg shadow p-4 text-center">
                    <h2 class="text-success-600 text-2xl font-semibold" id="resolved-count">0</h2>
                    <h6>Resolved</h6>
                </div>
            </div>

            <!-- Issue Management -->
            <div class="bg-white dark:bg-neutral-800 border border-neutral-200 dark:border-neutral-700 rounded-lg shadow">
                <div class="px-4 py-3 border-b border-neutral-200 dark:border-neutral-700 flex items-center justify-between">
                    <h5 class="m-0 font-semibold"><i class="fas fa-bug"></i> Internal Issues & Bugs</h5>
                    <div class="flex items-center gap-2">
                        <button type="button" class="px-3 py-1.5 border border-primary-600 text-primary-700 dark:text-primary-200 rounded text-sm hover:bg-primary-50 dark:hover:bg-primary-900/20" onclick="loadIssues()">
                            <i class="fas fa-sync"></i> Refresh
                        </button>
                        <button type="button" class="px-3 py-1.5 bg-primary-600 hover:bg-primary-700 text-white rounded text-sm" onclick="openSupportModal()">
                            <i class="fas fa-plus"></i> New Issue
                        </button>
                    </div>
                </div>
                <div class="p-4">
                    <!-- Filters -->
                    <div class="flex flex-wrap -mx-2 mb-3 items-center">
                        <div class="w-full md:w-1/4 px-2 mb-3 md:mb-0">
                            <select class="w-full px-3 py-2 bg-white dark:bg-neutral-800 border border-neutral-300 dark:border-neutral-600 rounded-lg focus:ring-2 focus:ring-primary-500 focus:border-transparent text-sm" id="issueStatusFilter" onchange="filterIssues()">
                                <option value="">All Statuses</option>
                                <option value="open">Open</option>
                                <option value="in_progress">In Progress</option>
                                <option value="resolved">Resolved</option>
                                <option value="closed">Closed</option>
                            </select>
                        </div>
                        <div class="w-full md:w-1/4 px-2 mb-3 md:mb-0">
                            <select class="w-full px-3 py-2 bg-white dark:bg-neutral-800 border border-neutral-300 dark:border-neutral-600 rounded-lg focus:ring-2 focus:ring-primary-500 focus:border-transparent text-sm" id="issuePriorityFilter" onchange="filterIssues()">
                                <option value="">All Priorities</option>
                                <option value="urgent">Urgent</option>
                                <option value="high">High</option>
                                <option value="medium">Medium</option>
                                <option value="low">Low</option>
                            </select>
                        </div>
                        <div class="w-full md:w-1/4 px-2 mb-3 md:mb-0">
                            <select class="w-full px-3 py-2 bg-white dark:bg-neutral-800 border border-neutral-300 dark:border-neutral-600 rounded-lg focus:ring-2 focus:ring-primary-500 focus:border-transparent text-sm" id="issueCategoryFilter" onchange="filterIssues()">
                                <option value="">All Categories</option>
                                <option value="bug_report">Bug Reports</option>
                                <option value="qa_issue">QA Issues</option>
                                <option value="feature_request">Feature Requests</option>
                                <option value="database_issue">Database Issues</option>
                                <option value="system_error">System Errors</option>
                                <option value="performance">Performance</option>
                                <option value="user_access">User Access</option>
                                <option value="configuration">Configuration</option>
                                <option value="documentation">Documentation</option>
                                <option value="testing">Testing</option>
                            </select>
                        </div>
                        <div class="w-full md:w-1/4 px-2">
                            <label class="inline-flex items-center gap-2 text-sm">
                                <input class="rounded border-neutral-300 text-primary-600 focus:ring-primary-500" type="checkbox" id="assignedToMeFilter" onchange="filterIssues()">
                                <span>Assigned to me</span>
                            </label>
                        </div>
                    </div>

                    <!-- Issues Table -->
                    <div class="overflow-x-auto rounded-lg border border-neutral-200 dark:border-neutral-700">
                        <table class="min-w-full divide-y divide-neutral-200 dark:divide-neutral-700">
                            <thead class="bg-primary-600 text-white">
                                <tr>
                                    <th class="px-4 py-3 text-left text-xs font-semibold uppercase tracking-wider">ID</th>
                                    <th class="px-4 py-3 text-left text-xs font-semibold uppercase tracking-wider">Type</th>
                                    <th class="px-4 py-3 text-left text-xs font-semibold uppercase tracking-wider">Priority</th>
                                    <th class="px-4 py-3 text-left text-xs font-semibold uppercase tracking-wider">Subject</th>
                                    <th class="px-4 py-3 text-left text-xs font-semibold uppercase tracking-wider">Reporter</th>
                                    <th class="px-4 py-3 text-left text-xs font-semibold uppercase tracking-wider">Status</th>
                                    <th class="px-4 py-3 text-left text-xs font-semibold uppercase tracking-wider">Assigned</th>
                                    <th class="px-4 py-3 text-left text-xs font-semibold uppercase tracking-wider">Created</th>
                                    <th class="px-4 py-3 text-left text-xs font-semibold uppercase tracking-wider">Actions</th>
                                </tr>
                            </thead>
                            <tbody id="issues-table-body" class="bg-white dark:bg-neutral-800 divide-y divide-neutral-200 dark:divide-neutral-700">
                                <tr>
                                    <td colspan="9" class="text-center px-4 py-4 text-neutral-500">Loading issues...</td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Issue Detail Modal -->
<div id="issueDetailModal" class="hidden fixed inset-0 bg-black bg-opacity-50 z-50 p-4">
    <div class="mx-auto w-full max-w-7xl max-h-[90vh] overflow-y-auto">
        <div class="bg-white dark:bg-neutral-800 rounded-xl shadow-xl border border-neutral-200 dark:border-neutral-700">
            <div class="flex items-center justify-between px-4 py-3 border-b border-neutral-200 dark:border-neutral-700">
                <h5 class="font-semibold flex items-center gap-2" id="issueDetailModalTitle">
                    <i class="fas fa-bug"></i>
                    <span>Issue Details</span>
                </h5>
                <button type="button" class="text-neutral-500 hover:text-neutral-700 dark:text-neutral-400 dark:hover:text-neutral-200" onclick="closeModal('issueDetailModal')">
                    <i class="fa-solid fa-xmark"></i>
                </button>
            </div>
            <div class="px-4 py-4">
                <div class="flex flex-wrap -mx-4">
                    <!-- Left Column - Issue Details -->
                    <div class="w-full md:w-2/3 px-4">
                    <div class="bg-white dark:bg-neutral-800 border border-neutral-200 dark:border-neutral-700 rounded-lg shadow mb-3">
                            <div class="px-4 py-3 border-b border-neutral-200 dark:border-neutral-700">
                                <div class="flex items-center justify-between">
                                    <div class="flex items-center gap-2">
                                        <span class="px-2 py-1 rounded bg-primary-600 text-white text-xs" id="issueDetailNumber">ST-2025-XXXX</span>
                                        <span class="px-2 py-1 rounded bg-primary-100 text-primary-700 dark:bg-primary-800 dark:text-primary-200 text-xs" id="issueDetailCategory">category</span>
                                        <span class="px-2 py-1 rounded bg-neutral-200 dark:bg-neutral-700 text-xs" id="issueDetailPriority">priority</span>
                                    </div>
                                    <span class="px-2 py-1 rounded text-xs bg-neutral-200 dark:bg-neutral-700" id="issueDetailStatus">status</span>
                                </div>
                            </div>
                            <div class="p-4">
                                <h5 class="font-semibold" id="issueDetailSubject">Issue subject</h5>
                                <div class="mt-3">
                                    <h6 class="font-medium">Description:</h6>
                                    <div id="issueDetailDescription" class="whitespace-pre-wrap bg-neutral-50 dark:bg-neutral-800/50 p-4 rounded"></div>
                                </div>
                                <div class="mt-3">
                                    <h6 class="font-medium">Context Information:</h6>
                                    <div class="flex flex-wrap -mx-4">
                                        <div class="w-full md:w-1/2 px-4">
                                            <small><strong>Page:</strong> <span id="issueDetailPage">-</span></small>
                                        </div>
                                        <div class="w-full md:w-1/2 px-4">
                                            <small><strong>Browser:</strong> <span id="issueDetailBrowser">-</span></small>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <!-- Responses Section -->
                        <div class="bg-white dark:bg-neutral-800 border border-neutral-200 dark:border-neutral-700 rounded-lg shadow">
                            <div class="px-4 py-3 border-b border-neutral-200 dark:border-neutral-700">
                                <h6 class="m-0 font-semibold">Comments & Updates</h6>
                            </div>
                            <div class="p-4">
                                <div id="issueResponses">
                                    <p class="text-neutral-500 dark:text-neutral-400">No comments yet.</p>
                                </div>
                                
                                <!-- Add Response Form -->
                                <div class="mt-3 border-t pt-3">
                                    <textarea class="w-full px-3 py-2 bg-white dark:bg-neutral-800 border border-neutral-300 dark:border-neutral-600 rounded-lg mb-2" id="newResponseText" rows="3" placeholder="Add a comment..."></textarea>
                                    <div class="flex items-center justify-between">
                                        <label class="inline-flex items-center gap-2">
                                            <input class="rounded border-neutral-300 text-primary-600 focus:ring-primary-500" type="checkbox" id="internalResponseCheck">
                                            <span>Internal note (not visible to reporter)</span>
                                        </label>
                                        <button type="button" class="px-3 py-1.5 bg-primary-600 hover:bg-primary-700 text-white rounded text-sm" onclick="addResponse()">
                                            <i class="fas fa-comment"></i> Add Comment
                                        </button>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- Right Column - Issue Management -->
                    <div class="w-full md:w-1/3 px-4">
                        <div class="bg-white dark:bg-neutral-800 border border-neutral-200 dark:border-neutral-700 rounded-lg shadow mb-3">
                            <div class="px-4 py-3 border-b border-neutral-200 dark:border-neutral-700">
                                <h6 class="m-0 font-semibold">Issue Management</h6>
                            </div>
                            <div class="p-4">
                                <form id="issueUpdateForm">
                                    <input type="hidden" id="currentIssueId">
                                    
                                    <div class="mb-3">
                                        <label class="block text-sm font-medium mb-1">Status</label>
                                        <select class="w-full px-3 py-2 bg-white dark:bg-neutral-800 border border-neutral-300 dark:border-neutral-600 rounded-lg text-sm" id="updateStatus">
                                            <option value="open">Open</option>
                                            <option value="in_progress">In Progress</option>
                                            <option value="resolved">Resolved</option>
                                            <option value="closed">Closed</option>
                                        </select>
                                    </div>
                                    
                                    <div class="mb-3">
                                        <label class="block text-sm font-medium mb-1">Priority</label>
                                        <select class="w-full px-3 py-2 bg-white dark:bg-neutral-800 border border-neutral-300 dark:border-neutral-600 rounded-lg text-sm" id="updatePriority">
                                            <option value="low">Low</option>
                                            <option value="medium">Medium</option>
                                            <option value="high">High</option>
                                            <option value="urgent">Urgent</option>
                                        </select>
                                    </div>
                                    
                                    <div class="mb-3">
                                        <label class="block text-sm font-medium mb-1">Assign To</label>
                                        <select class="w-full px-3 py-2 bg-white dark:bg-neutral-800 border border-neutral-300 dark:border-neutral-600 rounded-lg text-sm" id="updateAssignee">
                                            <option value="">Unassigned</option>
                                            <!-- Will be populated with users -->
                                        </select>
                                    </div>
                                    
                                    <button type="button" class="w-full px-3 py-2 bg-success-600 hover:bg-success-700 text-white rounded text-sm" onclick="updateIssue()">
                                        <i class="fas fa-save"></i> Update Issue
                                    </button>
                                </form>
                            </div>
                        </div>

                        <div class="bg-white dark:bg-neutral-800 border border-neutral-200 dark:border-neutral-700 rounded-lg shadow">
                            <div class="px-4 py-3 border-b border-neutral-200 dark:border-neutral-700">
                                <h6 class="m-0 font-semibold">Issue Info</h6>
                            </div>
                            <div class="p-4">
                                <div class="mb-2">
                                   <small class="text-neutral-500">Reporter:</small><br>
                                    <span id="issueDetailReporter">-</span>
                                </div>
                                <div class="mb-2">
                                   <small class="text-neutral-500">Email:</small><br>
                                    <span id="issueDetailEmail">-</span>
                                </div>
                                <div class="mb-2">
                                   <small class="text-neutral-500">Created:</small><br>
                                    <span id="issueDetailCreated">-</span>
                                </div>
                                <div class="mb-2">
                                   <small class="text-neutral-500">Last Updated:</small><br>
                                    <span id="issueDetailUpdated">-</span>
                                </div>
                                <div class="mb-2" id="issueResolvedInfo" style="display: none;">
                                   <small class="text-neutral-500">Resolved:</small><br>
                                    <span id="issueDetailResolved">-</span>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- User Management Modal -->
<div id="userModal" class="hidden fixed inset-0 bg-black bg-opacity-50 z-50 p-4">
    <div class="mx-auto w-full max-w-xl">
        <div class="bg-white dark:bg-neutral-800 rounded-xl shadow-xl border border-neutral-200 dark:border-neutral-700">
            <div class="flex items-center justify-between px-4 py-3 border-b border-neutral-200 dark:border-neutral-700">
                <h5 class="font-semibold" id="userModalTitle">Add User</h5>
                <button type="button" class="text-neutral-500 hover:text-neutral-700 dark:text-neutral-400 dark:hover:text-neutral-200" onclick="closeModal('userModal')">
                    <i class="fa-solid fa-xmark"></i>
                </button>
            </div>
            <div class="px-4 py-4">
                <form id="userForm">
                    <input type="hidden" id="userId">
                    <div class="grid grid-cols-1 md:grid-cols-2 gap-3">
                        <div>
                            <label for="username" class="block text-sm font-medium mb-1">Username *</label>
                            <input type="text" class="w-full px-3 py-2 bg-white dark:bg-neutral-800 border border-neutral-300 dark:border-neutral-600 rounded-lg" id="username" required>
                        </div>
                        <div>
                            <label for="email" class="block text-sm font-medium mb-1">Email *</label>
                            <input type="email" class="w-full px-3 py-2 bg-white dark:bg-neutral-800 border border-neutral-300 dark:border-neutral-600 rounded-lg" id="email" required>
                        </div>
                    </div>
                    <div class="grid grid-cols-1 md:grid-cols-2 gap-3">
                        <div>
                            <label for="firstName" class="block text-sm font-medium mb-1">First Name</label>
                            <input type="text" class="w-full px-3 py-2 bg-white dark:bg-neutral-800 border border-neutral-300 dark:border-neutral-600 rounded-lg" id="firstName">
                        </div>
                        <div>
                            <label for="lastName" class="block text-sm font-medium mb-1">Last Name</label>
                            <input type="text" class="w-full px-3 py-2 bg-white dark:bg-neutral-800 border border-neutral-300 dark:border-neutral-600 rounded-lg" id="lastName">
                        </div>
                    </div>
                    <div class="mb-3" id="passwordFields">
                        <label for="password" class="block text-sm font-medium mb-1">Password *</label>
                        <input type="password" class="w-full px-3 py-2 bg-white dark:bg-neutral-800 border border-neutral-300 dark:border-neutral-600 rounded-lg" id="password" required>
                    </div>
                    <div class="grid grid-cols-1 md:grid-cols-2 gap-3">
                        <div>
                            <label class="inline-flex items-center gap-2">
                                <input class="rounded border-neutral-300 text-primary-600 focus:ring-primary-500" type="checkbox" id="isAdmin">
                                <span>Administrator</span>
                            </label>
                        </div>
                        <div>
                            <label class="inline-flex items-center gap-2">
                                <input class="rounded border-neutral-300 text-primary-600 focus:ring-primary-500" type="checkbox" id="isActive" checked>
                                <span>Active</span>
                            </label>
                        </div>
                    </div>
                </form>
            </div>
            <div class="flex items-center justify-end gap-2 px-4 py-3 border-t border-neutral-200 dark:border-neutral-700">
                <button type="button" class="px-3 py-1.5 border border-neutral-300 dark:border-neutral-600 rounded hover:bg-neutral-50 dark:hover:bg-neutral-700" onclick="closeModal('userModal')">Cancel</button>
                <button type="button" class="px-3 py-1.5 bg-primary-600 hover:bg-primary-700 text-white rounded" onclick="saveUser()">Save</button>
            </div>
        </div>
    </div>
</div>

<!-- QDRO Notification Route Modal -->
<div id="qdroRouteModal" class="hidden fixed inset-0 bg-black bg-opacity-50 z-50 p-4">
    <div class="mx-auto w-full max-w-xl">
        <div class="bg-white dark:bg-neutral-800 rounded-xl shadow-xl border border-neutral-200 dark:border-neutral-700">
            <div class="flex items-center justify-between px-4 py-3 border-b border-neutral-200 dark:border-neutral-700">
                <h5 class="font-semibold" id="qdroRouteModalTitle">Add Route</h5>
                <button type="button" class="text-neutral-500 hover:text-neutral-700 dark:text-neutral-400 dark:hover:text-neutral-200" onclick="closeModal('qdroRouteModal')">
                    <i class="fa-solid fa-xmark"></i>
                </button>
            </div>
            <div class="px-4 py-4">
                <form id="qdroRouteForm">
                    <input type="hidden" id="qdroRouteMode" value="create">
                    <div class="grid grid-cols-1 md:grid-cols-2 gap-3">
                        <div>
                            <label class="block text-sm font-medium mb-1">Scope *</label>
                            <select id="routeScope" class="w-full px-3 py-2 bg-white dark:bg-neutral-800 border border-neutral-300 dark:border-neutral-600 rounded-lg" required>
                                <option value="">Select...</option>
                                <option value="file">file</option>
                                <option value="plan">plan</option>
                            </select>
                        </div>
                        <div>
                            <label class="block text-sm font-medium mb-1">Identifier *</label>
                            <input id="routeIdentifier" class="w-full px-3 py-2 bg-white dark:bg-neutral-800 border border-neutral-300 dark:border-neutral-600 rounded-lg" placeholder="file_no or plan_id" required>
                        </div>
                    </div>
                    <div class="mt-3">
                        <label class="block text-sm font-medium mb-1">Email To</label>
                        <input id="routeEmailTo" type="email" class="w-full px-3 py-2 bg-white dark:bg-neutral-800 border border-neutral-300 dark:border-neutral-600 rounded-lg" placeholder="name@example.com">
                    </div>
                    <div class="mt-3">
                        <label class="block text-sm font-medium mb-1">Webhook URL</label>
                        <input id="routeWebhookUrl" type="url" class="w-full px-3 py-2 bg-white dark:bg-neutral-800 border border-neutral-300 dark:border-neutral-600 rounded-lg" placeholder="https://...">
                    </div>
                    <div class="mt-3">
                        <label class="block text-sm font-medium mb-1">Webhook Secret</label>
                        <div class="relative">
                            <input id="routeWebhookSecret" type="password" class="w-full px-3 py-2 pr-20 bg-white dark:bg-neutral-800 border border-neutral-300 dark:border-neutral-600 rounded-lg" placeholder="Optional (leave blank to keep existing)">
                            <div class="absolute inset-y-0 right-0 flex items-center">
                                <button type="button" class="px-2 py-1 text-neutral-500 hover:text-neutral-700 dark:text-neutral-400 dark:hover:text-neutral-200" onclick="toggleWebhookSecretVisibility()" title="Toggle visibility">
                                    <i id="webhook-secret-eye" class="fas fa-eye text-sm"></i>
                                </button>
                                <button type="button" class="px-2 py-1 text-primary-600 hover:text-primary-800 dark:text-primary-400 dark:hover:text-primary-200" onclick="generateRandomSecret()" title="Generate random secret">
                                    <i class="fas fa-dice text-sm"></i>
                                </button>
                            </div>
                        </div>
                    </div>
                    <p class="text-xs text-neutral-500 dark:text-neutral-400 mt-2">At least one of Email or Webhook URL must be provided. Secret is only updated if a new value is entered.</p>
                </form>
            </div>
            <div class="flex items-center justify-end gap-2 px-4 py-3 border-t border-neutral-200 dark:border-neutral-700">
                <button type="button" class="px-3 py-1.5 border border-neutral-300 dark:border-neutral-600 rounded hover:bg-neutral-50 dark:hover:bg-neutral-700" onclick="closeModal('qdroRouteModal')">Cancel</button>
                <button type="button" class="px-3 py-1.5 bg-primary-600 hover:bg-primary-700 text-white rounded" onclick="saveNotificationRoute()">Save</button>
            </div>
        </div>
    </div>
    
</div>

<!-- Settings Modal -->
<div id="settingModal" class="hidden fixed inset-0 bg-black bg-opacity-50 z-50 p-4">
    <div class="mx-auto w-full max-w-xl">
        <div class="bg-white dark:bg-neutral-800 rounded-xl shadow-xl border border-neutral-200 dark:border-neutral-700">
            <div class="flex items-center justify-between px-4 py-3 border-b border-neutral-200 dark:border-neutral-700">
                <h5 class="font-semibold" id="settingModalTitle">Add Setting</h5>
                <button type="button" class="text-neutral-500 hover:text-neutral-700 dark:text-neutral-400 dark:hover:text-neutral-200" onclick="closeModal('settingModal')">
                    <i class="fa-solid fa-xmark"></i>
                </button>
            </div>
            <div class="px-4 py-4">
                <form id="settingForm">
                    <div class="mb-3">
                        <label for="settingKey" class="block text-sm font-medium mb-1">Setting Key *</label>
                        <input type="text" class="w-full px-3 py-2 bg-white dark:bg-neutral-800 border border-neutral-300 dark:border-neutral-600 rounded-lg" id="settingKey" required>
                    </div>
                    <div class="mb-3">
                        <label for="settingValue" class="block text-sm font-medium mb-1">Setting Value *</label>
                        <input type="text" class="w-full px-3 py-2 bg-white dark:bg-neutral-800 border border-neutral-300 dark:border-neutral-600 rounded-lg" id="settingValue" required>
                    </div>
                    <div class="mb-3">
                        <label for="settingType" class="block text-sm font-medium mb-1">Setting Type</label>
                        <select class="w-full px-3 py-2 bg-white dark:bg-neutral-800 border border-neutral-300 dark:border-neutral-600 rounded-lg" id="settingType">
                            <option value="STRING">String</option>
                            <option value="INTEGER">Integer</option>
                            <option value="FLOAT">Float</option>
                            <option value="BOOLEAN">Boolean</option>
                        </select>
                    </div>
                    <div class="mb-3">
                        <label for="settingDescription" class="block text-sm font-medium mb-1">Description</label>
                        <textarea class="w-full px-3 py-2 bg-white dark:bg-neutral-800 border border-neutral-300 dark:border-neutral-600 rounded-lg" id="settingDescription" rows="3"></textarea>
                    </div>
                </form>
            </div>
            <div class="flex items-center justify-end gap-2 px-4 py-3 border-t border-neutral-200 dark:border-neutral-700">
                <button type="button" class="px-3 py-1.5 border border-neutral-300 dark:border-neutral-600 rounded hover:bg-neutral-50 dark:hover:bg-neutral-700" onclick="closeModal('settingModal')">Cancel</button>
                <button type="button" class="px-3 py-1.5 bg-primary-600 hover:bg-primary-700 text-white rounded" onclick="saveSetting()">Save</button>
            </div>
        </div>
    </div>
</div>

<!-- Password Reset Modal -->
<div id="passwordModal" class="hidden fixed inset-0 bg-black bg-opacity-50 z-50 p-4">
    <div class="mx-auto w-full max-w-md">
        <div class="bg-white dark:bg-neutral-800 rounded-xl shadow-xl border border-neutral-200 dark:border-neutral-700">
            <div class="flex items-center justify-between px-4 py-3 border-b border-neutral-200 dark:border-neutral-700">
                <h5 class="font-semibold">Reset Password</h5>
                <button type="button" class="text-neutral-500 hover:text-neutral-700 dark:text-neutral-400 dark:hover:text-neutral-200" onclick="closeModal('passwordModal')">
                    <i class="fa-solid fa-xmark"></i>
                </button>
            </div>
            <div class="px-4 py-4">
                <form id="passwordForm">
                    <input type="hidden" id="resetUserId">
                    <div class="mb-3">
                        <label for="newPassword" class="block text-sm font-medium mb-1">New Password *</label>
                        <input type="password" class="w-full px-3 py-2 bg-white dark:bg-neutral-800 border border-neutral-300 dark:border-neutral-600 rounded-lg" id="newPassword" required>
                    </div>
                    <div class="mb-3">
                        <label for="confirmPassword" class="block text-sm font-medium mb-1">Confirm Password *</label>
                        <input type="password" class="w-full px-3 py-2 bg-white dark:bg-neutral-800 border border-neutral-300 dark:border-neutral-600 rounded-lg" id="confirmPassword" required>
                    </div>
                </form>
            </div>
            <div class="flex items-center justify-end gap-2 px-4 py-3 border-t border-neutral-200 dark:border-neutral-700">
                <button type="button" class="px-3 py-1.5 border border-neutral-300 dark:border-neutral-600 rounded hover:bg-neutral-50 dark:hover:bg-neutral-700" onclick="closeModal('passwordModal')">Cancel</button>
                <button type="button" class="px-3 py-1.5 bg-primary-600 hover:bg-primary-700 text-white rounded" onclick="resetPassword()">Reset Password</button>
            </div>
        </div>
    </div>
    
    <!-- Close main admin content container and tab content -->
        </div>
    </div>
</div>

<script>
// Global variables
let currentUsers = [];
let currentSettings = [];
let userPagination = { page: 1, limit: 10 };

// Authorization and JSON headers are injected by window.http.wrappedFetch
// Check if current user has admin access
async function checkAdminAccess() {
    const token = localStorage.getItem('auth_token');
    if (!token) {
        window.location.href = '/login';
        return false;
    }
    
    try {
        const response = await window.http.wrappedFetch('/api/auth/me');
        
        if (!response.ok) {
            window.location.href = '/login';
            return false;
        }
        
        const user = await response.json();
        return user.is_admin === true;
    } catch (error) {
        console.error('Error checking admin access:', error);
        window.location.href = '/login';
        return false;
    }
}

// Minimal UI helpers (Tailwind modals)
function openModal(id) {
    const el = document.getElementById(id);
    if (el) el.classList.remove('hidden');
}

function closeModal(id) {
    const el = document.getElementById(id);
    if (el) el.classList.add('hidden');
}

function initializeTabs() {
    const tabs = document.querySelectorAll('nav[role="tablist"] button[role="tab"]');
    const panes = document.querySelectorAll('#adminTabContent > div[role="tabpanel"]');
    
    tabs.forEach(tab => {
        tab.addEventListener('click', (event) => {
            openTab(event, tab.getAttribute('data-tab-target')?.replace('#', ''));
        });
    });
}

function openTab(event, tabName) {
    const tabs = document.querySelectorAll('nav[role="tablist"] button[role="tab"]');
    const panes = document.querySelectorAll('#adminTabContent > div[role="tabpanel"]');
    
    // Remove active states
    tabs.forEach(t => {
        t.classList.remove('border-primary-600', 'text-primary-600', 'bg-primary-50', 'dark:bg-primary-900/20', 'active');
        t.classList.add('border-transparent', 'text-neutral-600', 'dark:text-neutral-400');
    });
    
    // Hide all panes
    panes.forEach(p => p.classList.add('hidden'));
    
    // Activate clicked tab
    if (event && event.currentTarget) {
        event.currentTarget.classList.remove('border-transparent', 'text-neutral-600', 'dark:text-neutral-400');
        event.currentTarget.classList.add('border-primary-600', 'text-primary-600', 'dark:text-primary-400', 'bg-primary-50', 'dark:bg-primary-900/20', 'active');
    }
    
    // Show target pane
    const targetPane = document.getElementById(tabName);
    if (targetPane) {
        targetPane.classList.remove('hidden');
    }
    
    // Load tab-specific content
    onTabShown(tabName);
}

function onTabShown(tabName) {
    if (tabName === 'issues') {
        loadIssues();
        loadIssueStats();
    } else if (tabName === 'backup') {
        loadBackups();
    } else if (tabName === 'users') {
        loadUsers();
    } else if (tabName === 'settings') {
        loadSettings();
    } else if (tabName === 'printers') {
        loadPrinters();
    } else if (tabName === 'qdro-notifications') {
        loadQDRONotificationRoutes();
    }
}

// QDRO Notification Routes
async function loadQDRONotificationRoutes() {
    try {
        const scopeFilter = document.getElementById('qdro-route-scope-filter');
        const selectedScope = scopeFilter ? scopeFilter.value : '';
        const url = selectedScope ? `/api/admin/qdro/notification-routes?scope=${encodeURIComponent(selectedScope)}` : '/api/admin/qdro/notification-routes';
        const response = await window.http.wrappedFetch(url);
        const data = await response.json();
        renderQDRORoutesTable(data.items || []);
    } catch (error) {
        console.error('Failed to load QDRO routes:', error);
        const tbody = document.getElementById('qdro-routes-table-body');
        if (tbody) tbody.innerHTML = '<tr><td colspan="5" class="text-center text-danger-600 dark:text-danger-400">Failed to load routes</td></tr>';
        showAlert('Failed to load QDRO notification routes', 'error');
    }
}

function renderQDRORoutesTable(items) {
    const tbody = document.getElementById('qdro-routes-table-body');
    if (!tbody) return;
    if (!items.length) {
        tbody.innerHTML = '<tr><td colspan="5" class="text-center text-neutral-500">No routes found</td></tr>';
        return;
    }
    tbody.innerHTML = items.map(route => `
        <tr>
            <td class="px-4 py-2"><code>${escapeHtml(route.scope)}</code></td>
            <td class="px-4 py-2"><code>${escapeHtml(route.identifier)}</code></td>
            <td class="px-4 py-2">${route.email_to ? escapeHtml(route.email_to) : '-'}</td>
            <td class="px-4 py-2">${route.webhook_url ? `<a href="${escapeAttr(route.webhook_url)}" target="_blank" class="text-primary-600 hover:underline">link</a>` : '-'}</td>
            <td class="px-4 py-2">
                <div class="flex items-center gap-2">
                    <button class="px-2 py-1 border border-primary-600 text-primary-700 dark:text-primary-200 rounded text-xs hover:bg-primary-50 dark:hover:bg-primary-900/20" onclick="editNotificationRoute('${escapeJs(route.scope)}','${escapeJs(route.identifier)}')" title="Edit">
                        <i class="fas fa-edit"></i>
                    </button>
                    <button class="px-2 py-1 border border-danger-600 text-danger-700 dark:text-danger-200 rounded text-xs hover:bg-danger-50 dark:hover:bg-danger-900/20" onclick="deleteNotificationRoute('${escapeJs(route.scope)}','${escapeJs(route.identifier)}')" title="Delete">
                        <i class="fas fa-trash"></i>
                    </button>
                </div>
            </td>
        </tr>
    `).join('');
}

function showCreateNotificationRouteModal() {
    document.getElementById('qdroRouteModalTitle').textContent = 'Add Route';
    document.getElementById('qdroRouteMode').value = 'create';
    document.getElementById('routeScope').disabled = false;
    document.getElementById('routeIdentifier').readOnly = false;
    document.getElementById('qdroRouteForm').reset();
    // Reset secret field to password type
    document.getElementById('routeWebhookSecret').type = 'password';
    document.getElementById('webhook-secret-eye').className = 'fas fa-eye text-sm';
    openModal('qdroRouteModal');
}

function editNotificationRoute(scope, identifier) {
    document.getElementById('qdroRouteModalTitle').textContent = 'Edit Route';
    document.getElementById('qdroRouteMode').value = 'edit';
    document.getElementById('routeScope').value = scope;
    document.getElementById('routeScope').disabled = true;
    document.getElementById('routeIdentifier').value = identifier;
    document.getElementById('routeIdentifier').readOnly = true;
    // Pre-fill from the current row in table
    const row = Array.from(document.querySelectorAll('#qdro-routes-table-body tr')).find(tr => {
        const tds = tr.querySelectorAll('td');
        return tds.length >= 2 && tds[0].textContent.trim() === scope && tds[1].textContent.trim() === identifier;
    });
    if (row) {
        const tds = row.querySelectorAll('td');
        const email = tds[2].textContent.trim();
        const link = tds[3].querySelector('a');
        document.getElementById('routeEmailTo').value = email === '-' ? '' : email;
        document.getElementById('routeWebhookUrl').value = link ? link.getAttribute('href') : '';
        document.getElementById('routeWebhookSecret').value = '';
    }
    // Reset secret field to password type
    document.getElementById('routeWebhookSecret').type = 'password';
    document.getElementById('webhook-secret-eye').className = 'fas fa-eye text-sm';
    openModal('qdroRouteModal');
}

async function saveNotificationRoute() {
    // Client-side validation
    const scope = document.getElementById('routeScope').value.trim();
    const identifier = document.getElementById('routeIdentifier').value.trim();
    const email_to = document.getElementById('routeEmailTo').value.trim();
    const webhook_url = document.getElementById('routeWebhookUrl').value.trim();
    const webhook_secret = document.getElementById('routeWebhookSecret').value.trim();

    if (!scope) {
        showAlert('Scope is required', 'error');
        return;
    }
    if (!identifier) {
        showAlert('Identifier is required', 'error');
        return;
    }
    if (!email_to && !webhook_url) {
        showAlert('Provide at least Email or Webhook URL', 'error');
        return;
    }
    if (email_to && !/^\S+@\S+\.\S+$/.test(email_to)) {
        showAlert('Invalid email address', 'error');
        return;
    }
    if (webhook_url && !/^https?:\/\//i.test(webhook_url)) {
        showAlert('Webhook URL must start with http(s)://', 'error');
        return;
    }

    try {
        const response = await window.http.wrappedFetch('/api/admin/qdro/notification-routes', {
            method: 'POST',
            body: JSON.stringify({ scope, identifier, email_to: email_to || null, webhook_url: webhook_url || null, webhook_secret: webhook_secret || null })
        });
        if (!response.ok) {
            const err = await response.json().catch(() => ({}));
            showAlert(err.detail || 'Failed to save route', 'error');
            return;
        }
        closeModal('qdroRouteModal');
        showAlert('Route saved', 'success');
        loadQDRONotificationRoutes();
    } catch (error) {
        console.error('Failed to save route:', error);
        showAlert('Failed to save route', 'error');
    }
}

async function deleteNotificationRoute(scope, identifier) {
    if (!confirm(`Delete route for ${scope}:${identifier}?`)) return;
    try {
        const response = await window.http.wrappedFetch(`/api/admin/qdro/notification-routes/${encodeURIComponent(scope)}/${encodeURIComponent(identifier)}`, { method: 'DELETE' });
        if (!response.ok) {
            const err = await response.json().catch(() => ({}));
            showAlert(err.detail || 'Failed to delete route', 'error');
            return;
        }
        showAlert('Route deleted', 'success');
        loadQDRONotificationRoutes();
    } catch (error) {
        console.error('Failed to delete route:', error);
        showAlert('Failed to delete route', 'error');
    }
}

// Webhook Secret UI helpers
function toggleWebhookSecretVisibility() {
    const input = document.getElementById('routeWebhookSecret');
    const eye = document.getElementById('webhook-secret-eye');
    if (input.type === 'password') {
        input.type = 'text';
        eye.className = 'fas fa-eye-slash text-sm';
    } else {
        input.type = 'password';
        eye.className = 'fas fa-eye text-sm';
    }
}

function generateRandomSecret() {
    // Generate a secure random string (base64url-safe)
    const array = new Uint8Array(32); // 32 bytes = 256 bits
    crypto.getRandomValues(array);
    const secret = Array.from(array, byte => 
        'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789-_'[byte % 64]
    ).join('');
    document.getElementById('routeWebhookSecret').value = secret;
    showAlert('Random secret generated', 'success');
}

// Basic HTML escaping helpers
function escapeHtml(str) {
    if (str == null) return '';
    return String(str)
        .replace(/&/g, '&amp;')
        .replace(/</g, '&lt;')
        .replace(/>/g, '&gt;')
        .replace(/"/g, '&quot;')
        .replace(/'/g, '&#39;');
}
function escapeAttr(str) { return escapeHtml(str); }
function escapeJs(str) { return String(str).replace(/['"\\]/g, '\\$&'); }

// Initialize admin dashboard
document.addEventListener('DOMContentLoaded', function() {
    // Check admin permissions first
    checkAdminAccess().then(hasAccess => {
        if (!hasAccess) {
            window.location.href = '/customers'; // Redirect to a safe page
            return;
        }
        
        loadSystemHealth();
        loadSystemStats();
        loadUsers();
        loadSettings();
        loadLookupTables();
        loadBackups();
        loadPrinters();
        // Tabs setup
        initializeTabs();

        // QDRO routes filter change handler
        const qdroScopeFilter = document.getElementById('qdro-route-scope-filter');
        if (qdroScopeFilter) {
            qdroScopeFilter.addEventListener('change', () => {
                loadQDRONotificationRoutes();
            });
        }

        // Auto-refresh every 5 minutes
        setInterval(loadSystemHealth, 300000);

    });
});

// System Health Functions
async function loadSystemHealth() {
    try {
        const response = await window.http.wrappedFetch('/api/admin/health');
        const data = await response.json();
        
        // Update status indicator
        const statusElement = document.getElementById('system-status');
        const statusTextElement = document.getElementById('system-status-text');
        
        if (data.status === 'healthy') {
            statusElement.innerHTML = '<i class="fas fa-circle text-success-600"></i>';
            statusTextElement.textContent = 'Healthy';
        } else {
            statusElement.innerHTML = '<i class="fas fa-circle text-danger-600"></i>';
            statusTextElement.textContent = 'Unhealthy';
        }
        
        // Update system info with better formatting
        const formatUptime = (uptime) => {
            if (!uptime || uptime === 'Unknown') return 'Unknown';
            
            // Parse the uptime string (format: "0:00:05" or "1 day, 0:00:05")
            const parts = uptime.split(', ');
            if (parts.length === 1) {
                // Less than a day: "0:00:05"
                const [hours, minutes, seconds] = parts[0].split(':');
                return `${parseInt(hours)}h ${parseInt(minutes)}m ${parseInt(seconds)}s`;
            } else {
                // More than a day: "1 day, 0:00:05"
                const days = parts[0];
                const [hours, minutes, seconds] = parts[1].split(':');
                return `${days}, ${parseInt(hours)}h ${parseInt(minutes)}m`;
            }
        };
        
        document.getElementById('system-uptime').textContent = formatUptime(data.uptime);
        
        // Update alerts
        const alertsElement = document.getElementById('system-alerts');
        if (data.alerts && data.alerts.length > 0) {
            alertsElement.innerHTML = data.alerts.map(alert => 
                `<div class="bg-warning-50 border-l-4 border-warning-500 text-warning-700 text-sm p-2 rounded mb-1">${alert}</div>`
            ).join('');
        } else {
            alertsElement.innerHTML = '<p class="text-neutral-500 dark:text-neutral-400">No alerts</p>';
        }
        
    } catch (error) {
        console.error('Failed to load system health:', error);
        showAlert('Failed to load system health', 'error');
    }
}

async function loadSystemStats() {
    try {
        const response = await window.http.wrappedFetch('/api/admin/stats');
        const data = await response.json();
        
        // Update dashboard cards
        document.getElementById('total-users').textContent = data.total_users;
        document.getElementById('db-size').textContent = data.database_size;
        
        // Update detailed stats
        document.getElementById('stat-customers').textContent = data.total_customers.toLocaleString();
        document.getElementById('stat-files').textContent = data.total_files.toLocaleString();
        document.getElementById('stat-transactions').textContent = data.total_transactions.toLocaleString();
        document.getElementById('stat-qdros').textContent = data.total_qdros.toLocaleString();
        document.getElementById('stat-active-users').textContent = data.total_active_users;
        document.getElementById('stat-admins').textContent = data.total_admins;
        
        // Update recent activity
        const activityElement = document.getElementById('recent-activity');
        if (data.recent_activity && data.recent_activity.length > 0) {
            activityElement.innerHTML = data.recent_activity.map(activity => 
                `<div class="border-b pb-2 mb-2">
                    <small class="text-neutral-500 dark:text-neutral-400">${activity.timestamp ? new Date(activity.timestamp).toLocaleString() : 'Recent'}</small><br>
                    ${activity.description}
                </div>`
            ).join('');
        } else {
            activityElement.innerHTML = '<p class="text-neutral-500 dark:text-neutral-400">No recent activity</p>';
        }
        
    } catch (error) {
        console.error('Failed to load system stats:', error);
        showAlert('Failed to load system statistics', 'error');
    }
}

// User Management Functions
async function loadUsers() {
    try {
        const search = document.getElementById('user-search').value;
        const filter = document.getElementById('user-filter').value;
        
        let url = '/api/admin/users?';
        if (search) url += 'search=' + encodeURIComponent(search) + '&';
        if (filter === 'active') url += 'active_only=true&';
        
        const response = await window.http.wrappedFetch(url);
        const users = await response.json();
        currentUsers = users;
        
        renderUsersTable(users);
        
    } catch (error) {
        console.error('Failed to load users:', error);
        showAlert('Failed to load users', 'error');
    }
}

function renderUsersTable(users) {
    const tbody = document.getElementById('users-table-body');
    
    if (users.length === 0) {
        tbody.innerHTML = '<tr><td colspan="7" class="text-center">No users found</td></tr>';
        return;
    }
    
    tbody.innerHTML = users.map(user => `
        <tr>
            <td>${user.username}</td>
            <td>${user.email}</td>
            <td>${(user.first_name || '') + ' ' + (user.last_name || '')}</td>
            <td>
                <span class="inline-flex items-center px-2 py-0.5 rounded text-xs font-medium ${user.is_active ? 'bg-success-100 text-success-800 dark:bg-success-800 dark:text-success-200' : 'bg-neutral-200 text-neutral-700 dark:bg-neutral-700 dark:text-neutral-300'}">${user.is_active ? 'Active' : 'Inactive'}</span>
            </td>
            <td>
                <span class="inline-flex items-center px-2 py-0.5 rounded text-xs font-medium ${user.is_admin ? 'bg-primary-100 text-primary-800 dark:bg-primary-800 dark:text-primary-200' : 'bg-neutral-200 text-neutral-700 dark:bg-neutral-700 dark:text-neutral-300'}">${user.is_admin ? 'Admin' : 'User'}</span>
            </td>
            <td>${user.last_login ? new Date(user.last_login).toLocaleDateString() : 'Never'}</td>
            <td>
                <div class="flex items-center gap-2">
                    <button class="px-2 py-1 border border-primary-600 text-primary-700 dark:text-primary-200 rounded text-xs hover:bg-primary-50 dark:hover:bg-primary-900/20" onclick="editUser(${user.id})" title="Edit">
                        <i class="fas fa-edit"></i>
                    </button>
                    <button class="px-2 py-1 border border-warning-600 text-warning-700 dark:text-warning-200 rounded text-xs hover:bg-warning-50 dark:hover:bg-warning-900/20" onclick="showPasswordModal(${user.id})" title="Reset Password">
                        <i class="fas fa-key"></i>
                    </button>
                    <button class="px-2 py-1 border border-danger-600 text-danger-700 dark:text-danger-200 rounded text-xs hover:bg-danger-50 dark:hover:bg-danger-900/20" onclick="deactivateUser(${user.id})" title="Deactivate">
                        <i class="fas fa-user-times"></i>
                    </button>
                </div>
            </td>
        </tr>
    `).join('');
}

function showCreateUserModal() {
    document.getElementById('userModalTitle').textContent = 'Add User';
    document.getElementById('userForm').reset();
    document.getElementById('userId').value = '';
    document.getElementById('passwordFields').style.display = 'block';
    document.getElementById('isActive').checked = true;
    openModal('userModal');
}

async function editUser(userId) {
    try {
        const response = await window.http.wrappedFetch('/api/admin/users/' + userId);
        const user = await response.json();
        
        document.getElementById('userModalTitle').textContent = 'Edit User';
        document.getElementById('userId').value = user.id;
        document.getElementById('username').value = user.username;
        document.getElementById('email').value = user.email;
        document.getElementById('firstName').value = user.first_name || '';
        document.getElementById('lastName').value = user.last_name || '';
        document.getElementById('isAdmin').checked = user.is_admin;
        document.getElementById('isActive').checked = user.is_active;
        document.getElementById('passwordFields').style.display = 'none';
        
        openModal('userModal');
        
    } catch (error) {
        console.error('Failed to load user:', error);
        showAlert('Failed to load user details', 'error');
    }
}

async function saveUser() {
    const userId = document.getElementById('userId').value;
    const isEdit = !!userId;
    
    const userData = {
        username: document.getElementById('username').value,
        email: document.getElementById('email').value,
        first_name: document.getElementById('firstName').value,
        last_name: document.getElementById('lastName').value,
        is_admin: document.getElementById('isAdmin').checked,
        is_active: document.getElementById('isActive').checked
    };
    
    if (!isEdit) {
        userData.password = document.getElementById('password').value;
    }
    
    try {
        const url = isEdit ? '/api/admin/users/' + userId : '/api/admin/users';
        const method = isEdit ? 'PUT' : 'POST';
        
        const response = await window.http.wrappedFetch(url, {
            method: method,
            body: JSON.stringify(userData)
        });
        
        if (response.ok) {
            closeModal('userModal');
            showAlert(isEdit ? 'User updated successfully' : 'User created successfully', 'success');
            loadUsers();
        } else {
            const error = await response.json();
            showAlert(error.detail || 'Failed to save user', 'error');
        }
        
    } catch (error) {
        console.error('Failed to save user:', error);
        showAlert('Failed to save user', 'error');
    }
}

function showPasswordModal(userId) {
    document.getElementById('resetUserId').value = userId;
    document.getElementById('passwordForm').reset();
    openModal('passwordModal');
}

async function resetPassword() {
    const userId = document.getElementById('resetUserId').value;
    const newPassword = document.getElementById('newPassword').value;
    const confirmPassword = document.getElementById('confirmPassword').value;
    
    if (newPassword !== confirmPassword) {
        showAlert('Passwords do not match', 'error');
        return;
    }
    
    try {
        const response = await window.http.wrappedFetch('/api/admin/users/' + userId + '/reset-password', {
            method: 'POST',
            body: JSON.stringify({
                new_password: newPassword,
                confirm_password: confirmPassword
            })
        });
        
        if (response.ok) {
            closeModal('passwordModal');
            showAlert('Password reset successfully', 'success');
        } else {
            const error = await response.json();
            showAlert(error.detail || 'Failed to reset password', 'error');
        }
        
    } catch (error) {
        console.error('Failed to reset password:', error);
        showAlert('Failed to reset password', 'error');
    }
}

async function deactivateUser(userId) {
    if (!confirm('Are you sure you want to deactivate this user?')) return;
    
    try {
        const response = await window.http.wrappedFetch('/api/admin/users/' + userId, {
            method: 'DELETE'
        });
        
        if (response.ok) {
            showAlert('User deactivated successfully', 'success');
            loadUsers();
        } else {
            const error = await response.json();
            showAlert(error.detail || 'Failed to deactivate user', 'error');
        }
        
    } catch (error) {
        console.error('Failed to deactivate user:', error);
        showAlert('Failed to deactivate user', 'error');
    }
}

// Settings Management Functions
async function loadSettings() {
    try {
        const response = await window.http.wrappedFetch('/api/admin/settings');
        const data = await response.json();
        currentSettings = data.settings;
        
        renderSettingsTable(data.settings);
        // Sync quick-setting input
        syncInactivitySettingUI();
        
    } catch (error) {
        console.error('Failed to load settings:', error);
        showAlert('Failed to load settings', 'error');
    }
}

function renderSettingsTable(settings) {
    const tbody = document.getElementById('settings-table-body');
    
    if (settings.length === 0) {
        tbody.innerHTML = '<tr><td colspan="5" class="text-center">No settings found</td></tr>';
        return;
    }
    
    tbody.innerHTML = settings.map(setting => `
        <tr>
            <td><code>${setting.setting_key}</code></td>
            <td>${setting.setting_value}</td>
            <td><span class="inline-flex items-center px-2 py-0.5 rounded text-xs font-medium bg-neutral-200 text-neutral-700 dark:bg-neutral-700 dark:text-neutral-300">${setting.setting_type}</span></td>
            <td>${setting.description || '-'}</td>
            <td>
                <div class="flex items-center gap-2">
                    <button class="px-2 py-1 border border-primary-600 text-primary-700 dark:text-primary-200 rounded text-xs hover:bg-primary-50 dark:hover:bg-primary-900/20" onclick="editSetting('${setting.setting_key}')" title="Edit">
                        <i class="fas fa-edit"></i>
                    </button>
                    <button class="px-2 py-1 border border-danger-600 text-danger-700 dark:text-danger-200 rounded text-xs hover:bg-danger-50 dark:hover:bg-danger-900/20" onclick="deleteSetting('${setting.setting_key}')" title="Delete">
                        <i class="fas fa-trash"></i>
                    </button>
                </div>
            </td>
        </tr>
    `).join('');
}

function showCreateSettingModal() {
    document.getElementById('settingModalTitle').textContent = 'Add Setting';
    document.getElementById('settingForm').reset();
    document.getElementById('settingKey').readOnly = false;
    document.getElementById('settingModal').classList.remove('hidden');
}

async function editSetting(settingKey) {
    try {
        const response = await window.http.wrappedFetch('/api/admin/settings/' + encodeURIComponent(settingKey));
        const setting = await response.json();
        
        document.getElementById('settingModalTitle').textContent = 'Edit Setting';
        document.getElementById('settingKey').value = setting.setting_key;
        document.getElementById('settingKey').readOnly = true;
        document.getElementById('settingValue').value = setting.setting_value;
        document.getElementById('settingType').value = setting.setting_type;
        document.getElementById('settingDescription').value = setting.description || '';
        
        document.getElementById('settingModal').classList.remove('hidden');
        
    } catch (error) {
        console.error('Failed to load setting:', error);
        showAlert('Failed to load setting details', 'error');
    }
}

async function saveSetting() {
    const settingKey = document.getElementById('settingKey').value;
    const isEdit = document.getElementById('settingKey').readOnly;
    
    const settingData = {
        setting_key: settingKey,
        setting_value: document.getElementById('settingValue').value,
        setting_type: document.getElementById('settingType').value,
        description: document.getElementById('settingDescription').value
    };
    
    try {
        const url = isEdit ? '/api/admin/settings/' + encodeURIComponent(settingKey) : '/api/admin/settings';
        const method = isEdit ? 'PUT' : 'POST';
        
        const response = await window.http.wrappedFetch(url, {
            method: method,
            body: JSON.stringify(isEdit ? {
                setting_value: settingData.setting_value,
                description: settingData.description
            } : settingData)
        });
        
        if (response.ok) {
            document.getElementById('settingModal').classList.add('hidden');
            showAlert(isEdit ? 'Setting updated successfully' : 'Setting created successfully', 'success');
            loadSettings();
        } else {
            const error = await response.json();
            showAlert(error.detail || 'Failed to save setting', 'error');
        }
        
    } catch (error) {
        console.error('Failed to save setting:', error);
        showAlert('Failed to save setting', 'error');
    }
}

// Inactivity quick-setting helpers
function getSettingValueByKey(key) {
    const found = (currentSettings || []).find(s => s.setting_key === key);
    return found ? found.setting_value : null;
}

function syncInactivitySettingUI() {
    const input = document.getElementById('inactivityMinutesInput');
    if (!input) return;
    let value = getSettingValueByKey('inactivity_warning_minutes');
    if (!value) value = '240';
    input.value = value;
}

async function saveInactivitySetting() {
    const input = document.getElementById('inactivityMinutesInput');
    const raw = (input?.value || '').trim();
    const minutes = parseInt(raw, 10);
    if (!Number.isFinite(minutes) || minutes <= 0) {
        if (window.alerts) window.alerts.error('Please enter a valid positive number of minutes.', { duration: 4000 });
        return;
    }

    const existing = (currentSettings || []).some(s => s.setting_key === 'inactivity_warning_minutes');
    const url = existing ? '/api/admin/settings/' + encodeURIComponent('inactivity_warning_minutes') : '/api/admin/settings';
    const method = existing ? 'PUT' : 'POST';
    const body = existing ? {
        setting_value: String(minutes),
        description: 'Minutes of inactivity before session warning',
    } : {
        setting_key: 'inactivity_warning_minutes',
        setting_value: String(minutes),
        description: 'Minutes of inactivity before session warning',
        setting_type: 'INTEGER'
    };

    try {
        const response = await window.http.wrappedFetch(url, {
            method,
            body: JSON.stringify(body)
        });
        if (!response.ok) throw new Error('Failed to save setting');

        // Refresh settings list/UI
        await loadSettings();
        if (window.alerts) window.alerts.success('Inactivity warning setting saved.', { duration: 3000 });
    } catch (err) {
        console.error(err);
        if (window.alerts) window.alerts.error('Could not save inactivity setting.', { duration: 4000 });
    }
}

async function deleteSetting(settingKey) {
    if (!confirm('Are you sure you want to delete this setting?')) return;
    
    try {
        const response = await window.http.wrappedFetch('/api/admin/settings/' + encodeURIComponent(settingKey), {
            method: 'DELETE'
        });
        
        if (response.ok) {
            showAlert('Setting deleted successfully', 'success');
            loadSettings();
        } else {
            const error = await response.json();
            showAlert(error.detail || 'Failed to delete setting', 'error');
        }
        
    } catch (error) {
        console.error('Failed to delete setting:', error);
        showAlert('Failed to delete setting', 'error');
    }
}

// Maintenance Functions
async function loadLookupTables() {
    try {
        const response = await window.http.wrappedFetch('/api/admin/lookups/tables');
        const data = await response.json();
        
        const element = document.getElementById('lookup-tables');
        element.innerHTML = data.tables.map(table => `
            <div class="flex justify-between items-center border-b pb-2 mb-2">
                <div>
                    <strong>${table.display_name}</strong><br>
                    <small class="text-neutral-500 dark:text-neutral-400">${table.description}</small>
                </div>
                <span class="inline-flex items-center px-2 py-0.5 rounded text-xs font-medium bg-info-100 text-info-800 dark:bg-info-800 dark:text-info-200">${table.record_count} records</span>
            </div>
        `).join('');
        
    } catch (error) {
        console.error('Failed to load lookup tables:', error);
        document.getElementById('lookup-tables').innerHTML = '<p class="text-danger-600 dark:text-danger-400">Failed to load lookup tables</p>';
    }
}

// Printers Management
async function loadPrinters() {
    try {
        const response = await window.http.wrappedFetch('/api/admin/printers');
        const printers = await response.json();
        renderPrintersList(printers);
    } catch (err) {
        console.error('Failed to load printers:', err);
        const ul = document.getElementById('printers-list');
        if (ul) ul.innerHTML = '<li class="py-2 text-danger-600 dark:text-danger-400">Failed to load printers</li>';
    }
}

function renderPrintersList(printers) {
    const ul = document.getElementById('printers-list');
    if (!ul) return;
    if (!printers || printers.length === 0) {
        ul.innerHTML = '<li class="py-2 text-neutral-500">No printers found</li>';
        return;
    }
    ul.innerHTML = printers.map(p => `
        <li class="py-2 px-2 rounded hover:bg-neutral-50 dark:hover:bg-neutral-800/50">
            <div class="flex justify-between items-center gap-2">
                <div class="flex-1 cursor-pointer" onclick="selectPrinter('${encodeURIComponent(p.printer_name)}')">
                    <div class="font-medium">${p.printer_name}</div>
                    <div class="text-xs text-neutral-500">${p.description || ''}</div>
                </div>
                <div class="flex items-center gap-2">
                    ${p.default_printer ? '<span class="text-xs px-2 py-0.5 bg-primary-100 dark:bg-primary-800 text-primary-700 dark:text-primary-200 rounded">Default</span>' : ''}
                    <button class="px-2 py-1 border border-danger-600 text-danger-700 dark:text-danger-200 rounded text-xs hover:bg-danger-50 dark:hover:bg-danger-900/20" onclick="deletePrinter(event, '${encodeURIComponent(p.printer_name)}')" title="Delete">
                        <i class="fas fa-trash"></i>
                    </button>
                </div>
            </div>
        </li>
    `).join('');
}

async function selectPrinter(encodedName) {
    const name = decodeURIComponent(encodedName);
    try {
        const response = await window.http.wrappedFetch('/api/admin/printers/' + encodeURIComponent(name));
        const p = await response.json();
        fillPrinterForm(p);
    } catch (err) {
        console.error('Failed to fetch printer:', err);
        if (window.alerts) window.alerts.error('Failed to load printer details');
    }
}

function fillPrinterForm(p) {
    const set = (id, val) => { const el = document.getElementById(id); if (el) el.value = val == null ? '' : val; };
    const setb = (id, val) => { const el = document.getElementById(id); if (el) el.checked = !!val; };
    set('printer_name', p.printer_name || '');
    set('description', p.description);
    set('driver', p.driver);
    set('port', p.port);
    set('number', p.number);
    setb('default_printer', p.default_printer);
    set('page_break', p.page_break);
    set('setup_st', p.setup_st);
    set('reset_st', p.reset_st);
    set('b_bold', p.b_bold);
    set('e_bold', p.e_bold);
    set('b_underline', p.b_underline);
    set('e_underline', p.e_underline);
    setb('phone_book', p.phone_book);
    setb('rolodex_info', p.rolodex_info);
    setb('envelope', p.envelope);
    setb('file_cabinet', p.file_cabinet);
    setb('accounts', p.accounts);
    setb('statements', p.statements);
    setb('calendar', p.calendar);
}

function showCreatePrinterForm() {
    clearPrinterForm();
    const nameEl = document.getElementById('printer_name');
    if (nameEl) nameEl.focus();
}

function clearPrinterForm() {
    fillPrinterForm({});
}

async function savePrinter(event) {
    event.preventDefault();
    const payload = {
        printer_name: document.getElementById('printer_name').value,
        description: document.getElementById('description').value,
        driver: document.getElementById('driver').value,
        port: document.getElementById('port').value,
        number: document.getElementById('number').value ? parseInt(document.getElementById('number').value, 10) : null,
        default_printer: document.getElementById('default_printer').checked,
        page_break: document.getElementById('page_break').value,
        setup_st: document.getElementById('setup_st').value,
        reset_st: document.getElementById('reset_st').value,
        b_bold: document.getElementById('b_bold').value,
        e_bold: document.getElementById('e_bold').value,
        b_underline: document.getElementById('b_underline').value,
        e_underline: document.getElementById('e_underline').value,
        phone_book: document.getElementById('phone_book').checked,
        rolodex_info: document.getElementById('rolodex_info').checked,
        envelope: document.getElementById('envelope').checked,
        file_cabinet: document.getElementById('file_cabinet').checked,
        accounts: document.getElementById('accounts').checked,
        statements: document.getElementById('statements').checked,
        calendar: document.getElementById('calendar').checked,
    };
    try {
        const existsResp = await window.http.wrappedFetch('/api/admin/printers/' + encodeURIComponent(payload.printer_name));
        if (existsResp.ok) {
            // update
            const resp = await window.http.wrappedFetch('/api/admin/printers/' + encodeURIComponent(payload.printer_name), {
                method: 'PUT',
                body: JSON.stringify(payload),
            });
            if (!resp.ok) throw await window.http.toError(resp, 'Failed to update printer');
        } else {
            // create
            const resp = await window.http.wrappedFetch('/api/admin/printers', {
                method: 'POST',
                body: JSON.stringify(payload),
            });
            if (!resp.ok) throw await window.http.toError(resp, 'Failed to create printer');
        }
        if (window.alerts) window.alerts.success('Printer saved');
        await loadPrinters();
    } catch (err) {
        console.error(err);
        if (window.alerts) window.alerts.error(window.http.formatAlert(err, 'Printer save failed'));
    }
    return false;
}

async function deletePrinter(evt, encodedName) {
    evt.stopPropagation();
    const name = decodeURIComponent(encodedName);
    if (!confirm(`Delete printer "${name}"?`)) return;
    try {
        const resp = await window.http.wrappedFetch('/api/admin/printers/' + encodeURIComponent(name), { method: 'DELETE' });
        if (!resp.ok) throw await window.http.toError(resp, 'Failed to delete printer');
        if (window.alerts) window.alerts.success('Printer deleted');
        await loadPrinters();
        clearPrinterForm();
    } catch (err) {
        console.error(err);
        if (window.alerts) window.alerts.error(window.http.formatAlert(err, 'Delete failed'));
    }
}

async function vacuumDatabase() {
    if (!confirm('This will optimize the database. Continue?')) return;
    
    try {
        const response = await window.http.wrappedFetch('/api/admin/maintenance/vacuum', { 
            method: 'POST'
        });
        const result = await response.json();
        
        if (response.ok) {
            showAlert('Database vacuum completed in ' + result.duration_seconds.toFixed(2) + ' seconds', 'success');
            addMaintenanceLog('Database Vacuum', 'Completed successfully');
        } else {
            showAlert(result.detail || 'Database vacuum failed', 'error');
        }
        
    } catch (error) {
        console.error('Failed to vacuum database:', error);
        showAlert('Failed to vacuum database', 'error');
    }
}

async function analyzeDatabase() {
    if (!confirm('This will analyze database statistics. Continue?')) return;
    
    try {
        const response = await window.http.wrappedFetch('/api/admin/maintenance/analyze', { 
            method: 'POST'
        });
        const result = await response.json();
        
        if (response.ok) {
            showAlert('Database analysis completed in ' + result.duration_seconds.toFixed(2) + ' seconds', 'success');
            addMaintenanceLog('Database Analysis', 'Completed successfully');
        } else {
            showAlert(result.detail || 'Database analysis failed', 'error');
        }
        
    } catch (error) {
        console.error('Failed to analyze database:', error);
        showAlert('Failed to analyze database', 'error');
    }
}

function addMaintenanceLog(operation, message) {
    const logElement = document.getElementById('maintenance-log');
    const timestamp = new Date().toLocaleString();
    const logEntry = `
        <div class="border-b pb-2 mb-2">
            <small class="text-neutral-500 dark:text-neutral-400">${timestamp}</small><br>
            <strong>${operation}:</strong> ${message}
        </div>
    `;
    
    if (logElement.innerHTML.includes('No maintenance operations')) {
        logElement.innerHTML = logEntry;
    } else {
        logElement.innerHTML = logEntry + logElement.innerHTML;
    }
}

// Backup Functions
async function loadBackups() {
    try {
        const response = await window.http.wrappedFetch('/api/admin/backup/list');
        const data = await response.json();
        
        const tbody = document.getElementById('backup-list');
        
        if (data.backups.length === 0) {
            tbody.innerHTML = '<tr><td colspan="5" class="text-center">No backups found</td></tr>';
            return;
        }
        
        tbody.innerHTML = data.backups.map(backup => `
            <tr>
                <td><code>${backup.filename}</code></td>
                <td>${backup.size}</td>
                <td>${new Date(backup.created_at).toLocaleString()}</td>
                <td>
                    <span class="inline-flex items-center px-2 py-0.5 rounded text-xs font-medium ${backup.backup_type === 'manual' ? 'bg-primary-100 text-primary-800 dark:bg-primary-800 dark:text-primary-200' : 'bg-neutral-200 text-neutral-700 dark:bg-neutral-700 dark:text-neutral-300'}">${backup.backup_type}</span>
                </td>
                <td>
                    <button class="px-2 py-1 border border-success-600 text-success-700 dark:text-success-200 rounded text-xs hover:bg-success-50 dark:hover:bg-success-900/20" onclick="downloadBackup('${backup.filename}')" title="Download">
                        <i class="fas fa-download"></i>
                    </button>
                </td>
            </tr>
        `).join('');
        
        // Update last backup info
        if (data.backups.length > 0) {
            document.getElementById('last-backup').textContent = new Date(data.backups[0].created_at).toLocaleString();
        }
        
    } catch (error) {
        console.error('Failed to load backups:', error);
        document.getElementById('backup-list').innerHTML = '<tr><td colspan="5" class="text-center text-danger-600 dark:text-danger-400">Failed to load backups</td></tr>';
    }
}

async function createBackup() {
    if (!confirm('Create a new database backup?')) return;
    
    try {
        const response = await window.http.wrappedFetch('/api/admin/backup/create', { 
            method: 'POST'
        });
        const result = await response.json();
        
        if (response.ok) {
            showAlert('Backup created successfully: ' + result.backup_info.filename, 'success');
            loadBackups();
        } else {
            showAlert(result.detail || 'Failed to create backup', 'error');
        }
        
    } catch (error) {
        console.error('Failed to create backup:', error);
        showAlert('Failed to create backup', 'error');
    }
}

async function downloadBackup(filename) {
    try {
        const response = await window.http.wrappedFetch('/api/admin/backup/download', {
            method: 'GET'
        });

        if (!response.ok) {
            let errorMsg = 'Failed to download backup';
            try {
                const err = await response.json();
                errorMsg = err.detail || errorMsg;
            } catch (_) {}
            showAlert(errorMsg, 'error');
            return;
        }

        const blob = await response.blob();

        // Try to extract filename from headers if provided
        let suggestedName = filename || 'database_backup.db';
        const disp = response.headers.get('Content-Disposition') || response.headers.get('content-disposition');
        if (disp) {
            const match = /filename\*=UTF-8''([^;]+)|filename="?([^";]+)"?/i.exec(disp);
            const extracted = match && (match[1] || match[2]);
            if (extracted) {
                try { suggestedName = decodeURIComponent(extracted); } catch (_) { suggestedName = extracted; }
            }
        }

        const url = window.URL.createObjectURL(blob);
        const a = document.createElement('a');
        a.href = url;
        a.download = suggestedName;
        document.body.appendChild(a);
        a.click();
        a.remove();
        window.URL.revokeObjectURL(url);
    } catch (error) {
        console.error('Backup download failed:', error);
        showAlert('Failed to download backup', 'error');
    }
}

// Utility Functions
function refreshDashboard() {
    loadSystemHealth();
    loadSystemStats();
    loadUsers();
    loadSettings();
    loadLookupTables();
    loadBackups();
    
    // Only refresh issues if on issues tab
    if (document.getElementById('issues-tab').classList.contains('active')) {
        loadIssues();
        loadIssueStats();
    }
    
    showAlert('Dashboard refreshed', 'info');
}

// Issue Tracking Functions
let currentIssues = [];
let allUsers = [];

async function loadIssues() {
    try {
        const statusFilter = document.getElementById('issueStatusFilter').value;
        const priorityFilter = document.getElementById('issuePriorityFilter').value;
        const categoryFilter = document.getElementById('issueCategoryFilter').value;
        const assignedToMe = document.getElementById('assignedToMeFilter').checked;
        
        let url = '/api/support/tickets?';
        if (statusFilter) url += 'status=' + encodeURIComponent(statusFilter) + '&';
        if (priorityFilter) url += 'priority=' + encodeURIComponent(priorityFilter) + '&';
        if (categoryFilter) url += 'category=' + encodeURIComponent(categoryFilter) + '&';
        if (assignedToMe) url += 'assigned_to_me=true&';
        
        const response = await window.http.wrappedFetch(url);
        
        if (!response.ok) {
            throw new Error('Failed to load issues');
        }
        
        const issues = await response.json();
        currentIssues = issues;
        
        renderIssuesTable(issues);
        
    } catch (error) {
        console.error('Failed to load issues:', error);
        document.getElementById('issues-table-body').innerHTML = '<tr><td colspan="9" class="text-center text-danger-600 dark:text-danger-400">Failed to load issues</td></tr>';
        showAlert('Failed to load issues', 'error');
    }
}

async function loadIssueStats() {
    try {
        const response = await window.http.wrappedFetch('/api/support/stats');
        
        if (!response.ok) {
            throw new Error('Failed to load issue stats');
        }
        
        const stats = await response.json();
        
        // Update dashboard cards
        const updateElement = (id, value) => {
            const element = document.getElementById(id);
            if (element) {
                element.textContent = value || 0;
            }
        };
        
        updateElement('high-priority-count', (stats.high_priority_tickets || 0) + (stats.urgent_tickets || 0));
        updateElement('open-issues-count', stats.open_tickets || 0);
        updateElement('in-progress-count', stats.in_progress_tickets || 0);
        updateElement('resolved-count', stats.resolved_tickets || 0);
        
    } catch (error) {
        console.error('Failed to load issue stats:', error);
        showAlert('Failed to load issue statistics', 'error');
    }
}

function renderIssuesTable(issues) {
    const tbody = document.getElementById('issues-table-body');
    
    if (issues.length === 0) {
        tbody.innerHTML = '<tr><td colspan="9" class="text-center">No issues found</td></tr>';
        return;
    }
    
    tbody.innerHTML = issues.map(issue => {
        const priorityClass = {
            'urgent': 'bg-danger-100 text-danger-800 dark:bg-danger-800 dark:text-danger-200',
            'high': 'bg-warning-100 text-warning-800 dark:bg-warning-800 dark:text-warning-200',
            'medium': 'bg-info-100 text-info-800 dark:bg-info-800 dark:text-info-200', 
            'low': 'bg-neutral-200 text-neutral-700 dark:bg-neutral-700 dark:text-neutral-300'
        }[issue.priority] || 'bg-neutral-200 text-neutral-700 dark:bg-neutral-700 dark:text-neutral-300';
        
        const statusClass = {
            'open': 'bg-danger-100 text-danger-800 dark:bg-danger-800 dark:text-danger-200',
            'in_progress': 'bg-warning-100 text-warning-800 dark:bg-warning-800 dark:text-warning-200',
            'resolved': 'bg-success-100 text-success-800 dark:bg-success-800 dark:text-success-200',
            'closed': 'bg-neutral-200 text-neutral-700 dark:bg-neutral-700 dark:text-neutral-300'
        }[issue.status] || 'bg-neutral-200 text-neutral-700 dark:bg-neutral-700 dark:text-neutral-300';
        
        const categoryDisplay = {
            'bug_report': 'Bug Report',
            'qa_issue': 'QA Issue',
            'feature_request': 'Feature Request',
            'database_issue': 'Database Issue',
            'system_error': 'System Error',
            'user_access': 'User Access',
            'performance': 'Performance',
            'documentation': 'Documentation',
            'configuration': 'Configuration',
            'testing': 'Testing'
        }[issue.category] || issue.category;
        
        return `
        <tr>
            <td><strong>${issue.ticket_number}</strong></td>
            <td>
                <span class="inline-flex items-center px-2 py-0.5 rounded text-xs font-medium bg-primary-100 text-primary-800 dark:bg-primary-800 dark:text-primary-200">${categoryDisplay}</span>
            </td>
            <td>
                <span class="inline-flex items-center px-2 py-0.5 rounded text-xs font-medium ${priorityClass}">${issue.priority.toUpperCase()}</span>
            </td>
            <td>
                <div style="max-width: 200px; overflow: hidden; text-overflow: ellipsis;">
                    ${issue.subject}
                </div>
            </td>
            <td>${issue.contact_name}</td>
            <td>
                <span class="inline-flex items-center px-2 py-0.5 rounded text-xs font-medium ${statusClass}">${issue.status.replace('_', ' ').toUpperCase()}</span>
            </td>
            <td>${issue.assigned_admin_name || 'Unassigned'}</td>
            <td>${new Date(issue.created_at).toLocaleDateString()}</td>
            <td>
                <button class="px-2 py-1 border border-primary-600 text-primary-700 dark:text-primary-200 rounded text-xs hover:bg-primary-50 dark:hover:bg-primary-900/20" onclick="viewIssue(${issue.id})" title="View Details">
                    <i class="fas fa-eye"></i>
                </button>
            </td>
        </tr>
        `;
    }).join('');
}

function filterIssues() {
    loadIssues();
}

async function viewIssue(issueId) {
    try {
        const response = await window.http.wrappedFetch('/api/support/tickets/' + issueId);
        
        if (!response.ok) {
            throw new Error('Failed to load issue details');
        }
        
        const issue = await response.json();
        
        // Populate issue detail modal
        document.getElementById('issueDetailNumber').textContent = issue.ticket_number;
        document.getElementById('issueDetailSubject').textContent = issue.subject;
        document.getElementById('issueDetailDescription').textContent = issue.description;
        
        // Update badges
        const categoryDisplay = {
            'bug_report': 'Bug Report',
            'qa_issue': 'QA Issue',
            'feature_request': 'Feature Request',
            'database_issue': 'Database Issue',
            'system_error': 'System Error',
            'user_access': 'User Access',
            'performance': 'Performance',
            'documentation': 'Documentation',
            'configuration': 'Configuration',
            'testing': 'Testing'
        }[issue.category] || issue.category;
        
        document.getElementById('issueDetailCategory').textContent = categoryDisplay;
        document.getElementById('issueDetailCategory').className = 'inline-flex items-center px-2 py-0.5 rounded text-xs font-medium bg-primary-100 text-primary-800 dark:bg-primary-800 dark:text-primary-200';
        
        document.getElementById('issueDetailPriority').textContent = issue.priority.toUpperCase();
        document.getElementById('issueDetailPriority').className = 'inline-flex items-center px-2 py-0.5 rounded text-xs font-medium ml-2 ' + ({
            'urgent': 'bg-danger-100 text-danger-800 dark:bg-danger-800 dark:text-danger-200',
            'high': 'bg-warning-100 text-warning-800 dark:bg-warning-800 dark:text-warning-200',
            'medium': 'bg-info-100 text-info-800 dark:bg-info-800 dark:text-info-200',
            'low': 'bg-neutral-200 text-neutral-700 dark:bg-neutral-700 dark:text-neutral-300'
        }[issue.priority] || 'bg-neutral-200 text-neutral-700 dark:bg-neutral-700 dark:text-neutral-300');
        
        document.getElementById('issueDetailStatus').textContent = issue.status.replace('_', ' ').toUpperCase();
        document.getElementById('issueDetailStatus').className = 'inline-flex items-center px-2 py-0.5 rounded text-xs font-medium ' + ({
            'open': 'bg-danger-100 text-danger-800 dark:bg-danger-800 dark:text-danger-200',
            'in_progress': 'bg-warning-100 text-warning-800 dark:bg-warning-800 dark:text-warning-200', 
            'resolved': 'bg-success-100 text-success-800 dark:bg-success-800 dark:text-success-200',
            'closed': 'bg-neutral-200 text-neutral-700 dark:bg-neutral-700 dark:text-neutral-300'
        }[issue.status] || 'bg-neutral-200 text-neutral-700 dark:bg-neutral-700 dark:text-neutral-300');
        
        // Update context info
        document.getElementById('issueDetailPage').textContent = issue.current_page || 'Unknown';
        document.getElementById('issueDetailBrowser').textContent = issue.browser_info || 'Unknown';
        
        // Update sidebar info (only if elements exist)
        const reporterEl = document.getElementById('issueDetailReporter');
        if (reporterEl) reporterEl.textContent = issue.contact_name;
        
        const emailEl = document.getElementById('issueDetailEmail');
        if (emailEl) emailEl.textContent = issue.contact_email;
        
        const createdEl = document.getElementById('issueDetailCreated');
        if (createdEl) createdEl.textContent = new Date(issue.created_at).toLocaleString();
        
        const updatedEl = document.getElementById('issueDetailUpdated');
        if (updatedEl) updatedEl.textContent = issue.updated_at ? new Date(issue.updated_at).toLocaleString() : 'Never';
        
        if (issue.resolved_at) {
            const resolvedEl = document.getElementById('issueDetailResolved');
            if (resolvedEl) resolvedEl.textContent = new Date(issue.resolved_at).toLocaleString();
            const resolvedInfoEl = document.getElementById('issueResolvedInfo');
            if (resolvedInfoEl) resolvedInfoEl.style.display = 'block';
        } else {
            const resolvedInfoEl = document.getElementById('issueResolvedInfo');
            if (resolvedInfoEl) resolvedInfoEl.style.display = 'none';
        }
        
        // Update form fields for editing (only if elements exist)
        const statusEl = document.getElementById('updateStatus');
        if (statusEl) statusEl.value = issue.status;
        
        const priorityEl = document.getElementById('updatePriority');
        if (priorityEl) priorityEl.value = issue.priority;
        
        const assigneeEl = document.getElementById('updateAssignee');
        if (assigneeEl) assigneeEl.value = issue.assigned_to || '';
        
        // Store current issue ID for updates
        window.currentIssueId = issue.id;
        
        // Load users for assignment dropdown (if function exists)
        if (typeof loadUsersForAssignment === 'function') {
            await loadUsersForAssignment();
        }
        
        // Load and display responses (if function exists)
        if (typeof displayIssueResponses === 'function') {
            displayIssueResponses(issue.responses);
        }
        
        // Show modal
        openModal('issueDetailModal');
        
    } catch (error) {
        console.error('Failed to load issue details:', error);
        showAlert('Failed to load issue details', 'error');
    }
}

async function loadUsersForAssignment() {
    try {
        if (allUsers.length === 0) {
            const response = await window.http.wrappedFetch('/api/admin/users');
            allUsers = await response.json();
        }
        
        const select = document.getElementById('updateAssignee');
        select.innerHTML = '<option value="">Unassigned</option>';
        
        allUsers.filter(user => user.is_admin && user.is_active).forEach(user => {
            select.innerHTML += `<option value="${user.id}">${user.first_name} ${user.last_name} (${user.username})</option>`;
        });
        
    } catch (error) {
        console.error('Failed to load users for assignment:', error);
    }
}

function displayIssueResponses(responses) {
    const container = document.getElementById('issueResponsesList');
    
    if (responses.length === 0) {
        container.innerHTML = '<p class="text-neutral-500 dark:text-neutral-400">No responses yet.</p>';
        return;
    }
    
    container.innerHTML = responses.map(response => {
        const isInternal = response.is_internal;
        const badgeClass = isInternal 
            ? 'bg-warning-100 text-warning-800 dark:bg-warning-800 dark:text-warning-200' 
            : 'bg-primary-100 text-primary-800 dark:bg-primary-800 dark:text-primary-200';
        const badgeText = isInternal ? 'Internal' : 'Public';
        
        return `
        <div class="border border-neutral-200 dark:border-neutral-700 rounded p-3 mb-3">
            <div class="flex justify-between items-start mb-2">
                <div>
                    <strong>${response.author_name}</strong>
                    <span class="inline-flex items-center px-2 py-0.5 rounded text-xs font-medium ${badgeClass} ml-2">${badgeText}</span>
                </div>
                <small class="text-neutral-500 dark:text-neutral-400">${new Date(response.created_at).toLocaleString()}</small>
            </div>
            <div style="white-space: pre-wrap;">${response.message}</div>
        </div>
        `;
    }).join('');
}

async function updateIssue() {
    if (!window.currentIssueId) {
        showAlert('No issue selected for update', 'error');
        return;
    }
    
    try {
        const updateData = {
            status: document.getElementById('updateStatus').value,
            priority: document.getElementById('updatePriority').value,
            assigned_to: document.getElementById('updateAssignee').value || null
        };
        
        const response = await window.http.wrappedFetch('/api/support/tickets/' + window.currentIssueId, {
            method: 'PUT',
            body: JSON.stringify(updateData)
        });
        
        if (!response.ok) {
            throw new Error('Failed to update issue');
        }
        
        showAlert('Issue updated successfully', 'success');
        
        // Refresh the issue details and table
        await viewIssue(window.currentIssueId);
        await loadIssues();
        await loadIssueStats();
        
    } catch (error) {
        console.error('Failed to update issue:', error);
        showAlert('Failed to update issue', 'error');
    }
}

async function addResponse() {
    const message = document.getElementById('newResponseMessage').value.trim();
    const isInternal = document.getElementById('newResponseInternal').checked;
    
    if (!message) {
        showAlert('Please enter a response message', 'error');
        return;
    }
    
    if (!window.currentIssueId) {
        showAlert('No issue selected for response', 'error');
        return;
    }
    
    try {
        const response = await window.http.wrappedFetch('/api/support/tickets/' + window.currentIssueId + '/responses', {
            method: 'POST',
            body: JSON.stringify({
                message: message,
                is_internal: isInternal
            })
        });
        
        if (!response.ok) {
            throw new Error('Failed to add response');
        }
        
        showAlert('Response added successfully', 'success');
        
        // Clear form
        document.getElementById('newResponseMessage').value = '';
        document.getElementById('newResponseInternal').checked = false;
        
        // Refresh the issue details
        await viewIssue(window.currentIssueId);
        
    } catch (error) {
        console.error('Failed to add response:', error);
        showAlert('Failed to add response', 'error');
    }
}


function searchUsers() {
    const searchTerm = document.getElementById('user-search').value.toLowerCase();
    const filteredUsers = currentUsers.filter(user => 
        user.username.toLowerCase().includes(searchTerm) ||
        user.email.toLowerCase().includes(searchTerm) ||
        (user.first_name && user.first_name.toLowerCase().includes(searchTerm)) ||
        (user.last_name && user.last_name.toLowerCase().includes(searchTerm))
    );
    renderUsersTable(filteredUsers);
}

function filterUsers() {
    loadUsers(); // Reload with current filter
}

function showAlert(message, type = 'info') {
    if (window.alerts && typeof window.alerts.show === 'function') {
        window.alerts.show(message, type);
    } else if (window.showNotification) {
        window.showNotification(message, type);
    } else {
        alert(String(message));
    }
}
</script>
{% endblock %}