/**
 * Animations Helper - Semana 3
 * Funciones JavaScript para manejar animaciones dinámicas
 */

// Toast Notifications
const showToast = (message, type = 'info', duration = 3000) => {
    const toast = document.createElement('div');
    toast.className = `toast-notification toast-${type}`;
    
    const icon = {
        success: 'bi-check-circle-fill',
        error: 'bi-x-circle-fill',
        info: 'bi-info-circle-fill',
        warning: 'bi-exclamation-triangle-fill'
    }[type] || 'bi-info-circle-fill';
    
    toast.innerHTML = `
        <i class="bi ${icon}" style="font-size: 1.5rem; color: var(--accent-${type === 'success' ? 'green' : type === 'error' ? 'red' : type === 'warning' ? 'orange' : 'blue'});"></i>
        <span>${message}</span>
    `;
    
    document.body.appendChild(toast);
    
    setTimeout(() => {
        toast.classList.add('toast-hide');
        setTimeout(() => toast.remove(), 500);
    }, duration);
};

// Scroll Animations
const initScrollAnimations = () => {
    const elements = document.querySelectorAll('.scroll-fade-in');
    
    const observer = new IntersectionObserver((entries) => {
        entries.forEach(entry => {
            if (entry.isIntersecting) {
                entry.target.classList.add('visible');
            }
        });
    }, {
        threshold: 0.1
    });
    
    elements.forEach(el => observer.observe(el));
};

// Form Validation con Animaciones
const animateFormValidation = (input, isValid) => {
    if (isValid) {
        input.classList.remove('is-invalid');
        input.classList.add('is-valid');
    } else {
        input.classList.remove('is-valid');
        input.classList.add('is-invalid');
        input.classList.add('animate-shake');
        setTimeout(() => input.classList.remove('animate-shake'), 500);
    }
};

// Loading State
const showLoading = (element, type = 'spinner') => {
    const originalContent = element.innerHTML;
    element.dataset.originalContent = originalContent;
    element.disabled = true;
    
    if (type === 'spinner') {
        element.innerHTML = `
            <span class="spinner-border spinner-border-sm me-2" role="status"></span>
            Cargando...
        `;
    } else if (type === 'dots') {
        element.innerHTML = `
            <span class="spinner-dots">
                <span></span>
                <span></span>
                <span></span>
            </span>
        `;
    }
};

const hideLoading = (element) => {
    if (element.dataset.originalContent) {
        element.innerHTML = element.dataset.originalContent;
        delete element.dataset.originalContent;
        element.disabled = false;
    }
};

// Ripple Effect en Botones
const addRippleEffect = (button) => {
    button.classList.add('btn-ripple');
    
    button.addEventListener('click', function(e) {
        const ripple = document.createElement('span');
        ripple.classList.add('ripple');
        
        const rect = this.getBoundingClientRect();
        const size = Math.max(rect.width, rect.height);
        const x = e.clientX - rect.left - size / 2;
        const y = e.clientY - rect.top - size / 2;
        
        ripple.style.width = ripple.style.height = size + 'px';
        ripple.style.left = x + 'px';
        ripple.style.top = y + 'px';
        
        this.appendChild(ripple);
        
        setTimeout(() => ripple.remove(), 600);
    });
};

// Inicializar animaciones al cargar la página
document.addEventListener('DOMContentLoaded', () => {
    // Inicializar scroll animations
    initScrollAnimations();
    
    // Agregar ripple effect a todos los botones primarios
    document.querySelectorAll('.btn-primary, .btn-success, .btn-info').forEach(btn => {
        addRippleEffect(btn);
    });
    
    // Animar elementos con clase animate-on-load
    document.querySelectorAll('.animate-on-load').forEach((el, index) => {
        el.style.animationDelay = `${index * 0.1}s`;
        el.classList.add('animate-fade-in-up');
    });
});

// Exportar funciones para uso global
window.showToast = showToast;
window.animateFormValidation = animateFormValidation;
window.showLoading = showLoading;
window.hideLoading = hideLoading;
window.addRippleEffect = addRippleEffect;
