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

{% block title %}{{ user.fullName }}{% endblock %}

{% block body %}
<div class="container-fluid px-4 py-6">
    <div class="max-w-4xl mx-auto">
        <!-- En-tête avec actions -->
        <div class="flex items-center justify-between mb-6">
            <div class="flex items-center space-x-4">
                <a href="{{ path('app_user_index') }}" class="inline-flex items-center px-3 py-2 border border-gray-300 rounded-md text-sm font-medium text-gray-700 bg-white hover:bg-gray-50 transition-colors">
                    <i class="fas fa-arrow-left mr-2"></i>
                    Retour
                </a>
                <div class="flex items-center space-x-4">
                    <div class="w-12 h-12 bg-gradient-to-br from-blue-500 to-purple-600 rounded-full flex items-center justify-center">
                        <span class="text-white text-lg font-medium">
                            {{ user.firstName|first }}{{ user.lastName|first }}
                        </span>
                    </div>
                    <div>
                        <h1 class="text-2xl font-bold text-gray-900">{{ user.fullName }}</h1>
                        <p class="text-gray-600">{{ user.email }}</p>
                    </div>
                </div>
            </div>
            
            {% if can_edit %}
                <div class="flex space-x-2">
                    <a href="{{ path('app_user_edit', {id: user.id}) }}" class="inline-flex items-center px-4 py-2 bg-blue-600 text-white text-sm font-medium rounded-lg hover:bg-blue-700 transition-colors">
                        <i class="fas fa-edit mr-2"></i>
                        Modifier
                    </a>
                    <a href="{{ path('app_user_permissions', {id: user.id}) }}" class="inline-flex items-center px-4 py-2 bg-green-600 text-white text-sm font-medium rounded-lg hover:bg-green-700 transition-colors">
                        <i class="fas fa-key mr-2"></i>
                        Permissions
                    </a>
                    {% if is_admin and user != current_user %}
                        <button onclick="deleteUser({{ user.id }})" class="inline-flex items-center px-4 py-2 bg-red-600 text-white text-sm font-medium rounded-lg hover:bg-red-700 transition-colors">
                            <i class="fas fa-trash mr-2"></i>
                            Supprimer
                        </button>
                    {% endif %}
                </div>
            {% endif %}
        </div>

        <div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
            <!-- Informations personnelles -->
            <div class="lg:col-span-1">
                <div class="bg-white rounded-xl shadow-sm border border-gray-200">
                    <div class="px-6 py-4 border-b border-gray-200">
                        <h2 class="text-lg font-semibold text-gray-900">Informations personnelles</h2>
                    </div>
                    <div class="px-6 py-4 space-y-4">
                        <div>
                            <label class="block text-sm font-medium text-gray-700 mb-1">Nom complet</label>
                            <p class="text-gray-900">{{ user.fullName }}</p>
                        </div>
                        
                        <div>
                            <label class="block text-sm font-medium text-gray-700 mb-1">Email</label>
                            <p class="text-gray-900">{{ user.email }}</p>
                        </div>
                        
                        {% if user.username %}
                            <div>
                                <label class="block text-sm font-medium text-gray-700 mb-1">Nom d'utilisateur</label>
                                <p class="text-gray-900">{{ user.username }}</p>
                            </div>
                        {% endif %}
                        
                        {% if user.phone %}
                            <div>
                                <label class="block text-sm font-medium text-gray-700 mb-1">Téléphone</label>
                                <p class="text-gray-900">{{ user.phone }}</p>
                            </div>
                        {% endif %}
                        
                        {% if user.specialty %}
                            <div>
                                <label class="block text-sm font-medium text-gray-700 mb-1">Spécialité</label>
                                <p class="text-gray-900">{{ user.specialty }}</p>
                            </div>
                        {% endif %}
                        
                        {% if user.rppsNumber %}
                            <div>
                                <label class="block text-sm font-medium text-gray-700 mb-1">Numéro RPPS</label>
                                <p class="text-gray-900">{{ user.rppsNumber }}</p>
                            </div>
                        {% endif %}
                        
                        <div>
                            <label class="block text-sm font-medium text-gray-700 mb-1">Date de création</label>
                            <p class="text-gray-900">{{ user.createdAt|date('d/m/Y') }}</p>
                        </div>
                        
                        <div>
                            <label class="block text-sm font-medium text-gray-700 mb-1">Statut</label>
                            <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium {{ user.isActive ? 'bg-green-100 text-green-800' : 'bg-red-100 text-red-800' }}">
                                <i class="fas fa-circle mr-1"></i>
                                {{ user.isActive ? 'Actif' : 'Inactif' }}
                            </span>
                        </div>
                    </div>
                </div>
                
                <!-- Rôle -->
                {% if user.role %}
                    <div class="bg-white rounded-xl shadow-sm border border-gray-200 mt-6">
                        <div class="px-6 py-4 border-b border-gray-200">
                            <h2 class="text-lg font-semibold text-gray-900">Rôle</h2>
                        </div>
                        <div class="px-6 py-4">
                            <div class="flex items-center space-x-3">
                                <div class="w-8 h-8 bg-purple-100 rounded-full flex items-center justify-center">
                                    <i class="fas fa-user-tag text-purple-600"></i>
                                </div>
                                <div>
                                    <p class="font-medium text-gray-900">{{ user.role.name }}</p>
                                    {% if user.role.description %}
                                        <p class="text-sm text-gray-600">{{ user.role.description }}</p>
                                    {% endif %}
                                </div>
                            </div>
                        </div>
                    </div>
                {% endif %}
            </div>

            <!-- Équipes et activités -->
            <div class="lg:col-span-2 space-y-6">
                <!-- É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">
                            <h2 class="text-lg font-semibold text-gray-900">Équipes</h2>
                            {% if user.isTeamLeader %}
                                <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-blue-100 text-blue-800">
                                    <i class="fas fa-crown mr-1"></i>
                                    Chef d'équipe
                                </span>
                            {% endif %}
                        </div>
                    </div>
                    <div class="px-6 py-4">
                        {% if user.teams|length > 0 %}
                            <div class="space-y-3">
                                {% for team in user.teams %}
                                    <div class="flex items-center justify-between p-3 bg-gray-50 rounded-lg">
                                        <div class="flex items-center space-x-3">
                                            <div class="w-8 h-8 bg-gradient-to-br from-green-500 to-teal-600 rounded-full flex items-center justify-center">
                                                <i class="fas fa-users text-white text-sm"></i>
                                            </div>
                                            <div>
                                                <h3 class="font-medium text-gray-900">
                                                    {{ team.name }}
                                                    {% if team.leader == user %}
                                                        <span class="inline-flex items-center px-2 py-1 ml-2 text-xs font-medium bg-blue-100 text-blue-800 rounded-full">
                                                            <i class="fas fa-crown mr-1"></i>
                                                            Leader
                                                        </span>
                                                    {% endif %}
                                                </h3>
                                                {% if team.description %}
                                                    <p class="text-sm text-gray-600">{{ team.description }}</p>
                                                {% endif %}
                                                <p class="text-xs text-gray-500">{{ team.members|length }} membre{{ team.members|length > 1 ? 's' : '' }}</p>
                                            </div>
                                        </div>
                                        <a href="{{ path('app_team_show', {id: team.id}) }}" class="inline-flex items-center px-3 py-1 text-sm text-blue-600 hover:text-blue-800 transition-colors">
                                            <i class="fas fa-eye mr-1"></i>
                                            Voir
                                        </a>
                                    </div>
                                {% endfor %}
                            </div>
                        {% else %}
                            <div class="text-center py-8">
                                <i class="fas fa-users text-4xl text-gray-300 mb-4"></i>
                                <p class="text-gray-500">Cet utilisateur n'appartient à aucune équipe</p>
                            </div>
                        {% endif %}
                    </div>
                </div>

                <!-- Statistiques -->
                <div class="grid grid-cols-1 sm:grid-cols-3 gap-4">
                    <div class="bg-white rounded-xl shadow-sm border border-gray-200 p-6">
                        <div class="flex items-center">
                            <div class="w-8 h-8 bg-blue-100 rounded-full flex items-center justify-center mr-3">
                                <i class="fas fa-tasks text-blue-600"></i>
                            </div>
                            <div>
                                <p class="text-2xl font-bold text-gray-900">{{ user.tasks|length }}</p>
                                <p class="text-sm text-gray-600">Tâches assignées</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="w-8 h-8 bg-green-100 rounded-full flex items-center justify-center mr-3">
                                <i class="fas fa-project-diagram text-green-600"></i>
                            </div>
                            <div>
                                <p class="text-2xl font-bold text-gray-900">{{ user.projects|length }}</p>
                                <p class="text-sm text-gray-600">Projets</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="w-8 h-8 bg-purple-100 rounded-full flex items-center justify-center mr-3">
                                <i class="fas fa-poll text-purple-600"></i>
                            </div>
                            <div>
                                <p class="text-2xl font-bold text-gray-900">{{ user.surveys|length }}</p>
                                <p class="text-sm text-gray-600">Enquêtes créées</p>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Biographie -->
                {% if user.bio %}
                    <div class="bg-white rounded-xl shadow-sm border border-gray-200">
                        <div class="px-6 py-4 border-b border-gray-200">
                            <h2 class="text-lg font-semibold text-gray-900">Biographie</h2>
                        </div>
                        <div class="px-6 py-4">
                            <p class="text-gray-700 whitespace-pre-line">{{ user.bio }}</p>
                        </div>
                    </div>
                {% endif %}
            </div>
        </div>
    </div>
</div>

<!-- Script pour la suppression -->
<script>
function deleteUser(userId) {
    if (confirm('Êtes-vous sûr de vouloir supprimer cet utilisateur ? Cette action désactivera le compte.')) {
        fetch(`/users/user/${userId}/delete`, {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
                'X-Requested-With': 'XMLHttpRequest'
            }
        })
        .then(response => response.json())
        .then(data => {
            if (data.success) {
                window.location.href = '{{ path('app_user_index') }}';
            } else {
                alert('Erreur lors de la suppression: ' + (data.error || 'Erreur inconnue'));
            }
        })
        .catch(error => {
            console.error('Erreur:', error);
            alert('Erreur lors de la suppression de l\'utilisateur');
        });
    }
}
</script>
{% endblock %}