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) {
            window.location.href = '/admin/';
        }
    } catch (e) {
        console.error('Auth check failed:', e);
    }
}

// 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="bg-white p-4 rounded-lg shadow text-center"><h4 class="text-gray-500 text-sm mb-2">Clients</h4><div class="text-2xl font-bold text-slate-800">' + data.client_count + '</div></div>' +
            '<div class="bg-white p-4 rounded-lg shadow text-center"><h4 class="text-gray-500 text-sm mb-2">Total Snapshots</h4><div class="text-2xl font-bold text-slate-800">' + data.total_snapshots + '</div></div>' +
            '<div class="bg-white p-4 rounded-lg shadow text-center"><h4 class="text-gray-500 text-sm mb-2">Total Storage</h4><div class="text-2xl font-bold text-slate-800">' + 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 class="border-b hover:bg-gray-50">' +
                '<td class="py-2 px-2 font-semibold">' + c.client_id + '</td>' +
                '<td class="py-2 px-2"><span class="px-2 py-0.5 rounded text-xs font-semibold bg-blue-100 text-blue-800">' + c.storage_type + '</span></td>' +
                '<td class="py-2 px-2">' + maxGB + ' GB</td>' +
                '<td class="py-2 px-2">' +
                    '<div>' + usedGB + ' GB (' + usedPercent + '%)</div>' +
                    '<div class="w-24 h-2 bg-gray-200 rounded overflow-hidden mt-1"><div class="h-full bg-primary transition-all" style="width: ' + Math.min(usedPercent, 100) + '%"></div></div>' +
                '</td>' +
                '<td class="py-2 px-2">' + c.snapshot_count + '</td>' +
                '<td class="py-2 px-2">' + (c.enabled ? '<span class="px-2 py-0.5 rounded text-xs font-semibold bg-green-100 text-green-800">Enabled</span>' : '<span class="px-2 py-0.5 rounded text-xs font-semibold bg-red-100 text-red-800">Disabled</span>') + '</td>' +
                '<td class="py-2 px-2 whitespace-nowrap">' +
                    '<button class="px-2 py-1 text-xs rounded bg-warning hover:bg-yellow-600 text-white mr-1" data-action="edit-client" data-client-id="' + c.client_id + '">Edit</button>' +
                    '<button class="px-2 py-1 text-xs rounded bg-purple-500 hover:bg-purple-600 text-white mr-1" data-action="set-client-key" data-client-id="' + c.client_id + '">Set Key</button>' +
                    '<button class="px-2 py-1 text-xs rounded bg-orange-500 hover:bg-orange-600 text-white mr-1" data-action="reset-client-key" data-client-id="' + c.client_id + '">Reset Key</button>' +
                    '<button class="px-2 py-1 text-xs rounded bg-danger hover:bg-red-600 text-white" data-action="delete-client" data-client-id="' + 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 class="border-b hover:bg-gray-50">' +
                '<td class="py-2 px-2">' + s.client_id + '</td>' +
                '<td class="py-2 px-2">' + s.snapshot_id + '</td>' +
                '<td class="py-2 px-2">' + new Date(s.timestamp).toLocaleString() + '</td>' +
                '<td class="py-2 px-2">' + sizeGB + ' GB</td>' +
                '<td class="py-2 px-2">' + 
                    (s.incremental ? '<span class="px-2 py-0.5 rounded text-xs font-semibold bg-blue-100 text-blue-800">Incremental</span>' : '<span class="px-2 py-0.5 rounded text-xs font-semibold bg-green-100 text-green-800">Full</span>') +
                    (s.compressed ? ' <span class="px-2 py-0.5 rounded text-xs font-semibold bg-blue-100 text-blue-800">LZ4</span>' : '') +
                '</td>' +
                '<td class="py-2 px-2"><button class="px-2 py-1 text-xs rounded bg-danger hover:bg-red-600 text-white" data-action="delete-snapshot" data-client-id="' + s.client_id + '" data-snapshot-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 class="border-b hover:bg-gray-50">' +
                '<td class="py-2 px-2">' + a.id + '</td>' +
                '<td class="py-2 px-2 font-semibold">' + a.username + '</td>' +
                '<td class="py-2 px-2"><span class="px-2 py-0.5 rounded text-xs font-semibold bg-blue-100 text-blue-800">' + a.role + '</span></td>' +
                '<td class="py-2 px-2">' + new Date(a.created_at).toLocaleDateString() + '</td>' +
                '<td class="py-2 px-2 whitespace-nowrap">' +
                    '<button class="px-2 py-1 text-xs rounded bg-warning hover:bg-yellow-600 text-white mr-1" data-action="change-admin-password" data-admin-id="' + a.id + '" data-admin-username="' + a.username + '">Change Password</button>' +
                    '<button class="px-2 py-1 text-xs rounded bg-danger hover:bg-red-600 text-white" data-action="delete-admin" data-admin-id="' + 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('[data-tab]').forEach(t => {
        t.classList.remove('bg-primary', 'text-white');
        t.classList.add('bg-white', 'text-gray-600');
    });
    document.querySelector('[data-tab="' + tab + '"]').classList.remove('bg-white', 'text-gray-600');
    document.querySelector('[data-tab="' + tab + '"]').classList.add('bg-primary', 'text-white');
    
    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) {
    const modal = document.getElementById(id);
    modal.classList.remove('hidden');
    modal.classList.add('flex');
}

function closeModal(id) {
    const modal = document.getElementById(id);
    modal.classList.add('hidden');
    modal.classList.remove('flex');
}

// 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');
    }
}

// Delete client
async function deleteClient(clientId) {
    if (!confirm('Are you sure you want to delete client "' + clientId + '"? This will also delete all snapshots.')) {
        return;
    }
    
    try {
        const res = await fetch('/admin/client/delete', {
            method: 'POST',
            headers: { 'Content-Type': 'application/json' },
            body: JSON.stringify({ client_id: clientId })
        });
        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');
    }
}

// Delete snapshot
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', {
            method: 'POST',
            headers: { 'Content-Type': 'application/json' },
            body: JSON.stringify({ client_id: clientId, snapshot_id: snapshotId })
        });
        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');
    }
}

// Delete admin
async function deleteAdmin(adminId) {
    if (!confirm('Are you sure you want to delete this admin?')) {
        return;
    }
    
    try {
        const res = await fetch('/admin/admin/delete', {
            method: 'POST',
            headers: { 'Content-Type': 'application/json' },
            body: JSON.stringify({ admin_id: adminId })
        });
        const data = await res.json();
        
        if (data.success) {
            loadAdmins();
        } else {
            alert(data.message || 'Failed to delete admin');
        }
    } catch (e) {
        alert('Failed to delete admin');
    }
}

// Show change password modal
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');
}

// Show client change password 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');
}

// Reset client password
async function resetClientPassword(clientId) {
    if (!confirm('Are you sure you want to reset the API key for "' + clientId + '"? A new random key will be generated.')) {
        return;
    }
    
    try {
        const res = await fetch('/admin/client/reset-password', {
            method: 'POST',
            headers: { 'Content-Type': 'application/json' },
            body: JSON.stringify({ client_id: clientId })
        });
        const data = await res.json();
        
        if (data.success) {
            alert('New API key for ' + clientId + ': ' + data.api_key + '\n\nPlease save this key as it will not be shown again.');
        } else {
            alert(data.message || 'Failed to reset API key');
        }
    } catch (e) {
        alert('Failed to reset API key');
    }
}

// Event delegation for click handlers
document.addEventListener('click', function(e) {
    const target = e.target;
    
    // Handle modal content clicks - stop propagation
    if (target.classList.contains('modal-content') || target.closest('.modal-content')) {
        // Don't process if clicking on close button
        if (!target.classList.contains('modal-close')) {
            return;
        }
    }
    
    // Handle modal close buttons
    if (target.classList.contains('modal-close')) {
        const modalId = target.getAttribute('data-modal-id');
        if (modalId) {
            closeModal(modalId);
        }
        return;
    }
    
    // Handle modal overlay clicks (close on backdrop click)
    if (target.classList.contains('fixed') && target.hasAttribute('data-modal-id')) {
        closeModal(target.id);
        return;
    }
    
    // Handle data-action buttons
    const action = target.getAttribute('data-action');
    if (!action) return;
    
    switch (action) {
        case 'show-modal':
            const modalId = target.getAttribute('data-modal');
            if (modalId) showModal(modalId);
            break;
        case 'edit-client':
            const clientId = target.getAttribute('data-client-id');
            if (clientId) editClient(clientId);
            break;
        case 'delete-client':
            const delClientId = target.getAttribute('data-client-id');
            if (delClientId) deleteClient(delClientId);
            break;
        case 'set-client-key':
            const setKeyClientId = target.getAttribute('data-client-id');
            if (setKeyClientId) showClientChangePassword(setKeyClientId);
            break;
        case 'reset-client-key':
            const resetKeyClientId = target.getAttribute('data-client-id');
            if (resetKeyClientId) resetClientPassword(resetKeyClientId);
            break;
        case 'delete-snapshot':
            const snapClientId = target.getAttribute('data-client-id');
            const snapshotId = target.getAttribute('data-snapshot-id');
            if (snapClientId && snapshotId) deleteSnapshot(snapClientId, snapshotId);
            break;
        case 'change-admin-password':
            const adminId = target.getAttribute('data-admin-id');
            const adminUsername = target.getAttribute('data-admin-username');
            if (adminId && adminUsername) showChangePassword(adminId, adminUsername);
            break;
        case 'delete-admin':
            const delAdminId = target.getAttribute('data-admin-id');
            if (delAdminId) deleteAdmin(parseInt(delAdminId));
            break;
    }
});

// Tab click handler
document.addEventListener('click', function(e) {
    const tab = e.target.getAttribute('data-tab');
    if (tab) {
        showTab(tab);
    }
});

// Snapshot filter change handler
document.addEventListener('change', function(e) {
    if (e.target.id === 'snapshot-client-filter') {
        loadSnapshots();
    }
});

// Add client form
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 form
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 form
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({ admin_id: parseInt(adminId), new_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');
    }
});

// Client password 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/password', {
            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
loadStats();
loadClients();