// Global variables
let scrollHandler = null;

// Smooth scroll function
function scrollToSection(sectionId) {
  console.log('Scrolling to section:', sectionId);
  const targetElement = document.getElementById(sectionId);
  if (targetElement) {
    const headerHeight = 80;
    const elementPosition = targetElement.offsetTop - headerHeight;
    
    window.scrollTo({
      top: elementPosition,
      behavior: 'smooth'
    });
  }
}

// Contact modal function - opens the standardized contact modal
function openContactModal() {
  console.log('Opening contact modal');
  
  const modal = document.getElementById('contactFormModal');
  if (modal) {
    // Show modal with animation
    modal.classList.remove('opacity-0', 'invisible');
    modal.classList.add('opacity-100', 'visible');
    
    // Scale up the modal content
    const modalContent = modal.querySelector('div > div');
    if (modalContent) {
      modalContent.classList.remove('scale-95');
      modalContent.classList.add('scale-100');
    }
    
    // Prevent body scroll
    document.body.style.overflow = 'hidden';
  }
}

// Close contact modal
function closeContactModal() {
  console.log('Closing contact modal');
  
  const modal = document.getElementById('contactFormModal');
  if (modal) {
    // Hide modal with animation
    modal.classList.remove('opacity-100', 'visible');
    modal.classList.add('opacity-0', 'invisible');
    
    // Scale down the modal content
    const modalContent = modal.querySelector('div > div');
    if (modalContent) {
      modalContent.classList.remove('scale-100');
      modalContent.classList.add('scale-95');
    }
    
    // Restore body scroll
    document.body.style.overflow = '';
  }
}

// Phone call function
function callPhone(phoneNumber = '+52123456789') {
  window.location.href = `tel:${phoneNumber}`;
}

// Scroll animations
function initScrollAnimations() {
  console.log('🎬 Starting scroll animations...');
  
  // Function to check if element is in viewport
  function isElementInViewport(el) {
    const rect = el.getBoundingClientRect();
    const windowHeight = window.innerHeight || document.documentElement.clientHeight;
    const windowWidth = window.innerWidth || document.documentElement.clientWidth;
    
    return (
      rect.top < windowHeight * 0.8 &&
      rect.bottom > windowHeight * 0.1 &&
      rect.left < windowWidth &&
      rect.right > 0
    );
  }
  
  // Function to animate elements
  scrollHandler = function() {
    const elements = document.querySelectorAll('.scroll-animate:not(.animated)');
    
    elements.forEach((element) => {
      if (isElementInViewport(element)) {
        console.log(`✨ Animating element: ${element.tagName}`);
        
        const delay = parseInt(element.dataset.delay) || 0;
        
        setTimeout(() => {
          element.style.opacity = '1';
          element.style.transform = 'translateY(0) translateX(0) scale(1)';
          element.classList.add('animated');
        }, delay);
      }
    });
    
    // Check if we're done with all elements
    const remainingElements = document.querySelectorAll('.scroll-animate:not(.animated)');
    if (remainingElements.length === 0) {
      console.log('✅ All elements animated, removing scroll listener');
      window.removeEventListener('scroll', scrollHandler);
      window.removeEventListener('resize', scrollHandler);
    }
  };
  
  // Set initial styles for all scroll-animate elements
  const allElements = document.querySelectorAll('.scroll-animate');
  console.log(`Found ${allElements.length} elements to animate`);
  
  allElements.forEach((element, index) => {
    const animation = element.dataset.animation || 'fade-in-up';
    
    // Set initial styles
    element.style.opacity = '0';
    element.style.transition = 'all 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94)';
    element.style.willChange = 'opacity, transform';
    
    // Apply initial transform based on animation type
    switch(animation) {
      case 'fade-in-left':
        element.style.transform = 'translateX(-50px)';
        break;
      case 'fade-in-right':
        element.style.transform = 'translateX(50px)';
        break;
      case 'fade-in-up':
        element.style.transform = 'translateY(50px)';
        break;
      case 'fade-in-down':
        element.style.transform = 'translateY(-50px)';
        break;
      case 'scale-in':
        element.style.transform = 'scale(0.8) translateY(30px)';
        break;
      default:
        element.style.transform = 'translateY(50px)';
    }
  });
  
  // Initial check
  setTimeout(() => {
    console.log('🏃 Running initial animation check...');
    scrollHandler();
  }, 200);
  
  // Add scroll listeners
  window.addEventListener('scroll', scrollHandler, { passive: true });
  window.addEventListener('resize', scrollHandler, { passive: true });
  
  console.log('✅ Scroll animations initialized');
}

// Initialize modal event listeners
function initModalEventListeners() {
  // Close button
  const closeButton = document.getElementById('closeModal');
  if (closeButton) {
    closeButton.addEventListener('click', closeContactModal);
  }
  
  // Background click to close
  const modal = document.getElementById('contactFormModal');
  if (modal) {
    modal.addEventListener('click', (e) => {
      if (e.target === modal) {
        closeContactModal();
      }
    });
  }
  
  // Escape key to close
  document.addEventListener('keydown', (e) => {
    if (e.key === 'Escape') {
      closeContactModal();
    }
  });
}

// Export init function
export function init() {
  console.log('🚀 Initializing Muñecos Personalizados page...');
  
  // Make functions globally available
  window.scrollToSection = scrollToSection;
  window.openContactModal = openContactModal;
  window.closeContactModal = closeContactModal;
  window.callPhone = callPhone;
  
  // Initialize modal event listeners
  setTimeout(() => {
    initModalEventListeners();
  }, 100);
  
  // Initialize scroll animations
  setTimeout(() => {
    initScrollAnimations();
  }, 100);
  
  console.log('✅ Page JavaScript initialization complete');
}

// Export teardown function
export function teardown() {
  console.log('🧹 Tearing down page JavaScript...');
  
  // Remove scroll listeners
  if (scrollHandler) {
    window.removeEventListener('scroll', scrollHandler);
    window.removeEventListener('resize', scrollHandler);
  }
  
  // Close modal if open
  closeContactModal();
  
  // Show all scroll-animate elements in case they're hidden
  const hiddenElements = document.querySelectorAll('.scroll-animate:not(.animated)');
  hiddenElements.forEach(element => {
    element.style.opacity = '1';
    element.style.transform = 'none';
  });
  
  // Clean up global functions
  if (window.scrollToSection) delete window.scrollToSection;
  if (window.openContactModal) delete window.openContactModal;
  if (window.closeContactModal) delete window.closeContactModal;
  if (window.callPhone) delete window.callPhone;
  
  // Reset variables
  scrollHandler = null;
  
  console.log('✅ Teardown complete');
}