{% extends "base.html" %}

{% block content %}

<div class="container-fluid">

    <!-- Header -->
    <div class="d-flex justify-content-between align-items-center mb-4">

        <div>

            <h2 class="fw-bold">
                <i class="bi bi-shield-lock text-danger"></i>
                Admin Dashboard
            </h2>

            <p class="text-muted mb-0">
                System administration and management.
            </p>

        </div>

        <div>

            <span class="badge bg-danger fs-6">

                <i class="bi bi-shield-fill-check"></i>

                Admin Access

            </span>

        </div>

    </div>

    <!-- Quick Stats -->
    <div class="row g-4 mb-4">

        <div class="col-md-3">

            <div class="card shadow-sm border-0 bg-primary text-white">

                <div class="card-body">

                    <h6 class="text-white-50">

                        <i class="bi bi-people"></i>

                        Total Users

                    </h6>

                    <h2 class="text-white">{{ users|length }}</h2>

                    <small class="text-white-50">

                        Registered users

                    </small>

                </div>

            </div>

        </div>

        <div class="col-md-3">

            <div class="card shadow-sm border-0 bg-success text-white">

                <div class="card-body">

                    <h6 class="text-white-50">

                        <i class="bi bi-person-check"></i>

                        Active Users

                    </h6>

                    <h2 class="text-white">{{ users|selectattr('is_active')|list|length }}</h2>

                    <small class="text-white-50">

                        Active accounts

                    </small>

                </div>

            </div>

        </div>

        <div class="col-md-3">

            <div class="card shadow-sm border-0 bg-warning text-dark">

                <div class="card-body">

                    <h6 class="text-dark-50">

                        <i class="bi bi-person-x"></i>

                        Inactive Users

                    </h6>

                    <h2>{{ users|rejectattr('is_active')|list|length }}</h2>

                    <small class="text-dark-50">

                        Disabled accounts

                    </small>

                </div>

            </div>

        </div>

        <div class="col-md-3">

            <div class="card shadow-sm border-0 bg-info text-white">

                <div class="card-body">

                    <h6 class="text-white-50">

                        <i class="bi bi-person-badge"></i>

                        Admin Users

                    </h6>

                    <h2 class="text-white">{{ users|selectattr('role', 'equalto', 'Admin')|list|length }}</h2>

                    <small class="text-white-50">

                        System administrators

                    </small>

                </div>

            </div>

        </div>

    </div>

    <!-- Admin Actions -->
    <div class="row g-4">

        <!-- User Management -->
        <div class="col-md-4">

            <div class="card shadow-sm border-0 h-100">

                <div class="card-header bg-primary text-white">

                    <i class="bi bi-people"></i>

                    User Management

                </div>

                <div class="card-body">

                    <div class="d-grid gap-2">

                        <a href="/users" class="btn btn-primary">

                            <i class="bi bi-list-ul"></i>

                            View All Users

                        </a>

                        <a href="/users/new" class="btn btn-success">

                            <i class="bi bi-person-plus"></i>

                            Create New User

                        </a>

                    </div>

                </div>

            </div>

        </div>

        <!-- System Settings -->
        <div class="col-md-4">

            <div class="card shadow-sm border-0 h-100">

                <div class="card-header bg-dark text-white">

                    <i class="bi bi-gear"></i>

                    System Settings

                </div>

                <div class="card-body">

                    <div class="d-grid gap-2">

                        <a href="#" class="btn btn-outline-dark">

                            <i class="bi bi-shield-lock"></i>

                            Roles & Permissions

                        </a>

                        <a href="#" class="btn btn-outline-dark">

                            <i class="bi bi-database"></i>

                            Database Backup

                        </a>

                        <a href="#" class="btn btn-outline-dark">

                            <i class="bi bi-activity"></i>

                            System Logs

                        </a>

                    </div>

                </div>

            </div>

        </div>

        <!-- Reports -->
        <div class="col-md-4">

            <div class="card shadow-sm border-0 h-100">

                <div class="card-header bg-success text-white">

                    <i class="bi bi-bar-chart-line"></i>

                    Admin Reports

                </div>

                <div class="card-body">

                    <div class="d-grid gap-2">

                        <a href="#" class="btn btn-outline-success">

                            <i class="bi bi-file-earmark-text"></i>

                            User Activity Report

                        </a>

                        <a href="#" class="btn btn-outline-success">

                            <i class="bi bi-file-earmark-spreadsheet"></i>

                            System Usage Report

                        </a>

                    </div>

                </div>

            </div>

        </div>

    </div>

    <!-- User List -->
    <div class="card shadow-sm border-0 mt-4">

        <div class="card-header bg-danger text-white d-flex justify-content-between">

            <span>

                <i class="bi bi-people-fill"></i>

                All System Users

            </span>

            <span class="badge bg-light text-dark">

                {{ users|length }} Total

            </span>

        </div>

        <div class="card-body p-0">

            <div class="table-responsive">

                <table class="table table-hover align-middle mb-0">

                    <thead class="table-light">

                        <tr>

                            <th>ID</th>

                            <th>Username</th>

                            <th>Full Name</th>

                            <th>Email</th>

                            <th>Role</th>

                            <th>Department</th>

                            <th>Status</th>

                            <th>Actions</th>

                        </tr>

                    </thead>

                    <tbody>

                    {% for user in users %}

                        <tr>

                            <td>

                                <strong>{{ user.id }}</strong>

                            </td>

                            <td>

                                <code>{{ user.username }}</code>

                            </td>

                            <td>

                                {{ user.full_name or "-" }}

                            </td>

                            <td>

                                {{ user.email }}

                            </td>

                            <td>

                                <span class="badge bg-{% if user.role == 'Admin' %}danger{% elif user.role == 'Director' %}warning{% elif user.role == 'Engineer' %}info{% elif user.role == 'Procurement' %}primary{% else %}secondary{% endif %}">

                                    {{ user.role }}

                                </span>

                            </td>

                            <td>

                                {{ user.department or "-" }}

                            </td>

                            <td>

                                {% if user.is_active %}

                                    <span class="badge bg-success">Active</span>

                                {% else %}

                                    <span class="badge bg-danger">Inactive</span>

                                {% endif %}

                            </td>

                            <td>

                                <a href="/users/{{ user.id }}/edit" class="btn btn-sm btn-warning">

                                    <i class="bi bi-pencil"></i>

                                </a>

                                <!-- ✅ TOGGLE ACTIVE/INACTIVE BUTTON -->
                                {% if current_user.role == "Admin" and user.id != current_user.id %}

                                    {% if user.is_active %}

                                        <button class="btn btn-sm btn-danger" 
                                                data-user-id="{{ user.id }}"
                                                onclick="toggleUserStatus(this, 'deactivate')"
                                                title="Deactivate User">
                                            <i class="bi bi-x-circle"></i>
                                        </button>

                                    {% else %}

                                        <button class="btn btn-sm btn-success" 
                                                data-user-id="{{ user.id }}"
                                                onclick="toggleUserStatus(this, 'activate')"
                                                title="Activate User">
                                            <i class="bi bi-check-circle"></i>
                                        </button>

                                    {% endif %}

                                {% endif %}

                                <!-- ✅ DELETE BUTTON - PERMANENT DELETE (Admin Only) -->
                                {% if current_user.role == "Admin" and user.id != current_user.id %}
                                <button class="btn btn-sm btn-danger" 
                                        onclick="confirmDelete('/users/{{ user.id }}/delete', 'User: {{ user.username }} ({{ user.full_name }})')"
                                        title="Permanently Delete User">
                                    <i class="bi bi-trash"></i>
                                </button>
                                {% endif %}

                            </td>

                        </tr>

                    {% else %}

                        <tr>

                            <td colspan="8" class="text-center text-muted py-4">

                                <i class="bi bi-people fs-1 d-block"></i>

                                No users found.

                            </td>

                        </tr>

                    {% endfor %}

                    </tbody>

                </table>

            </div>

        </div>

    </div>

</div>

<!-- ========================================================== -->
<!-- SCRIPTS - Toggle Status Only (Delete uses base.html modal) -->
<!-- ========================================================== -->

<script>
    function toggleUserStatus(button, action) {
        const userId = button.getAttribute('data-user-id');
        const confirmMessage = action === 'activate' 
            ? "Are you sure you want to ACTIVATE this user?" 
            : "Are you sure you want to DEACTIVATE this user?";
        
        if (confirm(confirmMessage)) {
            const url = action === 'activate' 
                ? `/users/${userId}/activate` 
                : `/users/${userId}/deactivate`;
            
            fetch(url, {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json'
                }
            }).then(response => {
                if (response.ok) {
                    window.location.reload();
                } else {
                    alert('An error occurred. Please try again.');
                }
            }).catch(error => {
                alert('An error occurred. Please try again.');
            });
        }
    }
</script>

{% endblock %}