// modals/default/modal_default.js
(function() {
    // Assure que l'objet global existe
    window.ModalTemplates = window.ModalTemplates || {};

    const templateName = 'default'; // Nom de ce template

    // Fonction pour ouvrir CETTE modale spécifique
    function openDefaultModal(modalElement, triggerElement) {
        console.log(`Opening ${templateName} modal:`, modalElement.id);

        modalElement._triggerElement = triggerElement;

        modalElement.style.display = 'flex';
        void modalElement.offsetWidth; // Force reflow
        modalElement.classList.add('show'); // Déclenche l'animation d'apparition (opacity, transform)

        // NOUVEAU: Appliquer la classe pour le backdrop-filter après un court délai
        // Ce délai doit être suffisant pour que la modale soit opacity:1 et transform:scale(1)
        // mais AVANT que le contenu (modal-content) ne devienne visible.
        // La transition CSS du dialog est de 0.3s / 0.35s.
        // Le contenu apparaît après 0.15s (voir CSS V2.5).
        // Donc, on applique le filtre disons à 0.05s (50ms), pendant que le dialog est encore en transition mais existe.
        setTimeout(() => {
            if (modalElement.classList.contains('show')) { // Vérifier si elle est toujours en train de s'ouvrir
                modalElement.classList.add('backdrop-filter-active');
                 console.log(`Modal ${modalElement.id}: Class 'backdrop-filter-active' added.`);
            }
        }, 50); // 50ms delay

        const focusableElements = modalElement.querySelectorAll(
             'button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])'
         );
         const firstFocusable = focusableElements.length > 0 ? focusableElements[0] : modalElement.querySelector('.modal-close');
         if (firstFocusable) {
             firstFocusable.focus();
         }
    }

    // Fonction pour fermer CETTE modale spécifique
    function closeDefaultModal(modalElement) {
        if (!modalElement || !modalElement.classList.contains('show')) {
            console.log(`Closing ${templateName} modal: ${modalElement ? modalElement.id : 'null'} - not visible or already closing.`);
            return;
        }
        console.log(`Closing ${templateName} modal:`, modalElement.id);

        const instanceId = modalElement.id;
        const widgetName = modalElement.dataset.widgetName;

        // Retirer la classe pour le backdrop-filter immédiatement pour qu'il disparaisse avec le reste
        modalElement.classList.remove('backdrop-filter-active');
        modalElement.classList.remove('show'); // Déclencher l'animation CSS de disparition

        const removeElementAndDispatch = () => {
             if (modalElement.parentNode) {
                 modalElement.remove();
                 console.log('Modal element removed from DOM:', instanceId);
                 document.dispatchEvent(new CustomEvent('jeguesstonrank:modal:removed_from_dom', {
                     bubbles: true,
                     detail: { modalId: instanceId, template: templateName, widgetName: widgetName }
                 }));
             }
         };

        modalElement.addEventListener('transitionend', function handleTransitionEnd(event) {
             if (event.target === modalElement && (event.propertyName === 'opacity' || event.propertyName === 'transform')) {
                modalElement.removeEventListener('transitionend', handleTransitionEnd);
                removeElementAndDispatch();
             }
        }, { once: false });

         setTimeout(() => {
             if (modalElement.parentNode) {
                 console.warn(`Fallback for ${instanceId}: Removing modal element after timeout (transitionend might not have fired).`);
                 removeElementAndDispatch();
             }
         }, 500);
    }

    window.ModalTemplates[templateName] = {
        open: openDefaultModal,
        close: closeDefaultModal
    };

    console.log(`Modal template functions registered for "${templateName}"`);

})();