{% extends 'layouts/authenticated.html.twig' %}

{% block page_title %}Gestion des Utilisateurs{% endblock %}

{% block content %}
<div class="mb-8">
    <div class="sm:flex sm:items-center sm:justify-between">
        <div>
            <h1 class="text-3xl font-bold text-gray-900">Utilisateurs</h1>
            <p class="mt-2 text-sm text-gray-700">Gérer les utilisateurs (Employés, Commerciaux, Clients)</p>
        </div>
        <div class="mt-4 sm:mt-0 flex space-x-3">
            {# View Toggle #}
            <div class="inline-flex rounded-md shadow-sm" role="group" data-controller="view-toggle">
                <a href="{{ path('manager_users_index', filters|merge({view: 'table'})) }}"
                   class="px-4 py-2 text-sm font-medium {{ viewMode == 'table' ? 'bg-indigo-600 text-white' : 'bg-white text-gray-700 hover:bg-gray-50' }} border border-gray-300 rounded-l-lg focus:z-10 focus:ring-2 focus:ring-indigo-500">
                    <i class="fas fa-table mr-2"></i>
                    Tableau
                </a>
                <a href="{{ path('manager_users_index', filters|merge({view: 'grid'})) }}"
                   class="px-4 py-2 text-sm font-medium {{ viewMode == 'grid' ? 'bg-indigo-600 text-white' : 'bg-white text-gray-700 hover:bg-gray-50' }} border border-gray-300 rounded-r-lg focus:z-10 focus:ring-2 focus:ring-indigo-500">
                    <i class="fas fa-th-large mr-2"></i>
                    Grille
                </a>
            </div>

            <a href="{{ path('manager_users_create') }}" class="inline-flex items-center px-4 py-2 border border-transparent shadow-sm text-sm font-medium rounded-md text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500">
                <i class="fas fa-plus mr-2"></i>
                Créer un utilisateur
            </a>
        </div>
    </div>

    {# Statistics Cards #}
    <div class="mt-6 grid grid-cols-1 gap-5 sm:grid-cols-2 lg:grid-cols-4">
        <div class="bg-white overflow-hidden shadow rounded-lg">
            <div class="p-5">
                <div class="flex items-center">
                    <div class="flex-shrink-0">
                        <i class="fas fa-users text-2xl text-indigo-600"></i>
                    </div>
                    <div class="ml-5 w-0 flex-1">
                        <dl>
                            <dt class="text-sm font-medium text-gray-500 truncate">
                                Total utilisateurs
                            </dt>
                            <dd class="text-2xl font-bold text-gray-900">
                                {{ statistics.total|default(0) }}
                            </dd>
                        </dl>
                    </div>
                </div>
            </div>
        </div>

        <div class="bg-white overflow-hidden shadow rounded-lg">
            <div class="p-5">
                <div class="flex items-center">
                    <div class="flex-shrink-0">
                        <i class="fas fa-user-check text-2xl text-green-600"></i>
                    </div>
                    <div class="ml-5 w-0 flex-1">
                        <dl>
                            <dt class="text-sm font-medium text-gray-500 truncate">
                                Comptes actifs
                            </dt>
                            <dd class="text-2xl font-bold text-gray-900">
                                {{ statistics.active|default(0) }}
                            </dd>
                        </dl>
                    </div>
                </div>
            </div>
        </div>

        <div class="bg-white overflow-hidden shadow rounded-lg">
            <div class="p-5">
                <div class="flex items-center">
                    <div class="flex-shrink-0">
                        <i class="fas fa-envelope-circle-check text-2xl text-blue-600"></i>
                    </div>
                    <div class="ml-5 w-0 flex-1">
                        <dl>
                            <dt class="text-sm font-medium text-gray-500 truncate">
                                Emails vérifiés
                            </dt>
                            <dd class="text-2xl font-bold text-gray-900">
                                {{ statistics.verified|default(0) }}
                            </dd>
                        </dl>
                    </div>
                </div>
            </div>
        </div>

        <div class="bg-white overflow-hidden shadow rounded-lg">
            <div class="p-5">
                <div class="flex items-center">
                    <div class="flex-shrink-0">
                        <i class="fas fa-shield-halved text-2xl text-yellow-600"></i>
                    </div>
                    <div class="ml-5 w-0 flex-1">
                        <dl>
                            <dt class="text-sm font-medium text-gray-500 truncate">
                                2FA activée
                            </dt>
                            <dd class="text-2xl font-bold text-gray-900">
                                {{ statistics.with_2fa|default(0) }}
                            </dd>
                        </dl>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

{# Filters #}
<div class="bg-white shadow rounded-lg mb-6">
    <div class="px-4 py-5 sm:p-6">
        <form method="get" action="{{ path('manager_users_index') }}" class="grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-5">
            <input type="hidden" name="view" value="{{ viewMode }}">

            <div class="lg:col-span-2">
                <label for="search" class="block text-sm font-medium text-gray-700 mb-1">Recherche</label>
                <input type="text" name="search" id="search" value="{{ filters.search|default('') }}"
                       class="mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm placeholder-gray-400 text-gray-900 focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm"
                       placeholder="Email, nom, prénom...">
            </div>

            <div>
                <label for="isActive" class="block text-sm font-medium text-gray-700 mb-1">Statut</label>
                <select name="isActive" id="isActive" class="mt-1 block w-full px-3 py-2 border border-gray-300 bg-white rounded-md shadow-sm text-gray-900 focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm">
                    <option value="">Tous</option>
                    <option value="1" {{ filters.isActive is defined and filters.isActive == true ? 'selected' : '' }}>Actifs</option>
                    <option value="0" {{ filters.isActive is defined and filters.isActive == false ? 'selected' : '' }}>Inactifs</option>
                </select>
            </div>

            <div>
                <label for="emailVerified" class="block text-sm font-medium text-gray-700 mb-1">Email</label>
                <select name="emailVerified" id="emailVerified" class="mt-1 block w-full px-3 py-2 border border-gray-300 bg-white rounded-md shadow-sm text-gray-900 focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm">
                    <option value="">Tous</option>
                    <option value="1" {{ filters.emailVerified is defined and filters.emailVerified == true ? 'selected' : '' }}>Vérifiés</option>
                    <option value="0" {{ filters.emailVerified is defined and filters.emailVerified == false ? 'selected' : '' }}>Non vérifiés</option>
                </select>
            </div>

            <div>
                <label for="role" class="block text-sm font-medium text-gray-700 mb-1">Rôle</label>
                <select name="role" id="role" class="mt-1 block w-full px-3 py-2 border border-gray-300 bg-white rounded-md shadow-sm text-gray-900 focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm">
                    <option value="">Tous</option>
                    <option value="ROLE_EMPLOYER" {{ filters.role|default('') == 'ROLE_EMPLOYER' ? 'selected' : '' }}>Employés</option>
                    <option value="ROLE_SALES" {{ filters.role|default('') == 'ROLE_SALES' ? 'selected' : '' }}>Commerciaux</option>
                    <option value="ROLE_CUSTOMER" {{ filters.role|default('') == 'ROLE_CUSTOMER' ? 'selected' : '' }}>Clients</option>
                </select>
            </div>

            <div class="lg:col-span-5 flex justify-end space-x-3">
                <a href="{{ path('manager_users_index') }}" class="inline-flex items-center px-4 py-2 border border-gray-300 shadow-sm text-sm font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500">
                    <i class="fas fa-times mr-2"></i>
                    Réinitialiser
                </a>
                <button type="submit" class="inline-flex items-center px-4 py-2 border border-transparent shadow-sm text-sm font-medium rounded-md text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500">
                    <i class="fas fa-filter mr-2"></i>
                    Filtrer
                </button>
            </div>
        </form>
    </div>
</div>

{% if viewMode == 'table' %}
    {# Table View #}
    <div class="bg-white shadow rounded-lg overflow-hidden">
        <div class="hidden lg:block overflow-x-auto">
            <table class="min-w-full divide-y divide-gray-200">
                <thead class="bg-gray-50">
                    <tr>
                        <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                            Utilisateur
                        </th>
                        <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                            Rôles
                        </th>
                        <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                            Statut
                        </th>
                        <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                            Email
                        </th>
                        <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                            Inscription
                        </th>
                        <th scope="col" class="px-6 py-3 text-right text-xs font-medium text-gray-500 uppercase tracking-wider">
                            Actions
                        </th>
                    </tr>
                </thead>
                <tbody class="bg-white divide-y divide-gray-200">
                    {% if users is empty %}
                        <tr>
                            <td colspan="6" class="px-6 py-12 text-center text-sm text-gray-500">
                                <i class="fas fa-users text-4xl text-gray-300 mb-3"></i>
                                <p>Aucun utilisateur trouvé</p>
                            </td>
                        </tr>
                    {% else %}
                        {% for user in users %}
                            <tr class="{{ not user.isActive ? 'bg-gray-50' : '' }}">
                                <td class="px-6 py-4 whitespace-nowrap">
                                    <div class="flex items-center">
                                        <div class="flex-shrink-0 h-10 w-10">
                                            <div class="h-10 w-10 rounded-full bg-indigo-100 flex items-center justify-center">
                                                <span class="text-indigo-600 font-medium text-sm">
                                                    {{ user.firstName ? user.firstName|slice(0, 1)|upper : user.email|slice(0, 1)|upper }}{{ user.lastName ? user.lastName|slice(0, 1)|upper : '' }}
                                                </span>
                                            </div>
                                        </div>
                                        <div class="ml-4">
                                            <a href="{{ path('manager_users_show', {id: user.id}) }}" class="text-sm font-medium text-gray-900 hover:text-indigo-600 transition-colors">
                                                {{ user.fullName }}
                                            </a>
                                            <div class="text-sm text-gray-500">
                                                {{ user.email }}
                                            </div>
                                        </div>
                                    </div>
                                </td>
                                <td class="px-6 py-4">
                                    <div class="flex flex-wrap gap-1">
                                        {% for role in user.roles %}
                                            {% if role != 'ROLE_USER' %}
                                                <span class="px-2 py-1 inline-flex text-xs leading-5 font-semibold rounded-full
                                                    {% if role == 'ROLE_EMPLOYER' %}bg-blue-100 text-blue-800
                                                    {% elseif role == 'ROLE_SALES' %}bg-green-100 text-green-800
                                                    {% elseif role == 'ROLE_CUSTOMER' %}bg-purple-100 text-purple-800
                                                    {% else %}bg-gray-100 text-gray-800{% endif %}">
                                                    {{ role|replace({'ROLE_': ''})|capitalize }}
                                                </span>
                                            {% endif %}
                                        {% endfor %}
                                    </div>
                                </td>
                                <td class="px-6 py-4 whitespace-nowrap">
                                    <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full {{ user.isActive ? 'bg-green-100 text-green-800' : 'bg-red-100 text-red-800' }}">
                                        {{ user.isActive ? 'Actif' : 'Inactif' }}
                                    </span>
                                </td>
                                <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
                                    {% if user.emailVerified %}
                                        <i class="fas fa-check-circle text-green-500" title="Email vérifié"></i>
                                    {% else %}
                                        <i class="fas fa-times-circle text-red-500" title="Email non vérifié"></i>
                                    {% endif %}
                                </td>
                                <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
                                    {{ user.createdAt|date('d/m/Y') }}
                                </td>
                                <td class="px-6 py-4 whitespace-nowrap text-right text-sm font-medium">
                                    <a href="{{ path('manager_users_show', {id: user.id}) }}"
                                       class="inline-flex items-center px-4 py-2 border border-transparent shadow-sm text-sm font-medium rounded-md text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500">
                                        <i class="fas fa-eye mr-2"></i>
                                        Voir les détails
                                    </a>
                                </td>
                            </tr>
                        {% endfor %}
                    {% endif %}
                </tbody>
            </table>
        </div>

        {# Mobile Cards (table view on mobile) #}
        <div class="lg:hidden divide-y divide-gray-200">
            {% for user in users %}
                <div class="p-4 {{ not user.isActive ? 'bg-gray-50' : '' }}">
                    <div class="flex items-center space-x-3">
                        <div class="flex-shrink-0">
                            <div class="h-12 w-12 rounded-full bg-indigo-100 flex items-center justify-center">
                                <span class="text-indigo-600 font-medium">
                                    {{ user.firstName ? user.firstName|slice(0, 1)|upper : user.email|slice(0, 1)|upper }}{{ user.lastName ? user.lastName|slice(0, 1)|upper : '' }}
                                </span>
                            </div>
                        </div>
                        <div class="flex-1 min-w-0">
                            <a href="{{ path('manager_users_show', {id: user.id}) }}" class="text-sm font-medium text-gray-900 hover:text-indigo-600 truncate block">
                                {{ user.fullName }}
                            </a>
                            <p class="text-sm text-gray-500 truncate">
                                {{ user.email }}
                            </p>
                            <div class="mt-1 flex items-center space-x-2">
                                <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full {{ user.isActive ? 'bg-green-100 text-green-800' : 'bg-red-100 text-red-800' }}">
                                    {{ user.isActive ? 'Actif' : 'Inactif' }}
                                </span>
                                {% for role in user.roles %}
                                    {% if role != 'ROLE_USER' %}
                                        <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-gray-100 text-gray-800">
                                            {{ role|replace({'ROLE_': ''}) }}
                                        </span>
                                    {% endif %}
                                {% endfor %}
                            </div>
                        </div>
                        <div class="flex items-center">
                            <a href="{{ path('manager_users_show', {id: user.id}) }}"
                               class="inline-flex items-center px-3 py-2 border border-transparent shadow-sm text-xs font-medium rounded-md text-white bg-indigo-600 hover:bg-indigo-700">
                                <i class="fas fa-eye mr-1"></i>
                                Voir
                            </a>
                        </div>
                    </div>
                </div>
            {% endfor %}
        </div>

        {# Pagination #}
        {% if users.pageCount > 1 %}
            <div class="bg-white px-4 py-3 border-t border-gray-200 sm:px-6">
                {{ knp_pagination_render(users) }}
            </div>
        {% endif %}
    </div>

{% else %}
    {# Grid View #}
    <div class="grid grid-cols-1 gap-6 sm:grid-cols-2 lg:grid-cols-3">
        {% if users is empty %}
            <div class="col-span-full bg-white shadow rounded-lg p-12 text-center">
                <i class="fas fa-users text-6xl text-gray-300 mb-4"></i>
                <p class="text-gray-500">Aucun utilisateur trouvé</p>
            </div>
        {% else %}
            {% for user in users %}
                {% include 'manager/users/_user_card.html.twig' with {user: user} %}
            {% endfor %}
        {% endif %}
    </div>

    {# Pagination for grid view #}
    {% if users.pageCount > 1 %}
        <div class="mt-6 bg-white shadow rounded-lg px-4 py-3">
            {{ knp_pagination_render(users) }}
        </div>
    {% endif %}
{% endif %}
{% endblock %}