src/ui/modal.js

/**
 * Modal Component - Custom confirmation and alert dialogs
 */

/**
 * Show confirmation modal
 * @param {string} message - The confirmation message
 * @param {string} title - Optional title (defaults to "Confirm")
 * @returns {Promise<boolean>} - Resolves to true if OK clicked, false if Cancel clicked
 */
export function showConfirmModal(message, title = 'Confirm') {
    return new Promise((resolve) => {
        // Create modal overlay
        const overlay = document.createElement('div');
        overlay.className = 'modal-overlay';
        
        // Create modal container
        const modal = document.createElement('div');
        modal.className = 'modal-container';
        
        // Create modal content
        modal.innerHTML = `
            <div class="modal-header">
                <h3 class="modal-title">${title}</h3>
            </div>
            <div class="modal-body">
                <p class="modal-message">${message}</p>
            </div>
            <div class="modal-footer">
                <button class="btn btn-secondary modal-cancel-btn">Cancel</button>
                <button class="btn btn-primary modal-ok-btn">OK</button>
            </div>
        `;
        
        overlay.appendChild(modal);
        document.body.appendChild(overlay);
        
        // Add animation
        setTimeout(() => {
            overlay.classList.add('active');
            modal.classList.add('active');
        }, 10);
        
        // Handle button clicks
        const okBtn = modal.querySelector('.modal-ok-btn');
        const cancelBtn = modal.querySelector('.modal-cancel-btn');
        
        const closeModal = (result) => {
            overlay.classList.remove('active');
            modal.classList.remove('active');
            
            setTimeout(() => {
                document.body.removeChild(overlay);
                resolve(result);
            }, 300);
        };
        
        okBtn.addEventListener('click', () => closeModal(true));
        cancelBtn.addEventListener('click', () => closeModal(false));
        
        // Close on overlay click
        overlay.addEventListener('click', (e) => {
            if (e.target === overlay) {
                closeModal(false);
            }
        });
        
        // Close on Escape key
        const handleEscape = (e) => {
            if (e.key === 'Escape') {
                closeModal(false);
                document.removeEventListener('keydown', handleEscape);
            }
        };
        document.addEventListener('keydown', handleEscape);
    });
}

/**
 * Show alert modal
 * @param {string} message - The alert message
 * @param {string} title - Optional title (defaults to "Alert")
 * @returns {Promise<void>}
 */
export function showAlertModal(message, title = 'Alert') {
    return new Promise((resolve) => {
        // Create modal overlay
        const overlay = document.createElement('div');
        overlay.className = 'modal-overlay';
        
        // Create modal container
        const modal = document.createElement('div');
        modal.className = 'modal-container';
        
        // Create modal content
        modal.innerHTML = `
            <div class="modal-header">
                <h3 class="modal-title">${title}</h3>
            </div>
            <div class="modal-body">
                <p class="modal-message">${message}</p>
            </div>
            <div class="modal-footer">
                <button class="btn btn-primary modal-ok-btn">OK</button>
            </div>
        `;
        
        overlay.appendChild(modal);
        document.body.appendChild(overlay);
        
        // Add animation
        setTimeout(() => {
            overlay.classList.add('active');
            modal.classList.add('active');
        }, 10);
        
        // Handle button click
        const okBtn = modal.querySelector('.modal-ok-btn');
        
        const closeModal = () => {
            overlay.classList.remove('active');
            modal.classList.remove('active');
            
            setTimeout(() => {
                document.body.removeChild(overlay);
                resolve();
            }, 300);
        };
        
        okBtn.addEventListener('click', closeModal);
        
        // Close on overlay click
        overlay.addEventListener('click', (e) => {
            if (e.target === overlay) {
                closeModal();
            }
        });
        
        // Close on Escape key
        const handleEscape = (e) => {
            if (e.key === 'Escape') {
                closeModal();
                document.removeEventListener('keydown', handleEscape);
            }
        };
        document.addEventListener('keydown', handleEscape);
    });
}