// modals/slide_in_right/modal_slide_in_right.js
(function() {
    'use strict';

    if (!window.ModalTemplates) {
        window.ModalTemplates = {};
    }

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

    // Fonction pour ouvrir/afficher la modale
    function openSlideInRightModal(modalElement) {
        console.log(`[ModalSlideInRight.js] Opening modal: ${modalElement.id}`);

        const dialog = modalElement.querySelector('.modal-dialog');
        const backdrop = modalElement.querySelector('.modal-backdrop');
        const closeButton = modalElement.querySelector('.modal-close');
        const sizeToggleButton = modalElement.querySelector('.modal-toggle-size');

        // Afficher l'élément et démarrer l'animation
        modalElement.style.display = 'flex'; // La modale elle-même est display: flex
        requestAnimationFrame(() => { // Laisse le temps au display:flex de s'appliquer
            modalElement.classList.add('show'); // Déclenche l'animation CSS
        });


        // --- Gestionnaire pour le changement de taille ---
        // Ce listener est géré par ce fichier de template.
        const toggleSize = () => {
            const isSmall = modalElement.classList.contains('modal-size-small');
            const sizeIcon = sizeToggleButton.querySelector('i');
            if (isSmall) {
                modalElement.classList.remove('modal-size-small');
                modalElement.classList.add('modal-size-large');
                if(sizeIcon) sizeIcon.className = 'fas fa-compress-alt fa-fw'; // Changer icône
            } else {
                modalElement.classList.remove('modal-size-large');
                modalElement.classList.add('modal-size-small');
                 if(sizeIcon) sizeIcon.className = 'fas fa-expand-alt fa-fw'; // Revenir icône initiale
            }
        };
        // Attacher le handler SEULEMENT si le bouton existe
        if (sizeToggleButton) {
            sizeToggleButton.addEventListener('click', toggleSize);
            // Stocker la référence pour pouvoir la retirer à la fermeture
            modalElement._toggleSizeHandler = toggleSize; 
        }

        // Focus trapping - Mettre le focus sur un élément dans la modale (le retour est géré par modal_manager.js)
        if(closeButton) closeButton.focus();

        // L'événement 'jeguesstonrank:modal:opened' est géré par modal_manager.js si nécessaire.
    }

    // Fonction pour fermer/cacher la modale
    function closeSlideInRightModal(modalElement) {
        // Vérifier si la modale est déjà en cours de fermeture ou non ouverte.
        // La gestion de cette vérification est principalement faite dans modal_manager.js.
        if (!modalElement.classList.contains('show') && getComputedStyle(modalElement).display === 'none') {
            console.log(`[ModalSlideInRight.js] Modal ${modalElement.id} already effectively closed. Aborting internal close.`);
            return;
        }

        console.log(`[ModalSlideInRight.js] Closing modal: ${modalElement.id}`);

        // --- Retirer les écouteurs spécifiques à ce template ---
        // Ceux-ci ne sont plus attachés ici, seulement le toggleSizeHandler
        const sizeToggleButton = modalElement.querySelector('.modal-toggle-size');
        if (sizeToggleButton && modalElement._toggleSizeHandler) {
             sizeToggleButton.removeEventListener('click', modalElement._toggleSizeHandler);
             modalElement._toggleSizeHandler = null; // Nettoyer la référence
        }

        // Lancer l'animation de fermeture
        modalElement.classList.remove('show'); // Retire la classe pour déclencher l'animation CSS

        // Supprimer l'élément du DOM après la fin de l'animation
        // et dispatcher l'événement 'removed_from_dom'
        const instanceId = modalElement.id;
        const widgetName = modalElement.dataset.widgetName;

        const removeElementAndDispatch = () => {
            if (document.body.contains(modalElement)) { // S'assurer que l'élément est toujours dans le DOM
                modalElement.remove(); // <<-- RETRAIT CRUCIAL DE L'ÉLÉMENT DU DOM
                // Dispatcher l'événement APRÈS que l'élément a été retiré
                document.dispatchEvent(new CustomEvent('jeguesstonrank:modal:removed_from_dom', {
                    detail: { modalId: instanceId, widgetName: widgetName }
                }));
                console.log(`[ModalSlideInRight.js] Event 'removed_from_dom' dispatché pour ${instanceId}.`);
            } else {
                // Si l'élément est déjà retiré du DOM, dispatcher par sécurité
                console.warn(`[ModalSlideInRight.js] Modal ${instanceId} déjà retirée du DOM. Dispatching 'removed_from_dom' par sécurité.`);
                document.dispatchEvent(new CustomEvent('jeguesstonrank:modal:removed_from_dom', {
                    detail: { modalId: instanceId, widgetName: widgetName }
                }));
            }
            // Le retour du focus est géré par modal_manager.js après la suppression
        };

        // Calculer la durée de transition/animation la plus longue pour un retrait propre
        let transitionDuration = 0;
        // L'animation de slide-in-right est sur .modal-dialog
        const dialogElement = modalElement.querySelector('.modal-dialog');
        if (dialogElement) {
            const computedStyle = getComputedStyle(dialogElement);
            const transitionDurations = computedStyle.transitionDuration.split(',').map(s => parseFloat(s.replace('s','')) * 1000);
            const animationDurations = computedStyle.animationDuration.split(',').map(s => parseFloat(s.replace('s','')) * 1000);
            transitionDuration = Math.max(0, ...transitionDurations, ...animationDurations);
        }
        
        if (transitionDuration > 0 && isFinite(transitionDuration)) {
            setTimeout(removeElementAndDispatch, transitionDuration + 50); // Attendre la fin de la transition + marge
        } else {
            removeElementAndDispatch(); // Retrait immédiat si pas de transition
        }
    }

    // Enregistrer les fonctions pour ce template dans le namespace global
    window.ModalTemplates[templateName] = {
        open: openSlideInRightModal,
        close: closeSlideInRightModal
    };

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

})();