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

{% block title %}Détail Utilisateur{% endblock %}

{% block body %}
    <div class="min-h-screen bg-gray-100">
        {{ include('admin/_sidebar.html.twig') }}
        
        <div class="md:ml-64">
            <header class="bg-white shadow">
                <div class="px-4 sm:px-6 lg:px-8 py-4 flex items-center justify-between">
                    <h1 class="text-2xl font-bold text-gray-900">Détail Utilisateur</h1>
                    <a href="{{ path('admin_users') }}" class="text-blue-600 hover:text-blue-800 text-sm">← Retour à la liste</a>
                </div>
            </header>

            <main class="py-6 px-4 sm:px-6 lg:px-8">
            {% for message in app.flashes('success') %}
                <div class="mb-4 bg-green-100 border border-green-400 text-green-700 px-4 py-3 rounded relative" role="alert">
                    <span class="block sm:inline">{{ message }}</span>
                </div>
            {% endfor %}
            {% for message in app.flashes('error') %}
                <div class="mb-4 bg-red-100 border border-red-400 text-red-700 px-4 py-3 rounded relative" role="alert">
                    <span class="block sm:inline">{{ message }}</span>
                </div>
            {% endfor %}
            <div class="px-4 py-6 sm:px-0">
                <!-- User Info -->
                <div class="bg-white shadow rounded-lg p-6 mb-6">
                    <h2 class="text-2xl font-bold mb-4">Informations de l'utilisateur</h2>
                    <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                        <div>
                            <strong>ID:</strong> {{ user.id }}
                        </div>
                        <div>
                            <strong>Email:</strong> {{ user.email }}
                        </div>
                        <div>
                            <strong>Prénom:</strong> {{ user.firstName }}
                        </div>
                        <div>
                            <strong>Nom:</strong> {{ user.lastName }}
                        </div>
                        <div>
                            <strong>Rôles:</strong> {{ user.roles|join(', ') }}
                        </div>
                        <div>
                            <strong>Statut:</strong>
                            {% if user.isBlocked %}
                                <span class="text-red-600">Bloqué</span>
                            {% else %}
                                <span class="text-green-600">Actif</span>
                            {% endif %}
                        </div>
                        <div>
                            <strong>Créé le:</strong> {{ user.createdAt|date('d/m/Y H:i') }}
                        </div>
                        <div>
                            <strong>Modifié le:</strong> {{ user.updatedAt|date('d/m/Y H:i') }}
                        </div>
                    </div>
                    <div class="mt-4">
                        <form method="post" action="{{ path('admin_user_block', {id: user.id}) }}" class="inline">
                            <button type="submit" class="px-4 py-2 rounded-md text-white font-bold 
                                {% if user.isBlocked %}
                                    bg-green-500 hover:bg-green-700
                                {% else %}
                                    bg-red-500 hover:bg-red-700
                                {% endif %}">
                                {% if user.isBlocked %}
                                    Débloquer
                                {% else %}
                                    Bloquer
                                {% endif %}
                            </button>
                        </form>
                    </div>
                </div>

                <!-- Stats -->
                <div class="bg-white shadow rounded-lg p-6 mb-6">
                    <h2 class="text-2xl font-bold mb-4">Statistiques</h2>
                    <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
                        <div class="text-center">
                            <div class="text-3xl font-bold text-green-600">{{ obstacleCount }}</div>
                            <div class="text-gray-600">Obstacles</div>
                        </div>
                        <div class="text-center">
                            <div class="text-3xl font-bold text-blue-600">{{ imageCount }}</div>
                            <div class="text-gray-600">Images uploadées</div>
                        </div>
                        <div class="text-center">
                            <div class="text-3xl font-bold text-red-600">{{ reportingCount }}</div>
                            <div class="text-gray-600">Signalements</div>
                        </div>
                    </div>
                </div>

                <!-- Obstacles -->
                <div class="bg-white shadow rounded-lg p-6 mb-6">
                    <h2 class="text-2xl font-bold mb-6">Obstacles ({{ obstacles|length }})</h2>
                    {% if obstacles %}
                        <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6">
                            {% for obstacle in obstacles %}
                                <div class="bg-gray-50 overflow-hidden shadow rounded-lg">
                                    <div class="p-4">
                                        {% set latestImage = obstacle.images|sort((a,b) => b.createdAt <=> a.createdAt)|first %}
                                        {% if latestImage %}
                                            {% set baseUrl = app.request.schemeAndHttpHost %}
                                            {% set imageUrl = latestImage.thumbnailName ? baseUrl ~ '/api/images/' ~ latestImage.imageName ~ '/thumbnail' : (latestImage.imageName ? baseUrl ~ '/api/images/' ~ latestImage.imageName ~ '/original' : null) %}
                                            {% if imageUrl %}
                                                <a href="/admin/obstacles/{{ obstacle.id }}" class="block mb-4">
                                                    <img src="{{ imageUrl }}" alt="Dernière image" class="w-full h-48 object-cover rounded-md hover:opacity-75 transition-opacity">
                                                </a>
                                            {% else %}
                                                <div class="w-full h-48 bg-gray-200 flex items-center justify-center rounded-md mb-4">
                                                    <span class="text-gray-500">Image non disponible</span>
                                                </div>
                                            {% endif %}
                                        {% else %}
                                            <div class="w-full h-48 bg-gray-200 flex items-center justify-center rounded-md mb-4">
                                                <span class="text-gray-700 text-lg">O</span>
                                            </div>
                                        {% endif %}
                                        <div class="text-sm font-medium text-gray-900 mb-1">Adresse: {{ obstacle.adresse }}</div>
                                        <div class="text-sm text-gray-500">Lat: {{ obstacle.latitude|number_format(6) }}, Lng: {{ obstacle.longitude|number_format(6) }}</div>
                                    </div>
                                </div>
                            {% endfor %}
                        </div>
                    {% else %}
                        <p class="text-gray-600">Aucun obstacle favori.</p>
                    {% endif %}
                </div>

                <!-- Uploaded Images -->
                <div class="bg-white shadow rounded-lg p-6">
                    <h2 class="text-2xl font-bold mb-6">Images uploadées ({{ uploadedImages|length }})</h2>
                    {% if uploadedImages %}
                        <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6">
                            {% for image in uploadedImages %}
                                <div class="bg-gray-50 overflow-hidden shadow rounded-lg">
                                    <div class="p-4">
                                        {% set baseUrl = app.request.schemeAndHttpHost %}
                                        {% set imageUrl = image.thumbnailName ? baseUrl ~ '/api/images/' ~ image.imageName ~ '/thumbnail' : (image.imageName ? baseUrl ~ '/api/images/' ~ image.imageName ~ '/original' : null) %}
                                        {% if imageUrl %}
                                            <a href="/admin/images/{{ image.imageName }}/original" target="_blank" class="block mb-4">
                                                <img src="{{ imageUrl }}" alt="Image" class="w-full h-48 object-cover rounded-md hover:opacity-75 transition-opacity">
                                            </a>
                                        {% else %}
                                            <div class="w-full h-48 bg-gray-200 flex items-center justify-center rounded-md mb-4">
                                                <span class="text-gray-500">Image non disponible</span>
                                            </div>
                                        {% endif %}
                                        {% if image.commentaire %}
                                            <div class="text-sm text-gray-700 mb-2">{{ image.commentaire }}</div>
                                        {% endif %}
                                        <div class="text-sm text-gray-500 mb-1">Obstacle: {{ image.obstacle.adresse }}</div>
                                        <div class="text-sm text-gray-500">Le: {{ image.createdAt|date('d/m/Y H:i') }}</div>
                                        {% if image.isReported %}
                                            <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-red-100 text-red-800">Signalée</span>
                                        {% endif %}
                                    </div>
                                </div>
                            {% endfor %}
                        </div>
                    {% else %}
                        <p class="text-gray-600">Aucune image uploadée.</p>
                    {% endif %}
                </div>
            </main>
        </div>
    </div>
{% endblock %}