{% 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">

    {# Header with Breadcrumb #}
    <div class="mb-6">
        <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 class="text-gray-900 font-medium">Statistiques de Stockage</li>
            </ol>
        </nav>

        <div class="flex justify-between items-center">
            <div>
                <h1 class="text-3xl font-bold text-gray-900">
                    <i class="fas fa-chart-bar mr-3 text-blue-600"></i>
                    {{ page_title }}
                </h1>
                <p class="mt-2 text-sm text-gray-600">
                    Vue d'ensemble du stockage par utilisateur et par module
                </p>
            </div>
            <a href="{{ path('app_manager_media_index') }}"
               class="px-4 py-2 bg-purple-600 text-white rounded-md text-sm font-medium hover:bg-purple-700">
                <i class="fas fa-arrow-left mr-2"></i>
                Retour aux Médias
            </a>
        </div>
    </div>

    {# Global Stats Cards #}
    <div class="grid grid-cols-1 md:grid-cols-3 gap-6 mb-8">
        <div class="bg-gradient-to-br from-purple-500 to-purple-600 rounded-lg shadow-lg p-6 text-white">
            <div class="flex items-center justify-between">
                <div>
                    <p class="text-purple-100 text-sm font-medium mb-1">Total Médias</p>
                    <p class="text-3xl font-bold">{{ globalStats.total_count|number_format(0, ',', ' ') }}</p>
                </div>
                <div class="p-4 bg-white bg-opacity-20 rounded-full">
                    <i class="fas fa-file text-3xl"></i>
                </div>
            </div>
        </div>

        <div class="bg-gradient-to-br from-blue-500 to-blue-600 rounded-lg shadow-lg p-6 text-white">
            <div class="flex items-center justify-between">
                <div>
                    <p class="text-blue-100 text-sm font-medium mb-1">Stockage Total</p>
                    <p class="text-3xl font-bold">{{ totalSizeFormatted }}</p>
                </div>
                <div class="p-4 bg-white bg-opacity-20 rounded-full">
                    <i class="fas fa-hdd text-3xl"></i>
                </div>
            </div>
        </div>

        <div class="bg-gradient-to-br from-green-500 to-green-600 rounded-lg shadow-lg p-6 text-white">
            <div class="flex items-center justify-between">
                <div>
                    <p class="text-green-100 text-sm font-medium mb-1">Taille Moyenne</p>
                    <p class="text-3xl font-bold">{{ avgSizeFormatted }}</p>
                </div>
                <div class="p-4 bg-white bg-opacity-20 rounded-full">
                    <i class="fas fa-balance-scale text-3xl"></i>
                </div>
            </div>
        </div>
    </div>

    <div class="grid grid-cols-1 lg:grid-cols-2 gap-8 mb-8">
        {# Top 10 Users Chart #}
        <div class="bg-white rounded-lg shadow p-6">
            <h2 class="text-xl font-bold text-gray-900 mb-4 flex items-center">
                <i class="fas fa-trophy mr-3 text-yellow-500"></i>
                Top 10 Utilisateurs par Stockage
            </h2>

            {% if topUsers is not empty %}
                <div class="space-y-3">
                    {% for userStat in topUsers %}
                        {% set percentage = (userStat.totalStorage / globalStats.total_size * 100)|round(1) %}
                        <div>
                            <div class="flex justify-between items-center mb-1">
                                <span class="text-sm font-medium text-gray-700">
                                    {{ loop.index }}. {{ userStat.user.firstName }} {{ userStat.user.lastName }}
                                </span>
                                <span class="text-sm text-gray-500">{{ userStat.totalStorageFormatted }}</span>
                            </div>
                            <div class="flex items-center">
                                <div class="flex-1 bg-gray-200 rounded-full h-2.5 mr-2">
                                    <div class="bg-gradient-to-r from-blue-500 to-purple-600 h-2.5 rounded-full" style="width: {{ percentage }}%"></div>
                                </div>
                                <span class="text-xs text-gray-500 w-12 text-right">{{ percentage }}%</span>
                            </div>
                            <div class="mt-1 flex justify-between text-xs text-gray-500">
                                <span>{{ userStat.mediaCount }} média(s)</span>
                                <a href="{{ path('app_manager_media_user_detail', {userId: userStat.user.id}) }}"
                                   class="text-purple-600 hover:text-purple-800">
                                    Voir détails <i class="fas fa-arrow-right ml-1"></i>
                                </a>
                            </div>
                        </div>
                    {% endfor %}
                </div>
            {% else %}
                <p class="text-gray-500 text-center py-8">Aucune donnée disponible</p>
            {% endif %}
        </div>

        {# Storage by Module/Type #}
        <div class="bg-white rounded-lg shadow p-6">
            <h2 class="text-xl font-bold text-gray-900 mb-4 flex items-center">
                <i class="fas fa-layer-group mr-3 text-indigo-500"></i>
                Répartition par Module
            </h2>

            {% if moduleStats is not empty %}
                <div class="space-y-3">
                    {% for moduleStat in moduleStats %}
                        {% set percentage = (moduleStat.totalSize / globalStats.total_size * 100)|round(1) %}
                        {% set moduleColor = {
                            'user_profile': 'blue',
                            'company': 'green',
                            'document': 'gray',
                            'generic': 'pink'
                        } %}
                        {% set color = moduleColor[moduleStat.type] ?? 'gray' %}

                        <div>
                            <div class="flex justify-between items-center mb-1">
                                <span class="text-sm font-medium text-gray-700 capitalize">
                                    {{ moduleStat.type|replace({'_': ' ', 'module ': ''}) }}
                                </span>
                                <span class="text-sm text-gray-500">{{ (moduleStat.totalSize / 1024 / 1024)|number_format(2) }} MB</span>
                            </div>
                            <div class="flex items-center">
                                <div class="flex-1 bg-gray-200 rounded-full h-2.5 mr-2">
                                    <div class="bg-{{ color }}-500 h-2.5 rounded-full" style="width: {{ percentage }}%"></div>
                                </div>
                                <span class="text-xs text-gray-500 w-12 text-right">{{ percentage }}%</span>
                            </div>
                            <div class="mt-1 text-xs text-gray-500">
                                {{ moduleStat.count }} fichier(s)
                            </div>
                        </div>
                    {% endfor %}
                </div>
            {% else %}
                <p class="text-gray-500 text-center py-8">Aucune donnée disponible</p>
            {% endif %}
        </div>
    </div>

    {# All Users Table #}
    <div class="bg-white rounded-lg shadow overflow-hidden">
        <div class="px-6 py-4 border-b border-gray-200">
            <h2 class="text-xl font-bold text-gray-900 flex items-center">
                <i class="fas fa-users mr-3 text-purple-600"></i>
                Tous les Utilisateurs ({{ userStorageData|length }})
            </h2>
        </div>

        {% if userStorageData is not empty %}
            <div class="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">
                                #
                            </th>
                            <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">
                                Email
                            </th>
                            <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                                Nb Médias
                            </th>
                            <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                                Stockage
                            </th>
                            <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                                % du Total
                            </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">
                        {% for userStat in userStorageData %}
                            {% set percentage = (userStat.totalStorage / globalStats.total_size * 100)|round(2) %}
                            <tr class="hover:bg-gray-50">
                                <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
                                    {{ loop.index }}
                                </td>
                                <td class="px-6 py-4 whitespace-nowrap">
                                    <div class="flex items-center">
                                        <div class="h-10 w-10 flex-shrink-0">
                                            <div class="h-10 w-10 rounded-full bg-purple-100 flex items-center justify-center">
                                                <span class="text-purple-600 font-medium">
                                                    {{ userStat.user.firstName|first }}{{ userStat.user.lastName|first }}
                                                </span>
                                            </div>
                                        </div>
                                        <div class="ml-4">
                                            <div class="text-sm font-medium text-gray-900">
                                                {{ userStat.user.firstName }} {{ userStat.user.lastName }}
                                            </div>
                                        </div>
                                    </div>
                                </td>
                                <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
                                    {{ userStat.user.email }}
                                </td>
                                <td class="px-6 py-4 whitespace-nowrap">
                                    <span class="px-2 py-1 inline-flex text-xs leading-5 font-semibold rounded-full bg-blue-100 text-blue-800">
                                        {{ userStat.mediaCount }}
                                    </span>
                                </td>
                                <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">
                                    {{ userStat.totalStorageFormatted }}
                                </td>
                                <td class="px-6 py-4 whitespace-nowrap">
                                    <div class="flex items-center">
                                        <div class="flex-1 bg-gray-200 rounded-full h-2 mr-2 max-w-[100px]">
                                            <div class="bg-purple-600 h-2 rounded-full" style="width: {{ percentage }}%"></div>
                                        </div>
                                        <span class="text-xs text-gray-500">{{ percentage }}%</span>
                                    </div>
                                </td>
                                <td class="px-6 py-4 whitespace-nowrap text-right text-sm font-medium">
                                    <a href="{{ path('app_manager_media_user_detail', {userId: userStat.user.id}) }}"
                                       class="text-purple-600 hover:text-purple-900">
                                        <i class="fas fa-eye mr-1"></i>
                                        Voir détails
                                    </a>
                                </td>
                            </tr>
                        {% endfor %}
                    </tbody>
                </table>
            </div>
        {% else %}
            <div class="px-6 py-12 text-center">
                <i class="fas fa-users text-6xl text-gray-300 mb-4"></i>
                <p class="text-gray-500">Aucun utilisateur avec des médias trouvé</p>
            </div>
        {% endif %}
    </div>

</div>
{% endblock %}