{% 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">Gestion des Notifications</h1>
            <p class="mt-2 text-sm text-gray-700">
                Vue complète de toutes les notifications du système
            </p>
        </div>
        <div class="mt-4 sm:mt-0 flex items-center space-x-3">
            <a href="{{ path('admin_notifications_dashboard') }}"
               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="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z"/>
                </svg>
                Dashboard
            </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
            </a>
        </div>
    </div>
</div>

{# Filtres #}
<div class="bg-white shadow rounded-lg mb-6">
    <div class="px-4 py-5 sm:p-6">
        <form method="get" action="{{ path('admin_notifications_index') }}"
              data-controller="form-submit"
              class="grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-5">

            {# Recherche texte #}
            <div>
                <label for="search" class="block text-sm font-medium text-gray-700 mb-1">Recherche</label>
                <input type="text" name="search" id="search"
                       value="{{ filters.search|default('') }}"
                       placeholder="Titre ou message..."
                       class="mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm">
            </div>

            {# Filtre Type #}
            <div>
                <label for="type" class="block text-sm font-medium text-gray-700 mb-1">Type</label>
                <select name="type" id="type"
                        data-action="change->form-submit#submit"
                        class="mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm">
                    <option value="">Tous les types</option>
                    {% for type_key, type_label in types %}
                        <option value="{{ type_key }}" {{ filters.type is defined and filters.type == type_key ? 'selected' : '' }}>
                            {{ type_label }}
                        </option>
                    {% endfor %}
                </select>
            </div>

            {# Filtre Catégorie #}
            <div>
                <label for="category" class="block text-sm font-medium text-gray-700 mb-1">Catégorie</label>
                <select name="category" id="category"
                        data-action="change->form-submit#submit"
                        class="mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm">
                    <option value="">Toutes</option>
                    {% for cat_key, cat_label in categories %}
                        <option value="{{ cat_key }}" {{ filters.category is defined and filters.category == cat_key ? 'selected' : '' }}>
                            {{ cat_label }}
                        </option>
                    {% endfor %}
                </select>
            </div>

            {# Filtre Statut #}
            <div>
                <label for="is_read" class="block text-sm font-medium text-gray-700 mb-1">Statut</label>
                <select name="is_read" id="is_read"
                        data-action="change->form-submit#submit"
                        class="mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm">
                    <option value="">Toutes</option>
                    <option value="0" {{ filters.is_read is defined and filters.is_read == false ? 'selected' : '' }}>
                        Non lues
                    </option>
                    <option value="1" {{ filters.is_read is defined and filters.is_read == true ? 'selected' : '' }}>
                        Lues
                    </option>
                </select>
            </div>

            {# Boutons d'action #}
            <div class="flex items-end space-x-2">
                <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="M6 18L18 6M6 6l12 12"/>
                    </svg>
                    Réinitialiser
                </a>
                <button type="submit" data-form-submit-target="submit"
                        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">
                    <span data-form-submit-target="buttonText">
                        <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="M3 4a1 1 0 011-1h16a1 1 0 011 1v2.586a1 1 0 01-.293.707l-6.414 6.414a1 1 0 00-.293.707V17l-4 4v-6.586a1 1 0 00-.293-.707L3.293 7.293A1 1 0 013 6.586V4z"/>
                        </svg>
                        Filtrer
                    </span>
                    <span data-form-submit-target="spinner" class="hidden ml-2">
                        <svg class="animate-spin h-4 w-4 text-white" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
                            <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
                            <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
                        </svg>
                    </span>
                </button>
            </div>
        </form>
    </div>
</div>

{# Liste des notifications #}
<div class="bg-white shadow rounded-lg overflow-hidden">

    {% if notifications is empty %}
        {# État vide #}
        <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 trouvée</h3>
            <p class="text-sm text-gray-500">Aucune notification ne correspond à vos critères de recherche.</p>
        </div>
    {% else %}
        {# Desktop: Liste complète #}
        <div class="hidden lg:block p-6 space-y-3">
            {% for notification in notifications %}
                {% include 'components/_notification_item.html.twig' with {
                    notification: notification,
                    compact: false,
                    show_actions: false,
                    show_user: true
                } %}
            {% endfor %}
        </div>

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

        {# Pagination #}
        {% if notifications.pageCount > 1 %}
            <div class="bg-white px-4 py-3 flex items-center justify-between border-t border-gray-200 sm:px-6">

                {# Mobile Pagination #}
                <div class="flex-1 flex justify-between sm:hidden">
                    {% if notifications.currentPageNumber > 1 %}
                        <a href="{{ path('admin_notifications_index', app.request.query.all|merge({page: notifications.currentPageNumber - 1})) }}"
                           class="relative inline-flex items-center px-4 py-2 border border-gray-300 text-sm font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50">
                            Précédent
                        </a>
                    {% endif %}
                    {% if notifications.currentPageNumber < notifications.pageCount %}
                        <a href="{{ path('admin_notifications_index', app.request.query.all|merge({page: notifications.currentPageNumber + 1})) }}"
                           class="ml-3 relative inline-flex items-center px-4 py-2 border border-gray-300 text-sm font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50">
                            Suivant
                        </a>
                    {% endif %}
                </div>

                {# Desktop Pagination #}
                <div class="hidden sm:flex-1 sm:flex sm:items-center sm:justify-between">
                    <div>
                        <p class="text-sm text-gray-700">
                            Affichage de
                            <span class="font-medium">{{ (notifications.currentPageNumber - 1) * notifications.itemNumberPerPage + 1 }}</span>
                            à
                            <span class="font-medium">{{ min(notifications.currentPageNumber * notifications.itemNumberPerPage, notifications.totalItemCount) }}</span>
                            sur
                            <span class="font-medium">{{ notifications.totalItemCount }}</span>
                            résultats
                        </p>
                    </div>
                    <div>
                        {{ knp_pagination_render(notifications) }}
                    </div>
                </div>
            </div>
        {% endif %}
    {% endif %}
</div>

{% endblock %}