package server

// adminPanelHTML is the embedded admin panel UI
const adminPanelHTML = `<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>ZFS Backup Admin Panel</title>
    <style>
        * { box-sizing: border-box; margin: 0; padding: 0; }
        body { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, sans-serif; background: #f5f5f5; min-height: 100vh; }
        .container { max-width: 1200px; margin: 0 auto; padding: 20px; }
        .header { background: #2c3e50; color: white; padding: 20px; margin-bottom: 20px; border-radius: 8px; display: flex; justify-content: space-between; align-items: center; }
        .header h1 { font-size: 24px; }
        .header button { background: #e74c3c; color: white; border: none; padding: 10px 20px; border-radius: 4px; cursor: pointer; }
        .header button:hover { background: #c0392b; }
        .login-container { max-width: 400px; margin: 100px auto; background: white; padding: 40px; border-radius: 8px; box-shadow: 0 2px 10px rgba(0,0,0,0.1); }
        .login-container h2 { text-align: center; margin-bottom: 30px; color: #2c3e50; }
        .form-group { margin-bottom: 20px; }
        .form-group label { display: block; margin-bottom: 5px; color: #666; }
        .form-group input, .form-group select { width: 100%; padding: 10px; border: 1px solid #ddd; border-radius: 4px; font-size: 14px; }
        .btn { background: #3498db; color: white; border: none; padding: 12px 24px; border-radius: 4px; cursor: pointer; font-size: 14px; }
        .btn:hover { background: #2980b9; }
        .btn-danger { background: #e74c3c; }
        .btn-danger:hover { background: #c0392b; }
        .btn-success { background: #27ae60; }
        .btn-success:hover { background: #229954; }
        .btn-warning { background: #f39c12; }
        .btn-warning:hover { background: #d68910; }
        .btn-sm { padding: 6px 12px; font-size: 12px; margin: 2px; }
        .error { color: #e74c3c; margin-bottom: 20px; text-align: center; }
        .success { color: #27ae60; margin-bottom: 20px; text-align: center; }
        .hidden { display: none !important; }
        .card { background: white; border-radius: 8px; box-shadow: 0 2px 10px rgba(0,0,0,0.1); margin-bottom: 20px; }
        .card-header { padding: 20px; border-bottom: 1px solid #eee; display: flex; justify-content: space-between; align-items: center; }
        .card-header h3 { color: #2c3e50; }
        .card-body { padding: 20px; }
        table { width: 100%; border-collapse: collapse; }
        th, td { padding: 12px; text-align: left; border-bottom: 1px solid #eee; }
        th { background: #f8f9fa; font-weight: 600; color: #666; }
        tr:hover { background: #f8f9fa; }
        .badge { padding: 4px 8px; border-radius: 4px; font-size: 12px; font-weight: 600; }
        .badge-success { background: #d4edda; color: #155724; }
        .badge-danger { background: #f8d7da; color: #721c24; }
        .badge-info { background: #d1ecf1; color: #0c5460; }
        .stats-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 20px; margin-bottom: 20px; }
        .stat-card { background: white; padding: 20px; border-radius: 8px; box-shadow: 0 2px 10px rgba(0,0,0,0.1); text-align: center; }
        .stat-card h4 { color: #666; font-size: 14px; margin-bottom: 10px; }
        .stat-card .value { font-size: 32px; font-weight: bold; color: #2c3e50; }
        .modal-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.5); display: flex; align-items: center; justify-content: center; z-index: 1000; }
        .modal-content { background: white; padding: 30px; border-radius: 8px; max-width: 500px; width: 90%; max-height: 90vh; overflow-y: auto; }
        .modal-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; }
        .modal-header h3 { color: #2c3e50; }
        .close-btn { background: none; border: none; font-size: 28px; cursor: pointer; color: #666; line-height: 1; }
        .close-btn:hover { color: #333; }
        .tabs { display: flex; gap: 10px; margin-bottom: 20px; }
        .tab { padding: 10px 20px; background: white; border: none; border-radius: 4px; cursor: pointer; color: #666; }
        .tab.active { background: #3498db; color: white; }
        .progress { background: #ecf0f1; border-radius: 4px; height: 8px; overflow: hidden; }
        .progress-bar { background: #3498db; height: 100%; transition: width 0.3s; }
    </style>
</head>
<body>
    <div id="login-page" class="login-container">
        <h2>Admin Login</h2>
        <div id="login-error" class="error hidden"></div>
        <form id="login-form">
            <div class="form-group">
                <label>Username</label>
                <input type="text" id="username" required autocomplete="username">
            </div>
            <div class="form-group">
                <label>Password</label>
                <input type="password" id="password" required autocomplete="current-password">
            </div>
            <button type="submit" class="btn" style="width: 100%;">Login</button>
        </form>
        <p style="margin-top: 20px; text-align: center; color: #666; font-size: 12px;">Default: admin / admin123</p>
    </div>

    <div id="admin-page" class="container hidden">
        <div class="header">
            <h1>ZFS Backup Admin Panel</h1>
            <div>
                <span id="admin-user" style="margin-right: 15px;"></span>
                <button onclick="logout()">Logout</button>
            </div>
        </div>

        <div class="stats-grid" id="stats-grid"></div>

        <div class="tabs">
            <button class="tab active" data-tab="clients" onclick="showTab('clients')">Clients</button>
            <button class="tab" data-tab="snapshots" onclick="showTab('snapshots')">Snapshots</button>
            <button class="tab" data-tab="admins" onclick="showTab('admins')">Admins</button>
        </div>

        <div id="clients-tab">
            <div class="card">
                <div class="card-header">
                    <h3>Clients</h3>
                    <button class="btn btn-success" onclick="showModal('add-client-modal')">+ Add Client</button>
                </div>
                <div class="card-body">
                    <table>
                        <thead>
                            <tr>
                                <th>Client ID</th>
                                <th>Storage Type</th>
                                <th>Quota</th>
                                <th>Used</th>
                                <th>Snapshots</th>
                                <th>Status</th>
                                <th>Actions</th>
                            </tr>
                        </thead>
                        <tbody id="clients-table"></tbody>
                    </table>
                </div>
            </div>
        </div>

        <div id="snapshots-tab" class="hidden">
            <div class="card">
                <div class="card-header">
                    <h3>Snapshots</h3>
                    <select id="snapshot-client-filter" onchange="loadSnapshots()">
                        <option value="">All Clients</option>
                    </select>
                </div>
                <div class="card-body">
                    <table>
                        <thead>
                            <tr>
                                <th>Client</th>
                                <th>Snapshot ID</th>
                                <th>Timestamp</th>
                                <th>Size</th>
                                <th>Type</th>
                                <th>Actions</th>
                            </tr>
                        </thead>
                        <tbody id="snapshots-table"></tbody>
                    </table>
                </div>
            </div>
        </div>

        <div id="admins-tab" class="hidden">
            <div class="card">
                <div class="card-header">
                    <h3>Admin Users</h3>
                    <button class="btn btn-success" onclick="showModal('add-admin-modal')">+ Add Admin</button>
                </div>
                <div class="card-body">
                    <table>
                        <thead>
                            <tr>
                                <th>ID</th>
                                <th>Username</th>
                                <th>Role</th>
                                <th>Created</th>
                                <th>Actions</th>
                            </tr>
                        </thead>
                        <tbody id="admins-table"></tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>

    <!-- Add Client Modal -->
    <div id="add-client-modal" class="modal-overlay hidden" onclick="closeModalOnOverlay(event, 'add-client-modal')">
        <div class="modal-content" onclick="event.stopPropagation()">
            <div class="modal-header">
                <h3>Add New Client</h3>
                <button type="button" class="close-btn" onclick="closeModal('add-client-modal')">&times;</button>
            </div>
            <form id="add-client-form">
                <div class="form-group">
                    <label>Client ID</label>
                    <input type="text" id="new-client-id" required>
                </div>
                <div class="form-group">
                    <label>API Key</label>
                    <input type="text" id="new-client-apikey" required>
                </div>
                <div class="form-group">
                    <label>Storage Type</label>
                    <select id="new-client-storage">
                        <option value="s3">S3</option>
                        <option value="local">Local ZFS</option>
                    </select>
                </div>
                <div class="form-group">
                    <label>Target Dataset (for local storage)</label>
                    <input type="text" id="new-client-dataset" placeholder="backup/client1">
                </div>
                <div class="form-group">
                    <label>Quota (GB)</label>
                    <input type="number" id="new-client-quota" value="100" min="1">
                </div>
                <div class="form-group">
                    <label>Enabled</label>
                    <input type="checkbox" id="new-client-enabled" checked>
                </div>
                <h4 style="margin: 20px 0 10px; color: #666;">Rotation Policy</h4>
                <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 10px;">
                    <div class="form-group">
                        <label>Keep Hourly</label>
                        <input type="number" id="new-client-hourly" value="24" min="0">
                    </div>
                    <div class="form-group">
                        <label>Keep Daily</label>
                        <input type="number" id="new-client-daily" value="7" min="0">
                    </div>
                    <div class="form-group">
                        <label>Keep Weekly</label>
                        <input type="number" id="new-client-weekly" value="4" min="0">
                    </div>
                    <div class="form-group">
                        <label>Keep Monthly</label>
                        <input type="number" id="new-client-monthly" value="12" min="0">
                    </div>
                </div>
                <button type="submit" class="btn btn-success" style="width: 100%; margin-top: 20px;">Create Client</button>
            </form>
        </div>
    </div>

    <!-- Edit Client Modal -->
    <div id="edit-client-modal" class="modal-overlay hidden" onclick="closeModalOnOverlay(event, 'edit-client-modal')">
        <div class="modal-content" onclick="event.stopPropagation()">
            <div class="modal-header">
                <h3>Edit Client</h3>
                <button type="button" class="close-btn" onclick="closeModal('edit-client-modal')">&times;</button>
            </div>
            <form id="edit-client-form">
                <input type="hidden" id="edit-client-id">
                <div class="form-group">
                    <label>New API Key (leave empty to keep current)</label>
                    <input type="text" id="edit-client-apikey" placeholder="Leave empty to keep current">
                </div>
                <div class="form-group">
                    <label>Storage Type</label>
                    <select id="edit-client-storage">
                        <option value="s3">S3</option>
                        <option value="local">Local ZFS</option>
                    </select>
                </div>
                <div class="form-group">
                    <label>Target Dataset</label>
                    <input type="text" id="edit-client-dataset">
                </div>
                <div class="form-group">
                    <label>Quota (GB)</label>
                    <input type="number" id="edit-client-quota" min="1">
                </div>
                <div class="form-group">
                    <label>Enabled</label>
                    <input type="checkbox" id="edit-client-enabled">
                </div>
                <h4 style="margin: 20px 0 10px; color: #666;">Rotation Policy</h4>
                <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 10px;">
                    <div class="form-group">
                        <label>Keep Hourly</label>
                        <input type="number" id="edit-client-hourly" min="0">
                    </div>
                    <div class="form-group">
                        <label>Keep Daily</label>
                        <input type="number" id="edit-client-daily" min="0">
                    </div>
                    <div class="form-group">
                        <label>Keep Weekly</label>
                        <input type="number" id="edit-client-weekly" min="0">
                    </div>
                    <div class="form-group">
                        <label>Keep Monthly</label>
                        <input type="number" id="edit-client-monthly" min="0">
                    </div>
                </div>
                <button type="submit" class="btn btn-success" style="width: 100%; margin-top: 20px;">Update Client</button>
            </form>
        </div>
    </div>

    <!-- Add Admin Modal -->
    <div id="add-admin-modal" class="modal-overlay hidden" onclick="closeModalOnOverlay(event, 'add-admin-modal')">
        <div class="modal-content" onclick="event.stopPropagation()">
            <div class="modal-header">
                <h3>Add New Admin</h3>
                <button type="button" class="close-btn" onclick="closeModal('add-admin-modal')">&times;</button>
            </div>
            <form id="add-admin-form">
                <div class="form-group">
                    <label>Username</label>
                    <input type="text" id="new-admin-username" required>
                </div>
                <div class="form-group">
                    <label>Password</label>
                    <input type="password" id="new-admin-password" required>
                </div>
                <div class="form-group">
                    <label>Role</label>
                    <select id="new-admin-role">
                        <option value="admin">Admin</option>
                    </select>
                </div>
                <button type="submit" class="btn btn-success" style="width: 100%; margin-top: 20px;">Create Admin</button>
            </form>
        </div>
    </div>

    <!-- Change Password Modal -->
    <div id="change-password-modal" class="modal-overlay hidden" onclick="closeModalOnOverlay(event, 'change-password-modal')">
        <div class="modal-content" onclick="event.stopPropagation()">
            <div class="modal-header">
                <h3>Change Password</h3>
                <button type="button" class="close-btn" onclick="closeModal('change-password-modal')">&times;</button>
            </div>
            <form id="change-password-form">
                <input type="hidden" id="change-password-admin-id">
                <div class="form-group">
                    <label>Admin Username</label>
                    <input type="text" id="change-password-username" readonly>
                </div>
                <div class="form-group">
                    <label>New Password</label>
                    <input type="password" id="change-password-new" required>
                </div>
                <div class="form-group">
                    <label>Confirm New Password</label>
                    <input type="password" id="change-password-confirm" required>
                </div>
                <button type="submit" class="btn btn-success" style="width: 100%; margin-top: 20px;">Change Password</button>
            </form>
        </div>
    </div>

    <!-- Client Change Password Modal -->
    <div id="client-password-modal" class="modal-overlay hidden" onclick="closeModalOnOverlay(event, 'client-password-modal')">
        <div class="modal-content" onclick="event.stopPropagation()">
            <div class="modal-header">
                <h3>Set Client API Key</h3>
                <button type="button" class="close-btn" onclick="closeModal('client-password-modal')">&times;</button>
            </div>
            <form id="client-password-form">
                <input type="hidden" id="client-password-client-id">
                <div class="form-group">
                    <label>Client ID</label>
                    <input type="text" id="client-password-client-name" readonly>
                </div>
                <div class="form-group">
                    <label>New API Key</label>
                    <input type="text" id="client-password-new" required>
                </div>
                <div class="form-group">
                    <label>Confirm API Key</label>
                    <input type="text" id="client-password-confirm" required>
                </div>
                <button type="submit" class="btn btn-success" style="width: 100%; margin-top: 20px;">Set API Key</button>
            </form>
        </div>
    </div>

    <script>
        let currentTab = 'clients';

        // Check authentication on load
        async function checkAuth() {
            try {
                const res = await fetch('/admin/check');
                const data = await res.json();
                if (data.authenticated) {
                    document.getElementById('login-page').classList.add('hidden');
                    document.getElementById('admin-page').classList.remove('hidden');
                    document.getElementById('admin-user').textContent = data.username;
                    loadStats();
                    loadClients();
                }
            } catch (e) {
                console.error('Auth check failed:', e);
            }
        }

        // Login
        document.getElementById('login-form').addEventListener('submit', async (e) => {
            e.preventDefault();
            const username = document.getElementById('username').value;
            const password = document.getElementById('password').value;
            
            try {
                const res = await fetch('/admin/login', {
                    method: 'POST',
                    headers: { 'Content-Type': 'application/json' },
                    body: JSON.stringify({ username, password })
                });
                const data = await res.json();
                
                if (data.success) {
                    document.getElementById('login-page').classList.add('hidden');
                    document.getElementById('admin-page').classList.remove('hidden');
                    document.getElementById('admin-user').textContent = username;
                    loadStats();
                    loadClients();
                } else {
                    document.getElementById('login-error').textContent = data.message || 'Login failed';
                    document.getElementById('login-error').classList.remove('hidden');
                }
            } catch (e) {
                document.getElementById('login-error').textContent = 'Connection error';
                document.getElementById('login-error').classList.remove('hidden');
            }
        });

        // Logout
        async function logout() {
            await fetch('/admin/logout', { method: 'POST' });
            location.reload();
        }

        // Load stats
        async function loadStats() {
            try {
                const res = await fetch('/admin/stats');
                const data = await res.json();
                document.getElementById('stats-grid').innerHTML = 
                    '<div class="stat-card"><h4>Clients</h4><div class="value">' + data.client_count + '</div></div>' +
                    '<div class="stat-card"><h4>Total Snapshots</h4><div class="value">' + data.total_snapshots + '</div></div>' +
                    '<div class="stat-card"><h4>Total Storage</h4><div class="value">' + data.total_storage_gb.toFixed(2) + ' GB</div></div>';
            } catch (e) {
                console.error('Failed to load stats:', e);
            }
        }

        // Load clients
        async function loadClients() {
            try {
                const res = await fetch('/admin/clients');
                const clients = await res.json();
                
                const tbody = document.getElementById('clients-table');
                tbody.innerHTML = clients.map(c => {
                    const usedPercent = c.max_size_bytes > 0 ? (c.current_usage / c.max_size_bytes * 100).toFixed(1) : 0;
                    const usedGB = (c.current_usage / (1024*1024*1024)).toFixed(2);
                    const maxGB = (c.max_size_bytes / (1024*1024*1024)).toFixed(0);
                    return '<tr>' +
                        '<td><strong>' + c.client_id + '</strong></td>' +
                        '<td><span class="badge badge-info">' + c.storage_type + '</span></td>' +
                        '<td>' + maxGB + ' GB</td>' +
                        '<td>' +
                            '<div>' + usedGB + ' GB (' + usedPercent + '%)</div>' +
                            '<div class="progress" style="width: 100px; margin-top: 4px;"><div class="progress-bar" style="width: ' + Math.min(usedPercent, 100) + '%;"></div></div>' +
                        '</td>' +
                        '<td>' + c.snapshot_count + '</td>' +
                        '<td>' + (c.enabled ? '<span class="badge badge-success">Enabled</span>' : '<span class="badge badge-danger">Disabled</span>') + '</td>' +
                        '<td>' +
                            '<button class="btn btn-sm btn-warning" onclick="editClient(\'' + c.client_id + '\')">Edit</button>' +
                            '<button class="btn btn-sm" style="background: #9b59b6; color: white;" onclick="showClientChangePassword(\'' + c.client_id + '\')">Set Key</button>' +
                            '<button class="btn btn-sm" style="background: #e67e22; color: white;" onclick="resetClientPassword(\'' + c.client_id + '\')">Reset Key</button>' +
                            '<button class="btn btn-sm btn-danger" onclick="deleteClient(\'' + c.client_id + '\')">Delete</button>' +
                        '</td>' +
                    '</tr>';
                }).join('');

                // Update snapshot filter
                const filter = document.getElementById('snapshot-client-filter');
                filter.innerHTML = '<option value="">All Clients</option>' + 
                    clients.map(c => '<option value="' + c.client_id + '">' + c.client_id + '</option>').join('');
            } catch (e) {
                console.error('Failed to load clients:', e);
            }
        }

        // Load snapshots
        async function loadSnapshots() {
            const clientId = document.getElementById('snapshot-client-filter').value;
            const url = '/admin/snapshots' + (clientId ? '?client_id=' + clientId : '');
            
            try {
                const res = await fetch(url);
                const snapshots = await res.json();
                
                const tbody = document.getElementById('snapshots-table');
                tbody.innerHTML = snapshots.map(s => {
                    const sizeGB = (s.size_bytes / (1024*1024*1024)).toFixed(2);
                    return '<tr>' +
                        '<td>' + s.client_id + '</td>' +
                        '<td>' + s.snapshot_id + '</td>' +
                        '<td>' + new Date(s.timestamp).toLocaleString() + '</td>' +
                        '<td>' + sizeGB + ' GB</td>' +
                        '<td>' + 
                            (s.incremental ? '<span class="badge badge-info">Incremental</span>' : '<span class="badge badge-success">Full</span>') +
                            (s.compressed ? ' <span class="badge badge-info">Compressed</span>' : '') +
                        '</td>' +
                        '<td><button class="btn btn-sm btn-danger" onclick="deleteSnapshot(\'' + s.client_id + '\', \'' + s.snapshot_id + '\')">Delete</button></td>' +
                    '</tr>';
                }).join('');
            } catch (e) {
                console.error('Failed to load snapshots:', e);
            }
        }

        // Load admins
        async function loadAdmins() {
            try {
                const res = await fetch('/admin/admins');
                const admins = await res.json();
                
                const tbody = document.getElementById('admins-table');
                tbody.innerHTML = admins.map(a => 
                    '<tr>' +
                        '<td>' + a.id + '</td>' +
                        '<td><strong>' + a.username + '</strong></td>' +
                        '<td><span class="badge badge-info">' + a.role + '</span></td>' +
                        '<td>' + new Date(a.created_at).toLocaleDateString() + '</td>' +
                        '<td>' +
                            '<button class="btn btn-sm btn-warning" onclick="showChangePassword(' + a.id + ', \'' + a.username + '\')">Change Password</button>' +
                            '<button class="btn btn-sm btn-danger" onclick="deleteAdmin(' + a.id + ')">Delete</button>' +
                        '</td>' +
                    '</tr>'
                ).join('');
            } catch (e) {
                console.error('Failed to load admins:', e);
            }
        }

        // Tab switching
        function showTab(tab) {
            currentTab = tab;
            document.querySelectorAll('.tab').forEach(t => t.classList.remove('active'));
            document.querySelector('.tab[data-tab="' + tab + '"]').classList.add('active');
            
            document.getElementById('clients-tab').classList.add('hidden');
            document.getElementById('snapshots-tab').classList.add('hidden');
            document.getElementById('admins-tab').classList.add('hidden');
            document.getElementById(tab + '-tab').classList.remove('hidden');
            
            if (tab === 'snapshots') loadSnapshots();
            if (tab === 'admins') loadAdmins();
        }

        // Modal functions
        function showModal(id) {
            document.getElementById(id).classList.remove('hidden');
        }

        function closeModal(id) {
            document.getElementById(id).classList.add('hidden');
        }

        function closeModalOnOverlay(event, id) {
            if (event.target === event.currentTarget) {
                closeModal(id);
            }
        }

        // Edit client
        async function editClient(clientId) {
            try {
                const res = await fetch('/admin/client?client_id=' + clientId);
                const data = await res.json();
                const c = data.client;
                
                document.getElementById('edit-client-id').value = c.client_id;
                document.getElementById('edit-client-apikey').value = '';
                document.getElementById('edit-client-storage').value = c.storage_type;
                document.getElementById('edit-client-dataset').value = c.dataset;
                document.getElementById('edit-client-quota').value = Math.round(c.max_size_bytes / (1024*1024*1024));
                document.getElementById('edit-client-enabled').checked = c.enabled;
                
                if (c.rotation_policy) {
                    document.getElementById('edit-client-hourly').value = c.rotation_policy.keep_hourly || 0;
                    document.getElementById('edit-client-daily').value = c.rotation_policy.keep_daily || 0;
                    document.getElementById('edit-client-weekly').value = c.rotation_policy.keep_weekly || 0;
                    document.getElementById('edit-client-monthly').value = c.rotation_policy.keep_monthly || 0;
                }
                
                showModal('edit-client-modal');
            } catch (e) {
                alert('Failed to load client data');
            }
        }

        // Add client
        document.getElementById('add-client-form').addEventListener('submit', async (e) => {
            e.preventDefault();
            
            const client = {
                client_id: document.getElementById('new-client-id').value,
                api_key: document.getElementById('new-client-apikey').value,
                storage_type: document.getElementById('new-client-storage').value,
                dataset: document.getElementById('new-client-dataset').value,
                max_size_bytes: parseInt(document.getElementById('new-client-quota').value) * 1024 * 1024 * 1024,
                enabled: document.getElementById('new-client-enabled').checked,
                rotation_policy: {
                    keep_hourly: parseInt(document.getElementById('new-client-hourly').value) || 0,
                    keep_daily: parseInt(document.getElementById('new-client-daily').value) || 0,
                    keep_weekly: parseInt(document.getElementById('new-client-weekly').value) || 0,
                    keep_monthly: parseInt(document.getElementById('new-client-monthly').value) || 0
                }
            };
            
            try {
                const res = await fetch('/admin/client/create', {
                    method: 'POST',
                    headers: { 'Content-Type': 'application/json' },
                    body: JSON.stringify(client)
                });
                const data = await res.json();
                
                if (data.success) {
                    closeModal('add-client-modal');
                    document.getElementById('add-client-form').reset();
                    loadClients();
                    loadStats();
                } else {
                    alert(data.message || 'Failed to create client');
                }
            } catch (e) {
                alert('Failed to create client');
            }
        });

        // Edit client form
        document.getElementById('edit-client-form').addEventListener('submit', async (e) => {
            e.preventDefault();
            
            const client = {
                client_id: document.getElementById('edit-client-id').value,
                api_key: document.getElementById('edit-client-apikey').value,
                storage_type: document.getElementById('edit-client-storage').value,
                dataset: document.getElementById('edit-client-dataset').value,
                max_size_bytes: parseInt(document.getElementById('edit-client-quota').value) * 1024 * 1024 * 1024,
                enabled: document.getElementById('edit-client-enabled').checked,
                rotation_policy: {
                    keep_hourly: parseInt(document.getElementById('edit-client-hourly').value) || 0,
                    keep_daily: parseInt(document.getElementById('edit-client-daily').value) || 0,
                    keep_weekly: parseInt(document.getElementById('edit-client-weekly').value) || 0,
                    keep_monthly: parseInt(document.getElementById('edit-client-monthly').value) || 0
                }
            };
            
            try {
                const res = await fetch('/admin/client/update', {
                    method: 'POST',
                    headers: { 'Content-Type': 'application/json' },
                    body: JSON.stringify(client)
                });
                const data = await res.json();
                
                if (data.success) {
                    closeModal('edit-client-modal');
                    loadClients();
                    loadStats();
                } else {
                    alert(data.message || 'Failed to update client');
                }
            } catch (e) {
                alert('Failed to update client');
            }
        });

        // Add admin
        document.getElementById('add-admin-form').addEventListener('submit', async (e) => {
            e.preventDefault();
            
            const admin = {
                username: document.getElementById('new-admin-username').value,
                password: document.getElementById('new-admin-password').value,
                role: document.getElementById('new-admin-role').value
            };
            
            try {
                const res = await fetch('/admin/admin/create', {
                    method: 'POST',
                    headers: { 'Content-Type': 'application/json' },
                    body: JSON.stringify(admin)
                });
                const data = await res.json();
                
                if (data.success) {
                    closeModal('add-admin-modal');
                    document.getElementById('add-admin-form').reset();
                    loadAdmins();
                } else {
                    alert(data.message || 'Failed to create admin');
                }
            } catch (e) {
                alert('Failed to create admin');
            }
        });

        // Change password
        function showChangePassword(adminId, username) {
            document.getElementById('change-password-admin-id').value = adminId;
            document.getElementById('change-password-username').value = username;
            document.getElementById('change-password-new').value = '';
            document.getElementById('change-password-confirm').value = '';
            showModal('change-password-modal');
        }

        document.getElementById('change-password-form').addEventListener('submit', async (e) => {
            e.preventDefault();
            
            const adminId = document.getElementById('change-password-admin-id').value;
            const newPassword = document.getElementById('change-password-new').value;
            const confirmPassword = document.getElementById('change-password-confirm').value;
            
            if (newPassword !== confirmPassword) {
                alert('Passwords do not match');
                return;
            }
            
            try {
                const res = await fetch('/admin/admin/password', {
                    method: 'POST',
                    headers: { 'Content-Type': 'application/json' },
                    body: JSON.stringify({ id: parseInt(adminId), password: newPassword })
                });
                const data = await res.json();
                
                if (data.success) {
                    closeModal('change-password-modal');
                    alert('Password changed successfully');
                } else {
                    alert(data.message || 'Failed to change password');
                }
            } catch (e) {
                alert('Failed to change password');
            }
        });

        // Delete functions
        async function deleteClient(clientId) {
            if (!confirm('Are you sure you want to delete client "' + clientId + '" and all its snapshots?')) return;
            
            try {
                const res = await fetch('/admin/client/delete?client_id=' + clientId, { method: 'POST' });
                const data = await res.json();
                if (data.success) {
                    loadClients();
                    loadStats();
                } else {
                    alert(data.message || 'Failed to delete client');
                }
            } catch (e) {
                alert('Failed to delete client');
            }
        }

        async function deleteSnapshot(clientId, snapshotId) {
            if (!confirm('Are you sure you want to delete snapshot "' + snapshotId + '"?')) return;
            
            try {
                const res = await fetch('/admin/snapshot/delete?client_id=' + clientId + '&snapshot_id=' + snapshotId, { method: 'POST' });
                const data = await res.json();
                if (data.success) {
                    loadSnapshots();
                    loadStats();
                } else {
                    alert(data.message || 'Failed to delete snapshot');
                }
            } catch (e) {
                alert('Failed to delete snapshot');
            }
        }

        async function deleteAdmin(id) {
            if (!confirm('Are you sure you want to delete this admin?')) return;
            
            try {
                const res = await fetch('/admin/admin/delete?id=' + id, { method: 'POST' });
                const data = await res.json();
                if (data.success) {
                    loadAdmins();
                } else {
                    alert(data.message || 'Failed to delete admin');
                }
            } catch (e) {
                alert('Failed to delete admin');
            }
        }

        // Reset client password/API key
        async function resetClientPassword(clientId) {
            if (!confirm('Reset API key for client "' + clientId + '"? The new key will be shown once.')) return;
            
            try {
                const res = await fetch('/admin/client/reset-password?client_id=' + clientId, { method: 'POST' });
                const data = await res.json();
                if (data.success) {
                    // Show the new API key in a prompt so it can be copied
                    prompt('New API key for ' + clientId + ' (copy this now - it won\\'t be shown again):', data.api_key);
                } else {
                    alert(data.message || 'Failed to reset client password');
                }
            } catch (e) {
                alert('Failed to reset client password');
            }
        }

        // Show client password change modal
        function showClientChangePassword(clientId) {
            document.getElementById('client-password-client-id').value = clientId;
            document.getElementById('client-password-client-name').value = clientId;
            document.getElementById('client-password-new').value = '';
            document.getElementById('client-password-confirm').value = '';
            showModal('client-password-modal');
        }

        // Handle client password change form
        document.getElementById('client-password-form').addEventListener('submit', async (e) => {
            e.preventDefault();
            
            const clientId = document.getElementById('client-password-client-id').value;
            const newKey = document.getElementById('client-password-new').value;
            const confirmKey = document.getElementById('client-password-confirm').value;
            
            if (newKey !== confirmKey) {
                alert('API keys do not match');
                return;
            }
            
            try {
                const res = await fetch('/admin/client/update', {
                    method: 'POST',
                    headers: { 'Content-Type': 'application/json' },
                    body: JSON.stringify({ client_id: clientId, api_key: newKey })
                });
                const data = await res.json();
                
                if (data.success) {
                    closeModal('client-password-modal');
                    alert('API key changed successfully for ' + clientId);
                } else {
                    alert(data.message || 'Failed to change API key');
                }
            } catch (e) {
                alert('Failed to change API key');
            }
        });

        // Initialize
        checkAuth();
    </script>
</body>
</html>`
