/**
 * @file modal.js
 * @description Modal-dialoger för StatusNotifier Extension
 * 
 * Author: Linus Olofsson - Iver 
 * Date: 2025-07-03 
 * Last modified: Linus Olofsson (2025-07-03)
 * 
 * @purpose Hantera modal-dialoger
 * @invoked_by handlers/timerButton.js
 * @invokes Ingen
 */

// Modal-variabler
let activeModal = null;

// Visa modal
const showModal = (modalId) => {
    try {
        console.log(`Showing modal: ${modalId}`);
        
        // Hitta modal-elementet
        const modal = document.getElementById(modalId);
        if (!modal) {
            console.error(`Modal element not found: ${modalId}`);
            return;
        }
        
        // Visa modal
        modal.classList.remove('hidden');
        activeModal = modalId;
        
        // Lägg till event listener för att stänga modalen när man klickar utanför
        document.addEventListener('click', handleOutsideClick);
        
        // Lägg till event listener för Escape-tangenten
        document.addEventListener('keydown', handleEscapeKey);
    } catch (error) {
        console.error('Error showing modal:', error);
    }
};

// Dölj modal
const hideModal = (modalId) => {
    try {
        console.log(`Hiding modal: ${modalId || activeModal}`);
        
        // Använd angiven modalId eller aktiv modal
        const id = modalId || activeModal;
        if (!id) return;
        
        // Hitta modal-elementet
        const modal = document.getElementById(id);
        if (!modal) {
            console.error(`Modal element not found: ${id}`);
            return;
        }
        
        // Dölj modal
        modal.classList.add('hidden');
        
        // Återställ aktiv modal om det är den som stängs
        if (activeModal === id) {
            activeModal = null;
        }
        
        // Ta bort event listeners
        document.removeEventListener('click', handleOutsideClick);
        document.removeEventListener('keydown', handleEscapeKey);
    } catch (error) {
        console.error('Error hiding modal:', error);
    }
};

// Hantera klick utanför modalen
const handleOutsideClick = (event) => {
    if (!activeModal) return;
    
    const modal = document.getElementById(activeModal);
    if (!modal) return;
    
    // Hitta modal-innehållet
    const modalContent = modal.querySelector('.modal-content');
    if (!modalContent) return;
    
    // Stäng modalen om klicket var utanför modal-innehållet
    if (!modalContent.contains(event.target) && modal.contains(event.target)) {
        hideModal();
    }
};

// Hantera Escape-tangenten
const handleEscapeKey = (event) => {
    if (event.key === 'Escape' && activeModal) {
        hideModal();
    }
};

// Skapa en modal dynamiskt
const createModal = (options) => {
    try {
        const {
            id,
            title,
            content,
            buttons = []
        } = options;
        
        console.log(`Creating modal: ${id}`);
        
        // Skapa modal-element
        const modal = document.createElement('div');
        modal.id = id;
        modal.className = 'fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center hidden z-50';
        
        // Skapa modal-innehåll
        const modalContent = document.createElement('div');
        modalContent.className = 'modal-content bg-white p-6 rounded-lg shadow-lg max-w-md w-full';
        
        // Lägg till titel
        if (title) {
            const titleElement = document.createElement('h2');
            titleElement.className = 'text-xl font-bold mb-4';
            titleElement.textContent = title;
            modalContent.appendChild(titleElement);
        }
        
        // Lägg till innehåll
        if (typeof content === 'string') {
            const contentElement = document.createElement('div');
            contentElement.innerHTML = content;
            modalContent.appendChild(contentElement);
        } else if (content instanceof HTMLElement) {
            modalContent.appendChild(content);
        }
        
        // Lägg till knappar
        if (buttons.length > 0) {
            const buttonContainer = document.createElement('div');
            buttonContainer.className = 'flex justify-end mt-6 space-x-2';
            
            buttons.forEach(button => {
                const buttonElement = document.createElement('button');
                buttonElement.className = `px-4 py-2 rounded ${button.primary ? 'bg-blue-500 text-white' : 'bg-gray-300 text-gray-800'}`;
                buttonElement.textContent = button.text;
                
                if (button.onClick) {
                    buttonElement.addEventListener('click', button.onClick);
                }
                
                buttonContainer.appendChild(buttonElement);
            });
            
            modalContent.appendChild(buttonContainer);
        }
        
        // Lägg till modal-innehåll till modalen
        modal.appendChild(modalContent);
        
        // Lägg till modalen till body
        document.body.appendChild(modal);
        
        return id;
    } catch (error) {
        console.error('Error creating modal:', error);
        return null;
    }
};

// Exportera funktioner
export {
    showModal,
    hideModal,
    createModal
};
