{% 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-people text-primary"></i>
                System Users
            </h2>

            <p class="text-muted mb-0">
                Manage all users in the system.
            </p>

        </div>

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

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

            New User

        </a>

    </div>

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

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

            <div class="card shadow-sm">

                <div class="card-body">

                    <small class="text-muted">Total Users</small>

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

                </div>

            </div>

        </div>

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

            <div class="card shadow-sm">

                <div class="card-body">

                    <small class="text-muted">Active</small>

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

                </div>

            </div>

        </div>

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

            <div class="card shadow-sm">

                <div class="card-body">

                    <small class="text-muted">Inactive</small>

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

                </div>

            </div>

        </div>

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

            <div class="card shadow-sm">

                <div class="card-body">

                    <small class="text-muted">Admins</small>

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

                </div>

            </div>

        </div>

    </div>

    <!-- Search & Filter Bar -->
    <div class="card shadow-sm mb-4">

        <div class="card-body">

            <form method="get" action="/users" class="row g-3">

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

                    <div class="input-group">

                        <span class="input-group-text"><i class="bi bi-search"></i></span>

                        <input type="text" class="form-control" name="search" placeholder="Search by username, name, email, department..." value="{{ search or '' }}">

                    </div>

                </div>

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

                    <select class="form-select" name="role_filter">

                        <option value="">All Roles</option>

                        {% for role in ["Admin", "Director", "Engineer", "Procurement", "Accounts", "HR", "Workshop", "user"] %}

                        <option value="{{ role }}" {% if role_filter == role %}selected{% endif %}>{{ role }}</option>

                        {% endfor %}

                    </select>

                </div>

                <!-- ✅ DEPARTMENT FILTER DROPDOWN -->
                <div class="col-md-2">

                    <select class="form-select" name="department_filter">

                        <option value="">All Departments</option>

                        {% for dept in departments %}

                        <option value="{{ dept.id }}" {% if department_filter == dept.id|string %}selected{% endif %}>
                            {{ dept.name }}
                        </option>

                        {% endfor %}

                    </select>

                </div>

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

                    <select class="form-select" name="status_filter">

                        <option value="">All Status</option>

                        <option value="active" {% if status_filter == 'active' %}selected{% endif %}>Active</option>

                        <option value="inactive" {% if status_filter == 'inactive' %}selected{% endif %}>Inactive</option>

                    </select>

                </div>

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

                    <button type="submit" class="btn btn-primary w-100">

                        <i class="bi bi-funnel"></i> Filter

                    </button>

                </div>

            </form>

            <!-- Active Filters Display -->
            {% if search or role_filter or status_filter or department_filter %}

            <div class="mt-3">

                <span class="badge bg-info">

                    <i class="bi bi-funnel"></i> Active Filters

                    <a href="/users" class="text-white ms-2">

                        <i class="bi bi-x-circle"></i> Clear All

                    </a>

                </span>

                {% if search %}
                <span class="badge bg-secondary ms-1">
                    Search: "{{ search }}"
                </span>
                {% endif %}

                {% if role_filter %}
                <span class="badge bg-secondary ms-1">
                    Role: {{ role_filter }}
                </span>
                {% endif %}

                {% if department_filter %}
                <span class="badge bg-secondary ms-1">
                    Department: {{ departments|selectattr('id', 'equalto', department_filter|int)|map(attribute='name')|join }}
                </span>
                {% endif %}

                {% if status_filter %}
                <span class="badge bg-secondary ms-1">
                    Status: {{ status_filter }}
                </span>
                {% endif %}

            </div>

            {% endif %}

        </div>

    </div>

    <!-- Users Table -->
    <div class="card shadow-sm">

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

            <span>

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

                User List

            </span>

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

                {{ users|length }} Users

            </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>

                            <!-- ✅ DEPARTMENT COLUMN -->
                            <th>Department</th>

                            <!-- ✅ DEPARTMENT HEAD COLUMN -->
                            <th>Head</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{% elif user.role == 'Accounts' %}success{% elif user.role == 'HR' %}secondary{% elif user.role == 'Workshop' %}dark{% else %}secondary{% endif %}">

                                    {{ user.role }}

                                </span>

                            </td>

                            <!-- ✅ DEPARTMENT DISPLAY -->
                            <td>

                                {% if user.department %}

                                    <span class="badge bg-primary bg-opacity-10 text-primary border border-primary">
                                        <i class="bi bi-building"></i>
                                        {{ user.department.name if user.department is not string else user.department }}
                                    </span>

                                {% else %}

                                    <span class="text-muted">
                                        <i class="bi bi-dash-circle"></i> None
                                    </span>

                                {% endif %}

                            </td>

                            <!-- ✅ DEPARTMENT HEAD BADGE -->
                            <td>

                                {% if user.is_department_head %}

                                    <span class="badge bg-success">
                                        <i class="bi bi-person-badge"></i> Head
                                    </span>

                                {% else %}

                                    <span class="text-muted">
                                        <i class="bi bi-dash-circle"></i>
                                    </span>

                                {% endif %}

                            </td>

                            <td>

                                {% if user.is_active %}

                                    <span class="badge bg-success">
                                        <i class="bi bi-check-circle"></i> Active
                                    </span>

                                {% else %}

                                    <span class="badge bg-danger">
                                        <i class="bi bi-x-circle"></i> Inactive
                                    </span>

                                {% endif %}

                            </td>

                            <td>

                                <!-- View Profile -->
                                <a href="/users/{{ user.id }}/profile" class="btn btn-sm btn-info" title="View Profile">

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

                                </a>

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

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

                                </a>

                                <!-- Permissions -->
                                <a href="/users/{{ user.id }}/permissions" class="btn btn-sm btn-secondary" title="Manage Permissions">

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

                                </a>

                                <!-- Toggle Status Button - Admin Only -->
                                {% 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 - 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="9" class="text-center text-muted py-4">

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

                                No users found matching your filters.

                            </td>

                        </tr>

                    {% endfor %}

                    </tbody>

                </table>

            </div>

        </div>

    </div>

</div>

<!-- ========================================================== -->
<!-- SCRIPTS -->
<!-- ========================================================== -->

<script>
    /**
     * Toggle user status (activate/deactivate)
     */
    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.');
            });
        }
    }

    /**
     * Confirm delete with user confirmation
     * Uses the base.html modal
     */
    function confirmDelete(url, userInfo) {
        if (confirm(`⚠️ PERMANENT DELETE\n\nAre you sure you want to permanently delete\n${userInfo}?\n\nThis action cannot be undone!`)) {
            // Create a form to POST the delete request
            const form = document.createElement('form');
            form.method = 'POST';
            form.action = url;
            document.body.appendChild(form);
            form.submit();
        }
    }

    // Auto-submit filter when dropdown changes (optional)
    document.addEventListener('DOMContentLoaded', function() {
        const filterSelects = document.querySelectorAll('select[name="role_filter"], select[name="department_filter"], select[name="status_filter"]');
        filterSelects.forEach(select => {
            select.addEventListener('change', function() {
                this.closest('form').submit();
            });
        });
    });
</script>

{% endblock %}