{#
  Composant réutilisable pour afficher une notification

  Variables:
    - notification: objet NotificationApp
    - compact: bool (mode compact pour dropdown) - défaut: false
    - show_actions: bool (afficher les boutons d'action) - défaut: true
    - show_user: bool (afficher l'utilisateur) - défaut: false (admin uniquement)
#}

{% set compact = compact|default(false) %}
{% set show_actions = show_actions|default(true) %}
{% set show_user = show_user|default(false) %}

{% set color = notification|notification_color %}
{% set icon = notification|notification_icon %}

{# Classes de couleur selon la catégorie #}
{% set bg_colors = {
    'blue': 'bg-blue-100 dark:bg-blue-900/30',
    'green': 'bg-green-100 dark:bg-green-900/30',
    'yellow': 'bg-yellow-100 dark:bg-yellow-900/30',
    'red': 'bg-red-100 dark:bg-red-900/30'
} %}

{% set text_colors = {
    'blue': 'text-blue-800 dark:text-blue-400',
    'green': 'text-green-800 dark:text-green-400',
    'yellow': 'text-yellow-800 dark:text-yellow-400',
    'red': 'text-red-800 dark:text-red-400'
} %}

{% set border_colors = {
    'blue': 'border-blue-300 dark:border-blue-700',
    'green': 'border-green-300 dark:border-green-700',
    'yellow': 'border-yellow-300 dark:border-yellow-700',
    'red': 'border-red-300 dark:border-red-700'
} %}

<div
    class="notification-item {% if not notification.isRead %}bg-blue-50 dark:bg-blue-900/20 border-l-4 {{ border_colors[color] }}{% else %}bg-white dark:bg-gray-800{% endif %} rounded-lg p-4 {% if compact %}mb-2{% else %}mb-3{% endif %} shadow-sm hover:shadow-md transition-shadow duration-200"
    data-notification-id="{{ notification.id }}"
>
    <div class="flex items-start {% if compact %}space-x-2{% else %}space-x-3{% endif %}">
        {# Icône #}
        <div class="flex-shrink-0">
            <div class="w-10 h-10 rounded-full {{ bg_colors[color] }} flex items-center justify-center">
                <svg class="w-5 h-5 {{ text_colors[color] }}" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    {% if icon == 'shield-exclamation' %}
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M20.618 5.984A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016zM12 9v2m0 4h.01"/>
                    {% elseif icon == 'cog' %}
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z"/>
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"/>
                    {% elseif icon == 'clipboard-list' %}
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-3 7h3m-3 4h3m-6-4h.01M9 16h.01"/>
                    {% elseif icon == 'user-circle' %}
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5.121 17.804A13.937 13.937 0 0112 16c2.5 0 4.847.655 6.879 1.804M15 10a3 3 0 11-6 0 3 3 0 016 0zm6 2a9 9 0 11-18 0 9 9 0 0118 0z"/>
                    {% else %}
                        <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"/>
                    {% endif %}
                </svg>
            </div>
        </div>

        {# Contenu #}
        <div class="flex-1 {% if compact %}min-w-0{% endif %}">
            {# En-tête (titre + badge) #}
            <div class="flex items-start justify-between {% if compact %}mb-1{% else %}mb-2{% endif %}">
                <div class="flex-1">
                    <h4 class="{% if compact %}text-sm{% else %}text-base{% endif %} font-semibold text-gray-900 dark:text-white {% if compact %}truncate{% endif %}">
                        {{ notification.title }}
                    </h4>
                    {% if show_user and notification.user %}
                        <p class="text-xs text-gray-500 dark:text-gray-400 mt-1">
                            {{ notification.user.fullName }} ({{ notification.user.email }})
                        </p>
                    {% endif %}
                </div>

                {# Badge non lue #}
                {% if not notification.isRead %}
                    <span class="ml-2 flex-shrink-0 inline-block w-2 h-2 bg-blue-600 rounded-full"></span>
                {% endif %}
            </div>

            {# Message #}
            <p class="{% if compact %}text-xs{% else %}text-sm{% endif %} text-gray-600 dark:text-gray-400 {% if compact %}line-clamp-2{% endif %}">
                {{ notification.message }}
            </p>

            {# Footer (date + actions) #}
            <div class="flex items-center justify-between mt-2">
                <span class="text-xs text-gray-400 dark:text-gray-500">
                    {{ notification.createdAt|date('d/m/Y H:i') }}
                </span>

                {% if show_actions %}
                    <div class="flex items-center space-x-2">
                        {# Lien vers ressource si disponible #}
                        {% if notification.link %}
                            <a href="{{ notification.link }}"
                               class="text-xs text-blue-600 dark:text-blue-400 hover:text-blue-800 dark:hover:text-blue-300 font-medium">
                                Voir
                            </a>
                        {% endif %}

                        {# Marquer comme lu #}
                        {% if not notification.isRead %}
                            <button
                                type="button"
                                data-action="mark-as-read"
                                data-notification-id="{{ notification.id }}"
                                class="text-xs text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-white"
                            >
                                Marquer comme lu
                            </button>
                        {% endif %}

                        {# Supprimer #}
                        <button
                            type="button"
                            data-action="delete"
                            data-notification-id="{{ notification.id }}"
                            class="text-xs text-red-600 dark:text-red-400 hover:text-red-800 dark:hover:text-red-300"
                        >
                            Supprimer
                        </button>
                    </div>
                {% endif %}
            </div>
        </div>
    </div>
</div>