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

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

{% block content %}

{# Header avec titre et actions #}
<div class="mb-8">
    <div class="sm:flex sm:items-center sm:justify-between">
        <div>
            <h1 class="text-3xl font-bold text-gray-900">Mes Notifications</h1>
            <p class="mt-2 text-sm text-gray-700">
                Gérez vos notifications et restez informé des événements importants
            </p>
        </div>
        <div class="mt-4 sm:mt-0 flex items-center space-x-3">
            {% if stats.unread > 0 %}
                <form method="post" action="{{ path('notifications_mark_all_as_read') }}" class="inline">
                    <input type="hidden" name="_token" value="{{ csrf_token('mark_all_read') }}">
                    <button type="submit"
                            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="M5 13l4 4L19 7"/>
                        </svg>
                        Tout marquer comme lu
                    </button>
                </form>
            {% endif %}

            <form method="post" action="{{ path('notifications_delete_all_read') }}" class="inline">
                <input type="hidden" name="_token" value="{{ csrf_token('delete_all_read') }}">
                <button type="submit"
                        onclick="return confirm('Êtes-vous sûr de vouloir supprimer toutes les notifications lues ?')"
                        class="inline-flex items-center px-4 py-2 border border-gray-300 shadow-sm text-sm font-medium rounded-md text-red-700 bg-white hover:bg-red-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-red-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="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"/>
                    </svg>
                    Supprimer les lues
                </button>
            </form>
        </div>
    </div>
</div>

{# Statistiques #}
<div class="grid grid-cols-1 gap-6 sm:grid-cols-2 mb-8">
    <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-8 h-8 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 des notifications</dt>
                        <dd class="text-2xl font-semibold text-gray-900">{{ stats.total }}</dd>
                    </dl>
                </div>
            </div>
        </div>
    </div>

    <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-8 h-8 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="text-2xl font-semibold text-gray-900">{{ stats.unread }}</dd>
                    </dl>
                </div>
            </div>
        </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('notifications_index') }}"
              data-controller="form-submit"
              class="grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-4">

            {# 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 les catégories</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-3">
                <a href="{{ path('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>
            </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</h3>
            <p class="text-sm text-gray-500">Vous n'avez aucune notification pour le moment.</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: true,
                    show_user: false
                } %}
            {% 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: true,
                    show_user: false
                } %}
            {% 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('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('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>

{# Script pour gérer les actions AJAX #}
<script>
document.addEventListener('DOMContentLoaded', function() {
    // Marquer comme lu
    document.querySelectorAll('[data-action="mark-as-read"]').forEach(button => {
        button.addEventListener('click', function(e) {
            e.preventDefault();
            const notificationId = this.dataset.notificationId;

            fetch(`/notifications/${notificationId}/mark-as-read`, {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                    'X-Requested-With': 'XMLHttpRequest'
                }
            })
            .then(response => response.json())
            .then(data => {
                if (data.success) {
                    location.reload();
                }
            })
            .catch(error => console.error('Erreur:', error));
        });
    });

    // Supprimer
    document.querySelectorAll('[data-action="delete"]').forEach(button => {
        button.addEventListener('click', function(e) {
            e.preventDefault();

            if (!confirm('Êtes-vous sûr de vouloir supprimer cette notification ?')) {
                return;
            }

            const notificationId = this.dataset.notificationId;

            fetch(`/notifications/${notificationId}/delete`, {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                    'X-Requested-With': 'XMLHttpRequest'
                }
            })
            .then(response => response.json())
            .then(data => {
                if (data.success) {
                    location.reload();
                }
            })
            .catch(error => console.error('Erreur:', error));
        });
    });
});
</script>

{% endblock %}