// shared/public/js/notifications.js

/**
 * Muestra una notificación tipo "toast".
 * @param {string} message El mensaje a mostrar.
 * @param {string} type El tipo de notificación ('success', 'error', 'info').
 * @param {number} duration La duración en milisegundos.
 */
function showNotification(message, type = 'info', duration = 3000) {
    // Crear el contenedor de notificaciones si no existe
    let container = document.getElementById('notification-container');
    if (!container) {
        container = document.createElement('div');
        container.id = 'notification-container';
        document.body.appendChild(container);

        // Añadir estilos al head
        const style = document.createElement('style');
        style.innerHTML = `
            #notification-container {
                position: fixed;
                top: 20px;
                right: 20px;
                z-index: 9999;
                display: flex;
                flex-direction: column;
                gap: 10px;
            }
            .toast-notification {
                padding: 15px 20px;
                border-radius: 8px;
                box-shadow: 0 4px 12px rgba(0,0,0,0.15);
                color: white;
                font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
                font-size: 14px;
                opacity: 0;
                transform: translateX(100%);
                transition: all 0.5s cubic-bezier(0.68, -0.55, 0.27, 1.55);
            }
            .toast-notification.show {
                opacity: 1;
                transform: translateX(0);
            }
            .toast-notification.success { background-color: #28a745; }
            .toast-notification.error { background-color: #dc3545; }
            .toast-notification.info { background-color: #17a2b8; }
        `;
        document.head.appendChild(style);
    }

    const notification = document.createElement('div');
    notification.className = `toast-notification ${type}`;
    notification.textContent = message;

    container.appendChild(notification);

    // Trigger the animation
    setTimeout(() => {
        notification.classList.add('show');
    }, 10);

    // Hide and remove the notification after the duration
    setTimeout(() => {
        notification.classList.remove('show');
        setTimeout(() => {
            notification.remove();
            if (container.children.length === 0) {
                container.remove();
            }
        }, 500); // Wait for fade out animation
    }, duration);
}