{% extends "base.html" %}

{% block title %}Admin Panel - SKE Digital Signage{% endblock %}

{% block content %}
<div class="container-fluid py-4">
    <!-- Page Header -->
    <div class="row mb-4">
        <div class="col">
            <h1><i class="bi bi-gear-fill"></i> Admin Panel</h1>
            <p class="text-muted">System administration and user management</p>
        </div>
    </div>

    <!-- Quick Stats -->
    <div class="row mb-4">
        <div class="col-md-3">
            <div class="card text-white bg-primary">
                <div class="card-body">
                    <div class="d-flex justify-content-between">
                        <div>
                            <h5 class="card-title">Total Users</h5>
                            <h2>{{ users|length }}</h2>
                        </div>
                        <div class="align-self-center">
                            <i class="bi bi-people" style="font-size: 2rem;"></i>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-md-3">
            <div class="card text-white bg-success">
                <div class="card-body">
                    <div class="d-flex justify-content-between">
                        <div>
                            <h5 class="card-title">Active Users</h5>
                            <h2>{{ users|selectattr('is_active_user')|list|length }}</h2>
                        </div>
                        <div class="align-self-center">
                            <i class="bi bi-person-check" style="font-size: 2rem;"></i>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-md-3">
            <div class="card text-white bg-warning">
                <div class="card-body">
                    <div class="d-flex justify-content-between">
                        <div>
                            <h5 class="card-title">Admin Users</h5>
                            <h2>{{ users|selectattr('role', 'equalto', 'admin')|list|length }}</h2>
                        </div>
                        <div class="align-self-center">
                            <i class="bi bi-shield-check" style="font-size: 2rem;"></i>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-md-3">
            <div class="card text-white bg-info">
                <div class="card-body">
                    <div class="d-flex justify-content-between">
                        <div>
                            <h5 class="card-title">Regular Users</h5>
                            <h2>{{ users|selectattr('role', 'equalto', 'user')|list|length }}</h2>
                        </div>
                        <div class="align-self-center">
                            <i class="bi bi-person" style="font-size: 2rem;"></i>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Navigation Tabs -->
    <ul class="nav nav-tabs mb-4" id="adminTabs" role="tablist">
        <li class="nav-item" role="presentation">
            <button class="nav-link active" id="users-tab" data-bs-toggle="tab" data-bs-target="#users" type="button" role="tab">
                <i class="bi bi-people"></i> User Management
            </button>
        </li>
        <li class="nav-item" role="presentation">
            <button class="nav-link" id="maintenance-tab" data-bs-toggle="tab" data-bs-target="#maintenance" type="button" role="tab">
                <i class="bi bi-tools"></i> System Maintenance
            </button>
        </li>
        <li class="nav-item" role="presentation">
            <button class="nav-link" id="scheduler-tab" data-bs-toggle="tab" data-bs-target="#scheduler" type="button" role="tab">
                <i class="bi bi-clock"></i> Task Scheduler
            </button>
        </li>
    </ul>

    <!-- Tab Content -->
    <div class="tab-content" id="adminTabContent">
        <!-- User Management Tab -->
        <div class="tab-pane fade show active" id="users" role="tabpanel">
            <div class="row">
                <!-- User Management -->
                <div class="col-md-8">
            <div class="card">
                <div class="card-header d-flex justify-content-between align-items-center">
                    <h5><i class="bi bi-people"></i> User Management</h5>
                    <button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#createUserModal">
                        <i class="bi bi-plus"></i> Add User
                    </button>
                </div>
                <div class="card-body">
                    {% if users %}
                        <div class="table-responsive">
                            <table class="table table-hover">
                                <thead>
                                    <tr>
                                        <th>Username</th>
                                        <th>Role</th>
                                        <th>Status</th>
                                        <th>Created</th>
                                        <th>Last Login</th>
                                        <th>Actions</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    {% for user in users %}
                                    <tr>
                                        <td>
                                            <strong>{{ user.username }}</strong>
                                            {% if user.username == current_user.username %}
                                                <span class="badge bg-secondary">You</span>
                                            {% endif %}
                                        </td>
                                        <td>
                                            {% if user.role == 'admin' %}
                                                <span class="badge bg-danger">Admin</span>
                                            {% else %}
                                                <span class="badge bg-primary">User</span>
                                            {% endif %}
                                        </td>
                                        <td>
                                            {% if user.is_active_user %}
                                                <span class="badge bg-success">Active</span>
                                            {% else %}
                                                <span class="badge bg-secondary">Inactive</span>
                                            {% endif %}
                                        </td>
                                        <td>{{ user.created_at.strftime('%Y-%m-%d') if user.created_at else 'N/A' }}</td>
                                        <td>{{ user.last_login.strftime('%Y-%m-%d %H:%M') if user.last_login else 'Never' }}</td>
                                        <td>
                                            <div class="btn-group btn-group-sm">
                                                {% if user.username != current_user.username %}
                                                    <button type="button" class="btn btn-outline-warning" 
                                                            onclick="editUser('{{ user.id }}', '{{ user.username }}', '{{ user.role }}', {{ user.is_active_user|tojson }})">
                                                        <i class="bi bi-pencil"></i>
                                                    </button>
                                                    <button type="button" class="btn btn-outline-danger" 
                                                            onclick="deleteUser('{{ user.id }}', '{{ user.username }}')">
                                                        <i class="bi bi-trash"></i>
                                                    </button>
                                                {% else %}
                                                    <button type="button" class="btn btn-outline-secondary" disabled>
                                                        <i class="bi bi-lock"></i>
                                                    </button>
                                                {% endif %}
                                            </div>
                                        </td>
                                    </tr>
                                    {% endfor %}
                                </tbody>
                            </table>
                        </div>
                    {% else %}
                        <div class="text-center py-4">
                            <i class="bi bi-people text-muted" style="font-size: 3rem;"></i>
                            <h5 class="text-muted mt-2">No Users Found</h5>
                            <p class="text-muted">Create your first user to get started.</p>
                        </div>
                    {% endif %}
                </div>
            </div>
        </div>

        <!-- System Info -->
        <div class="col-md-4">
            <div class="card">
                <div class="card-header">
                    <h5><i class="bi bi-info-circle"></i> System Assets</h5>
                </div>
                <div class="card-body">
                    <div class="mb-3">
                        <h6>Logo Asset</h6>
                        {% if logo_exists %}
                            <span class="badge bg-success">Available</span>
                            <div class="mt-2">
                                <img src="{{ url_for('static', filename='assets/logo.png') }}" alt="Logo" class="img-thumbnail" style="max-height: 100px;">
                            </div>
                        {% else %}
                            <span class="badge bg-warning">Missing</span>
                            <p class="text-muted small mt-1">Upload logo.png to static/assets/</p>
                        {% endif %}
                    </div>
                    
                    <div class="mb-3">
                        <h6>Login Picture</h6>
                        {% if login_picture_exists %}
                            <span class="badge bg-success">Available</span>
                            <div class="mt-2">
                                <img src="{{ url_for('static', filename='assets/login_picture.png') }}" alt="Login Picture" class="img-thumbnail" style="max-height: 100px;">
                            </div>
                        {% else %}
                            <span class="badge bg-warning">Missing</span>
                            <p class="text-muted small mt-1">Upload login_picture.png to static/assets/</p>
                        {% endif %}
                    </div>
                </div>
            </div>

            <div class="card mt-3">
                <div class="card-header">
                    <h5><i class="bi bi-tools"></i> Quick Actions</h5>
                </div>
                <div class="card-body">
                    <div class="d-grid gap-2">
                        <a href="{{ url_for('dashboard.index') }}" class="btn btn-outline-primary">
                            <i class="bi bi-speedometer2"></i> Dashboard
                        </a>
                        <a href="{{ url_for('player.index') }}" class="btn btn-outline-info">
                            <i class="bi bi-display"></i> Manage Players
                        </a>
                        <a href="{{ url_for('content.upload') }}" class="btn btn-outline-success">
                            <i class="bi bi-upload"></i> Upload Content
                        </a>
                        <button type="button" class="btn btn-outline-warning" onclick="clearLogs()">
                            <i class="bi bi-trash"></i> Clear Logs
                        </button>
                    </div>
                </div>
            </div>
        </div>

        <!-- System Maintenance Tab -->
        <div class="tab-pane fade" id="maintenance" role="tabpanel">
            <div class="row">
                <div class="col-md-6">
                    <div class="card">
                        <div class="card-header">
                            <h5><i class="bi bi-trash"></i> File Management</h5>
                        </div>
                        <div class="card-body">
                            <div class="mb-4">
                                <h6><i class="bi bi-trash"></i> Clean Unused Files</h6>
                                <p class="text-muted small">Remove media files from uploads folder that are not referenced by any players. This helps free up storage space by removing orphaned files.</p>
                                <div class="d-flex gap-2">
                                    <button type="button" class="btn btn-warning" onclick="cleanUnusedFiles()">
                                        <i class="bi bi-play-circle"></i> Run Now
                                    </button>
                                    <button type="button" class="btn btn-outline-primary" onclick="scheduleCleanupTask()">
                                        <i class="bi bi-clock"></i> Schedule
                                    </button>
                                </div>
                                <div id="cleanupStatus" class="mt-2"></div>
                            </div>
                            
                            <div class="mb-4">
                                <h6><i class="bi bi-journal-x"></i> Clear Server Logs</h6>
                                <p class="text-muted small">Remove all server log entries from the database to free up space.</p>
                                <div class="d-flex gap-2">
                                    <button type="button" class="btn btn-outline-warning" onclick="clearLogs()">
                                        <i class="bi bi-play-circle"></i> Clear Now
                                    </button>
                                    <button type="button" class="btn btn-outline-primary" onclick="scheduleLogClearTask()">
                                        <i class="bi bi-clock"></i> Schedule
                                    </button>
                                </div>
                            </div>

                            <div class="mb-3">
                                <h6><i class="bi bi-database"></i> Database Maintenance</h6>
                                <p class="text-muted small">Optimize database performance and clean up orphaned records.</p>
                                <div class="d-flex gap-2">
                                    <button type="button" class="btn btn-outline-info" onclick="optimizeDatabase()">
                                        <i class="bi bi-play-circle"></i> Optimize Now
                                    </button>
                                    <button type="button" class="btn btn-outline-primary" onclick="scheduleDatabaseTask()">
                                        <i class="bi bi-clock"></i> Schedule
                                    </button>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="col-md-6">
                    <div class="card">
                        <div class="card-header">
                            <h5><i class="bi bi-info-circle"></i> Maintenance Status</h5>
                        </div>
                        <div class="card-body">
                            <div id="maintenanceStatus">
                                <div class="alert alert-info">
                                    <i class="bi bi-info-circle"></i> Ready to perform maintenance tasks.
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="card mt-3">
                        <div class="card-header">
                            <h5><i class="bi bi-upload"></i> Asset Upload</h5>
                        </div>
                        <div class="card-body">
                            <form method="POST" action="{{ url_for('admin.upload_assets') }}" enctype="multipart/form-data">
                                <div class="mb-3">
                                    <label for="logo" class="form-label">Logo (PNG format)</label>
                                    <input type="file" class="form-control" id="logo" name="logo" accept=".png">
                                </div>
                                <div class="mb-3">
                                    <label for="login_picture" class="form-label">Login Picture (PNG format)</label>
                                    <input type="file" class="form-control" id="login_picture" name="login_picture" accept=".png">
                                </div>
                                <button type="submit" class="btn btn-primary">
                                    <i class="bi bi-upload"></i> Upload Assets
                                </button>
                            </form>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- Task Scheduler Tab -->
        <div class="tab-pane fade" id="scheduler" role="tabpanel">
            <div class="row">
                <div class="col-md-8">
                    <div class="card">
                        <div class="card-header d-flex justify-content-between align-items-center">
                            <h5><i class="bi bi-clock"></i> Scheduled Tasks</h5>
                            <button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#createTaskModal">
                                <i class="bi bi-plus"></i> Add Task
                            </button>
                        </div>
                        <div class="card-body">
                            <div id="scheduledTasks">
                                <!-- Tasks will be loaded here -->
                            </div>
                        </div>
                    </div>
                </div>

                <div class="col-md-4">
                    <div class="card">
                        <div class="card-header">
                            <h5><i class="bi bi-gear"></i> Quick Setup</h5>
                        </div>
                        <div class="card-body">
                            <h6>Daily File Cleanup</h6>
                            <p class="text-muted small">Automatically clean unused files daily at 1:00 AM</p>
                            <form method="POST" action="{{ url_for('admin.create_scheduled_task') }}">
                                <input type="hidden" name="task_type" value="cleanup_files">
                                <input type="hidden" name="schedule" value="0 1 * * *">
                                <input type="hidden" name="enabled" value="true">
                                <button type="submit" class="btn btn-success btn-sm w-100">
                                    <i class="bi bi-clock"></i> Enable Daily Cleanup
                                </button>
                            </form>
                            
                            <hr>
                            
                            <h6>Custom Schedule</h6>
                            <form method="POST" action="{{ url_for('admin.create_scheduled_task') }}">
                                <div class="mb-2">
                                    <label class="form-label">Task Type</label>
                                    <select class="form-select form-select-sm" name="task_type" required>
                                        <option value="cleanup_files">Clean Unused Files</option>
                                        <option value="clear_logs">Clear Server Logs</option>
                                        <option value="optimize_db">Optimize Database</option>
                                    </select>
                                </div>
                                <div class="mb-2">
                                    <label class="form-label">Time</label>
                                    <input type="time" class="form-control form-control-sm" name="time" value="01:00" required>
                                </div>
                                <div class="mb-3">
                                    <label class="form-label">Frequency</label>
                                    <select class="form-select form-select-sm" name="frequency" required>
                                        <option value="daily">Daily</option>
                                        <option value="weekly">Weekly</option>
                                        <option value="monthly">Monthly</option>
                                    </select>
                                </div>
                                <button type="submit" class="btn btn-primary btn-sm w-100">
                                    <i class="bi bi-plus"></i> Create Task
                                </button>
                            </form>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Create Scheduled Task Modal -->
<div class="modal fade" id="createTaskModal" tabindex="-1">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">Create Scheduled Task</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <form method="POST" action="{{ url_for('admin.create_scheduled_task') }}">
                <div class="modal-body">
                    <div class="mb-3">
                        <label for="taskName" class="form-label">Task Name *</label>
                        <input type="text" class="form-control" id="taskName" name="name" required>
                    </div>
                    <div class="mb-3">
                        <label for="taskType" class="form-label">Task Type *</label>
                        <select class="form-select" id="taskType" name="task_type" required>
                            <option value="cleanup_files">Clean Unused Files</option>
                            <option value="clear_logs">Clear Server Logs</option>
                            <option value="optimize_db">Optimize Database</option>
                            <option value="backup_db">Backup Database</option>
                        </select>
                    </div>
                    <div class="mb-3">
                        <label for="cronExpression" class="form-label">Cron Expression *</label>
                        <input type="text" class="form-control" id="cronExpression" name="schedule" 
                               placeholder="0 1 * * * (daily at 1:00 AM)" required>
                        <div class="form-text">
                            Examples: <br>
                            • <code>0 1 * * *</code> - Daily at 1:00 AM<br>
                            • <code>0 0 * * 0</code> - Weekly on Sunday at midnight<br>
                            • <code>0 2 1 * *</code> - Monthly on 1st at 2:00 AM
                        </div>
                    </div>
                    <div class="mb-3">
                        <div class="form-check">
                            <input class="form-check-input" type="checkbox" id="taskEnabled" name="enabled" checked>
                            <label class="form-check-label" for="taskEnabled">
                                Enable Task
                            </label>
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
                    <button type="submit" class="btn btn-primary">Create Task</button>
                </div>
            </form>
        </div>
    </div>
</div>

<!-- Create User Modal -->
<div class="modal fade" id="createUserModal" tabindex="-1">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">Create New User</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <form method="POST" action="{{ url_for('admin.create_user') }}">
                <div class="modal-body">
                    <div class="mb-3">
                        <label for="username" class="form-label">Username *</label>
                        <input type="text" class="form-control" id="username" name="username" required>
                    </div>
                    <div class="mb-3">
                        <label for="password" class="form-label">Password *</label>
                        <input type="password" class="form-control" id="password" name="password" required>
                    </div>
                    <div class="mb-3">
                        <label for="role" class="form-label">Role</label>
                        <select class="form-select" id="role" name="role">
                            <option value="user">User</option>
                            <option value="admin">Admin</option>
                        </select>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
                    <button type="submit" class="btn btn-primary">Create User</button>
                </div>
            </form>
        </div>
    </div>
</div>

<!-- Edit User Modal -->
<div class="modal fade" id="editUserModal" tabindex="-1">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">Edit User</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <form method="POST" action="{{ url_for('admin.edit_user') }}" onsubmit="setTimeout(function(){ window.location.reload(); }, 1000);">
                <input type="hidden" id="editUserId" name="user_id">
                <div class="modal-body">
                    <div class="mb-3">
                        <label for="editUsername" class="form-label">Username</label>
                        <input type="text" class="form-control" id="editUsername" name="username" readonly>
                    </div>
                    <div class="mb-3">
                        <label for="editRole" class="form-label">Role</label>
                        <select class="form-select" id="editRole" name="role">
                            <option value="user">User</option>
                            <option value="admin">Admin</option>
                        </select>
                    </div>
                    <div class="mb-3">
                        <div class="form-check">
                            <input class="form-check-input" type="checkbox" id="editIsActive" name="is_active">
                            <label class="form-check-label" for="editIsActive">
                                Active User
                            </label>
                        </div>
                    </div>
                    <div class="mb-3">
                        <label for="editPassword" class="form-label">New Password (leave blank to keep current)</label>
                        <input type="password" class="form-control" id="editPassword" name="password">
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
                    <button type="submit" class="btn btn-primary">Update User</button>
                </div>
            </form>
        </div>
    </div>
</div>

<!-- Delete User Modal -->
<div class="modal fade" id="deleteUserModal" tabindex="-1">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">Delete User</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body">
                <p>Are you sure you want to delete user <strong id="deleteUsername"></strong>?</p>
                <p class="text-danger small">This action cannot be undone.</p>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
                <form method="POST" action="{{ url_for('admin.delete_user') }}" style="display:inline;" onsubmit="setTimeout(function(){ window.location.reload(); }, 1000);">
                    <input type="hidden" id="deleteUserId" name="user_id">
                    <button type="submit" class="btn btn-danger">Delete User</button>
                </form>
            </div>
        </div>
    </div>
</div>

<!-- Quick Schedule Task Modal -->
<div class="modal fade" id="quickScheduleModal" tabindex="-1">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="quickScheduleTitle">Schedule Maintenance Task</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <form method="POST" action="{{ url_for('admin.create_scheduled_task') }}" id="quickScheduleForm">
                <input type="hidden" id="quickTaskType" name="task_type">
                <input type="hidden" name="enabled" value="true">
                <div class="modal-body">
                    <div class="alert alert-info">
                        <i class="bi bi-info-circle"></i> <span id="quickScheduleDescription"></span>
                    </div>
                    
                    <div class="mb-3">
                        <label for="quickTaskName" class="form-label">Task Name</label>
                        <input type="text" class="form-control" id="quickTaskName" name="name" required>
                    </div>
                    
                    <div class="row">
                        <div class="col-md-6">
                            <label for="quickTime" class="form-label">Time</label>
                            <input type="time" class="form-control" id="quickTime" name="time" value="01:00" required>
                        </div>
                        <div class="col-md-6">
                            <label for="quickFrequency" class="form-label">Frequency</label>
                            <select class="form-select" id="quickFrequency" name="frequency" required>
                                <option value="daily">Daily</option>
                                <option value="weekly">Weekly (Sunday)</option>
                                <option value="monthly">Monthly (1st day)</option>
                            </select>
                        </div>
                    </div>
                    
                    <div class="mt-3">
                        <small class="text-muted">
                            <strong>Preview:</strong> <span id="schedulePreview">Daily at 01:00</span>
                        </small>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
                    <button type="submit" class="btn btn-primary">
                        <i class="bi bi-clock"></i> Schedule Task
                    </button>
                </div>
            </form>
        </div>
    </div>
</div>

<script>
let currentUserId = null;

function editUser(userId, username, role, isActive) {
    currentUserId = userId;
    document.getElementById('editUserId').value = userId;
    document.getElementById('editUsername').value = username;
    document.getElementById('editRole').value = role;
    document.getElementById('editIsActive').checked = isActive;
    document.getElementById('editPassword').value = '';
    
    const modal = new bootstrap.Modal(document.getElementById('editUserModal'));
    modal.show();
}

function deleteUser(userId, username) {
    document.getElementById('deleteUserId').value = userId;
    document.getElementById('deleteUsername').textContent = username;
    
    const modal = new bootstrap.Modal(document.getElementById('deleteUserModal'));
    modal.show();
}

function clearLogs() {
    if (confirm('Are you sure you want to clear all server logs? This action cannot be undone.')) {
        fetch('/admin/clear_logs', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
            }
        })
        .then(response => response.json())
        .then(data => {
            if (data.success) {
                showMaintenanceStatus('success', 'Server logs cleared successfully');
            } else {
                showMaintenanceStatus('danger', 'Error clearing logs: ' + data.message);
            }
        })
        .catch(error => {
            console.error('Error:', error);
            showMaintenanceStatus('danger', 'Error clearing logs');
        });
    }
}

function cleanUnusedFiles() {
    if (confirm('Are you sure you want to clean unused files? This will remove files from uploads folder that are not referenced in the database.')) {
        showCleanupStatus('info', 'Scanning for unused files...');
        showMaintenanceStatus('info', 'Cleaning unused files...');
        
        fetch('/admin/clean_unused_files', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
            }
        })
        .then(response => response.json())
        .then(data => {
            if (data.success) {
                const message = `Successfully cleaned ${data.deleted_count} unused files`;
                showCleanupStatus('success', message);
                showMaintenanceStatus('success', message);
            } else {
                const errorMsg = 'Error cleaning files: ' + data.message;
                showCleanupStatus('danger', errorMsg);
                showMaintenanceStatus('danger', errorMsg);
            }
        })
        .catch(error => {
            console.error('Error:', error);
            const errorMsg = 'Error cleaning files';
            showCleanupStatus('danger', errorMsg);
            showMaintenanceStatus('danger', errorMsg);
        });
    }
}

function showCleanupStatus(type, message) {
    const statusDiv = document.getElementById('cleanupStatus');
    if (statusDiv) {
        const alertClass = type === 'success' ? 'alert-success' : 
                          type === 'danger' ? 'alert-danger' : 
                          type === 'warning' ? 'alert-warning' : 'alert-info';
        
        const icon = type === 'success' ? 'check-circle' : 
                     type === 'danger' ? 'exclamation-triangle' : 
                     type === 'warning' ? 'exclamation-triangle' : 'info-circle';
        
        statusDiv.innerHTML = `
            <div class="alert ${alertClass} alert-sm">
                <i class="bi bi-${icon}"></i> ${message}
            </div>
        `;
        
        // Auto-hide success messages after 5 seconds
        if (type === 'success') {
            setTimeout(() => {
                statusDiv.innerHTML = '';
            }, 5000);
        }
    }
}

function optimizeDatabase() {
    if (confirm('Are you sure you want to optimize the database? This may take a few moments.')) {
        showMaintenanceStatus('info', 'Optimizing database...');
        
        fetch('/admin/optimize_database', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
            }
        })
        .then(response => response.json())
        .then(data => {
            if (data.success) {
                showMaintenanceStatus('success', 'Database optimized successfully');
            } else {
                showMaintenanceStatus('danger', 'Error optimizing database: ' + data.message);
            }
        })
        .catch(error => {
            console.error('Error:', error);
            showMaintenanceStatus('danger', 'Error optimizing database');
        });
    }
}

function showMaintenanceStatus(type, message) {
    const statusDiv = document.getElementById('maintenanceStatus');
    const alertClass = type === 'success' ? 'alert-success' : 
                      type === 'danger' ? 'alert-danger' : 
                      type === 'warning' ? 'alert-warning' : 'alert-info';
    
    const icon = type === 'success' ? 'check-circle' : 
                 type === 'danger' ? 'exclamation-triangle' : 
                 type === 'warning' ? 'exclamation-triangle' : 'info-circle';
    
    statusDiv.innerHTML = `
        <div class="alert ${alertClass}">
            <i class="bi bi-${icon}"></i> ${message}
        </div>
    `;
    
    // Auto-hide success messages after 5 seconds
    if (type === 'success') {
        setTimeout(() => {
            statusDiv.innerHTML = `
                <div class="alert alert-info">
                    <i class="bi bi-info-circle"></i> Ready to perform maintenance tasks.
                </div>
            `;
        }, 5000);
    }
}

function loadScheduledTasks() {
    fetch('/admin/scheduled_tasks')
        .then(response => response.json())
        .then(data => {
            const tasksDiv = document.getElementById('scheduledTasks');
            
            if (data.tasks && data.tasks.length > 0) {
                let tasksHtml = '<div class="list-group">';
                
                data.tasks.forEach(task => {
                    const statusBadge = task.enabled ? 
                        '<span class="badge bg-success">Enabled</span>' : 
                        '<span class="badge bg-secondary">Disabled</span>';
                    
                    tasksHtml += `
                        <div class="list-group-item d-flex justify-content-between align-items-center">
                            <div>
                                <h6 class="mb-1">${task.name}</h6>
                                <p class="mb-1 text-muted">${task.task_type} - ${task.schedule}</p>
                                <small class="text-muted">Next run: ${task.next_run || 'Not scheduled'}</small>
                            </div>
                            <div>
                                ${statusBadge}
                                <button class="btn btn-sm btn-outline-warning ms-2" onclick="toggleTask(${task.id})">
                                    <i class="bi bi-${task.enabled ? 'pause' : 'play'}"></i>
                                </button>
                                <button class="btn btn-sm btn-outline-danger ms-1" onclick="deleteTask(${task.id})">
                                    <i class="bi bi-trash"></i>
                                </button>
                            </div>
                        </div>
                    `;
                });
                
                tasksHtml += '</div>';
                tasksDiv.innerHTML = tasksHtml;
            } else {
                tasksDiv.innerHTML = `
                    <div class="text-center py-4">
                        <i class="bi bi-clock text-muted" style="font-size: 3rem;"></i>
                        <h5 class="text-muted mt-2">No Scheduled Tasks</h5>
                        <p class="text-muted">Create your first scheduled task to automate maintenance.</p>
                    </div>
                `;
            }
        })
        .catch(error => {
            console.error('Error loading tasks:', error);
            document.getElementById('scheduledTasks').innerHTML = `
                <div class="alert alert-danger">
                    <i class="bi bi-exclamation-triangle"></i> Error loading scheduled tasks.
                </div>
            `;
        });
}

function toggleTask(taskId) {
    fetch(`/admin/toggle_task/${taskId}`, {
        method: 'POST',
        headers: {
            'Content-Type': 'application/json',
        }
    })
    .then(response => response.json())
    .then(data => {
        if (data.success) {
            loadScheduledTasks(); // Reload tasks
        } else {
            alert('Error toggling task: ' + data.message);
        }
    })
    .catch(error => {
        console.error('Error:', error);
        alert('Error toggling task');
    });
}

function deleteTask(taskId) {
    if (confirm('Are you sure you want to delete this scheduled task?')) {
        fetch(`/admin/delete_task/${taskId}`, {
            method: 'DELETE',
            headers: {
                'Content-Type': 'application/json',
            }
        })
        .then(response => response.json())
        .then(data => {
            if (data.success) {
                loadScheduledTasks(); // Reload tasks
            } else {
                alert('Error deleting task: ' + data.message);
            }
        })
        .catch(error => {
            console.error('Error:', error);
            alert('Error deleting task');
        });
    }
}

// Consolidated DOMContentLoaded event
document.addEventListener('DOMContentLoaded', function() {
    console.log('Admin page loaded - initializing...');
    
    // Check for successful user operations and handle refresh
    checkForUserOperationSuccess();
    
    // Load scheduled tasks immediately on page load
    loadScheduledTasks();
    
    // Load scheduled tasks when scheduler tab is shown
    const schedulerTab = document.getElementById('scheduler-tab');
    if (schedulerTab) {
        schedulerTab.addEventListener('shown.bs.tab', function() {
            console.log('Loading scheduled tasks...');
            loadScheduledTasks();
        });
    }
    
    // Add event listeners for the schedule preview
    const timeInput = document.getElementById('quickTime');
    const frequencySelect = document.getElementById('quickFrequency');
    
    if (timeInput && frequencySelect) {
        timeInput.addEventListener('change', updateSchedulePreview);
        frequencySelect.addEventListener('change', updateSchedulePreview);
    }
    
    // Debug: Check if tab content is visible
    const maintenanceContent = document.getElementById('maintenance');
    const schedulerContent = document.getElementById('scheduler');
    
    console.log('Maintenance tab content found:', !!maintenanceContent);
    console.log('Scheduler tab content found:', !!schedulerContent);
});
    const frequency = this.value;
    const timeInput = document.getElementById('quickTime');
    const previewText = document.getElementById('schedulePreview');
    
    let defaultTime = '01:00';
    let description = '';
    
    switch (frequency) {
        case 'daily':
            description = 'Runs daily at the specified time.';
            break;
        case 'weekly':
            description = 'Runs weekly on Sunday at the specified time.';
            defaultTime = '01:00';
            break;
        case 'monthly':
            description = 'Runs monthly on the 1st day at the specified time.';
            defaultTime = '01:00';
            break;
    }
    
    timeInput.value = defaultTime;
    previewText.textContent = description;
});

// Open quick schedule modal
function openQuickScheduleModal(taskType) {
    const title = taskType === 'cleanup_files' ? 'Quick Schedule: Daily File Cleanup' :
                  taskType === 'clear_logs' ? 'Quick Schedule: Weekly Log Clearance' :
                  'Quick Schedule: Monthly Database Optimization';
    
    const description = taskType === 'cleanup_files' ? 'This task will clean unused files daily at 1:00 AM.' :
                        taskType === 'clear_logs' ? 'This task will clear server logs weekly on Sunday at 1:00 AM.' :
                        'This task will optimize the database monthly on the 1st day at 1:00 AM.';
    
    document.getElementById('quickScheduleTitle').textContent = title;
    document.getElementById('quickScheduleDescription').innerHTML = `<i class="bi bi-info-circle"></i> ${description}`;
    document.getElementById('quickTaskType').value = taskType;
    
    const modal = new bootstrap.Modal(document.getElementById('quickScheduleModal'));
    modal.show();
}

function scheduleCleanupTask() {
    showQuickScheduleModal('cleanup_files', 'Clean Unused Files', 'Automatically remove unused media files from uploads folder');
}

function scheduleLogClearTask() {
    showQuickScheduleModal('clear_logs', 'Clear Server Logs', 'Automatically clear server log entries to free up database space');
}

function scheduleDatabaseTask() {
    showQuickScheduleModal('optimize_db', 'Optimize Database', 'Automatically optimize database performance and clean up orphaned records');
}

function showQuickScheduleModal(taskType, taskName, description) {
    document.getElementById('quickTaskType').value = taskType;
    document.getElementById('quickTaskName').value = taskName;
    document.getElementById('quickScheduleTitle').textContent = `Schedule ${taskName}`;
    document.getElementById('quickScheduleDescription').textContent = description;
    
    // Update preview
    updateSchedulePreview();
    
    const modal = new bootstrap.Modal(document.getElementById('quickScheduleModal'));
    modal.show();
}

function updateSchedulePreview() {
    const time = document.getElementById('quickTime').value;
    const frequency = document.getElementById('quickFrequency').value;
    const preview = document.getElementById('schedulePreview');
    
    let frequencyText = frequency.charAt(0).toUpperCase() + frequency.slice(1);
    if (frequency === 'weekly') {
        frequencyText = 'Weekly (Sunday)';
    } else if (frequency === 'monthly') {
        frequencyText = 'Monthly (1st day)';
    }
    
    preview.textContent = `${frequencyText} at ${time}`;
}

// Check for flash messages indicating user operations and refresh if needed
function checkForUserOperationSuccess() {
    // Check if there are any flash messages indicating successful user operations
    const flashMessages = document.querySelectorAll('.alert');
    let shouldRefresh = false;
    
    flashMessages.forEach(function(alert) {
        const text = alert.textContent.toLowerCase();
        if (text.includes('created successfully') || 
            text.includes('updated successfully') || 
            text.includes('deleted successfully')) {
            shouldRefresh = true;
        }
    });
    
    // If we just completed a user operation, we might need to refresh to show updated data
    if (shouldRefresh && window.performance && window.performance.navigation.type === 1) {
        // This is a refresh after a form submission, ensure we show the latest data
        setTimeout(function() {
            if (document.querySelector('.nav-link.active').getAttribute('data-bs-target') === '#users') {
                // We're on the users tab, reload to show updated user list
                window.location.reload();
            }
        }, 2000); // Wait 2 seconds to let user read the success message
    }
}
}
</script>
{% endblock %}