{#
 # ============================================================================
 # MOLECULE: MODAL
 # ============================================================================
 #
 # Dialogue modal avec overlay, header, body et footer.
 # Utilise pour confirmations, formulaires et affichage de contenu.
 # Supporte aussi le mode side-panel (position: right/left).
 #
 # ============================================================================
 # COMPOSITION (Atomes utilises)
 # ============================================================================
 #
 # - _atoms/icon/icon.html.twig
 # - _atoms/typography/typography.html.twig
 # - _atoms/button/button.html.twig
 #
 # ============================================================================
 # PARAMETRES
 # ============================================================================
 #
 # | Parametre     | Type    | Defaut    | Description                              |
 # |---------------|---------|-----------|------------------------------------------|
 # | id            | string  | (requis)  | ID unique pour le modal                  |
 # | title         | string  | null      | Titre du modal                           |
 # | subtitle      | string  | null      | Sous-titre/description                   |
 # | variant       | string  | null      | Preset: info, success, warning, danger   |
 # | icon          | string  | null      | Icone du header (auto si variant)        |
 # | iconColor     | string  | 'primary' | Couleur de l'icone (auto si variant)     |
 # | size          | string  | 'md'      | Taille: sm, md, lg, xl, 2xl, full        |
 # | position      | string  | 'center'  | Position: center, right, left (panel)    |
 # | closable      | bool    | true      | Afficher bouton fermeture                |
 # | closeOnOverlay| bool    | true      | Fermer au clic sur overlay               |
 # | actionLabel   | string  | null      | Texte bouton action (genere footer auto) |
 # | actionIcon    | string  | null      | Icone bouton action                      |
 # | actionUrl     | string  | null      | URL action (form action ou href)         |
 # | actionMethod  | string  | 'POST'    | Methode HTTP pour actionUrl              |
 # | cancelLabel   | string  | null      | Texte bouton annuler (si actionLabel)    |
 # | class         | string  | ''        | Classes additionnelles                   |
 #
 # ============================================================================
 # VARIANTES PREDEFINES
 # ============================================================================
 #
 # | Variant | Icone        | Couleur | Usage                                    |
 # |---------|--------------|---------|------------------------------------------|
 # | info    | info         | info    | Information, aide                        |
 # | success | check-circle | success | Confirmation de succes                   |
 # | warning | warning      | warning | Avertissement, attention                 |
 # | danger  | trash        | error   | Suppression, action irreversible         |
 #
 # ============================================================================
 # EXEMPLES D'UTILISATION
 # ============================================================================
 #
 # Modal de confirmation (recommande):
 # {% embed '_molecules/modal/modal.html.twig' with {
 #     id: 'delete-modal',
 #     title: 'Supprimer l element',
 #     variant: 'danger',
 #     actionLabel: 'Supprimer',
 #     actionIcon: 'trash',
 #     cancelLabel: 'Annuler'
 # } %}
 #     {% block body %}
 #         <p>Cette action est irreversible.</p>
 #     {% endblock %}
 # {% endembed %}
 #
 # Side-panel (position: right):
 # {% embed '_molecules/modal/modal.html.twig' with {
 #     id: 'settings-panel',
 #     title: 'Parametres',
 #     icon: 'settings',
 #     position: 'right',
 #     size: 'md'
 # } %}
 #     {% block body %}
 #         <form>...</form>
 #     {% endblock %}
 #     {% block footer %}
 #         {% include '_atoms/button/button.html.twig' with { label: 'Enregistrer' } %}
 #     {% endblock %}
 # {% endembed %}
 #
 # Modal avec formulaire et action URL:
 # {% embed '_molecules/modal/modal.html.twig' with {
 #     id: 'form-modal',
 #     title: 'Ajouter un utilisateur',
 #     size: 'lg',
 #     actionLabel: 'Ajouter',
 #     actionUrl: '/admin/users/create',
 #     cancelLabel: 'Annuler'
 # } %}
 #     {% block body %}
 #         <input name="email" type="email" />
 #     {% endblock %}
 # {% endembed %}
 #
 # ============================================================================
 #}

{# ============================================================================
   CONFIGURATION DES VALEURS PAR DEFAUT
   ============================================================================ #}

{% set id = id ?? 'modal' %}
{% set title = title ?? null %}
{% set subtitle = subtitle ?? null %}
{% set variant = variant ?? null %}
{% set size = size ?? 'md' %}
{% set position = position ?? 'center' %}
{% set closable = closable ?? true %}
{% set closeOnOverlay = closeOnOverlay ?? true %}
{% set actionLabel = actionLabel ?? null %}
{% set actionIcon = actionIcon ?? null %}
{% set actionUrl = actionUrl ?? null %}
{% set actionMethod = actionMethod ?? 'POST' %}
{% set cancelLabel = cancelLabel ?? null %}
{% set class = class ?? '' %}

{# Mode side-panel #}
{% set isSidePanel = position in ['right', 'left'] %}

{# ============================================================================
   CONFIGURATION DES VARIANTES
   ============================================================================ #}

{% set variantConfig = {
    'info': {
        'icon': 'info',
        'iconColor': 'info',
        'iconBg': 'bg-info/10',
        'headerBorder': 'border-info/20',
        'buttonVariant': 'primary'
    },
    'success': {
        'icon': 'check-circle',
        'iconColor': 'success',
        'iconBg': 'bg-success/10',
        'headerBorder': 'border-success/20',
        'buttonVariant': 'success'
    },
    'warning': {
        'icon': 'warning',
        'iconColor': 'warning',
        'iconBg': 'bg-warning/10',
        'headerBorder': 'border-warning/20',
        'buttonVariant': 'warning'
    },
    'danger': {
        'icon': 'trash',
        'iconColor': 'error',
        'iconBg': 'bg-error/10',
        'headerBorder': 'border-error/20',
        'buttonVariant': 'error'
    }
} %}

{% set vConfig = variant ? (variantConfig[variant] ?? null) : null %}

{# Appliquer la config de variante ou utiliser les valeurs manuelles #}
{% set icon = icon ?? (vConfig ? vConfig.icon : null) %}
{% set iconColor = iconColor ?? (vConfig ? vConfig.iconColor : 'primary') %}
{% set iconBg = vConfig ? vConfig.iconBg : ('bg-' ~ iconColor ~ '/10') %}

{# ============================================================================
   CLASSES TAILWIND
   ============================================================================ #}

{# Classes de taille selon le mode #}
{% if isSidePanel %}
    {% set sizeClasses = {
        'sm': 'w-80',
        'md': 'w-96',
        'lg': 'w-[28rem]',
        'xl': 'w-[32rem]',
        '2xl': 'w-[40rem]',
        'full': 'w-full'
    } %}
{% else %}
    {% set sizeClasses = {
        'sm': 'max-w-sm',
        'md': 'max-w-md',
        'lg': 'max-w-lg',
        'xl': 'max-w-xl',
        '2xl': 'max-w-2xl',
        'full': 'max-w-full mx-4'
    } %}
{% endif %}

{# Classes du modal/panel #}
{% if isSidePanel %}
    {% set positionClasses = position == 'right' ? 'right-0' : 'left-0' %}
    {% set modalClasses = [
        'h-full bg-white shadow-xl overflow-hidden flex flex-col',
        sizeClasses[size] ?? sizeClasses['md'],
        positionClasses,
        class
    ]|join(' ')|trim %}
{% else %}
    {% set modalClasses = [
        'w-full bg-white rounded-xl shadow-xl overflow-hidden',
        sizeClasses[size] ?? sizeClasses['md'],
        class
    ]|join(' ')|trim %}
{% endif %}

{# ============================================================================
   RENDU HTML
   ============================================================================ #}

{# Overlay + Container #}
<div
    id="{{ id }}"
    class="fixed inset-0 z-50 hidden"
    role="dialog"
    aria-modal="true"
    aria-labelledby="{{ id }}-title"
    {% if isSidePanel %}data-position="{{ position }}"{% endif %}
>
    {# Backdrop #}
    <div
        class="fixed inset-0 bg-black/50 backdrop-blur-sm transition-opacity"
        {% if closeOnOverlay %}onclick="closeModal('{{ id }}')"{% endif %}
    ></div>

    {# Modal/Panel container #}
    {% if isSidePanel %}
        {# Side Panel mode #}
        <div class="fixed inset-y-0 {{ position == 'right' ? 'right-0' : 'left-0' }} flex">
            <div class="{{ modalClasses }}" onclick="event.stopPropagation()">
    {% else %}
        {# Center Modal mode #}
        <div class="fixed inset-0 overflow-y-auto">
            <div class="flex min-h-full items-center justify-center p-4">
                <div class="{{ modalClasses }}" onclick="event.stopPropagation()">
    {% endif %}

                {# ----- Header ----- #}
                {% if title or icon or closable %}
                    <div class="px-6 py-4 border-b {{ vConfig ? vConfig.headerBorder : 'border-gray-100' }} flex items-start justify-between gap-4">
                        <div class="flex items-start gap-3">
                            {% if icon %}
                                <div class="w-10 h-10 rounded-lg {{ iconBg }} flex items-center justify-center flex-shrink-0">
                                    {% include '_atoms/icon/icon.html.twig' with {
                                        name: icon,
                                        size: 'md',
                                        color: iconColor
                                    } only %}
                                </div>
                            {% endif %}
                            <div>
                                {% if title %}
                                    <h2 id="{{ id }}-title" class="text-lg font-semibold text-gray-900">{{ title }}</h2>
                                {% endif %}
                                {% if subtitle %}
                                    <p class="text-sm text-gray-500 mt-0.5">{{ subtitle }}</p>
                                {% endif %}
                            </div>
                        </div>
                        {% if closable %}
                            {% include '_atoms/close-button/close-button.html.twig' with {
                                attr: { onclick: "closeModal('" ~ id ~ "')" }
                            } only %}
                        {% endif %}
                    </div>
                {% endif %}

                {# ----- Body ----- #}
                <div class="px-6 py-4 {{ isSidePanel ? 'flex-1 overflow-y-auto' : '' }}">
                    {% block body %}{% endblock %}
                </div>

                {# ----- Footer ----- #}
                {% if actionLabel %}
                    {# Footer automatique si actionLabel est defini #}
                    <div class="px-6 py-4 border-t border-gray-100 bg-gray-50 flex items-center justify-between {{ isSidePanel ? 'mt-auto' : '' }}">
                        {% if cancelLabel %}
                            {% include '_atoms/button/button.html.twig' with {
                                label: cancelLabel,
                                variant: 'ghost',
                                size: 'lg',
                                attr: { onclick: "closeModal('" ~ id ~ "')", type: 'button' }
                            } only %}
                        {% endif %}
                        {% if actionUrl %}
                            {# Bouton qui soumet un formulaire ou navigue #}
                            {% include '_atoms/button/button.html.twig' with {
                                label: actionLabel,
                                variant: vConfig ? vConfig.buttonVariant : 'primary',
                                size: 'lg',
                                icon: actionIcon,
                                type: 'submit',
                                attr: { form: id ~ '-form' }
                            } only %}
                        {% else %}
                            {% include '_atoms/button/button.html.twig' with {
                                label: actionLabel,
                                variant: vConfig ? vConfig.buttonVariant : 'primary',
                                size: 'lg',
                                icon: actionIcon,
                                attr: { onclick: "closeModal('" ~ id ~ "')", type: 'button' }
                            } only %}
                        {% endif %}
                    </div>
                {% elseif block('footer') is defined %}
                    {# Footer personnalise via block #}
                    <div class="px-6 py-4 border-t border-gray-100 bg-gray-50 flex items-center justify-between {{ isSidePanel ? 'mt-auto' : '' }}">
                        {{ block('footer') }}
                    </div>
                {% endif %}

            </div>
        {% if isSidePanel %}
        </div>
        {% else %}
            </div>
        </div>
        {% endif %}
</div>

{# ============================================================================
   JAVASCRIPT HELPERS (inline pour autonomie)
   ============================================================================ #}
<script>
    if (typeof window.openModal === 'undefined') {
        window.openModal = function(id) {
            const modal = document.getElementById(id);
            if (modal) {
                modal.classList.remove('hidden');
                document.body.style.overflow = 'hidden';
                // Focus le premier input si present
                setTimeout(() => {
                    const input = modal.querySelector('input:not([type="hidden"]), textarea, select');
                    if (input) input.focus();
                }, 100);
            }
        };

        window.closeModal = function(id) {
            const modal = document.getElementById(id);
            if (modal) {
                modal.classList.add('hidden');
                document.body.style.overflow = '';
            }
        };

        // Fermer avec Escape
        document.addEventListener('keydown', function(e) {
            if (e.key === 'Escape') {
                const modals = document.querySelectorAll('[role="dialog"]:not(.hidden)');
                modals.forEach(modal => closeModal(modal.id));
            }
        });
    }
</script>