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

{% block page_title %}{{ page_title }}{% endblock %}

{% block content %}
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">

    {# Breadcrumb #}
    <nav class="text-sm mb-4">
        <ol class="flex items-center space-x-2 text-gray-500">
            <li>
                <a href="{{ path('app_manager_media_index') }}" class="hover:text-purple-600">
                    <i class="fas fa-images mr-1"></i>
                    Médias
                </a>
            </li>
            <li><i class="fas fa-chevron-right text-xs"></i></li>
            <li>
                <a href="{{ path('app_manager_media_storage_statistics') }}" class="hover:text-purple-600">
                    Statistiques
                </a>
            </li>
            <li><i class="fas fa-chevron-right text-xs"></i></li>
            <li class="text-gray-900 font-medium">{{ targetUser.firstName }} {{ targetUser.lastName }}</li>
        </ol>
    </nav>

    {# User Header #}
    <div class="bg-white rounded-lg shadow p-6 mb-6">
        <div class="flex items-center justify-between">
            <div class="flex items-center">
                <div class="h-16 w-16 rounded-full bg-purple-100 flex items-center justify-center mr-4">
                    <span class="text-2xl font-bold text-purple-600">
                        {{ targetUser.firstName|first }}{{ targetUser.lastName|first }}
                    </span>
                </div>
                <div>
                    <h1 class="text-2xl font-bold text-gray-900">
                        {{ targetUser.firstName }} {{ targetUser.lastName }}
                    </h1>
                    <p class="text-sm text-gray-600">
                        <i class="fas fa-envelope mr-2"></i>{{ targetUser.email }}
                    </p>
                </div>
            </div>
            <a href="{{ path('app_manager_media_storage_statistics') }}"
               class="px-4 py-2 bg-gray-200 text-gray-700 rounded-md text-sm font-medium hover:bg-gray-300">
                <i class="fas fa-arrow-left mr-2"></i>
                Retour
            </a>
        </div>
    </div>

    {# Stats Cards #}
    <div class="grid grid-cols-1 md:grid-cols-3 gap-6 mb-6">
        <div class="bg-white rounded-lg shadow p-6">
            <div class="flex items-center">
                <div class="p-3 rounded-full bg-blue-100 text-blue-600">
                    <i class="fas fa-file text-2xl"></i>
                </div>
                <div class="ml-4">
                    <p class="text-sm font-medium text-gray-600">Total Médias</p>
                    <p class="text-2xl font-bold text-gray-900">{{ userMediaCount }}</p>
                </div>
            </div>
        </div>

        <div class="bg-white rounded-lg shadow p-6">
            <div class="flex items-center">
                <div class="p-3 rounded-full bg-purple-100 text-purple-600">
                    <i class="fas fa-hdd text-2xl"></i>
                </div>
                <div class="ml-4">
                    <p class="text-sm font-medium text-gray-600">Stockage Utilisé</p>
                    <p class="text-2xl font-bold text-gray-900">{{ userTotalStorageFormatted }}</p>
                </div>
            </div>
        </div>

        <div class="bg-white rounded-lg shadow p-6">
            <div class="flex items-center">
                <div class="p-3 rounded-full bg-green-100 text-green-600">
                    <i class="fas fa-images text-2xl"></i>
                </div>
                <div class="ml-4">
                    <p class="text-sm font-medium text-gray-600">Sur cette page</p>
                    <p class="text-2xl font-bold text-gray-900">{{ totalItems }}</p>
                </div>
            </div>
        </div>
    </div>

    {# Storage by Type Chart #}
    {% if userStatsByType is not empty %}
    <div class="bg-white rounded-lg shadow p-6 mb-6">
        <h2 class="text-lg font-bold text-gray-900 mb-4">
            <i class="fas fa-chart-pie mr-2 text-indigo-600"></i>
            Répartition par Type
        </h2>
        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
            {% for typeStat in userStatsByType %}
                {% set percentage = (typeStat.totalSize / userTotalStorage * 100)|round(1) %}
                <div class="border rounded-lg p-4">
                    <div class="text-sm font-medium text-gray-700 mb-2 capitalize">
                        {{ typeStat.type|replace({'_': ' ', 'module ': ''}) }}
                    </div>
                    <div class="text-xs text-gray-500 mb-2">
                        {{ typeStat.count }} fichier(s)
                    </div>
                    <div class="flex items-center">
                        <div class="flex-1 bg-gray-200 rounded-full h-2 mr-2">
                            <div class="bg-indigo-600 h-2 rounded-full" style="width: {{ percentage }}%"></div>
                        </div>
                        <span class="text-xs text-gray-600 font-medium">{{ percentage }}%</span>
                    </div>
                    <div class="mt-2 text-xs text-gray-500">
                        {{ (typeStat.totalSize / 1024 / 1024)|number_format(2) }} MB
                    </div>
                </div>
            {% endfor %}
        </div>
    </div>
    {% endif %}

    {# Filters #}
    <div class="bg-white rounded-lg shadow p-4 mb-6">
        <form method="get" class="grid grid-cols-1 md:grid-cols-4 gap-4">
            <div>
                <label class="block text-sm font-medium text-gray-700 mb-1">Type</label>
                <select name="type" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:ring-purple-500 focus:border-purple-500">
                    <option value="">Tous les types</option>
                    <option value="user_profile" {% if filters.type == 'user_profile' %}selected{% endif %}>Photo de profil</option>
                    <option value="company" {% if filters.type == 'company' %}selected{% endif %}>Logo entreprise</option>
                    <option value="document" {% if filters.type == 'document' %}selected{% endif %}>Document</option>
                    <option value="generic" {% if filters.type == 'generic' %}selected{% endif %}>Générique</option>
                </select>
            </div>

            <div>
                <label class="block text-sm font-medium text-gray-700 mb-1">Catégorie</label>
                <select name="category" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:ring-purple-500 focus:border-purple-500">
                    <option value="">Toutes</option>
                    <option value="image" {% if filters.category == 'image' %}selected{% endif %}>Images</option>
                    <option value="document" {% if filters.category == 'document' %}selected{% endif %}>Documents</option>
                    <option value="video" {% if filters.category == 'video' %}selected{% endif %}>Vidéos</option>
                    <option value="audio" {% if filters.category == 'audio' %}selected{% endif %}>Audio</option>
                </select>
            </div>

            <div>
                <label class="block text-sm font-medium text-gray-700 mb-1">Date début</label>
                <input type="date" name="dateFrom" value="{{ filters.dateFrom }}"
                       class="w-full px-3 py-2 border border-gray-300 rounded-md focus:ring-purple-500 focus:border-purple-500">
            </div>

            <div>
                <label class="block text-sm font-medium text-gray-700 mb-1">Date fin</label>
                <input type="date" name="dateTo" value="{{ filters.dateTo }}"
                       class="w-full px-3 py-2 border border-gray-300 rounded-md focus:ring-purple-500 focus:border-purple-500">
            </div>

            <div class="md:col-span-4 flex justify-end gap-2">
                <a href="{{ path('app_manager_media_user_detail', {userId: targetUser.id}) }}"
                   class="px-4 py-2 border border-gray-300 rounded-md text-sm font-medium text-gray-700 bg-white hover:bg-gray-50">
                    <i class="fas fa-redo mr-2"></i>
                    Réinitialiser
                </a>
                <button type="submit"
                        class="px-4 py-2 bg-purple-600 text-white rounded-md text-sm font-medium hover:bg-purple-700">
                    <i class="fas fa-search mr-2"></i>
                    Filtrer
                </button>
            </div>
        </form>
    </div>

    {# Results Count #}
    <div class="mb-4">
        <p class="text-sm text-gray-600">
            <i class="fas fa-filter mr-2"></i>
            {{ totalItems }} résultat(s) trouvé(s)
            {% if currentPage > 1 %} - Page {{ currentPage }} sur {{ totalPages }}{% endif %}
        </p>
    </div>

    {# Media Grid #}
    {% if mediaList is empty %}
        <div class="bg-white rounded-lg shadow p-12 text-center">
            <i class="fas fa-images text-6xl text-gray-300 mb-4"></i>
            <h3 class="text-lg font-medium text-gray-900 mb-2">Aucun média trouvé</h3>
            <p class="text-gray-500">
                {% if filters.type or filters.category or filters.dateFrom or filters.dateTo %}
                    Aucun résultat ne correspond aux critères de recherche.
                {% else %}
                    Cet utilisateur n'a pas encore uploadé de médias.
                {% endif %}
            </p>
        </div>
    {% else %}
        <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6">
            {% for media in mediaList %}
                <div class="bg-white rounded-lg shadow overflow-hidden hover:shadow-lg transition-shadow">
                    <div class="p-4">
                        <div class="flex justify-end mb-3">
                            <span class="px-2 py-1 text-xs rounded-full {% if media.category == 'image' %}bg-blue-100 text-blue-800{% elseif media.category == 'video' %}bg-purple-100 text-purple-800{% elseif media.category == 'audio' %}bg-green-100 text-green-800{% else %}bg-gray-100 text-gray-800{% endif %}">
                                {{ media.category }}
                            </span>
                        </div>

                        <div class="text-center mb-4">
                            <i class="fas fa-file-{{ media.category == 'image' ? 'image' : (media.category == 'video' ? 'video' : (media.category == 'audio' ? 'audio' : 'alt')) }} text-6xl text-gray-300"></i>
                        </div>

                        <h3 class="text-sm font-medium text-gray-900 truncate mb-2" title="{{ media.originalFileName }}">
                            {{ media.originalFileName }}
                        </h3>

                        <div class="text-xs text-gray-500 space-y-1 mb-4">
                            <p><i class="fas fa-tag w-4"></i> {{ media.type|replace({'_': ' '}) }}</p>
                            <p><i class="fas fa-hdd w-4"></i> {{ (media.fileSize / 1024 / 1024)|number_format(2) }} MB</p>
                            <p><i class="fas fa-calendar w-4"></i> {{ media.createdAt|date('d/m/Y') }}</p>
                        </div>

                        <div class="flex gap-2">
                            <a href="{{ path('app_manager_media_show', {id: media.id}) }}"
                               class="flex-1 px-3 py-2 bg-purple-600 text-white text-center rounded-md text-xs font-medium hover:bg-purple-700">
                                <i class="fas fa-eye mr-1"></i> Voir
                            </a>
                            <a href="{{ path('app_manager_media_download', {id: media.id}) }}"
                               class="flex-1 px-3 py-2 bg-blue-600 text-white text-center rounded-md text-xs font-medium hover:bg-blue-700">
                                <i class="fas fa-download mr-1"></i> Télécharger
                            </a>
                        </div>
                    </div>
                </div>
            {% endfor %}
        </div>

        {# Pagination #}
        {% if totalPages > 1 %}
        <div class="mt-6 flex justify-center">
            <nav class="relative z-0 inline-flex rounded-md shadow-sm -space-x-px" aria-label="Pagination">
                {% if currentPage > 1 %}
                    <a href="{{ path('app_manager_media_user_detail', {userId: targetUser.id}|merge(app.request.query.all|merge({'page': currentPage - 1}))) }}"
                       class="relative inline-flex items-center px-2 py-2 rounded-l-md border border-gray-300 bg-white text-sm font-medium text-gray-500 hover:bg-gray-50">
                        <i class="fas fa-chevron-left"></i>
                    </a>
                {% endif %}

                {% for page in 1..totalPages %}
                    {% if page == currentPage %}
                        <span class="relative inline-flex items-center px-4 py-2 border border-purple-600 bg-purple-600 text-sm font-medium text-white">
                            {{ page }}
                        </span>
                    {% elseif page == 1 or page == totalPages or (page >= currentPage - 2 and page <= currentPage + 2) %}
                        <a href="{{ path('app_manager_media_user_detail', {userId: targetUser.id}|merge(app.request.query.all|merge({'page': page}))) }}"
                           class="relative inline-flex items-center px-4 py-2 border border-gray-300 bg-white text-sm font-medium text-gray-700 hover:bg-gray-50">
                            {{ page }}
                        </a>
                    {% elseif page == currentPage - 3 or page == currentPage + 3 %}
                        <span class="relative inline-flex items-center px-4 py-2 border border-gray-300 bg-white text-sm font-medium text-gray-700">
                            ...
                        </span>
                    {% endif %}
                {% endfor %}

                {% if currentPage < totalPages %}
                    <a href="{{ path('app_manager_media_user_detail', {userId: targetUser.id}|merge(app.request.query.all|merge({'page': currentPage + 1}))) }}"
                       class="relative inline-flex items-center px-2 py-2 rounded-r-md border border-gray-300 bg-white text-sm font-medium text-gray-500 hover:bg-gray-50">
                        <i class="fas fa-chevron-right"></i>
                    </a>
                {% endif %}
            </nav>
        </div>
        {% endif %}
    {% endif %}

</div>
{% endblock %}