{#
 # ============================================================================
 # MOLECULE: TOAST NOTIFICATION SYSTEM
 # ============================================================================
 #
 # Système de notifications toast global utilisant le design Alert.
 # À inclure UNE SEULE FOIS dans base.html.twig
 #
 # ============================================================================
 # UTILISATION JAVASCRIPT (actions sans refresh)
 # ============================================================================
 #
 # showToast('success', 'Titre', 'Message');
 # showToast('error', 'Erreur', 'Une erreur est survenue.');
 # showToast('warning', 'Attention', 'Action irréversible.', { duration: 8000 });
 # showToast('info', 'Info', 'Nouvelle version disponible.');
 #
 # Options disponibles :
 # - duration: 5000 (ms) - durée d'affichage
 # - dismissible: true - afficher le bouton fermer
 # - pauseOnHover: true - pause au survol
 #
 # ============================================================================
 # UTILISATION SYMFONY (avec redirect/refresh)
 # ============================================================================
 #
 # Dans un Controller :
 # $this->addFlash('success', 'Titre|Message descriptif');
 # $this->addFlash('error', 'Erreur|Description de l\'erreur');
 #
 # Format: 'type', 'Titre|Message'
 #
 # La barre est une COMMODITÉ, pas une condition d'affichage : un message posé
 # sans barre s'affiche quand même, la phrase entière devenant le titre. Le
 # gabarit de base jetait autrefois ces messages en silence — le contrôleur
 # croyait avoir parlé, l'utilisateur ne voyait rien.
 #
 # ============================================================================
 #}

{# Container fixe pour les toasts #}
<div id="toast-container" class="fixed bottom-6 right-6 z-[9999] flex flex-col gap-3 pointer-events-none max-w-[420px]"></div>

{# ============================================================================
   TEMPLATES CACHÉS - Un par variante (utilise atomes, classes statiques)
   Le JS clone ces templates pour créer les toasts
   ============================================================================ #}
<div id="toast-templates" class="hidden">

    {# SUCCESS #}
    <template id="toast-template-success">
        <div class="toast-item pointer-events-auto" role="alert">
            <div class="flex items-start bg-white rounded-xl shadow-2xl border border-black/5 p-4 gap-3 relative overflow-hidden">
                <div class="flex-shrink-0 w-10 h-10 rounded-lg bg-success/10 flex items-center justify-center text-success">
                    {% include '_atoms/icon/icon.html.twig' with { name: 'check-circle', size: 'md' } only %}
                </div>
                <div class="flex-1 min-w-0 pt-0.5">
                    <p class="toast-title font-semibold text-gray-900 text-base leading-tight font-[Poppins]"></p>
                    <p class="toast-message text-gray-500 text-sm leading-normal mt-0.5"></p>
                </div>
                <button type="button" class="toast-close flex-shrink-0 w-7 h-7 flex items-center justify-center rounded-md text-gray-400 opacity-50 hover:opacity-100 hover:bg-gray-100 transition-all duration-200" aria-label="Fermer">
                    {% include '_atoms/icon/icon.html.twig' with { name: 'close', size: 'sm' } only %}
                </button>
                <div class="toast-progress absolute bottom-0 left-0 h-0.5 bg-success opacity-60 rounded-b-xl"></div>
            </div>
        </div>
    </template>

    {# ERROR #}
    <template id="toast-template-error">
        <div class="toast-item pointer-events-auto" role="alert">
            <div class="flex items-start bg-white rounded-xl shadow-2xl border border-black/5 p-4 gap-3 relative overflow-hidden">
                <div class="flex-shrink-0 w-10 h-10 rounded-lg bg-error/10 flex items-center justify-center text-error">
                    {% include '_atoms/icon/icon.html.twig' with { name: 'alert', size: 'md' } only %}
                </div>
                <div class="flex-1 min-w-0 pt-0.5">
                    <p class="toast-title font-semibold text-gray-900 text-base leading-tight font-[Poppins]"></p>
                    <p class="toast-message text-gray-500 text-sm leading-normal mt-0.5"></p>
                </div>
                <button type="button" class="toast-close flex-shrink-0 w-7 h-7 flex items-center justify-center rounded-md text-gray-400 opacity-50 hover:opacity-100 hover:bg-gray-100 transition-all duration-200" aria-label="Fermer">
                    {% include '_atoms/icon/icon.html.twig' with { name: 'close', size: 'sm' } only %}
                </button>
                <div class="toast-progress absolute bottom-0 left-0 h-0.5 bg-error opacity-60 rounded-b-xl"></div>
            </div>
        </div>
    </template>

    {# WARNING #}
    <template id="toast-template-warning">
        <div class="toast-item pointer-events-auto" role="alert">
            <div class="flex items-start bg-white rounded-xl shadow-2xl border border-black/5 p-4 gap-3 relative overflow-hidden">
                <div class="flex-shrink-0 w-10 h-10 rounded-lg bg-warning/10 flex items-center justify-center text-warning">
                    {% include '_atoms/icon/icon.html.twig' with { name: 'warning', size: 'md' } only %}
                </div>
                <div class="flex-1 min-w-0 pt-0.5">
                    <p class="toast-title font-semibold text-gray-900 text-base leading-tight font-[Poppins]"></p>
                    <p class="toast-message text-gray-500 text-sm leading-normal mt-0.5"></p>
                </div>
                <button type="button" class="toast-close flex-shrink-0 w-7 h-7 flex items-center justify-center rounded-md text-gray-400 opacity-50 hover:opacity-100 hover:bg-gray-100 transition-all duration-200" aria-label="Fermer">
                    {% include '_atoms/icon/icon.html.twig' with { name: 'close', size: 'sm' } only %}
                </button>
                <div class="toast-progress absolute bottom-0 left-0 h-0.5 bg-warning opacity-60 rounded-b-xl"></div>
            </div>
        </div>
    </template>

    {# INFO #}
    <template id="toast-template-info">
        <div class="toast-item pointer-events-auto" role="alert">
            <div class="flex items-start bg-white rounded-xl shadow-2xl border border-black/5 p-4 gap-3 relative overflow-hidden">
                <div class="flex-shrink-0 w-10 h-10 rounded-lg bg-info/10 flex items-center justify-center text-info">
                    {% include '_atoms/icon/icon.html.twig' with { name: 'info', size: 'md' } only %}
                </div>
                <div class="flex-1 min-w-0 pt-0.5">
                    <p class="toast-title font-semibold text-gray-900 text-base leading-tight font-[Poppins]"></p>
                    <p class="toast-message text-gray-500 text-sm leading-normal mt-0.5"></p>
                </div>
                <button type="button" class="toast-close flex-shrink-0 w-7 h-7 flex items-center justify-center rounded-md text-gray-400 opacity-50 hover:opacity-100 hover:bg-gray-100 transition-all duration-200" aria-label="Fermer">
                    {% include '_atoms/icon/icon.html.twig' with { name: 'close', size: 'sm' } only %}
                </button>
                <div class="toast-progress absolute bottom-0 left-0 h-0.5 bg-info opacity-60 rounded-b-xl"></div>
            </div>
        </div>
    </template>

    {# NEUTRAL #}
    <template id="toast-template-neutral">
        <div class="toast-item pointer-events-auto" role="alert">
            <div class="flex items-start bg-white rounded-xl shadow-2xl border border-black/5 p-4 gap-3 relative overflow-hidden">
                <div class="flex-shrink-0 w-10 h-10 rounded-lg bg-gray-100 flex items-center justify-center text-gray-500">
                    {% include '_atoms/icon/icon.html.twig' with { name: 'info', size: 'md' } only %}
                </div>
                <div class="flex-1 min-w-0 pt-0.5">
                    <p class="toast-title font-semibold text-gray-900 text-base leading-tight font-[Poppins]"></p>
                    <p class="toast-message text-gray-500 text-sm leading-normal mt-0.5"></p>
                </div>
                <button type="button" class="toast-close flex-shrink-0 w-7 h-7 flex items-center justify-center rounded-md text-gray-400 opacity-50 hover:opacity-100 hover:bg-gray-100 transition-all duration-200" aria-label="Fermer">
                    {% include '_atoms/icon/icon.html.twig' with { name: 'close', size: 'sm' } only %}
                </button>
                <div class="toast-progress absolute bottom-0 left-0 h-0.5 bg-gray-400 opacity-60 rounded-b-xl"></div>
            </div>
        </div>
    </template>

</div>

<script>
(function() {
    'use strict';

    const DEFAULT_OPTIONS = {
        duration: 5000,
        dismissible: true,
        pauseOnHover: true
    };

    /**
     * Affiche une notification toast en clonant le template Twig
     */
    function showToast(variant, title, message, options = {}) {
        const container = document.getElementById('toast-container');
        const template = document.getElementById(`toast-template-${variant}`) || document.getElementById('toast-template-info');

        if (!container || !template) {
            console.error('Toast system not initialized. Include toast.html.twig in base.html.twig');
            return;
        }

        const opts = { ...DEFAULT_OPTIONS, ...options };

        // Cloner le template
        const toast = template.content.cloneNode(true).firstElementChild;

        // Remplir le contenu
        toast.querySelector('.toast-title').textContent = title;
        const msgEl = toast.querySelector('.toast-message');
        if (!message) {
            // Un toast sans description est légitime (« Versement enregistré. ») :
            // on retire le paragraphe plutôt que de laisser un blanc sous le titre.
            msgEl.remove();
        } else if (opts.html) {
            msgEl.innerHTML = message;
        } else {
            msgEl.textContent = message;
        }

        // Configurer la barre de progression
        const progressBar = toast.querySelector('.toast-progress');
        if (progressBar) {
            progressBar.style.animationDuration = `${opts.duration}ms`;
        }

        // Masquer le bouton fermer si non dismissible
        if (!opts.dismissible) {
            const closeBtn = toast.querySelector('.toast-close');
            if (closeBtn) closeBtn.remove();
        }

        // Ajouter au container
        container.appendChild(toast);

        // Gestion du timer
        let timeRemaining = opts.duration;
        let startTime = Date.now();
        let isPaused = false;
        let timeoutId;

        const removeToast = () => {
            toast.classList.add('toast-exit');
            setTimeout(() => toast.remove(), 300);
        };

        const startTimer = () => {
            startTime = Date.now();
            timeoutId = setTimeout(removeToast, timeRemaining);
            if (progressBar) progressBar.style.animationPlayState = 'running';
        };

        // Pause au hover
        if (opts.pauseOnHover) {
            toast.addEventListener('mouseenter', () => {
                if (!isPaused) {
                    isPaused = true;
                    clearTimeout(timeoutId);
                    timeRemaining -= (Date.now() - startTime);
                    if (progressBar) progressBar.style.animationPlayState = 'paused';
                }
            });

            toast.addEventListener('mouseleave', () => {
                if (isPaused) {
                    isPaused = false;
                    startTimer();
                }
            });
        }

        // Bouton fermer
        const closeBtn = toast.querySelector('.toast-close');
        if (closeBtn) {
            closeBtn.addEventListener('click', () => {
                clearTimeout(timeoutId);
                removeToast();
            });
        }

        startTimer();
        return toast;
    }

    /**
     * Efface tous les toasts
     */
    function clearAllToasts() {
        const container = document.getElementById('toast-container');
        if (container) {
            container.querySelectorAll('.toast-item').forEach(toast => {
                toast.classList.add('toast-exit');
                setTimeout(() => toast.remove(), 300);
            });
        }
    }

    // Exposer globalement
    window.showToast = showToast;
    window.clearAllToasts = clearAllToasts;
    window.showNotification = (type, title, message, options = {}) => showToast(type, title, message, options);

})();
</script>

<style>
    .toast-item {
        animation: toast-slide-in 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
    }

    @keyframes toast-slide-in {
        from { opacity: 0; transform: translateX(100%); }
        to { opacity: 1; transform: translateX(0); }
    }

    .toast-exit {
        animation: toast-slide-out 0.3s ease-in forwards;
    }

    @keyframes toast-slide-out {
        from { opacity: 1; transform: translateX(0); }
        to { opacity: 0; transform: translateX(100%); }
    }

    .toast-progress {
        width: 100%;
        animation: toast-progress-shrink linear forwards;
    }

    @keyframes toast-progress-shrink {
        from { width: 100%; }
        to { width: 0%; }
    }
</style>