{% extends "base.html" %}
{% load static %}

{% block title %}Admin Dashboard - Adtlas DAI Management{% endblock %}

{% block extra_css %}
<link rel="stylesheet" href="{% static 'css/components.css' %}">
<style>
    .admin-header {
        background: linear-gradient(135deg, #1a1a2e, #16213e);
        color: white;
        padding: 2rem;
        border-radius: var(--border-radius-lg);
        margin-bottom: 2rem;
        position: relative;
        overflow: hidden;
    }
    
    .admin-header::before {
        content: '';
        position: absolute;
        top: 0;
        right: 0;
        width: 200px;
        height: 200px;
        background: radial-gradient(circle, rgba(255,255,255,0.1) 0%, transparent 70%);
        border-radius: 50%;
        transform: translate(50%, -50%);
    }
    
    .admin-title {
        font-size: 2.5rem;
        font-weight: 700;
        margin-bottom: 0.5rem;
        position: relative;
        z-index: 1;
    }
    
    .admin-subtitle {
        opacity: 0.9;
        font-size: 1.2rem;
        position: relative;
        z-index: 1;
    }
    
    .admin-stats {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
        gap: 1rem;
        margin-top: 2rem;
        position: relative;
        z-index: 1;
    }
    
    .admin-stat {
        background: rgba(255, 255, 255, 0.1);
        padding: 1.5rem;
        border-radius: var(--border-radius);
        text-align: center;
        backdrop-filter: blur(10px);
    }
    
    .admin-stat-value {
        font-size: 2rem;
        font-weight: 700;
        margin-bottom: 0.5rem;
    }
    
    .admin-stat-label {
        font-size: 0.875rem;
        opacity: 0.8;
    }
    
    .admin-grid {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 2rem;
        margin-bottom: 2rem;
    }
    
    .admin-panel {
        background: var(--card-bg);
        border-radius: var(--border-radius-lg);
        box-shadow: var(--shadow-sm);
        overflow: hidden;
    }
    
    .panel-header {
        background: var(--gray-50);
        padding: 1.5rem;
        border-bottom: 1px solid var(--border-color);
        display: flex;
        justify-content: between;
        align-items: center;
    }
    
    .panel-title {
        font-size: 1.25rem;
        font-weight: 600;
        margin: 0;
    }
    
    .panel-body {
        padding: 1.5rem;
    }
    
    .user-list {
        max-height: 400px;
        overflow-y: auto;
    }
    
    .user-item {
        display: flex;
        align-items: center;
        padding: 1rem;
        border-bottom: 1px solid var(--border-color);
        transition: all 0.3s ease;
    }
    
    .user-item:hover {
        background: var(--gray-50);
    }
    
    .user-item:last-child {
        border-bottom: none;
    }
    
    .user-avatar {
        width: 40px;
        height: 40px;
        border-radius: 50%;
        background: var(--primary-color);
        color: white;
        display: flex;
        align-items: center;
        justify-content: center;
        font-weight: 600;
        margin-right: 1rem;
    }
    
    .user-info {
        flex: 1;
    }
    
    .user-name {
        font-weight: 600;
        margin-bottom: 0.25rem;
    }
    
    .user-email {
        color: var(--text-muted);
        font-size: 0.875rem;
    }
    
    .user-role {
        padding: 0.25rem 0.75rem;
        border-radius: var(--border-radius-sm);
        font-size: 0.75rem;
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: 0.5px;
    }
    
    .role-admin {
        background: var(--danger-light);
        color: var(--danger-color);
    }
    
    .role-manager {
        background: var(--warning-light);
        color: var(--warning-color);
    }
    
    .role-user {
        background: var(--success-light);
        color: var(--success-color);
    }
    
    .user-actions {
        display: flex;
        gap: 0.5rem;
        margin-left: 1rem;
    }
    
    .action-btn {
        width: 32px;
        height: 32px;
        border: none;
        border-radius: var(--border-radius-sm);
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        transition: all 0.3s ease;
    }
    
    .action-btn.edit {
        background: var(--primary-light);
        color: var(--primary-color);
    }
    
    .action-btn.delete {
        background: var(--danger-light);
        color: var(--danger-color);
    }
    
    .action-btn:hover {
        transform: scale(1.1);
    }
    
    .activity-item {
        display: flex;
        align-items: flex-start;
        padding: 1rem;
        border-bottom: 1px solid var(--border-color);
    }
    
    .activity-item:last-child {
        border-bottom: none;
    }
    
    .activity-icon {
        width: 40px;
        height: 40px;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        margin-right: 1rem;
        flex-shrink: 0;
    }
    
    .activity-icon.login {
        background: var(--success-light);
        color: var(--success-color);
    }
    
    .activity-icon.logout {
        background: var(--warning-light);
        color: var(--warning-color);
    }
    
    .activity-icon.error {
        background: var(--danger-light);
        color: var(--danger-color);
    }
    
    .activity-icon.info {
        background: var(--primary-light);
        color: var(--primary-color);
    }
    
    .activity-content {
        flex: 1;
    }
    
    .activity-message {
        font-weight: 500;
        margin-bottom: 0.25rem;
    }
    
    .activity-time {
        color: var(--text-muted);
        font-size: 0.875rem;
    }
    
    .system-metrics {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
        gap: 1rem;
        margin-bottom: 2rem;
    }
    
    .metric-card {
        background: var(--card-bg);
        padding: 1.5rem;
        border-radius: var(--border-radius);
        box-shadow: var(--shadow-sm);
        text-align: center;
        position: relative;
        overflow: hidden;
    }
    
    .metric-card::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 3px;
        background: var(--primary-color);
    }
    
    .metric-icon {
        width: 50px;
        height: 50px;
        border-radius: 50%;
        background: var(--primary-light);
        color: var(--primary-color);
        display: flex;
        align-items: center;
        justify-content: center;
        margin: 0 auto 1rem;
        font-size: 1.5rem;
    }
    
    .metric-value {
        font-size: 2rem;
        font-weight: 700;
        color: var(--text-primary);
        margin-bottom: 0.5rem;
    }
    
    .metric-label {
        color: var(--text-muted);
        font-size: 0.875rem;
        font-weight: 500;
    }
    
    .settings-section {
        margin-bottom: 2rem;
    }
    
    .settings-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 1rem;
        padding-bottom: 0.5rem;
        border-bottom: 1px solid var(--border-color);
    }
    
    .settings-title {
        font-size: 1.1rem;
        font-weight: 600;
        color: var(--text-primary);
    }
    
    .setting-item {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 1rem 0;
        border-bottom: 1px solid var(--border-color);
    }
    
    .setting-item:last-child {
        border-bottom: none;
    }
    
    .setting-info {
        flex: 1;
    }
    
    .setting-name {
        font-weight: 500;
        margin-bottom: 0.25rem;
    }
    
    .setting-description {
        color: var(--text-muted);
        font-size: 0.875rem;
    }
    
    .toggle-switch {
        position: relative;
        width: 50px;
        height: 24px;
        background: var(--gray-300);
        border-radius: 12px;
        cursor: pointer;
        transition: all 0.3s ease;
    }
    
    .toggle-switch.active {
        background: var(--primary-color);
    }
    
    .toggle-switch::before {
        content: '';
        position: absolute;
        top: 2px;
        left: 2px;
        width: 20px;
        height: 20px;
        background: white;
        border-radius: 50%;
        transition: all 0.3s ease;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
    }
    
    .toggle-switch.active::before {
        transform: translateX(26px);
    }
    
    .backup-status {
        display: flex;
        align-items: center;
        gap: 1rem;
        padding: 1rem;
        background: var(--success-light);
        border-radius: var(--border-radius);
        margin-bottom: 1rem;
    }
    
    .backup-status.warning {
        background: var(--warning-light);
    }
    
    .backup-status.error {
        background: var(--danger-light);
    }
    
    .backup-icon {
        width: 40px;
        height: 40px;
        border-radius: 50%;
        background: var(--success-color);
        color: white;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    
    .backup-status.warning .backup-icon {
        background: var(--warning-color);
    }
    
    .backup-status.error .backup-icon {
        background: var(--danger-color);
    }
    
    .backup-info h4 {
        margin: 0 0 0.25rem 0;
        font-size: 1rem;
        font-weight: 600;
    }
    
    .backup-info p {
        margin: 0;
        font-size: 0.875rem;
        opacity: 0.8;
    }
    
    .quick-actions {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
        gap: 1rem;
        margin-bottom: 2rem;
    }
    
    .quick-action {
        background: var(--card-bg);
        padding: 1.5rem;
        border-radius: var(--border-radius);
        box-shadow: var(--shadow-sm);
        text-align: center;
        cursor: pointer;
        transition: all 0.3s ease;
        border: 2px solid transparent;
    }
    
    .quick-action:hover {
        transform: translateY(-2px);
        box-shadow: var(--shadow-md);
        border-color: var(--primary-color);
    }
    
    .quick-action-icon {
        width: 60px;
        height: 60px;
        border-radius: 50%;
        background: var(--primary-light);
        color: var(--primary-color);
        display: flex;
        align-items: center;
        justify-content: center;
        margin: 0 auto 1rem;
        font-size: 1.5rem;
    }
    
    .quick-action-title {
        font-weight: 600;
        margin-bottom: 0.5rem;
    }
    
    .quick-action-description {
        color: var(--text-muted);
        font-size: 0.875rem;
    }
    
    @media (max-width: 1024px) {
        .admin-grid {
            grid-template-columns: 1fr;
        }
        
        .admin-stats {
            grid-template-columns: repeat(2, 1fr);
        }
    }
    
    @media (max-width: 768px) {
        .admin-title {
            font-size: 2rem;
        }
        
        .admin-stats {
            grid-template-columns: 1fr;
        }
        
        .system-metrics {
            grid-template-columns: repeat(2, 1fr);
        }
        
        .quick-actions {
            grid-template-columns: 1fr;
        }
        
        .user-item {
            flex-direction: column;
            align-items: flex-start;
            gap: 0.5rem;
        }
        
        .user-actions {
            margin-left: 0;
            align-self: flex-end;
        }
    }
</style>
{% endblock %}

{% block content %}
<!-- Admin Header -->
<div class="admin-header">
    <h1 class="admin-title">Admin Dashboard</h1>
    <p class="admin-subtitle">System overview and management tools</p>
    
    <div class="admin-stats">
        <div class="admin-stat">
            <div class="admin-stat-value" data-counter="1247">0</div>
            <div class="admin-stat-label">Total Users</div>
        </div>
        <div class="admin-stat">
            <div class="admin-stat-value" data-counter="89">0</div>
            <div class="admin-stat-label">Active Campaigns</div>
        </div>
        <div class="admin-stat">
            <div class="admin-stat-value">99.8%</div>
            <div class="admin-stat-label">System Uptime</div>
        </div>
        <div class="admin-stat">
            <div class="admin-stat-value" data-counter="156">0</div>
            <div class="admin-stat-label">Online Users</div>
        </div>
    </div>
</div>

<!-- System Metrics -->
<div class="system-metrics">
    <div class="metric-card">
        <div class="metric-icon">
            <i class="fas fa-server"></i>
        </div>
        <div class="metric-value">45%</div>
        <div class="metric-label">CPU Usage</div>
    </div>
    
    <div class="metric-card">
        <div class="metric-icon">
            <i class="fas fa-memory"></i>
        </div>
        <div class="metric-value">62%</div>
        <div class="metric-label">Memory Usage</div>
    </div>
    
    <div class="metric-card">
        <div class="metric-icon">
            <i class="fas fa-hdd"></i>
        </div>
        <div class="metric-value">78%</div>
        <div class="metric-label">Disk Usage</div>
    </div>
    
    <div class="metric-card">
        <div class="metric-icon">
            <i class="fas fa-network-wired"></i>
        </div>
        <div class="metric-value">12MB/s</div>
        <div class="metric-label">Network I/O</div>
    </div>
    
    <div class="metric-card">
        <div class="metric-icon">
            <i class="fas fa-database"></i>
        </div>
        <div class="metric-value">234ms</div>
        <div class="metric-label">DB Response</div>
    </div>
    
    <div class="metric-card">
        <div class="metric-icon">
            <i class="fas fa-exclamation-triangle"></i>
        </div>
        <div class="metric-value" data-counter="3">0</div>
        <div class="metric-label">System Alerts</div>
    </div>
</div>

<!-- Quick Actions -->
<div class="quick-actions">
    <div class="quick-action" onclick="createUser()">
        <div class="quick-action-icon">
            <i class="fas fa-user-plus"></i>
        </div>
        <div class="quick-action-title">Add User</div>
        <div class="quick-action-description">Create a new user account</div>
    </div>
    
    <div class="quick-action" onclick="systemBackup()">
        <div class="quick-action-icon">
            <i class="fas fa-download"></i>
        </div>
        <div class="quick-action-title">System Backup</div>
        <div class="quick-action-description">Create system backup</div>
    </div>
    
    <div class="quick-action" onclick="viewLogs()">
        <div class="quick-action-icon">
            <i class="fas fa-file-alt"></i>
        </div>
        <div class="quick-action-title">View Logs</div>
        <div class="quick-action-description">Check system logs</div>
    </div>
    
    <div class="quick-action" onclick="systemMaintenance()">
        <div class="quick-action-icon">
            <i class="fas fa-tools"></i>
        </div>
        <div class="quick-action-title">Maintenance</div>
        <div class="quick-action-description">System maintenance mode</div>
    </div>
</div>

<!-- Admin Grid -->
<div class="admin-grid">
    <!-- User Management -->
    <div class="admin-panel">
        <div class="panel-header">
            <h3 class="panel-title">User Management</h3>
            <button class="btn btn-primary btn-sm" onclick="createUser()">
                <i class="fas fa-plus me-2"></i>Add User
            </button>
        </div>
        <div class="panel-body">
            <div class="user-list">
                <div class="user-item">
                    <div class="user-avatar">JD</div>
                    <div class="user-info">
                        <div class="user-name">John Doe</div>
                        <div class="user-email">john.doe@example.com</div>
                    </div>
                    <div class="user-role role-admin">Admin</div>
                    <div class="user-actions">
                        <button class="action-btn edit" onclick="editUser(1)">
                            <i class="fas fa-edit"></i>
                        </button>
                        <button class="action-btn delete" onclick="deleteUser(1)">
                            <i class="fas fa-trash"></i>
                        </button>
                    </div>
                </div>
                
                <div class="user-item">
                    <div class="user-avatar">JS</div>
                    <div class="user-info">
                        <div class="user-name">Jane Smith</div>
                        <div class="user-email">jane.smith@example.com</div>
                    </div>
                    <div class="user-role role-manager">Manager</div>
                    <div class="user-actions">
                        <button class="action-btn edit" onclick="editUser(2)">
                            <i class="fas fa-edit"></i>
                        </button>
                        <button class="action-btn delete" onclick="deleteUser(2)">
                            <i class="fas fa-trash"></i>
                        </button>
                    </div>
                </div>
                
                <div class="user-item">
                    <div class="user-avatar">MB</div>
                    <div class="user-info">
                        <div class="user-name">Mike Brown</div>
                        <div class="user-email">mike.brown@example.com</div>
                    </div>
                    <div class="user-role role-user">User</div>
                    <div class="user-actions">
                        <button class="action-btn edit" onclick="editUser(3)">
                            <i class="fas fa-edit"></i>
                        </button>
                        <button class="action-btn delete" onclick="deleteUser(3)">
                            <i class="fas fa-trash"></i>
                        </button>
                    </div>
                </div>
                
                <div class="user-item">
                    <div class="user-avatar">SW</div>
                    <div class="user-info">
                        <div class="user-name">Sarah Wilson</div>
                        <div class="user-email">sarah.wilson@example.com</div>
                    </div>
                    <div class="user-role role-user">User</div>
                    <div class="user-actions">
                        <button class="action-btn edit" onclick="editUser(4)">
                            <i class="fas fa-edit"></i>
                        </button>
                        <button class="action-btn delete" onclick="deleteUser(4)">
                            <i class="fas fa-trash"></i>
                        </button>
                    </div>
                </div>
                
                <div class="user-item">
                    <div class="user-avatar">DL</div>
                    <div class="user-info">
                        <div class="user-name">David Lee</div>
                        <div class="user-email">david.lee@example.com</div>
                    </div>
                    <div class="user-role role-manager">Manager</div>
                    <div class="user-actions">
                        <button class="action-btn edit" onclick="editUser(5)">
                            <i class="fas fa-edit"></i>
                        </button>
                        <button class="action-btn delete" onclick="deleteUser(5)">
                            <i class="fas fa-trash"></i>
                        </button>
                    </div>
                </div>
            </div>
        </div>
    </div>
    
    <!-- Recent Activity -->
    <div class="admin-panel">
        <div class="panel-header">
            <h3 class="panel-title">Recent Activity</h3>
            <button class="btn btn-outline-secondary btn-sm" onclick="viewAllLogs()">
                <i class="fas fa-external-link-alt me-2"></i>View All
            </button>
        </div>
        <div class="panel-body">
            <div class="activity-item">
                <div class="activity-icon login">
                    <i class="fas fa-sign-in-alt"></i>
                </div>
                <div class="activity-content">
                    <div class="activity-message">John Doe logged in</div>
                    <div class="activity-time">2 minutes ago</div>
                </div>
            </div>
            
            <div class="activity-item">
                <div class="activity-icon info">
                    <i class="fas fa-plus"></i>
                </div>
                <div class="activity-content">
                    <div class="activity-message">New campaign created: "Summer Sale 2024"</div>
                    <div class="activity-time">15 minutes ago</div>
                </div>
            </div>
            
            <div class="activity-item">
                <div class="activity-icon error">
                    <i class="fas fa-exclamation-triangle"></i>
                </div>
                <div class="activity-content">
                    <div class="activity-message">Failed login attempt from IP 192.168.1.100</div>
                    <div class="activity-time">32 minutes ago</div>
                </div>
            </div>
            
            <div class="activity-item">
                <div class="activity-icon logout">
                    <i class="fas fa-sign-out-alt"></i>
                </div>
                <div class="activity-content">
                    <div class="activity-message">Jane Smith logged out</div>
                    <div class="activity-time">1 hour ago</div>
                </div>
            </div>
            
            <div class="activity-item">
                <div class="activity-icon info">
                    <i class="fas fa-edit"></i>
                </div>
                <div class="activity-content">
                    <div class="activity-message">System settings updated</div>
                    <div class="activity-time">2 hours ago</div>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- System Settings -->
<div class="admin-panel">
    <div class="panel-header">
        <h3 class="panel-title">System Settings</h3>
    </div>
    <div class="panel-body">
        <div class="settings-section">
            <div class="settings-header">
                <h4 class="settings-title">Security Settings</h4>
            </div>
            
            <div class="setting-item">
                <div class="setting-info">
                    <div class="setting-name">Two-Factor Authentication</div>
                    <div class="setting-description">Require 2FA for all admin accounts</div>
                </div>
                <div class="toggle-switch active" onclick="toggleSetting(this)"></div>
            </div>
            
            <div class="setting-item">
                <div class="setting-info">
                    <div class="setting-name">Login Attempt Monitoring</div>
                    <div class="setting-description">Monitor and alert on failed login attempts</div>
                </div>
                <div class="toggle-switch active" onclick="toggleSetting(this)"></div>
            </div>
            
            <div class="setting-item">
                <div class="setting-info">
                    <div class="setting-name">Session Timeout</div>
                    <div class="setting-description">Automatically log out inactive users</div>
                </div>
                <div class="toggle-switch active" onclick="toggleSetting(this)"></div>
            </div>
        </div>
        
        <div class="settings-section">
            <div class="settings-header">
                <h4 class="settings-title">System Preferences</h4>
            </div>
            
            <div class="setting-item">
                <div class="setting-info">
                    <div class="setting-name">Email Notifications</div>
                    <div class="setting-description">Send system alerts via email</div>
                </div>
                <div class="toggle-switch active" onclick="toggleSetting(this)"></div>
            </div>
            
            <div class="setting-item">
                <div class="setting-info">
                    <div class="setting-name">Automatic Backups</div>
                    <div class="setting-description">Create daily system backups</div>
                </div>
                <div class="toggle-switch active" onclick="toggleSetting(this)"></div>
            </div>
            
            <div class="setting-item">
                <div class="setting-info">
                    <div class="setting-name">Debug Mode</div>
                    <div class="setting-description">Enable detailed error logging</div>
                </div>
                <div class="toggle-switch" onclick="toggleSetting(this)"></div>
            </div>
        </div>
        
        <div class="settings-section">
            <div class="settings-header">
                <h4 class="settings-title">Backup & Recovery</h4>
            </div>
            
            <div class="backup-status">
                <div class="backup-icon">
                    <i class="fas fa-check"></i>
                </div>
                <div class="backup-info">
                    <h4>Last Backup: Successful</h4>
                    <p>Today at 3:00 AM - 2.4 GB</p>
                </div>
            </div>
            
            <div class="d-flex gap-2">
                <button class="btn btn-primary" onclick="systemBackup()">
                    <i class="fas fa-download me-2"></i>Create Backup
                </button>
                <button class="btn btn-outline-secondary" onclick="restoreBackup()">
                    <i class="fas fa-upload me-2"></i>Restore Backup
                </button>
                <button class="btn btn-outline-info" onclick="scheduleBackup()">
                    <i class="fas fa-clock me-2"></i>Schedule Backup
                </button>
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block extra_js %}
<script src="{% static 'js/advanced.js' %}"></script>
<script>
document.addEventListener('DOMContentLoaded', function() {
    // Initialize admin dashboard
    initializeAdminDashboard();
    
    // Initialize counters
    ADTLAS.initCounters();
    
    // Real-time updates
    setInterval(updateSystemMetrics, 30000); // Update every 30 seconds
    
    // Initialize WebSocket for real-time updates
    if (typeof ADTLAS.initWebSocket === 'function') {
        ADTLAS.initWebSocket();
    }
});

function initializeAdminDashboard() {
    console.log('Admin dashboard initialized');
    
    // Simulate real-time system metrics
    updateSystemMetrics();
}

function updateSystemMetrics() {
    // Simulate metric updates
    const metrics = {
        cpu: Math.floor(Math.random() * 30) + 30, // 30-60%
        memory: Math.floor(Math.random() * 20) + 50, // 50-70%
        disk: Math.floor(Math.random() * 10) + 75, // 75-85%
        network: (Math.random() * 10 + 5).toFixed(1), // 5-15 MB/s
        dbResponse: Math.floor(Math.random() * 100) + 200, // 200-300ms
        alerts: Math.floor(Math.random() * 5) // 0-4 alerts
    };
    
    // Update metric displays
    const metricCards = document.querySelectorAll('.metric-card');
    if (metricCards.length >= 6) {
        metricCards[0].querySelector('.metric-value').textContent = metrics.cpu + '%';
        metricCards[1].querySelector('.metric-value').textContent = metrics.memory + '%';
        metricCards[2].querySelector('.metric-value').textContent = metrics.disk + '%';
        metricCards[3].querySelector('.metric-value').textContent = metrics.network + 'MB/s';
        metricCards[4].querySelector('.metric-value').textContent = metrics.dbResponse + 'ms';
        
        const alertsElement = metricCards[5].querySelector('.metric-value');
        ADTLAS.animateCounter(alertsElement, parseInt(alertsElement.textContent), metrics.alerts, 500);
    }
}

function createUser() {
    const modal = ADTLAS.createModal({
        title: 'Create New User',
        size: 'lg',
        body: `
            <form id="createUserForm">
                <div class="row">
                    <div class="col-md-6">
                        <div class="form-group mb-3">
                            <label for="firstName">First Name *</label>
                            <input type="text" id="firstName" name="first_name" class="form-control" required>
                        </div>
                    </div>
                    <div class="col-md-6">
                        <div class="form-group mb-3">
                            <label for="lastName">Last Name *</label>
                            <input type="text" id="lastName" name="last_name" class="form-control" required>
                        </div>
                    </div>
                </div>
                
                <div class="form-group mb-3">
                    <label for="email">Email Address *</label>
                    <input type="email" id="email" name="email" class="form-control" required>
                </div>
                
                <div class="row">
                    <div class="col-md-6">
                        <div class="form-group mb-3">
                            <label for="role">Role *</label>
                            <select id="role" name="role" class="form-control" required>
                                <option value="">Select Role</option>
                                <option value="admin">Admin</option>
                                <option value="manager">Manager</option>
                                <option value="user">User</option>
                            </select>
                        </div>
                    </div>
                    <div class="col-md-6">
                        <div class="form-group mb-3">
                            <label for="department">Department</label>
                            <select id="department" name="department" class="form-control">
                                <option value="">Select Department</option>
                                <option value="marketing">Marketing</option>
                                <option value="sales">Sales</option>
                                <option value="it">IT</option>
                                <option value="finance">Finance</option>
                            </select>
                        </div>
                    </div>
                </div>
                
                <div class="form-group mb-3">
                    <label>
                        <input type="checkbox" id="sendWelcomeEmail" name="send_welcome_email" checked>
                        Send welcome email with login instructions
                    </label>
                </div>
                
                <div class="form-group mb-3">
                    <label>
                        <input type="checkbox" id="requirePasswordChange" name="require_password_change" checked>
                        Require password change on first login
                    </label>
                </div>
            </form>
        `,
        actions: [
            {
                text: 'Cancel',
                class: 'btn-outline-secondary',
                action: () => ADTLAS.closeModal()
            },
            {
                text: 'Create User',
                class: 'btn-primary',
                action: () => {
                    const form = document.getElementById('createUserForm');
                    if (ADTLAS.validateForm(form)) {
                        ADTLAS.closeModal();
                        ADTLAS.showNotification('User created successfully', 'success');
                        // Refresh user list
                        setTimeout(() => {
                            location.reload();
                        }, 1500);
                    }
                }
            }
        ]
    });
    
    ADTLAS.showModal(modal);
}

function editUser(userId) {
    ADTLAS.showNotification(`Loading user ${userId} details...`, 'info');
    
    // Simulate loading user data
    setTimeout(() => {
        const modal = ADTLAS.createModal({
            title: 'Edit User',
            size: 'lg',
            body: `
                <form id="editUserForm">
                    <div class="row">
                        <div class="col-md-6">
                            <div class="form-group mb-3">
                                <label for="editFirstName">First Name *</label>
                                <input type="text" id="editFirstName" name="first_name" class="form-control" value="John" required>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="form-group mb-3">
                                <label for="editLastName">Last Name *</label>
                                <input type="text" id="editLastName" name="last_name" class="form-control" value="Doe" required>
                            </div>
                        </div>
                    </div>
                    
                    <div class="form-group mb-3">
                        <label for="editEmail">Email Address *</label>
                        <input type="email" id="editEmail" name="email" class="form-control" value="john.doe@example.com" required>
                    </div>
                    
                    <div class="row">
                        <div class="col-md-6">
                            <div class="form-group mb-3">
                                <label for="editRole">Role *</label>
                                <select id="editRole" name="role" class="form-control" required>
                                    <option value="admin" selected>Admin</option>
                                    <option value="manager">Manager</option>
                                    <option value="user">User</option>
                                </select>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="form-group mb-3">
                                <label for="editStatus">Status</label>
                                <select id="editStatus" name="status" class="form-control">
                                    <option value="active" selected>Active</option>
                                    <option value="inactive">Inactive</option>
                                    <option value="suspended">Suspended</option>
                                </select>
                            </div>
                        </div>
                    </div>
                    
                    <div class="form-group mb-3">
                        <label>
                            <input type="checkbox" id="resetPassword" name="reset_password">
                            Force password reset on next login
                        </label>
                    </div>
                </form>
            `,
            actions: [
                {
                    text: 'Cancel',
                    class: 'btn-outline-secondary',
                    action: () => ADTLAS.closeModal()
                },
                {
                    text: 'Update User',
                    class: 'btn-primary',
                    action: () => {
                        const form = document.getElementById('editUserForm');
                        if (ADTLAS.validateForm(form)) {
                            ADTLAS.closeModal();
                            ADTLAS.showNotification('User updated successfully', 'success');
                        }
                    }
                }
            ]
        });
        
        ADTLAS.showModal(modal);
    }, 1000);
}

function deleteUser(userId) {
    const modal = ADTLAS.createModal({
        title: 'Delete User',
        body: `
            <div class="text-center">
                <i class="fas fa-exclamation-triangle fa-3x text-danger mb-3"></i>
                <h4>Are you sure?</h4>
                <p>This action cannot be undone. The user will be permanently deleted from the system.</p>
                <div class="alert alert-warning mt-3">
                    <strong>Warning:</strong> All user data, including campaign history and settings, will be lost.
                </div>
            </div>
        `,
        actions: [
            {
                text: 'Cancel',
                class: 'btn-outline-secondary',
                action: () => ADTLAS.closeModal()
            },
            {
                text: 'Delete User',
                class: 'btn-danger',
                action: () => {
                    ADTLAS.closeModal();
                    ADTLAS.showNotification('User deleted successfully', 'success');
                    // Remove user from list
                    setTimeout(() => {
                        location.reload();
                    }, 1500);
                }
            }
        ]
    });
    
    ADTLAS.showModal(modal);
}

function toggleSetting(element) {
    element.classList.toggle('active');
    const settingName = element.closest('.setting-item').querySelector('.setting-name').textContent;
    const isActive = element.classList.contains('active');
    
    ADTLAS.showNotification(`${settingName} ${isActive ? 'enabled' : 'disabled'}`, 'success');
}

function systemBackup() {
    ADTLAS.showNotification('Starting system backup...', 'info');
    
    // Simulate backup progress
    let progress = 0;
    const interval = setInterval(() => {
        progress += Math.random() * 20;
        if (progress >= 100) {
            progress = 100;
            clearInterval(interval);
            ADTLAS.showNotification('System backup completed successfully', 'success');
        }
    }, 500);
}

function restoreBackup() {
    const modal = ADTLAS.createModal({
        title: 'Restore System Backup',
        body: `
            <div class="alert alert-warning">
                <strong>Warning:</strong> Restoring a backup will overwrite all current data. This action cannot be undone.
            </div>
            
            <div class="form-group mb-3">
                <label for="backupFile">Select Backup File</label>
                <select id="backupFile" class="form-control">
                    <option value="">Select a backup...</option>
                    <option value="backup_2024_01_15.sql">January 15, 2024 - 2.4 GB</option>
                    <option value="backup_2024_01_14.sql">January 14, 2024 - 2.3 GB</option>
                    <option value="backup_2024_01_13.sql">January 13, 2024 - 2.2 GB</option>
                </select>
            </div>
            
            <div class="form-group mb-3">
                <label>
                    <input type="checkbox" id="confirmRestore" required>
                    I understand that this will overwrite all current data
                </label>
            </div>
        `,
        actions: [
            {
                text: 'Cancel',
                class: 'btn-outline-secondary',
                action: () => ADTLAS.closeModal()
            },
            {
                text: 'Restore Backup',
                class: 'btn-danger',
                action: () => {
                    const backupFile = document.getElementById('backupFile').value;
                    const confirmRestore = document.getElementById('confirmRestore').checked;
                    
                    if (!backupFile) {
                        ADTLAS.showNotification('Please select a backup file', 'error');
                        return;
                    }
                    
                    if (!confirmRestore) {
                        ADTLAS.showNotification('Please confirm that you understand the consequences', 'error');
                        return;
                    }
                    
                    ADTLAS.closeModal();
                    ADTLAS.showNotification('Starting system restore...', 'info');
                    
                    setTimeout(() => {
                        ADTLAS.showNotification('System restore completed successfully', 'success');
                    }, 5000);
                }
            }
        ]
    });
    
    ADTLAS.showModal(modal);
}

function scheduleBackup() {
    const modal = ADTLAS.createModal({
        title: 'Schedule Automatic Backup',
        body: `
            <div class="form-group mb-3">
                <label for="backupFrequency">Backup Frequency</label>
                <select id="backupFrequency" class="form-control">
                    <option value="daily" selected>Daily</option>
                    <option value="weekly">Weekly</option>
                    <option value="monthly">Monthly</option>
                </select>
            </div>
            
            <div class="form-group mb-3">
                <label for="backupTime">Backup Time</label>
                <input type="time" id="backupTime" class="form-control" value="03:00">
            </div>
            
            <div class="form-group mb-3">
                <label for="retentionDays">Retention Period (days)</label>
                <input type="number" id="retentionDays" class="form-control" value="30" min="1" max="365">
            </div>
            
            <div class="form-group mb-3">
                <label>
                    <input type="checkbox" id="emailNotification" checked>
                    Send email notification on backup completion
                </label>
            </div>
        `,
        actions: [
            {
                text: 'Cancel',
                class: 'btn-outline-secondary',
                action: () => ADTLAS.closeModal()
            },
            {
                text: 'Schedule Backup',
                class: 'btn-primary',
                action: () => {
                    ADTLAS.closeModal();
                    ADTLAS.showNotification('Backup schedule updated successfully', 'success');
                }
            }
        ]
    });
    
    ADTLAS.showModal(modal);
}

function viewLogs() {
    window.open('/admin/logs/', '_blank');
}

function viewAllLogs() {
    window.open('/admin/activity-logs/', '_blank');
}

function systemMaintenance() {
    const modal = ADTLAS.createModal({
        title: 'System Maintenance Mode',
        body: `
            <div class="alert alert-info">
                <strong>Info:</strong> Maintenance mode will temporarily disable access for all users except administrators.
            </div>
            
            <div class="form-group mb-3">
                <label for="maintenanceMessage">Maintenance Message</label>
                <textarea id="maintenanceMessage" class="form-control" rows="3" 
                          placeholder="Enter message to display to users...">System maintenance in progress. We'll be back shortly.</textarea>
            </div>
            
            <div class="form-group mb-3">
                <label for="estimatedDuration">Estimated Duration (minutes)</label>
                <input type="number" id="estimatedDuration" class="form-control" value="30" min="5">
            </div>
        `,
        actions: [
            {
                text: 'Cancel',
                class: 'btn-outline-secondary',
                action: () => ADTLAS.closeModal()
            },
            {
                text: 'Enable Maintenance Mode',
                class: 'btn-warning',
                action: () => {
                    ADTLAS.closeModal();
                    ADTLAS.showNotification('Maintenance mode enabled', 'warning');
                }
            }
        ]
    });
    
    ADTLAS.showModal(modal);
}

// WebSocket message handling for real-time updates
if (typeof ADTLAS.websocket !== 'undefined' && ADTLAS.websocket) {
    ADTLAS.websocket.addEventListener('message', function(event) {
        const data = JSON.parse(event.data);
        
        if (data.type === 'admin_update') {
            // Handle real-time admin updates
            if (data.metric) {
                updateSystemMetrics();
            }
            
            if (data.user_activity) {
                // Add new activity to the list
                addActivityItem(data.user_activity);
            }
        }
    });
}

function addActivityItem(activity) {
    const activityList = document.querySelector('.admin-panel .panel-body');
    if (activityList) {
        const newItem = document.createElement('div');
        newItem.className = 'activity-item';
        newItem.innerHTML = `
            <div class="activity-icon ${activity.type}">
                <i class="fas fa-${activity.icon}"></i>
            </div>
            <div class="activity-content">
                <div class="activity-message">${activity.message}</div>
                <div class="activity-time">Just now</div>
            </div>
        `;
        
        activityList.insertBefore(newItem, activityList.firstChild);
        
        // Remove last item if more than 5 items
        const items = activityList.querySelectorAll('.activity-item');
        if (items.length > 5) {
            items[items.length - 1].remove();
        }
    }
}
</script>
{% endblock %}