{% extends 'base.html.twig' %}

{% block title %}Alert - Design System - Bubul{% endblock %}

{% block body %}
<div class="min-h-screen bg-gray-50">

    {# ===== HEADER ===== #}
    <header class="bg-white border-b border-gray-200 sticky top-0 z-10">
        <div class="max-w-7xl mx-auto px-6 py-4">
            <div class="flex items-center gap-4">
                <a href="{{ path('admin_design_system') }}" class="text-gray-400 hover:text-gray-600 transition-colors">
                    <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7"/>
                    </svg>
                </a>
                <div>
                    <div class="flex items-center gap-2">
                        <span class="text-sm text-gray-500">Molécules</span>
                        <span class="text-gray-300">/</span>
                        <h1 class="text-xl font-bold text-gray-900 font-[Poppins]">Alert</h1>
                    </div>
                    <p class="text-sm text-gray-500">Messages d'alerte et notifications système</p>
                </div>
            </div>
        </div>
    </header>

    <div class="max-w-7xl mx-auto px-6 py-8">

        {# ===== ALERT VS TOAST ===== #}
        <section class="mb-12 bg-blue-50 rounded-xl p-6 border border-blue-200">
            <h2 class="text-lg font-semibold text-blue-900 mb-4 flex items-center gap-2">
                <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/></svg>
                Alert vs Toast : quelle difference ?
            </h2>
            <div class="grid md:grid-cols-2 gap-6">
                <div class="bg-white rounded-lg p-4 border border-blue-300 ring-2 ring-blue-200">
                    <h3 class="font-semibold text-gray-900 mb-2">Alert (cette page)</h3>
                    <ul class="text-sm text-gray-600 space-y-1">
                        <li>- Position dans le flux du document</li>
                        <li>- Reste visible jusqu'a fermeture manuelle</li>
                        <li>- Inclus via Twig : <code class="bg-gray-100 px-1 rounded">{% verbatim %}{% include %}{% endverbatim %}</code></li>
                        <li>- Ideal pour : erreurs importantes, avertissements contextuels</li>
                        <li>- Fait partie du contenu de la page</li>
                    </ul>
                </div>
                <div class="bg-white rounded-lg p-4 border border-blue-100">
                    <h3 class="font-semibold text-gray-900 mb-2">Toast (notifications)</h3>
                    <ul class="text-sm text-gray-600 space-y-1">
                        <li>- Position fixe (coin inferieur droit)</li>
                        <li>- Disparait automatiquement apres X secondes</li>
                        <li>- Affiche via JavaScript : <code class="bg-gray-100 px-1 rounded">showToast()</code></li>
                        <li>- Ideal pour : confirmations, feedback rapide</li>
                        <li>- Ne bloque pas l'interface</li>
                    </ul>
                    <a href="{{ path('admin_design_system_toast') }}" class="inline-block mt-3 text-sm text-primary hover:underline font-medium">Voir la documentation Toast &rarr;</a>
                </div>
            </div>
        </section>

        {# ===== COMPOSITION ===== #}
        <section class="mb-12 bg-green-50 rounded-xl p-6 border border-green-200">
            <h2 class="text-lg font-semibold text-green-900 mb-4">Composition</h2>
            <div class="flex flex-wrap items-center gap-3">
                <span class="px-3 py-1.5 bg-blue-100 text-blue-700 rounded border border-blue-200 font-medium text-sm">Icon</span>
                <span class="text-green-400 font-bold">+</span>
                <span class="px-3 py-1.5 bg-purple-100 text-purple-700 rounded border border-purple-200 font-medium text-sm">Typography</span>
                <span class="text-green-400 font-bold">+</span>
                <span class="px-3 py-1.5 bg-orange-100 text-orange-700 rounded border border-orange-200 font-medium text-sm">Button</span>
                <span class="text-green-600 font-bold text-lg">=</span>
                <span class="px-4 py-2 bg-green-500 text-white rounded-lg font-semibold shadow-sm">Alert</span>
            </div>
        </section>

        {# ===== PLAYGROUND TOAST ===== #}
        <section class="mb-12 bg-white rounded-xl shadow-sm border border-gray-200 overflow-hidden">
            <div class="px-6 py-4 border-b border-gray-200 bg-gradient-to-r from-amber-50 to-orange-50">
                <h2 class="text-lg font-semibold text-gray-900">Test rapide - Toast Notifications</h2>
                <p class="text-sm text-gray-500 mt-1">Les Toasts utilisent le meme design que les Alerts. <a href="{{ path('admin_design_system_toast') }}" class="text-primary hover:underline font-medium">Voir documentation Toast &rarr;</a></p>
            </div>
            <div class="p-6">
                {# Contrôle de durée #}
                <div class="flex items-center gap-4 mb-6 p-4 bg-gray-50 rounded-lg">
                    <label class="text-sm font-medium text-gray-700">Durée d'affichage :</label>
                    <div class="flex items-center gap-2">
                        <input type="range" id="alert-duration" min="2" max="10" value="5" class="w-32 accent-primary">
                        <span id="duration-value" class="text-sm font-semibold text-primary w-8">5s</span>
                    </div>
                </div>

                {# Boutons de génération #}
                <div class="flex flex-wrap gap-3">
                    <button type="button" onclick="generateToast('success')" class="px-4 py-2 bg-success text-white rounded-lg font-medium hover:bg-success/90 transition-colors flex items-center gap-2">
                        <svg class="w-4 h-4" 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>
                        Succès
                    </button>
                    <button type="button" onclick="generateToast('error')" class="px-4 py-2 bg-error text-white rounded-lg font-medium hover:bg-error/90 transition-colors flex items-center gap-2">
                        <svg class="w-4 h-4" 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>
                        Erreur
                    </button>
                    <button type="button" onclick="generateToast('warning')" class="px-4 py-2 bg-warning text-white rounded-lg font-medium hover:bg-warning/90 transition-colors flex items-center gap-2">
                        <svg class="w-4 h-4" 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>
                        Warning
                    </button>
                    <button type="button" onclick="generateToast('info')" class="px-4 py-2 bg-info text-white rounded-lg font-medium hover:bg-info/90 transition-colors flex items-center gap-2">
                        <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/></svg>
                        Info
                    </button>
                    <button type="button" onclick="generateToast('neutral')" class="px-4 py-2 bg-gray-500 text-white rounded-lg font-medium hover:bg-gray-600 transition-colors flex items-center gap-2">
                        <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 12h.01M12 12h.01M16 12h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/></svg>
                        Neutre
                    </button>
                    <button type="button" onclick="clearToasts()" class="px-4 py-2 bg-gray-200 text-gray-700 rounded-lg font-medium hover:bg-gray-300 transition-colors ml-auto">
                        Tout effacer
                    </button>
                </div>

                <p class="mt-4 text-xs text-gray-400">💡 Survolez une notification pour mettre en pause le timer</p>
            </div>
        </section>


        {# ===== USAGE ===== #}
        <section class="mb-12 bg-white rounded-xl shadow-sm border border-gray-200 overflow-hidden">
            <div class="px-6 py-4 border-b border-gray-200 bg-gray-50">
                <h2 class="text-lg font-semibold text-gray-900">Usage</h2>
            </div>
            <div class="p-6">
                <div class="bg-gray-900 rounded-lg p-4 overflow-x-auto mb-4">
                    <pre class="text-sm text-gray-100"><code>{% verbatim %}{% include '_molecules/alert/alert.html.twig' with {
    title: 'Compte créé',
    message: 'Votre compte a été créé avec succès !',
    variant: 'success',
    dismissible: true
} %}{% endverbatim %}</code></pre>
                </div>
                <p class="text-sm text-gray-500">Fichier : <code class="bg-gray-100 px-1 rounded">templates/_molecules/alert/alert.html.twig</code></p>
            </div>
        </section>

        {# ===== VARIANTES ===== #}
        <section class="mb-12 bg-white rounded-xl shadow-sm border border-gray-200 overflow-hidden">
            <div class="px-6 py-4 border-b border-gray-200 bg-gray-50">
                <h2 class="text-lg font-semibold text-gray-900">Variantes</h2>
                <p class="text-sm text-gray-500 mt-1">Paramètre : <code class="bg-gray-200 px-1 rounded">variant</code></p>
            </div>
            <div class="p-6 space-y-4">

                {% include '_molecules/alert/alert.html.twig' with {
                    title: 'Compte créé',
                    message: 'Votre compte a été créé avec succès !',
                    variant: 'success'
                } %}

                {% include '_molecules/alert/alert.html.twig' with {
                    title: 'Erreur de sauvegarde',
                    message: 'Une erreur est survenue lors de la sauvegarde.',
                    variant: 'error'
                } %}

                {% include '_molecules/alert/alert.html.twig' with {
                    title: 'Action irréversible',
                    message: 'Attention, cette action ne peut pas être annulée.',
                    variant: 'warning'
                } %}

                {% include '_molecules/alert/alert.html.twig' with {
                    title: 'Mise à jour disponible',
                    message: 'Une nouvelle version de l\'application est disponible.',
                    variant: 'info'
                } %}

                {% include '_molecules/alert/alert.html.twig' with {
                    title: 'Information',
                    message: 'Contenu neutre sans connotation particulière.',
                    variant: 'neutral'
                } %}

            </div>
        </section>

        {# ===== DISMISSIBLE ===== #}
        <section class="mb-12 bg-white rounded-xl shadow-sm border border-gray-200 overflow-hidden">
            <div class="px-6 py-4 border-b border-gray-200 bg-gray-50">
                <h2 class="text-lg font-semibold text-gray-900">Avec fermeture</h2>
                <p class="text-sm text-gray-500 mt-1">Paramètre : <code class="bg-gray-200 px-1 rounded">dismissible: true</code></p>
            </div>
            <div class="p-6 space-y-4">

                {% include '_molecules/alert/alert.html.twig' with {
                    title: 'Conseil',
                    message: 'Cliquez sur la croix pour fermer cette alerte.',
                    variant: 'info',
                    dismissible: true
                } %}

                {% include '_molecules/alert/alert.html.twig' with {
                    title: 'Bienvenue !',
                    message: 'Découvrez les nouvelles fonctionnalités de la version 2.0.',
                    variant: 'success',
                    dismissible: true
                } %}

            </div>
        </section>

        {# ===== TAILLES ===== #}
        <section class="mb-12 bg-white rounded-xl shadow-sm border border-gray-200 overflow-hidden">
            <div class="px-6 py-4 border-b border-gray-200 bg-gray-50">
                <h2 class="text-lg font-semibold text-gray-900">Tailles</h2>
                <p class="text-sm text-gray-500 mt-1">Paramètre : <code class="bg-gray-200 px-1 rounded">size</code></p>
            </div>
            <div class="p-6 space-y-4">

                {% include '_molecules/alert/alert.html.twig' with {
                    title: 'Taille SM',
                    message: 'Alerte compacte pour espaces restreints.',
                    variant: 'info',
                    size: 'sm'
                } %}

                {% include '_molecules/alert/alert.html.twig' with {
                    title: 'Taille MD (défaut)',
                    message: 'Alerte de taille standard, recommandée pour la plupart des cas.',
                    variant: 'info',
                    size: 'md'
                } %}

                {% include '_molecules/alert/alert.html.twig' with {
                    title: 'Taille LG',
                    message: 'Alerte grande pour les messages importants nécessitant plus de visibilité.',
                    variant: 'info',
                    size: 'lg'
                } %}

            </div>
        </section>

        {# ===== ICÔNE PERSONNALISÉE ===== #}
        <section class="mb-12 bg-white rounded-xl shadow-sm border border-gray-200 overflow-hidden">
            <div class="px-6 py-4 border-b border-gray-200 bg-gray-50">
                <h2 class="text-lg font-semibold text-gray-900">Icône personnalisée</h2>
                <p class="text-sm text-gray-500 mt-1">Paramètre : <code class="bg-gray-200 px-1 rounded">icon</code></p>
            </div>
            <div class="p-6 space-y-4">

                {% include '_molecules/alert/alert.html.twig' with {
                    title: 'Téléchargement terminé',
                    message: 'Votre fichier a été téléchargé avec succès.',
                    variant: 'success',
                    icon: 'download'
                } %}

                {% include '_molecules/alert/alert.html.twig' with {
                    title: 'Paramètres sauvegardés',
                    message: 'Vos préférences ont été mises à jour.',
                    variant: 'info',
                    icon: 'settings'
                } %}

                {% include '_molecules/alert/alert.html.twig' with {
                    title: 'Email envoyé',
                    message: 'Un email de confirmation vous a été envoyé.',
                    variant: 'success',
                    icon: 'mail'
                } %}

            </div>
        </section>

        {# ===== AVEC LIENS ===== #}
        <section class="mb-12 bg-white rounded-xl shadow-sm border border-gray-200 overflow-hidden">
            <div class="px-6 py-4 border-b border-gray-200 bg-gray-50">
                <h2 class="text-lg font-semibold text-gray-900">Avec liens</h2>
                <p class="text-sm text-gray-500 mt-1">Le message supporte le HTML</p>
            </div>
            <div class="p-6 space-y-4">

                {% include '_molecules/alert/alert.html.twig' with {
                    title: 'Configuration requise',
                    message: 'Configuration Moodle manquante. <a href="#" class="font-semibold underline hover:no-underline">Configurer maintenant</a>',
                    variant: 'warning'
                } %}

                {% include '_molecules/alert/alert.html.twig' with {
                    title: 'Mise à jour disponible',
                    message: 'La version 2.0 est disponible. <a href="#" class="font-semibold underline hover:no-underline">Voir les nouveautés</a> ou <a href="#" class="font-semibold underline hover:no-underline">Mettre à jour</a>',
                    variant: 'info',
                    dismissible: true
                } %}

            </div>
        </section>

        {# ===== CAS D'USAGE ===== #}
        <section class="mb-12 bg-white rounded-xl shadow-sm border border-gray-200 overflow-hidden">
            <div class="px-6 py-4 border-b border-gray-200 bg-gray-50">
                <h2 class="text-lg font-semibold text-gray-900">Cas d'usage</h2>
            </div>
            <div class="p-6 space-y-6">

                <div>
                    <p class="text-xs text-gray-400 uppercase tracking-wider mb-3">Formulaire soumis</p>
                    {% include '_molecules/alert/alert.html.twig' with {
                        title: 'Formulaire envoyé',
                        message: 'Nous avons bien reçu votre message et vous répondrons sous 48h.',
                        variant: 'success',
                        dismissible: true
                    } %}
                </div>

                <div>
                    <p class="text-xs text-gray-400 uppercase tracking-wider mb-3">Erreur de validation</p>
                    {% include '_molecules/alert/alert.html.twig' with {
                        title: 'Erreur de validation',
                        message: 'Veuillez corriger les champs en rouge avant de soumettre le formulaire.',
                        variant: 'error'
                    } %}
                </div>

                <div>
                    <p class="text-xs text-gray-400 uppercase tracking-wider mb-3">Avertissement quota</p>
                    {% include '_molecules/alert/alert.html.twig' with {
                        title: 'Tokens limités',
                        message: 'Il vous reste moins de 1000 tokens. Rechargez pour continuer à utiliser les fonctionnalités IA.',
                        variant: 'warning',
                        dismissible: true
                    } %}
                </div>

            </div>
        </section>

        {# ===== PARAMÈTRES ===== #}
        <section class="mb-12 bg-white rounded-xl shadow-sm border border-gray-200 overflow-hidden">
            <div class="px-6 py-4 border-b border-gray-200 bg-gray-50">
                <h2 class="text-lg font-semibold text-gray-900">Paramètres</h2>
            </div>
            <div class="p-6 overflow-x-auto">
                <table class="w-full text-sm">
                    <thead>
                        <tr class="border-b border-gray-200">
                            <th class="text-left py-2 px-3 font-medium text-gray-700">Paramètre</th>
                            <th class="text-left py-2 px-3 font-medium text-gray-700">Type</th>
                            <th class="text-left py-2 px-3 font-medium text-gray-700">Défaut</th>
                            <th class="text-left py-2 px-3 font-medium text-gray-700">Description</th>
                        </tr>
                    </thead>
                    <tbody class="text-gray-600">
                        <tr class="border-b border-gray-100"><td class="py-2 px-3"><code>title</code></td><td class="py-2 px-3">string</td><td class="py-2 px-3">(requis)</td><td class="py-2 px-3">Titre principal en gras</td></tr>
                        <tr class="border-b border-gray-100"><td class="py-2 px-3"><code>message</code></td><td class="py-2 px-3">string</td><td class="py-2 px-3">(requis)</td><td class="py-2 px-3">Sous-titre / message descriptif</td></tr>
                        <tr class="border-b border-gray-100"><td class="py-2 px-3"><code>variant</code></td><td class="py-2 px-3">string</td><td class="py-2 px-3">info</td><td class="py-2 px-3">success, error, warning, info, neutral</td></tr>
                        <tr class="border-b border-gray-100"><td class="py-2 px-3"><code>icon</code></td><td class="py-2 px-3">string</td><td class="py-2 px-3">auto</td><td class="py-2 px-3">Icône personnalisée (auto selon variant)</td></tr>
                        <tr class="border-b border-gray-100"><td class="py-2 px-3"><code>dismissible</code></td><td class="py-2 px-3">bool</td><td class="py-2 px-3">false</td><td class="py-2 px-3">Afficher bouton de fermeture</td></tr>
                        <tr class="border-b border-gray-100"><td class="py-2 px-3"><code>size</code></td><td class="py-2 px-3">string</td><td class="py-2 px-3">md</td><td class="py-2 px-3">sm, md, lg</td></tr>
                        <tr><td class="py-2 px-3"><code>class</code></td><td class="py-2 px-3">string</td><td class="py-2 px-3">''</td><td class="py-2 px-3">Classes additionnelles</td></tr>
                    </tbody>
                </table>
            </div>
        </section>

    </div>
</div>

<script>
    // Messages de démo par variante
    const demoMessages = {
        success: [
            ['Opération réussie', 'Vos modifications ont été enregistrées avec succès.'],
            ['Paiement confirmé', 'Votre transaction a été traitée.'],
            ['Fichier uploadé', 'Le fichier a été téléchargé avec succès !']
        ],
        error: [
            ['Erreur de connexion', 'Impossible de se connecter au serveur.'],
            ['Validation échouée', 'Veuillez corriger les erreurs du formulaire.'],
            ['Erreur système', 'Une erreur inattendue est survenue.']
        ],
        warning: [
            ['Attention', 'Cette action est irréversible.'],
            ['Quota limité', 'Il vous reste moins de 1000 tokens.'],
            ['Session expirée', 'Votre session expire dans 5 minutes.']
        ],
        info: [
            ['Mise à jour disponible', 'Une nouvelle version est disponible.'],
            ['Maintenance prévue', 'Une maintenance est prévue ce soir à 22h.'],
            ['Nouvelle fonctionnalité', 'Découvrez les dernières nouveautés !']
        ],
        neutral: [
            ['Note', 'Cette page est en construction.'],
            ['Information', 'Aucune donnée à afficher pour le moment.']
        ]
    };

    // Mise à jour de l'affichage de la durée
    document.getElementById('alert-duration')?.addEventListener('input', function(e) {
        document.getElementById('duration-value').textContent = e.target.value + 's';
    });

    // Génère un toast via le système global
    function generateToast(variant) {
        const duration = parseInt(document.getElementById('alert-duration')?.value || 5) * 1000;
        const msgs = demoMessages[variant];
        const [title, message] = msgs[Math.floor(Math.random() * msgs.length)];

        // Utilise le système global showToast() de _molecules/toast/toast.html.twig
        window.showToast(variant, title, message, { duration });
    }

    // Efface tous les toasts via le système global
    function clearToasts() {
        window.clearAllToasts();
    }
</script>
{% endblock %}