/**
 * Animaciones modernas para TRAUMA 2025
 * Agrega efectos visuales suaves y profesionales para mejorar la experiencia del usuario
 */

document.addEventListener('DOMContentLoaded', function() {
  // Variables para animaciones
  let animationsEnabled = true;
  const reduceMotion = window.matchMedia('(prefers-reduced-motion: reduce)').matches;
  
  // Respetar preferencia de usuario para reducir movimiento
  if (reduceMotion) {
    animationsEnabled = false;
    document.body.classList.add('reduce-motion');
  }
  
  // Función para animar entrada de elementos cuando son visibles
  function setupScrollAnimations() {
    if (!animationsEnabled) return;
    
    const animatedElements = document.querySelectorAll('.form-group, .author-card, .deadline, .author-note');
    
    // Configuración del observador
    const observerOptions = {
      root: null,
      rootMargin: '0px',
      threshold: 0.1
    };
    
    // Callback cuando los elementos se vuelven visibles
    const observerCallback = (entries, observer) => {
      entries.forEach(entry => {
        if (entry.isIntersecting) {
          entry.target.classList.add('animate-in');
          observer.unobserve(entry.target); // Dejar de observar una vez animado
        }
      });
    };
    
    // Crear el observer
    const observer = new IntersectionObserver(observerCallback, observerOptions);
    
    // Observar todos los elementos animados
    animatedElements.forEach((element, index) => {
      // Agregar clase para la animación
      element.classList.add('will-animate');
      // Agregar delay escalonado
      element.style.animationDelay = `${index * 0.1}s`;
      // Empezar a observar
      observer.observe(element);
    });
  }
  
  // Función para animaciones de navegación entre secciones
  function setupNavAnimations() {
    const navButtons = document.querySelectorAll('.btn-next, .btn-prev');
    
    navButtons.forEach(button => {
      button.addEventListener('click', function(e) {
        if (!animationsEnabled) return; // Salir si las animaciones están deshabilitadas
        
        e.preventDefault();
        
        // Identificar secciones
        const currentSection = this.closest('.form-section');
        let targetSectionNum;
        
        if (this.classList.contains('btn-next')) {
          targetSectionNum = parseInt(this.getAttribute('data-next'), 10);
        } else {
          targetSectionNum = parseInt(this.getAttribute('data-prev'), 10);
        }
        
        if (!isNaN(targetSectionNum)) {
          // Animar salida de la sección actual
          currentSection.classList.add('animate-out');
          
          // Esperar a que termine la animación de salida
          setTimeout(() => {
            // Ocultar sección actual
            currentSection.classList.remove('active', 'animate-out');
            
            // Mostrar y animar entrada de la sección objetivo
            const targetSection = document.querySelector(`.form-section[data-section="${targetSectionNum}"]`);
            if (targetSection) {
              targetSection.classList.add('active', 'animate-in');
              
              // Actualizar indicadores de progreso con animación
              updateProgressWithAnimation(targetSectionNum);
              
              // Limpiar clase de animación después de completarse
              setTimeout(() => {
                targetSection.classList.remove('animate-in');
              }, 800);
            }
          }, 300);
        }
      });
    });
  }
  
  // Función para animar la actualización de los indicadores de progreso
  function updateProgressWithAnimation(activeStep) {
    // Animar círculos de paso
    const progressSteps = document.querySelectorAll('.step');
    if (progressSteps.length > 0) {
      progressSteps.forEach(step => {
        const stepNum = parseInt(step.getAttribute('data-step'), 10);
        
        // Limpiar clases primero
        step.classList.remove('active', 'completed', 'animate-step');
        
        // Asignar nuevas clases con animación
        if (stepNum === activeStep) {
          setTimeout(() => {
            step.classList.add('active', 'animate-step');
          }, 100);
        } else if (stepNum < activeStep) {
          setTimeout(() => {
            step.classList.add('completed', 'animate-step');
          }, 100 + (stepNum * 50)); // Delay escalonado
        }
      });
    }
    
    // Animar barra de progreso
    const progressFill = document.querySelector('.progress-fill');
    if (progressFill) {
      const totalSteps = document.querySelectorAll('.step').length;
      const progressPercentage = (((activeStep - 1) / (totalSteps - 1)) * 100) || 0;
      
      // Animación de la barra
      progressFill.style.transition = 'width 0.8s cubic-bezier(0.4, 0, 0.2, 1)';
      progressFill.style.width = `${progressPercentage}%`;
    }
  }
  
  // Función para animar elementos con hover
  function setupHoverAnimations() {
    if (!animationsEnabled) return;
    
    // Animación para tarjetas de autor
    document.querySelectorAll('.author-card').forEach(card => {
      card.addEventListener('mouseenter', function() {
        this.style.transform = 'translateY(-5px)';
        this.style.boxShadow = '0 15px 30px rgba(0, 0, 0, 0.1)';
      });
      
      card.addEventListener('mouseleave', function() {
        this.style.transform = '';
        this.style.boxShadow = '';
      });
    });
    
    // Animación para botones
    document.querySelectorAll('.btn').forEach(btn => {
      btn.addEventListener('mouseenter', function() {
        if (this.querySelector('i')) {
          this.querySelector('i').style.transform = 'scale(1.2)';
        }
      });
      
      btn.addEventListener('mouseleave', function() {
        if (this.querySelector('i')) {
          this.querySelector('i').style.transform = '';
        }
      });
    });
  }
  
  // Función para animar el indicador de progreso de palabras
  function setupWordCounterAnimations() {
    if (!animationsEnabled) return;
    
    document.querySelectorAll('textarea').forEach(textarea => {
      textarea.addEventListener('input', function() {
        const wordCount = this.closest('.form-group').querySelector('.word-count');
        if (wordCount && wordCount.querySelector('.progress')) {
          wordCount.querySelector('.progress').classList.add('animate-progress');
          
          setTimeout(() => {
            wordCount.querySelector('.progress').classList.remove('animate-progress');
          }, 500);
        }
      });
    });
  }
  
  // Animación de carga inicial
  function setupInitialAnimation() {
    if (!animationsEnabled) return;
    
    // Animación de entrada para el header
    const header = document.querySelector('header');
    if (header) {
      header.style.opacity = '0';
      header.style.transform = 'translateY(-20px)';
      
      setTimeout(() => {
        header.style.transition = 'opacity 0.8s ease, transform 0.8s ease';
        header.style.opacity = '1';
        header.style.transform = 'translateY(0)';
      }, 100);
    }
    
    // Animación para la barra de progreso
    const progressContainer = document.querySelector('.progress-container');
    if (progressContainer) {
      progressContainer.style.opacity = '0';
      progressContainer.style.transform = 'translateY(20px)';
      
      setTimeout(() => {
        progressContainer.style.transition = 'opacity 0.8s ease, transform 0.8s ease';
        progressContainer.style.opacity = '1';
        progressContainer.style.transform = 'translateY(0)';
      }, 300);
    }
    
    // Animación para la primera sección
    const firstSection = document.querySelector('.form-section.active');
    if (firstSection) {
      firstSection.style.opacity = '0';
      firstSection.style.transform = 'translateY(20px)';
      
      setTimeout(() => {
        firstSection.style.transition = 'opacity 0.8s ease, transform 0.8s ease';
        firstSection.style.opacity = '1';
        firstSection.style.transform = 'translateY(0)';
      }, 500);
    }
  }
  
  // Función para mostrar efectos de partículas en eventos de éxito (opcional)
  function createSuccessParticles() {
    // Solo si está disponible la librería canvas-confetti
    if (window.confetti) {
      confetti({
        particleCount: 100,
        spread: 70,
        origin: { y: 0.6 }
      });
    }
  }
  
  // Agregar efecto de onda al hacer clic en botones (Ripple Effect)
  function setupRippleEffect() {
    if (!animationsEnabled) return;
    
    const buttons = document.querySelectorAll('.btn');
    
    buttons.forEach(button => {
      button.addEventListener('click', function(e) {
        const rect = button.getBoundingClientRect();
        const x = e.clientX - rect.left;
        const y = e.clientY - rect.top;
        
        const ripple = document.createElement('span');
        ripple.className = 'ripple-effect';
        ripple.style.left = `${x}px`;
        ripple.style.top = `${y}px`;
        
        this.appendChild(ripple);
        
        setTimeout(() => {
          ripple.remove();
        }, 600);
      });
    });
  }
  
  // Inicializar todas las animaciones
  function initAnimations() {
    setupScrollAnimations();
    setupNavAnimations();
    setupHoverAnimations();
    setupWordCounterAnimations();
    setupInitialAnimation();
    setupRippleEffect();
    
    // Agregar estilos para animaciones específicas (si no están en CSS)
    addAnimationStyles();
  }
  
  // Agregar estilos para animaciones
  function addAnimationStyles() {
    const styleElement = document.createElement('style');
    styleElement.textContent = `
      /* Animación para elementos al entrar en viewport */
      .will-animate {
        opacity: 0;
        transform: translateY(20px);
        transition: opacity 0.6s ease, transform 0.6s ease;
      }
      
      .animate-in {
        opacity: 1 !important;
        transform: translateY(0) !important;
      }
      
      /* Animación para salida de secciones */
      .animate-out {
        opacity: 0 !important;
        transform: translateY(-20px) !important;
        transition: opacity 0.3s ease, transform 0.3s ease !important;
      }
      
      /* Animación para contador de palabras */
      .animate-progress {
        transition: width 0.5s cubic-bezier(0.4, 0, 0.2, 1) !important;
      }
      
      /* Efecto Ripple para botones */
      .btn {
        position: relative;
        overflow: hidden;
      }
      
      .ripple-effect {
        position: absolute;
        border-radius: 50%;
        background-color: rgba(255, 255, 255, 0.4);
        width: 100px;
        height: 100px;
        margin-left: -50px;
        margin-top: -50px;
        animation: ripple 0.6s linear;
        opacity: 0;
      }
      
      @keyframes ripple {
        0% {
          transform: scale(0);
          opacity: 0.5;
        }
        100% {
          transform: scale(4);
          opacity: 0;
        }
      }
      
      /* Animación para pasos de progreso */
      .animate-step {
        transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1) !important;
      }
      
      /* Para usuarios que prefieren reducir el movimiento */
      .reduce-motion * {
        transition: none !important;
        animation: none !important;
      }
    `;
    
    document.head.appendChild(styleElement);
  }
  
  // Inicializar animaciones cuando el documento esté listo
  initAnimations();
});