// Modal elements
let modal;
let closeModalBtn;
let escapeKeyHandler;

// Animation observer
let animationObserver;

function init() {
  console.log('Arreglos florales JavaScript initialized');
  
  // Initialize modal functionality
  initModal();
  
  // Initialize smooth scroll for anchor links with a small delay to ensure DOM is ready
  setTimeout(() => {
    initSmoothScroll();
    interceptNavigationLinks();
    initScrollAnimations();
  }, 100);
}

function initModal() {
  // Get modal elements
  modal = document.getElementById('contactFormModal');
  closeModalBtn = document.getElementById('closeModal');
  
  if (!modal || !closeModalBtn) {
    console.log('Modal elements not found');
    return;
  }
  
  // Add event listener to close button
  closeModalBtn.addEventListener('click', closeModal);
  
  // Close modal when clicking outside
  modal.addEventListener('click', function(e) {
    if (e.target === modal) {
      closeModal();
    }
  });
  
  // Close modal with ESC key
  escapeKeyHandler = function(e) {
    if (e.key === 'Escape' && modal && modal.classList.contains('opacity-100')) {
      closeModal();
    }
  };
  document.addEventListener('keydown', escapeKeyHandler);
  
  // Handle form submission
  const form = document.getElementById('contactForm');
  if (form) {
    form.addEventListener('submit', handleFormSubmit);
  }
}

function interceptNavigationLinks() {
  console.log('Intercepting navigation links...');
  
  // Intercept links to /products and /services from header/footer
  // and redirect them to sections on this page instead
  const productLinks = document.querySelectorAll('a[href="/products"]');
  const serviceLinks = document.querySelectorAll('a[href="/services"]');
  
  console.log('Found product links to intercept:', productLinks.length);
  console.log('Found service links to intercept:', serviceLinks.length);
  
  productLinks.forEach(link => {
    link.addEventListener('click', function(e) {
      e.preventDefault();
      e.stopPropagation();
      
      console.log('Intercepted product link click');
      
      const galeriaSection = document.getElementById('galeria');
      if (galeriaSection) {
        const headerHeight = 80;
        const elementPosition = galeriaSection.offsetTop - headerHeight;
        
        window.scrollTo({
          top: elementPosition,
          behavior: 'smooth'
        });
        
        console.log('Scrolled to gallery section');
      }
    });
  });
  
  serviceLinks.forEach(link => {
    link.addEventListener('click', function(e) {
      e.preventDefault();
      e.stopPropagation();
      
      console.log('Intercepted service link click');
      
      const eventosSection = document.getElementById('eventos');
      if (eventosSection) {
        const headerHeight = 80;
        const elementPosition = eventosSection.offsetTop - headerHeight;
        
        window.scrollTo({
          top: elementPosition,
          behavior: 'smooth'
        });
        
        console.log('Scrolled to events section');
      }
    });
  });
}

function initSmoothScroll() {
  console.log('Initializing smooth scroll...');
  
  // Find all anchor links that start with # specifically for this page
  const anchorLinks = document.querySelectorAll('a[href="#galeria"], a[href="#eventos"]');
  
  console.log('Found anchor links:', anchorLinks.length);
  
  anchorLinks.forEach((link, index) => {
    console.log(`Link ${index + 1}: ${link.href} - Text: ${link.textContent.trim()}`);
    
    link.addEventListener('click', function(e) {
      e.preventDefault();
      e.stopPropagation();
      
      const targetId = this.getAttribute('href').substring(1);
      const targetSection = document.getElementById(targetId);
      
      console.log('Clicked link to:', targetId);
      console.log('Target section found:', !!targetSection);
      
      if (targetSection) {
        // Add a small offset for the header
        const headerHeight = 80;
        const elementPosition = targetSection.offsetTop - headerHeight;
        
        // Use window.scrollTo with smooth behavior
        window.scrollTo({
          top: elementPosition,
          behavior: 'smooth'
        });
        
        console.log('Scrolling to position:', elementPosition);
      } else {
        console.log('Target section not found for ID:', targetId);
      }
    });
  });
  
  console.log('Smooth scroll initialization complete');
}

function initScrollAnimations() {
  console.log('Initializing scroll animations...');
  
  // Add animation classes to elements
  addAnimationClasses();
  
  // Create intersection observer for animations
  animationObserver = new IntersectionObserver((entries) => {
    entries.forEach(entry => {
      if (entry.isIntersecting) {
        const element = entry.target;
        const animationType = element.dataset.animation || 'fade-in-up';
        
        // Remove the initial hidden classes
        element.classList.remove('opacity-0', 'translate-y-8', 'translate-x-8', '-translate-x-8', 'scale-95');
        
        // Add the visible/animated classes
        element.classList.add('opacity-100', 'translate-y-0', 'translate-x-0', 'scale-100');
        
        // Stop observing this element
        animationObserver.unobserve(element);
        
        console.log('Animated element:', animationType);
      }
    });
  }, {
    threshold: 0.1,
    rootMargin: '0px 0px -50px 0px'
  });
  
  // Observe all elements with animation classes
  const animatedElements = document.querySelectorAll('.animate-on-scroll');
  animatedElements.forEach(element => {
    animationObserver.observe(element);
  });
  
  console.log(`Observing ${animatedElements.length} elements for animation`);
}

function addAnimationClasses() {
  // Hero section elements (skip to avoid affecting existing animations)
  const heroSection = document.getElementById('spq5fkq');
  if (heroSection) {
    // Skip hero section as it might have its own animations
  }
  
  // Products section
  const productSection = document.getElementById('productos');
  if (productSection) {
    // Section header
    const sectionHeader = productSection.querySelector('.text-center.mb-16');
    if (sectionHeader) {
      sectionHeader.classList.add('animate-on-scroll', 'opacity-0', 'translate-y-8', 'transition-all', 'duration-800', 'ease-out');
      sectionHeader.dataset.animation = 'fade-in-up';
    }
    
    // Product cards
    const productCards = productSection.querySelectorAll('.grid > div');
    productCards.forEach((card, index) => {
      const delay = index * 200;
      card.classList.add('animate-on-scroll', 'opacity-0', 'translate-y-8', 'transition-all', 'duration-800', 'ease-out');
      card.style.transitionDelay = `${delay}ms`;
      card.dataset.animation = 'fade-in-up';
    });
    
    // Call to action
    const cta = productSection.querySelector('.text-center.bg-white');
    if (cta) {
      cta.classList.add('animate-on-scroll', 'opacity-0', 'translate-y-8', 'transition-all', 'duration-800', 'ease-out');
      cta.dataset.animation = 'fade-in-up';
    }
  }
  
  // Gallery section
  const gallerySection = document.getElementById('galeria');
  if (gallerySection) {
    // Section header
    const sectionHeader = gallerySection.querySelector('.text-center.mb-16');
    if (sectionHeader) {
      sectionHeader.classList.add('animate-on-scroll', 'opacity-0', 'translate-y-8', 'transition-all', 'duration-800', 'ease-out');
      sectionHeader.dataset.animation = 'fade-in-up';
    }
    
    // Gallery items
    const galleryItems = gallerySection.querySelectorAll('.grid > div');
    galleryItems.forEach((item, index) => {
      const delay = (index % 3) * 150;
      const animationType = index % 2 === 0 ? 'fade-in-left' : 'fade-in-right';
      
      if (animationType === 'fade-in-left') {
        item.classList.add('animate-on-scroll', 'opacity-0', '-translate-x-8', 'transition-all', 'duration-800', 'ease-out');
      } else {
        item.classList.add('animate-on-scroll', 'opacity-0', 'translate-x-8', 'transition-all', 'duration-800', 'ease-out');
      }
      
      item.style.transitionDelay = `${delay}ms`;
      item.dataset.animation = animationType;
    });
    
    // Stats section
    const statsSection = gallerySection.querySelector('.bg-white.rounded-2xl.p-8');
    if (statsSection) {
      statsSection.classList.add('animate-on-scroll', 'opacity-0', 'scale-95', 'transition-all', 'duration-800', 'ease-out');
      statsSection.dataset.animation = 'scale-in';
      
      // Individual stat items
      const statItems = statsSection.querySelectorAll('.text-center');
      statItems.forEach((stat, index) => {
        const delay = index * 100;
        stat.classList.add('animate-on-scroll', 'opacity-0', 'translate-y-8', 'transition-all', 'duration-600', 'ease-out');
        stat.style.transitionDelay = `${delay}ms`;
        stat.dataset.animation = 'fade-in-up';
      });
    }
    
    // Gallery CTA
    const galleryCta = gallerySection.querySelector('.text-center > h3');
    if (galleryCta && galleryCta.parentElement) {
      galleryCta.parentElement.classList.add('animate-on-scroll', 'opacity-0', 'translate-y-8', 'transition-all', 'duration-800', 'ease-out');
      galleryCta.parentElement.dataset.animation = 'fade-in-up';
    }
  }
  
  // Events section
  const eventsSection = document.getElementById('eventos');
  if (eventsSection) {
    // Section header
    const sectionHeader = eventsSection.querySelector('.text-center.mb-16');
    if (sectionHeader) {
      sectionHeader.classList.add('animate-on-scroll', 'opacity-0', 'translate-y-8', 'transition-all', 'duration-800', 'ease-out');
      sectionHeader.dataset.animation = 'fade-in-up';
    }
    
    // Service cards
    const serviceCards = eventsSection.querySelectorAll('.grid.grid-cols-1.md\\:grid-cols-2.lg\\:grid-cols-3 > div');
    serviceCards.forEach((card, index) => {
      const delay = index * 200;
      card.classList.add('animate-on-scroll', 'opacity-0', 'translate-y-8', 'transition-all', 'duration-800', 'ease-out');
      card.style.transitionDelay = `${delay}ms`;
      card.dataset.animation = 'fade-in-up';
    });
    
    // Process section
    const processSection = eventsSection.querySelector('.bg-white\\/5.backdrop-blur-sm');
    if (processSection) {
      processSection.classList.add('animate-on-scroll', 'opacity-0', 'translate-y-8', 'transition-all', 'duration-800', 'ease-out');
      processSection.dataset.animation = 'fade-in-up';
      
      // Process steps
      const processSteps = processSection.querySelectorAll('.grid > div');
      processSteps.forEach((step, index) => {
        const delay = index * 150;
        step.classList.add('animate-on-scroll', 'opacity-0', 'translate-y-8', 'transition-all', 'duration-600', 'ease-out');
        step.style.transitionDelay = `${delay}ms`;
        step.dataset.animation = 'fade-in-up';
      });
    }
    
    // Events CTA
    const eventsCta = eventsSection.querySelector('.text-center > h3');
    if (eventsCta && eventsCta.parentElement) {
      eventsCta.parentElement.classList.add('animate-on-scroll', 'opacity-0', 'translate-y-8', 'transition-all', 'duration-800', 'ease-out');
      eventsCta.parentElement.dataset.animation = 'fade-in-up';
    }
  }
}

function openContactModal() {
  console.log('Opening modal...');
  
  if (!modal) {
    console.log('Modal not found!');
    return;
  }
  
  // Show modal
  modal.classList.remove('opacity-0', 'invisible');
  modal.classList.add('opacity-100', 'visible');
  
  // Scale in animation
  const modalContent = modal.querySelector('.bg-white');
  if (modalContent) {
    modalContent.classList.remove('scale-95');
    modalContent.classList.add('scale-100');
  }
  
  // Prevent body scroll
  document.body.style.overflow = 'hidden';
  
  // Focus on first input
  const firstInput = modal.querySelector('input[type="text"]');
  if (firstInput) {
    setTimeout(() => firstInput.focus(), 300);
  }
  
  console.log('Modal opened successfully');
}

function closeModal() {
  if (!modal) return;
  
  console.log('Closing modal...');
  
  // Scale out animation
  const modalContent = modal.querySelector('.bg-white');
  if (modalContent) {
    modalContent.classList.remove('scale-100');
    modalContent.classList.add('scale-95');
  }
  
  // Hide modal after animation
  setTimeout(() => {
    modal.classList.remove('opacity-100', 'visible');
    modal.classList.add('opacity-0', 'invisible');
    
    // Restore body scroll
    document.body.style.overflow = '';
    
    // Reset form
    const form = document.getElementById('contactForm');
    if (form) {
      form.reset();
    }
  }, 200);
}

function handleFormSubmit(e) {
  // The form will be handled by Landingsite's built-in form handler
  // since it has data-landingsite-contact-form attribute
  
  console.log('Form submitted');
  
  // Show success feedback
  const submitBtn = e.target.querySelector('button[type="submit"]');
  if (submitBtn) {
    const originalHTML = submitBtn.innerHTML;
    submitBtn.innerHTML = '<i class="fas fa-check mr-2"></i>Enviado';
    submitBtn.disabled = true;
    
    setTimeout(() => {
      closeModal();
      
      // Reset button after modal closes
      setTimeout(() => {
        submitBtn.innerHTML = originalHTML;
        submitBtn.disabled = false;
      }, 500);
    }, 1500);
  }
}

function teardown() {
  // Remove modal event listeners
  if (closeModalBtn) {
    closeModalBtn.removeEventListener('click', closeModal);
  }
  
  if (escapeKeyHandler) {
    document.removeEventListener('keydown', escapeKeyHandler);
  }
  
  const form = document.getElementById('contactForm');
  if (form) {
    form.removeEventListener('submit', handleFormSubmit);
  }
  
  // Clean up animation observer
  if (animationObserver) {
    animationObserver.disconnect();
  }
  
  // Restore body scroll
  document.body.style.overflow = '';
}

// Make openContactModal available globally
window.openContactModal = openContactModal;

// Log when script loads
console.log('Arreglos florales script loaded');

// Export functions for the system
export { init, teardown };