{% extends 'base.html.twig' %}

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

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

{% block body %}
<div class="space-y-6">
    <!-- Header avec actions -->
    <div class="flex flex-col sm:flex-row sm:items-center sm:justify-between">
        <div>
            <h2 class="text-2xl font-bold text-gray-900">Équipes & Utilisateurs</h2>
            <p class="text-gray-600 mt-1">Gérez les équipes, leurs membres et leurs permissions</p>
        </div>
        <div class="mt-4 sm:mt-0 flex space-x-3">
            {% if is_admin or current_user.isTeamLeader %}
                <button type="button" 
                        onclick="showCreateTeamModal()" 
                        class="inline-flex items-center px-4 py-2 bg-green-600 hover:bg-green-700 text-white text-sm font-medium rounded-lg transition-colors duration-200">
                    <i class="fas fa-users mr-2"></i>
                    Créer une équipe
                </button>
            {% endif %}
            {% if is_admin or current_user.isTeamLeader %}
                <button type="button" 
                        onclick="showCreateUserModal()" 
                        class="inline-flex items-center px-4 py-2 bg-blue-600 hover:bg-blue-700 text-white text-sm font-medium rounded-lg transition-colors duration-200">
                    <i class="fas fa-user-plus mr-2"></i>
                    Nouvel utilisateur
                </button>
            {% endif %}
        </div>
    </div>

    <!-- Statistiques rapides -->
    <div class="grid grid-cols-1 md:grid-cols-4 gap-6">
        <div class="bg-white rounded-xl shadow-sm border border-gray-200 p-6">
            <div class="flex items-center">
                <div class="flex-shrink-0">
                    <div class="w-8 h-8 bg-blue-100 rounded-lg flex items-center justify-center">
                        <i class="fas fa-users text-blue-600"></i>
                    </div>
                </div>
                <div class="ml-4">
                    <p class="text-sm font-medium text-gray-500">Équipes</p>
                    <p class="text-2xl font-semibold text-gray-900">{{ teams|length }}</p>
                </div>
            </div>
        </div>
        
        <div class="bg-white rounded-xl shadow-sm border border-gray-200 p-6">
            <div class="flex items-center">
                <div class="flex-shrink-0">
                    <div class="w-8 h-8 bg-green-100 rounded-lg flex items-center justify-center">
                        <i class="fas fa-user text-green-600"></i>
                    </div>
                </div>
                <div class="ml-4">
                    <p class="text-sm font-medium text-gray-500">Utilisateurs</p>
                    <p class="text-2xl font-semibold text-gray-900">{{ users|length }}</p>
                </div>
            </div>
        </div>
        
        <div class="bg-white rounded-xl shadow-sm border border-gray-200 p-6">
            <div class="flex items-center">
                <div class="flex-shrink-0">
                    <div class="w-8 h-8 bg-yellow-100 rounded-lg flex items-center justify-center">
                        <i class="fas fa-crown text-yellow-600"></i>
                    </div>
                </div>
                <div class="ml-4">
                    <p class="text-sm font-medium text-gray-500">Chefs d'équipe</p>
                    <p class="text-2xl font-semibold text-gray-900">
                        {% set leaders = 0 %}
                        {% for user in users %}
                            {% if user.isTeamLeader %}
                                {% set leaders = leaders + 1 %}
                            {% endif %}
                        {% endfor %}
                        {{ leaders }}
                    </p>
                </div>
            </div>
        </div>
        
        <div class="bg-white rounded-xl shadow-sm border border-gray-200 p-6">
            <div class="flex items-center">
                <div class="flex-shrink-0">
                    <div class="w-8 h-8 bg-purple-100 rounded-lg flex items-center justify-center">
                        <i class="fas fa-user-shield text-purple-600"></i>
                    </div>
                </div>
                <div class="ml-4">
                    <p class="text-sm font-medium text-gray-500">Actifs</p>
                    <p class="text-2xl font-semibold text-gray-900">
                        {% set activeUsers = 0 %}
                        {% for user in users %}
                            {% if user.isActive %}
                                {% set activeUsers = activeUsers + 1 %}
                            {% endif %}
                        {% endfor %}
                        {{ activeUsers }}
                    </p>
                </div>
            </div>
        </div>
    </div>

    <!-- Contenu principal -->
    <div class="grid grid-cols-1 xl:grid-cols-2 gap-6">
        <!-- Section Équipes -->
        <div class="bg-white rounded-xl shadow-sm border border-gray-200">
            <div class="px-6 py-4 border-b border-gray-200">
                <div class="flex items-center justify-between">
                    <h3 class="text-lg font-semibold text-gray-900">Équipes</h3>
                    <span class="text-sm text-gray-500">{{ teams|length }} équipe(s)</span>
                </div>
            </div>
            <div class="p-6">
                {% if teams is empty %}
                    <div class="text-center py-12">
                        <div class="w-16 h-16 bg-gray-100 rounded-full flex items-center justify-center mx-auto mb-4">
                            <i class="fas fa-users text-gray-400 text-xl"></i>
                        </div>
                        <h3 class="text-lg font-medium text-gray-900 mb-2">Aucune équipe</h3>
                        <p class="text-gray-500 mb-4">Commencez par créer votre première équipe</p>
                        {% if is_admin or current_user.isTeamLeader %}
                            <button onclick="showCreateTeamModal()" 
                                    class="inline-flex items-center px-4 py-2 bg-blue-600 hover:bg-blue-700 text-white text-sm font-medium rounded-lg">
                                <i class="fas fa-plus mr-2"></i>
                                Créer une équipe
                            </button>
                        {% endif %}
                    </div>
                {% else %}
                    <div class="space-y-4">
                        {% for team in teams %}
                            <div class="team-card bg-gradient-to-r from-blue-50 to-indigo-50 rounded-lg p-4 border border-blue-100 hover:shadow-md transition-all duration-200">
                                <div class="flex items-start justify-between">
                                    <div class="flex-1">
                                        <div class="flex items-center space-x-3 mb-2">
                                            <div class="w-10 h-10 bg-blue-600 rounded-lg flex items-center justify-center">
                                                <i class="fas fa-users text-white text-sm"></i>
                                            </div>
                                            <div>
                                                <h4 class="text-lg font-semibold text-gray-900">{{ team.name }}</h4>
                                                {% if team.description %}
                                                    <p class="text-sm text-gray-600">{{ team.description }}</p>
                                                {% endif %}
                                            </div>
                                        </div>
                                        
                                        <div class="flex items-center space-x-4 mb-3">
                                            <div class="flex items-center space-x-2">
                                                <i class="fas fa-crown text-yellow-500 text-sm"></i>
                                                <span class="text-sm text-gray-600">Chef:</span>
                                                {% if team.leader %}
                                                    <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-yellow-100 text-yellow-800">
                                                        {{ team.leader.fullName }}
                                                    </span>
                                                {% else %}
                                                    <span class="text-sm text-gray-400">Non assigné</span>
                                                {% endif %}
                                            </div>
                                            
                                            <div class="flex items-center space-x-2">
                                                <i class="fas fa-users text-blue-500 text-sm"></i>
                                                <span class="text-sm text-gray-600">{{ team.members|length }} membre(s)</span>
                                            </div>
                                        </div>

                                        <!-- Membres de l'équipe -->
                                        {% if team.members|length > 0 %}
                                            <div class="mb-3">
                                                <div class="flex flex-wrap gap-2">
                                                    {% for member in team.members %}
                                                        <div class="flex items-center space-x-2 bg-white rounded-full px-3 py-1 border border-gray-200">
                                                            <div class="w-6 h-6 bg-green-500 rounded-full flex items-center justify-center">
                                                                <span class="text-xs text-white font-medium">{{ member.firstName|first }}{{ member.lastName|first }}</span>
                                                            </div>
                                                            <span class="text-sm text-gray-700">{{ member.fullName }}</span>
                                                            {% if member == team.leader %}
                                                                <i class="fas fa-crown text-yellow-400 text-xs"></i>
                                                            {% endif %}
                                                        </div>
                                                    {% endfor %}
                                                </div>
                                            </div>
                                        {% endif %}
                                    </div>
                                    
                                    <!-- Actions -->
                                    <div class="flex flex-col space-y-2 ml-4">
                                        {% if is_admin or (current_user.isTeamLeader and team.leader == current_user) %}
                                            <button onclick="showAddMemberModal({{ team.id }})" 
                                                    class="inline-flex items-center px-3 py-1.5 bg-blue-600 hover:bg-blue-700 text-white text-xs font-medium rounded-md transition-colors duration-200"
                                                    title="Ajouter un membre">
                                                <i class="fas fa-user-plus"></i>
                                            </button>
                                        {% endif %}
                                        <a href="{{ path('app_team_show', {id: team.id}) }}" 
                                           class="inline-flex items-center px-3 py-1.5 bg-blue-100 hover:bg-blue-200 text-blue-700 text-xs font-medium rounded-md transition-colors duration-200"
                                           title="Voir détails">
                                            <i class="fas fa-eye"></i>
                                        </a>
                                        {% if is_admin or (current_user.isTeamLeader and team.leader == current_user) %}
                                        <a href="{{ path('app_team_edit', {id: team.id}) }}" 
                                           class="inline-flex items-center px-3 py-1.5 bg-green-100 hover:bg-green-200 text-green-700 text-xs font-medium rounded-md transition-colors duration-200"
                                           title="Modifier">
                                            <i class="fas fa-edit"></i>
                                        </a>
                                        <button onclick="deleteTeam({{ team.id }})" 
                                                class="inline-flex items-center px-3 py-1.5 bg-red-100 hover:bg-red-200 text-red-700 text-xs font-medium rounded-md transition-colors duration-200"
                                                title="Supprimer">
                                            <i class="fas fa-trash"></i>
                                        </button>
                                        {% endif %}
                                    </div>
                                </div>
                            </div>
                        {% endfor %}
                    </div>
                {% endif %}
            </div>
        </div>

        <!-- Section Utilisateurs -->
        <div class="bg-white rounded-xl shadow-sm border border-gray-200">
            <div class="px-6 py-4 border-b border-gray-200">
                <div class="flex items-center justify-between">
                    <h3 class="text-lg font-semibold text-gray-900">Utilisateurs</h3>
                    <span class="text-sm text-gray-500">{{ users|length }} utilisateur(s)</span>
                </div>
            </div>
            <div class="p-6">
                {% if users is empty %}
                    <div class="text-center py-12">
                        <div class="w-16 h-16 bg-gray-100 rounded-full flex items-center justify-center mx-auto mb-4">
                            <i class="fas fa-user text-gray-400 text-xl"></i>
                        </div>
                        <h3 class="text-lg font-medium text-gray-900 mb-2">Aucun utilisateur</h3>
                        <p class="text-gray-500 mb-4">Ajoutez des utilisateurs à votre système</p>
                        {% if is_admin or current_user.isTeamLeader %}
                            <button onclick="showCreateUserModal()" 
                                    class="inline-flex items-center px-4 py-2 bg-blue-600 hover:bg-blue-700 text-white text-sm font-medium rounded-lg">
                                <i class="fas fa-plus mr-2"></i>
                                Ajouter un utilisateur
                            </button>
                        {% endif %}
                    </div>
                {% else %}
                    <div class="space-y-3">
                        {% for user in users %}
                            <div class="user-card bg-gray-50 rounded-lg p-4 hover:bg-gray-100 transition-colors duration-200">
                                <div class="flex items-center justify-between">
                                    <div class="flex items-center space-x-3">
                                        <!-- Avatar -->
                                        <div class="w-12 h-12 bg-gradient-to-br from-blue-500 to-purple-600 rounded-full flex items-center justify-center">
                                            {% if user.avatar %}
                                                <img src="{{ asset('uploads/avatars/' ~ user.avatar) }}" alt="Avatar" class="w-12 h-12 rounded-full object-cover">
                                            {% else %}
                                                <span class="text-white font-semibold text-lg">{{ user.firstName|first }}{{ user.lastName|first }}</span>
                                            {% endif %}
                                        </div>
                                        
                                        <!-- Informations utilisateur -->
                                        <div class="flex-1">
                                            <div class="flex items-center space-x-2">
                                                <h4 class="text-sm font-semibold text-gray-900">{{ user.fullName }}</h4>
                                                {% if user.isTeamLeader %}
                                                    <span class="inline-flex items-center px-2 py-0.5 rounded-full text-xs font-medium bg-yellow-100 text-yellow-800">
                                                        <i class="fas fa-crown mr-1"></i>
                                                        Chef
                                                    </span>
                                                {% endif %}
                                                {% if not user.isActive %}
                                                    <span class="inline-flex items-center px-2 py-0.5 rounded-full text-xs font-medium bg-red-100 text-red-800">
                                                        Inactif
                                                    </span>
                                                {% endif %}
                                            </div>
                                            <p class="text-sm text-gray-600">{{ user.email }}</p>
                                            <div class="flex items-center space-x-4 mt-1">
                                                {% if user.specialty %}
                                                    <span class="text-xs text-gray-500">{{ user.specialty }}</span>
                                                {% endif %}
                                                {% if user.teams|length > 0 %}
                                                    {% for team in user.teams %}
                                                        <span class="inline-flex items-center px-2 py-0.5 rounded-full text-xs font-medium bg-blue-100 text-blue-800">
                                                            {{ team.name }}
                                                        </span>
                                                    {% endfor %}
                                                {% else %}
                                                    <span class="text-xs text-gray-400">Aucune équipe</span>
                                                {% endif %}
                                                {% if user.role %}
                                                    <span class="inline-flex items-center px-2 py-0.5 rounded-full text-xs font-medium bg-purple-100 text-purple-800">
                                                        {{ user.role.name }}
                                                    </span>
                                                {% endif %}
                                            </div>
                                        </div>
                                    </div>
                                    
                                    <!-- Actions -->
                                    {% set hasCommonTeam = false %}
                                    {% if current_user.isTeamLeader %}
                                        {% for userTeam in user.teams %}
                                            {% if current_user.teams.contains(userTeam) %}
                                                {% set hasCommonTeam = true %}
                                            {% endif %}
                                        {% endfor %}
                                    {% endif %}
                                    
                                    {% if is_admin or current_user.isTeamLeader or user == current_user %}
                                        <div class="flex items-center space-x-1">
                                            <a href="{{ path('app_user_show', {id: user.id}) }}" 
                                               class="inline-flex items-center px-3 py-1.5 bg-blue-100 hover:bg-blue-200 text-blue-700 text-xs font-medium rounded-md transition-colors duration-200"
                                               title="Voir profil">
                                                <i class="fas fa-eye"></i>
                                            </a>
                                            
                                            {% if is_admin or (current_user.isTeamLeader and hasCommonTeam) %}
                                                <a href="{{ path('app_user_edit', {id: user.id}) }}" 
                                                   class="inline-flex items-center px-3 py-1.5 bg-green-100 hover:bg-green-200 text-green-700 text-xs font-medium rounded-md transition-colors duration-200"
                                                   title="Modifier">
                                                    <i class="fas fa-edit"></i>
                                                </a>
                                                
                                                <a href="{{ path('app_user_permissions', {id: user.id}) }}" 
                                                   class="inline-flex items-center px-3 py-1.5 bg-purple-100 hover:bg-purple-200 text-purple-700 text-xs font-medium rounded-md transition-colors duration-200"
                                                   title="Gérer permissions">
                                                    <i class="fas fa-shield-alt"></i>
                                                </a>
                                                
                                                {% if user != current_user %}
                                                    <button onclick="deleteUser({{ user.id }})" 
                                                            class="inline-flex items-center px-3 py-1.5 bg-red-100 hover:bg-red-200 text-red-700 text-xs font-medium rounded-md transition-colors duration-200"
                                                            title="Désactiver">
                                                        <i class="fas fa-user-times"></i>
                                                    </button>
                                                {% endif %}
                                            {% endif %}
                                        </div>
                                    {% endif %}
                                </div>
                            </div>
                        {% endfor %}
                    </div>
                {% endif %}
            </div>
        </div>
    </div>
</div>

<!-- Modal Créer Équipe -->
{% if is_admin or current_user.isTeamLeader %}
    <div id="createTeamModal" class="fixed inset-0 bg-gray-600 bg-opacity-50 hidden z-50">
        <div class="flex items-center justify-center min-h-screen p-4">
            <div class="bg-white rounded-xl shadow-xl max-w-md w-full">
                <form action="{{ path('app_team_new') }}" method="post">
                    <div class="px-6 py-4 border-b border-gray-200">
                        <h3 class="text-lg font-semibold text-gray-900">Créer une nouvelle équipe</h3>
                    </div>
                    <div class="p-6 space-y-4">
                        <div>
                            <label for="team-name" class="block text-sm font-medium text-gray-700 mb-2">Nom de l'équipe *</label>
                            <input type="text" class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500" id="team-name" name="name" required>
                        </div>
                        <div>
                            <label for="team-description" class="block text-sm font-medium text-gray-700 mb-2">Description</label>
                            <textarea class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500" id="team-description" name="description" rows="3"></textarea>
                        </div>
                        <div>
                            <label for="team-leader" class="block text-sm font-medium text-gray-700 mb-2">Chef d'équipe *</label>
                            <select class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500" id="team-leader" name="leader_id" required>
                                <option value="">Sélectionner un chef d'équipe</option>
                                {% for user in all_users %}
                                    <option value="{{ user.id }}">
                                        {{ user.fullName }} ({{ user.email }})
                                        {% if user.teams|length > 0 %} - {% for team in user.teams %}{{ team.name }}{% if not loop.last %}, {% endif %}{% endfor %}{% endif %}
                                    </option>
                                {% endfor %}
                            </select>
                        </div>
                        
                        <!-- Membres optionnels -->
                        {% if all_users is not empty %}
                        <div>
                            <label class="block text-sm font-medium text-gray-700 mb-2">
                                Membres à ajouter (optionnel)
                            </label>
                            <div class="border rounded-lg p-3 max-h-40 overflow-y-auto bg-gray-50">
                                <div class="space-y-2">
                                    {% for user in all_users %}
                                    <label class="flex items-center space-x-3 cursor-pointer hover:bg-gray-100 p-2 rounded">
                                        <input type="checkbox" 
                                               name="member_ids[]" 
                                               value="{{ user.id }}" 
                                               class="h-4 w-4 text-blue-600 focus:ring-blue-500 border-gray-300 rounded">
                                        <div class="flex-1 min-w-0">
                                            <div class="text-sm font-medium text-gray-900">
                                                {{ user.fullName }}
                                                {% if user.teams|length > 0 %}
                                                    {% for team in user.teams %}
                                                        <span class="inline-flex items-center px-2 py-0.5 rounded-full text-xs font-medium bg-blue-100 text-blue-800 ml-1">
                                                            {{ team.name }}
                                                        </span>
                                                    {% endfor %}
                                                {% else %}
                                                    <span class="inline-flex items-center px-2 py-0.5 rounded-full text-xs font-medium bg-gray-100 text-gray-800 ml-2">
                                                        Sans équipe
                                                    </span>
                                                {% endif %}
                                            </div>
                                            <div class="text-xs text-gray-500">{{ user.email }}</div>
                                        </div>
                                    </label>
                                    {% endfor %}
                                </div>
                            </div>
                            <p class="text-xs text-gray-600 mt-1">
                                <i class="fas fa-info-circle mr-1"></i>
                                Sélectionnez les utilisateurs que vous souhaitez ajouter à cette équipe. Le chef d'équipe sera automatiquement ajouté.
                                <br><i class="fas fa-users text-blue-500 mr-1"></i>
                                Les utilisateurs peuvent appartenir à plusieurs équipes simultanément.
                            </p>
                        </div>
                        {% endif %}
                    </div>
                    <div class="px-6 py-4 border-t border-gray-200 flex justify-end space-x-3">
                        <button type="button" onclick="hideCreateTeamModal()" class="px-4 py-2 text-sm font-medium text-gray-700 bg-gray-100 hover:bg-gray-200 rounded-lg transition-colors duration-200">
                            Annuler
                        </button>
                        <button type="submit" class="px-4 py-2 text-sm font-medium text-white bg-blue-600 hover:bg-blue-700 rounded-lg transition-colors duration-200">
                            Créer l'équipe
                        </button>
                    </div>
                </form>
            </div>
        </div>
    </div>
{% endif %}

<!-- Modal Ajouter Membre -->
<div id="addMemberModal" class="fixed inset-0 bg-gray-600 bg-opacity-50 hidden z-50">
    <div class="flex items-center justify-center min-h-screen p-4">
        <div class="bg-white rounded-xl shadow-xl max-w-md w-full">
            <div class="px-6 py-4 border-b border-gray-200">
                <h3 class="text-lg font-semibold text-gray-900">Ajouter un membre à l'équipe</h3>
            </div>
            <div class="p-6">
                <div>
                    <label for="member-select" class="block text-sm font-medium text-gray-700 mb-2">Utilisateur</label>
                    <select class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500" id="member-select">
                        <option value="">Sélectionner un utilisateur</option>
                        {% for user in users %}
                            {% if not user.team %}
                                <option value="{{ user.id }}">{{ user.fullName }} ({{ user.email }})</option>
                            {% endif %}
                        {% endfor %}
                    </select>
                </div>
            </div>
            <div class="px-6 py-4 border-t border-gray-200 flex justify-end space-x-3">
                <button type="button" onclick="hideAddMemberModal()" class="px-4 py-2 text-sm font-medium text-gray-700 bg-gray-100 hover:bg-gray-200 rounded-lg transition-colors duration-200">
                    Annuler
                </button>
                <button type="button" onclick="addMember()" class="px-4 py-2 text-sm font-medium text-white bg-blue-600 hover:bg-blue-700 rounded-lg transition-colors duration-200">
                    Ajouter
                </button>
            </div>
        </div>
    </div>
</div>

<!-- Modal Créer Utilisateur -->
{% if is_admin or current_user.isTeamLeader %}
    <div id="createUserModal" class="fixed inset-0 bg-gray-600 bg-opacity-50 hidden z-50">
        <div class="flex items-center justify-center min-h-screen p-4">
            <div class="bg-white rounded-xl shadow-xl max-w-2xl w-full max-h-[90vh] overflow-y-auto">
                <form id="createUserForm">
                    <div class="px-6 py-4 border-b border-gray-200">
                        <div class="flex items-center space-x-3">
                            <div class="w-10 h-10 bg-blue-600 rounded-lg flex items-center justify-center">
                                <i class="fas fa-user-plus text-white"></i>
                            </div>
                            <div>
                                <h3 class="text-lg font-semibold text-gray-900">Créer un nouvel utilisateur</h3>
                                <p class="text-sm text-gray-600">Complétez les informations ci-dessous</p>
                            </div>
                        </div>
                    </div>
                    
                    <div class="p-6 space-y-6">
                        <!-- Informations personnelles -->
                        <div class="bg-gray-50 rounded-lg p-4">
                            <h4 class="text-sm font-medium text-gray-900 mb-4 flex items-center">
                                <i class="fas fa-user text-gray-600 mr-2"></i>
                                Informations personnelles
                            </h4>
                            <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                                <div>
                                    <label for="modal-firstName" class="block text-sm font-medium text-gray-700 mb-2">
                                        Prénom <span class="text-red-500">*</span>
                                    </label>
                                    <input type="text" 
                                           class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition-colors duration-200" 
                                           id="modal-firstName" 
                                           name="firstName" 
                                           required
                                           placeholder="Entrez le prénom">
                                </div>
                                <div>
                                    <label for="modal-lastName" class="block text-sm font-medium text-gray-700 mb-2">
                                        Nom <span class="text-red-500">*</span>
                                    </label>
                                    <input type="text" 
                                           class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition-colors duration-200" 
                                           id="modal-lastName" 
                                           name="lastName" 
                                           required
                                           placeholder="Entrez le nom">
                                </div>
                            </div>
                        </div>

                        <!-- Informations de connexion -->
                        <div class="bg-blue-50 rounded-lg p-4">
                            <h4 class="text-sm font-medium text-gray-900 mb-4 flex items-center">
                                <i class="fas fa-envelope text-blue-600 mr-2"></i>
                                Informations de connexion
                            </h4>
                            <div class="space-y-4">
                                <div>
                                    <label for="modal-email" class="block text-sm font-medium text-gray-700 mb-2">
                                        Adresse email <span class="text-red-500">*</span>
                                    </label>
                                    <input type="email" 
                                           class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition-colors duration-200" 
                                           id="modal-email" 
                                           name="email" 
                                           required
                                           placeholder="utilisateur@example.com">
                                    <p class="text-xs text-gray-600 mt-1">
                                        <i class="fas fa-info-circle mr-1"></i>
                                        L'email servira d'identifiant de connexion
                                    </p>
                                </div>

                                <div>
                                    <label for="modal-password" class="block text-sm font-medium text-gray-700 mb-2">
                                        Mot de passe temporaire <span class="text-red-500">*</span>
                                    </label>
                                    <div class="relative">
                                        <input type="password" 
                                               class="w-full px-3 py-2 pr-10 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition-colors duration-200" 
                                               id="modal-password" 
                                               name="password" 
                                               required
                                               placeholder="Minimum 8 caractères"
                                               minlength="8">
                                        <button type="button" 
                                                onclick="toggleModalPassword('modal-password')" 
                                                class="absolute inset-y-0 right-0 pr-3 flex items-center text-gray-400 hover:text-gray-600">
                                            <i class="fas fa-eye" id="modal-password-icon"></i>
                                        </button>
                                    </div>
                                    <p class="text-xs text-gray-600 mt-1">
                                        <i class="fas fa-key mr-1"></i>
                                        L'utilisateur devra changer ce mot de passe lors de sa première connexion
                                    </p>
                                </div>
                            </div>
                        </div>

                        <!-- Rôle -->
                        <div class="bg-purple-50 rounded-lg p-4">
                            <h4 class="text-sm font-medium text-gray-900 mb-4 flex items-center">
                                <i class="fas fa-shield-alt text-purple-600 mr-2"></i>
                                Rôle et permissions
                            </h4>
                            <div>
                                <label for="modal-role_id" class="block text-sm font-medium text-gray-700 mb-2">
                                    Rôle
                                </label>
                                <select class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition-colors duration-200" 
                                        id="modal-role_id" 
                                        name="role_id">
                                    <option value="">Sélectionner un rôle</option>
                                    {% for role in roles %}
                                        <option value="{{ role.id }}">{{ role.name }}</option>
                                    {% endfor %}
                                </select>
                                <p class="text-xs text-gray-600 mt-1">
                                    <i class="fas fa-info-circle mr-1"></i>
                                    Le rôle détermine les permissions de base
                                </p>
                            </div>
                        </div>

                        <!-- Assignation d'équipe -->
                        {% if available_teams is not empty %}
                        <div class="bg-green-50 rounded-lg p-4">
                            <h4 class="text-sm font-medium text-gray-900 mb-4 flex items-center">
                                <i class="fas fa-users text-green-600 mr-2"></i>
                                Assignation d'équipe
                            </h4>
                            <div>
                                <label for="modal-team_id" class="block text-sm font-medium text-gray-700 mb-2">
                                    Équipe (optionnel)
                                </label>
                                <select class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition-colors duration-200" 
                                        id="modal-team_id" 
                                        name="team_id">
                                    <option value="">Aucune équipe</option>
                                    {% for team in available_teams %}
                                        <option value="{{ team.id }}">{{ team.name }}</option>
                                    {% endfor %}
                                </select>
                                <p class="text-xs text-gray-600 mt-1">
                                    <i class="fas fa-info-circle mr-1"></i>
                                    {% if is_admin %}
                                        Vous pouvez assigner l'utilisateur à n'importe quelle équipe. Il pourra rejoindre d'autres équipes ultérieurement.
                                    {% else %}
                                        Vous pouvez assigner l'utilisateur à une de vos équipes. Il pourra rejoindre d'autres équipes ultérieurement.
                                    {% endif %}
                                </p>
                            </div>
                        </div>
                        {% endif %}
                    </div>
                    
                    <div class="px-6 py-4 border-t border-gray-200 flex justify-end space-x-3">
                        <button type="button" 
                                onclick="hideCreateUserModal()" 
                                class="px-4 py-2 text-sm font-medium text-gray-700 bg-gray-100 hover:bg-gray-200 rounded-lg transition-colors duration-200">
                            Annuler
                        </button>
                        <button type="submit" 
                                id="modal-submit-btn"
                                class="px-4 py-2 text-sm font-medium text-white bg-blue-600 hover:bg-blue-700 disabled:bg-gray-400 disabled:cursor-not-allowed rounded-lg transition-colors duration-200">
                            <span id="modal-submit-text">Créer l'utilisateur</span>
                            <div id="modal-submit-spinner" class="hidden ml-2 inline-block">
                                <div class="animate-spin h-4 w-4 border-2 border-white border-t-transparent rounded-full"></div>
                            </div>
                        </button>
                    </div>
                </form>
            </div>
        </div>
    </div>
{% endif %}

<script>
let currentTeamId = null;

// User creation modal functions
function showCreateUserModal() {
    document.getElementById('createUserModal').classList.remove('hidden');
    // Clear form
    document.getElementById('createUserForm').reset();
}

function hideCreateUserModal() {
    document.getElementById('createUserModal').classList.add('hidden');
}

function toggleModalPassword(fieldId) {
    const field = document.getElementById(fieldId);
    const icon = document.getElementById(fieldId + '-icon');
    
    if (field.type === 'password') {
        field.type = 'text';
        icon.classList.remove('fa-eye');
        icon.classList.add('fa-eye-slash');
    } else {
        field.type = 'password';
        icon.classList.remove('fa-eye-slash');
        icon.classList.add('fa-eye');
    }
}

// Auto-generate email suggestion for modal
function updateModalEmailSuggestion() {
    const firstName = document.getElementById('modal-firstName').value;
    const lastName = document.getElementById('modal-lastName').value;
    const email = document.getElementById('modal-email');
    
    if (firstName && lastName && !email.value) {
        const suggestion = (firstName + '.' + lastName + '@clinique-genets.fr').toLowerCase();
        email.placeholder = suggestion;
    }
}

// Handle user creation form submission
document.addEventListener('DOMContentLoaded', function() {
    const createUserForm = document.getElementById('createUserForm');
    const submitBtn = document.getElementById('modal-submit-btn');
    const submitText = document.getElementById('modal-submit-text');
    const submitSpinner = document.getElementById('modal-submit-spinner');
    
    // Auto email suggestion
    document.getElementById('modal-firstName').addEventListener('input', updateModalEmailSuggestion);
    document.getElementById('modal-lastName').addEventListener('input', updateModalEmailSuggestion);
    
    if (createUserForm) {
        createUserForm.addEventListener('submit', function(e) {
            e.preventDefault();
            
            // Show loading state
            submitBtn.disabled = true;
            submitText.textContent = 'Création en cours...';
            submitSpinner.classList.remove('hidden');
            
            const formData = new FormData(this);
            
            fetch('{{ path('app_user_new') }}', {
                method: 'POST',
                body: formData
            })
            .then(response => response.json())
            .then(data => {
                if (data.success) {
                    // Show success message
                    alert('Utilisateur créé avec succès !');
                    hideCreateUserModal();
                    // Reload page to show new user
                    location.reload();
                } else {
                    // Show error message
                    alert(data.error || 'Erreur lors de la création de l\'utilisateur');
                }
            })
            .catch(error => {
                console.error('Error:', error);
                alert('Erreur lors de la création de l\'utilisateur');
            })
            .finally(() => {
                // Reset loading state
                submitBtn.disabled = false;
                submitText.textContent = 'Créer l\'utilisateur';
                submitSpinner.classList.add('hidden');
            });
        });
    }
});

function showCreateTeamModal() {
    document.getElementById('createTeamModal').classList.remove('hidden');
    // Clear form
    document.querySelector('#createTeamModal form').reset();
}

function hideCreateTeamModal() {
    document.getElementById('createTeamModal').classList.add('hidden');
}

// Handle team leader selection to avoid duplicate selection in members
document.addEventListener('DOMContentLoaded', function() {
    const teamLeaderSelect = document.getElementById('team-leader');
    if (teamLeaderSelect) {
        teamLeaderSelect.addEventListener('change', function() {
            const selectedLeaderId = this.value;
            const memberCheckboxes = document.querySelectorAll('input[name="member_ids[]"]');
            
            memberCheckboxes.forEach(checkbox => {
                if (checkbox.value === selectedLeaderId) {
                    checkbox.checked = false;
                    checkbox.disabled = selectedLeaderId !== '';
                } else {
                    checkbox.disabled = false;
                }
            });
        });
    }
});

function showAddMemberModal(teamId) {
    currentTeamId = teamId;
    document.getElementById('addMemberModal').classList.remove('hidden');
}

function hideAddMemberModal() {
    document.getElementById('addMemberModal').classList.add('hidden');
}

function addMember() {
    const userId = document.getElementById('member-select').value;
    
    if (!userId || !currentTeamId) {
        alert('Veuillez sélectionner un utilisateur');
        return;
    }

    fetch(`/users/team/${currentTeamId}/members`, {
        method: 'POST',
        headers: {
            'Content-Type': 'application/x-www-form-urlencoded',
        },
        body: `user_id=${userId}`
    })
    .then(response => response.json())
    .then(data => {
        if (data.success) {
            location.reload();
        } else {
            alert(data.error || 'Erreur lors de l\'ajout du membre');
        }
    })
    .catch(error => {
        console.error('Error:', error);
        alert('Erreur lors de l\'ajout du membre');
    });
}

function removeMember(teamId, userId) {
    if (confirm('Êtes-vous sûr de vouloir retirer ce membre de l\'équipe ?')) {
        fetch(`/users/team/${teamId}/remove-member/${userId}`, {
            method: 'POST'
        })
        .then(response => response.json())
        .then(data => {
            if (data.success) {
                location.reload();
            } else {
                alert(data.error || 'Erreur lors de la suppression');
            }
        })
        .catch(error => {
            console.error('Error:', error);
            alert('Erreur lors de la suppression');
        });
    }
}

function showTeamDetails(teamId) {
    // Fonction pour afficher les détails de l'équipe (à implémenter si besoin)
    console.log('Show team details for team:', teamId);
}

// Fermer les modals en cliquant à l'extérieur
document.addEventListener('click', function(event) {
    const createModal = document.getElementById('createTeamModal');
    const addModal = document.getElementById('addMemberModal');
    const userModal = document.getElementById('createUserModal');
    
    if (event.target === createModal) {
        hideCreateTeamModal();
    }
    if (event.target === addModal) {
        hideAddMemberModal();
    }
    if (event.target === userModal) {
        hideCreateUserModal();
    }
});
</script>

<style>
.team-card:hover {
    transform: translateY(-2px);
}

.user-card:hover {
    transform: translateX(4px);
}

.team-card, .user-card {
    transition: all 0.2s ease;
}
</style>
{% endblock %}