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

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

{% block content %}

{# Header avec titre et bouton broadcast #}
<div class="mb-8">
    <div class="sm:flex sm:items-center sm:justify-between">
        <div>
            <h1 class="text-3xl font-bold text-gray-900">Tableau de Bord des Notifications</h1>
            <p class="mt-2 text-sm text-gray-700">
                Vue d'ensemble et statistiques du système de notifications
            </p>
        </div>
        <div class="mt-4 sm:mt-0 flex items-center space-x-3">
            <a href="{{ path('admin_notifications_index') }}"
               class="inline-flex items-center px-4 py-2 border border-gray-300 shadow-sm text-sm font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500">
                <svg class="w-4 h-4 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16"/>
                </svg>
                Voir toutes
            </a>
            <a href="{{ path('admin_notifications_broadcast') }}"
               class="inline-flex items-center px-4 py-2 border border-transparent shadow-sm text-sm font-medium rounded-md text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500">
                <svg class="w-4 h-4 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11 5.882V19.24a1.76 1.76 0 01-3.417.592l-2.147-6.15M18 13a3 3 0 100-6M5.436 13.683A4.001 4.001 0 017 6h1.832c4.1 0 7.625-1.234 9.168-3v14c-1.543-1.766-5.067-3-9.168-3H7a3.988 3.988 0 01-1.564-.317z"/>
                </svg>
                Diffuser une notification
            </a>
        </div>
    </div>
</div>

{# Statistiques globales (4 cartes) #}
<div class="grid grid-cols-1 gap-6 sm:grid-cols-2 lg:grid-cols-4 mb-8">
    {# Total #}
    <div class="bg-white overflow-hidden shadow rounded-lg">
        <div class="p-5">
            <div class="flex items-center">
                <div class="flex-shrink-0">
                    <svg class="w-10 h-10 text-blue-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 17h5l-1.405-1.405A2.032 2.032 0 0118 14.158V11a6.002 6.002 0 00-4-5.659V5a2 2 0 10-4 0v.341C7.67 6.165 6 8.388 6 11v3.159c0 .538-.214 1.055-.595 1.436L4 17h5m6 0v1a3 3 0 11-6 0v-1m6 0H9"/>
                    </svg>
                </div>
                <div class="ml-5 w-0 flex-1">
                    <dl>
                        <dt class="text-sm font-medium text-gray-500 truncate">Total Notifications</dt>
                        <dd class="flex items-baseline">
                            <div class="text-2xl font-semibold text-gray-900">
                                {{ stats.total }}
                            </div>
                        </dd>
                    </dl>
                </div>
            </div>
        </div>
        <div class="bg-gray-50 px-5 py-3">
            <div class="text-sm">
                <a href="{{ path('admin_notifications_index') }}" class="font-medium text-blue-700 hover:text-blue-900">
                    Voir toutes <span aria-hidden="true">&rarr;</span>
                </a>
            </div>
        </div>
    </div>

    {# Non lues #}
    <div class="bg-white overflow-hidden shadow rounded-lg">
        <div class="p-5">
            <div class="flex items-center">
                <div class="flex-shrink-0">
                    <svg class="w-10 h-10 text-red-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z"/>
                    </svg>
                </div>
                <div class="ml-5 w-0 flex-1">
                    <dl>
                        <dt class="text-sm font-medium text-gray-500 truncate">Non Lues</dt>
                        <dd class="flex items-baseline">
                            <div class="text-2xl font-semibold text-gray-900">
                                {{ stats.unread }}
                            </div>
                        </dd>
                    </dl>
                </div>
            </div>
        </div>
        <div class="bg-gray-50 px-5 py-3">
            <div class="text-sm">
                <a href="{{ path('admin_notifications_index', {is_read: 0}) }}" class="font-medium text-blue-700 hover:text-blue-900">
                    Filtrer <span aria-hidden="true">&rarr;</span>
                </a>
            </div>
        </div>
    </div>

    {# Lues #}
    <div class="bg-white overflow-hidden shadow rounded-lg">
        <div class="p-5">
            <div class="flex items-center">
                <div class="flex-shrink-0">
                    <svg class="w-10 h-10 text-green-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"/>
                    </svg>
                </div>
                <div class="ml-5 w-0 flex-1">
                    <dl>
                        <dt class="text-sm font-medium text-gray-500 truncate">Lues</dt>
                        <dd class="flex items-baseline">
                            <div class="text-2xl font-semibold text-gray-900">
                                {{ stats.read }}
                            </div>
                        </dd>
                    </dl>
                </div>
            </div>
        </div>
        <div class="bg-gray-50 px-5 py-3">
            <div class="text-sm">
                <a href="{{ path('admin_notifications_index', {is_read: 1}) }}" class="font-medium text-blue-700 hover:text-blue-900">
                    Filtrer <span aria-hidden="true">&rarr;</span>
                </a>
            </div>
        </div>
    </div>

    {# Par type (la plus fréquente) #}
    <div class="bg-white overflow-hidden shadow rounded-lg">
        <div class="p-5">
            <div class="flex items-center">
                <div class="flex-shrink-0">
                    <svg class="w-10 h-10 text-purple-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 12l3-3 3 3 4-4M8 21l4-4 4 4M3 4h18M4 4h16v12a1 1 0 01-1 1H5a1 1 0 01-1-1V4z"/>
                    </svg>
                </div>
                <div class="ml-5 w-0 flex-1">
                    <dl>
                        <dt class="text-sm font-medium text-gray-500 truncate">Type Principal</dt>
                        <dd class="flex items-baseline">
                            <div class="text-lg font-semibold text-gray-900">
                                {% if stats.by_type is not empty %}
                                    {# Trouver le type avec le plus de notifications #}
                                    {% set max_type = '' %}
                                    {% set max_count = 0 %}
                                    {% for type, count in stats.by_type %}
                                        {% if count > max_count %}
                                            {% set max_type = type %}
                                            {% set max_count = count %}
                                        {% endif %}
                                    {% endfor %}
                                    {{ max_type|capitalize }}
                                {% else %}
                                    Aucun
                                {% endif %}
                            </div>
                        </dd>
                    </dl>
                </div>
            </div>
        </div>
        <div class="bg-gray-50 px-5 py-3">
            <div class="text-sm text-gray-700">
                {% if stats.by_type is not empty %}
                    {% set max_count = 0 %}
                    {% for type, count in stats.by_type %}
                        {% if count > max_count %}
                            {% set max_count = count %}
                        {% endif %}
                    {% endfor %}
                    {{ max_count }} notification{{ max_count > 1 ? 's' : '' }}
                {% else %}
                    Aucune donnée
                {% endif %}
            </div>
        </div>
    </div>
</div>

{# Graphique 7 derniers jours + Top utilisateurs #}
<div class="grid grid-cols-1 lg:grid-cols-2 gap-6 mb-6">
    {# Statistiques 7 derniers jours #}
    <div class="bg-white shadow rounded-lg p-6">
        <h3 class="text-lg font-medium text-gray-900 mb-4">Notifications des 7 derniers jours</h3>
        {% if last_7_days_stats is empty %}
            <div class="text-center py-8 text-gray-500">
                <p>Aucune donnée disponible</p>
            </div>
        {% else %}
            {# Calculer le maximum pour la barre de progression #}
            {% set max_count = 1 %}
            {% for count in last_7_days_stats %}
                {% if count > max_count %}
                    {% set max_count = count %}
                {% endif %}
            {% endfor %}

            <div class="space-y-3">
                {% for date, count in last_7_days_stats %}
                    <div class="flex items-center justify-between">
                        <div class="flex-1">
                            <div class="flex items-center justify-between mb-1">
                                <span class="text-sm font-medium text-gray-700">{{ date|date('d/m/Y') }}</span>
                                <span class="text-sm text-gray-500">{{ count }} notification{{ count > 1 ? 's' : '' }}</span>
                            </div>
                            <div class="w-full bg-gray-200 rounded-full h-2">
                                {% set percentage = max_count > 0 ? (count / max_count * 100) : 0 %}
                                <div class="bg-blue-600 h-2 rounded-full" style="width: {{ percentage }}%"></div>
                            </div>
                        </div>
                    </div>
                {% endfor %}
            </div>
        {% endif %}
    </div>

    {# Top 10 utilisateurs #}
    <div class="bg-white shadow rounded-lg p-6">
        <h3 class="text-lg font-medium text-gray-900 mb-4">Top 10 utilisateurs</h3>
        {% if top_users is empty %}
            <div class="text-center py-8 text-gray-500">
                <p>Aucune donnée disponible</p>
            </div>
        {% else %}
            <div class="space-y-3">
                {% for user_stat in top_users %}
                    <div class="flex items-center justify-between py-2 border-b border-gray-100 last:border-0">
                        <div class="flex items-center space-x-3">
                            <div class="flex-shrink-0">
                                <div class="w-8 h-8 rounded-full bg-gradient-to-br from-indigo-500 to-indigo-700 flex items-center justify-center text-white text-xs font-bold">
                                    {{ user_stat.email|slice(0, 2)|upper }}
                                </div>
                            </div>
                            <div class="min-w-0 flex-1">
                                <p class="text-sm font-medium text-gray-900 truncate">
                                    {% if user_stat.firstName or user_stat.lastName %}
                                        {{ user_stat.firstName }} {{ user_stat.lastName }}
                                    {% else %}
                                        {{ user_stat.email }}
                                    {% endif %}
                                </p>
                                <p class="text-xs text-gray-500 truncate">{{ user_stat.email }}</p>
                            </div>
                        </div>
                        <div class="flex-shrink-0">
                            <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-blue-100 text-blue-800">
                                {{ user_stat.notificationCount }}
                            </span>
                        </div>
                    </div>
                {% endfor %}
            </div>
        {% endif %}
    </div>
</div>

{# Notifications récentes #}
<div class="bg-white shadow rounded-lg overflow-hidden">
    <div class="px-6 py-4 border-b border-gray-200">
        <h3 class="text-lg font-medium text-gray-900">Notifications Récentes</h3>
    </div>

    {% if recent_notifications is empty %}
        <div class="px-6 py-12 text-center text-gray-500">
            <svg class="w-16 h-16 mx-auto mb-4 text-gray-300" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 17h5l-1.405-1.405A2.032 2.032 0 0118 14.158V11a6.002 6.002 0 00-4-5.659V5a2 2 0 10-4 0v.341C7.67 6.165 6 8.388 6 11v3.159c0 .538-.214 1.055-.595 1.436L4 17h5m6 0v1a3 3 0 11-6 0v-1m6 0H9"/>
            </svg>
            <h3 class="text-lg font-medium text-gray-900 mb-1">Aucune notification récente</h3>
            <p class="text-sm text-gray-500">Les notifications apparaîtront ici.</p>
        </div>
    {% else %}
        {# Desktop #}
        <div class="hidden lg:block p-6 space-y-3">
            {% for notification in recent_notifications %}
                {% include 'components/_notification_item.html.twig' with {
                    notification: notification,
                    compact: false,
                    show_actions: false,
                    show_user: true
                } %}
            {% endfor %}
        </div>

        {# Mobile #}
        <div class="lg:hidden p-4 space-y-2">
            {% for notification in recent_notifications %}
                {% include 'components/_notification_item.html.twig' with {
                    notification: notification,
                    compact: true,
                    show_actions: false,
                    show_user: true
                } %}
            {% endfor %}
        </div>

        <div class="bg-gray-50 px-6 py-3 border-t border-gray-200">
            <a href="{{ path('admin_notifications_index') }}" class="text-sm font-medium text-indigo-600 hover:text-indigo-900">
                Voir toutes les notifications <span aria-hidden="true">&rarr;</span>
            </a>
        </div>
    {% endif %}
</div>

{% endblock %}