// Home Page Background Carousel with Manual Navigation
let heroCarouselInterval = null;
let currentImageIndex = 0;
let carouselItems = [];
let navigationDots = [];
let isUserInteracting = false;

function updateHeroImage(newIndex) {
  if (carouselItems.length === 0) return;
  
  // Hide current image
  carouselItems[currentImageIndex].style.opacity = '0';
  
  // Update index
  currentImageIndex = newIndex;
  
  // Show new image
  carouselItems[currentImageIndex].style.opacity = '1';
  
  // Update counter
  const counterElement = document.getElementById('current-hero-image');
  if (counterElement) {
    counterElement.textContent = currentImageIndex + 1;
  }
  
  // Update navigation dots
  updateNavigationDots();
}

function updateNavigationDots() {
  navigationDots.forEach((dot, index) => {
    if (index === currentImageIndex) {
      dot.className = 'w-3 h-3 rounded-full bg-white cursor-pointer shadow-sm transition-all hover:scale-125';
    } else {
      dot.className = 'w-3 h-3 rounded-full bg-white bg-opacity-50 cursor-pointer shadow-sm transition-all hover:scale-125 hover:bg-opacity-100';
    }
  });
}

function nextHeroImage() {
  pauseAutoRotation();
  const nextIndex = (currentImageIndex + 1) % carouselItems.length;
  updateHeroImage(nextIndex);
  resumeAutoRotationAfterDelay();
}

function previousHeroImage() {
  pauseAutoRotation();
  const prevIndex = currentImageIndex === 0 ? carouselItems.length - 1 : currentImageIndex - 1;
  updateHeroImage(prevIndex);
  resumeAutoRotationAfterDelay();
}

function goToHeroImage(index) {
  pauseAutoRotation();
  updateHeroImage(index);
  resumeAutoRotationAfterDelay();
}

function pauseAutoRotation() {
  if (heroCarouselInterval) {
    clearInterval(heroCarouselInterval);
    heroCarouselInterval = null;
  }
  isUserInteracting = true;
}

function resumeAutoRotationAfterDelay() {
  // Resume auto-rotation after 10 seconds of no user interaction
  setTimeout(() => {
    if (isUserInteracting) {
      isUserInteracting = false;
      startHeroCarousel();
    }
  }, 10000);
}

function startHeroCarousel() {
  if (heroCarouselInterval || isUserInteracting) return; // Don't start if already running or user is interacting
  
  heroCarouselInterval = setInterval(() => {
    if (!isUserInteracting) {
      const nextIndex = (currentImageIndex + 1) % carouselItems.length;
      updateHeroImage(nextIndex);
    }
  }, 5000); // Change image every 5 seconds
}

function stopHeroCarousel() {
  if (heroCarouselInterval) {
    clearInterval(heroCarouselInterval);
    heroCarouselInterval = null;
  }
}

// Properties Carousel Navigation Functions
function scrollPropertiesLeft() {
  const carousel = document.getElementById('properties-carousel');
  if (carousel) {
    const scrollAmount = 320; // width of one card plus gap
    carousel.scrollBy({ left: -scrollAmount, behavior: 'smooth' });
  }
}

function scrollPropertiesRight() {
  const carousel = document.getElementById('properties-carousel');
  if (carousel) {
    const scrollAmount = 320; // width of one card plus gap
    carousel.scrollBy({ left: scrollAmount, behavior: 'smooth' });
  }
}

function initializeHeroCarousel() {
  // Get carousel items
  carouselItems = document.querySelectorAll('#scifc3 [data-landingsite-carousel-item]');
  
  // Get navigation dots
  navigationDots = document.querySelectorAll('#scifc3 [onclick^="goToHeroImage"]');
  
  // Set initial state
  currentImageIndex = 0;
  
  // Update total images counter
  const totalElement = document.getElementById('total-hero-images');
  if (totalElement) {
    totalElement.textContent = carouselItems.length;
  }
  
  // Initialize first image and dots
  updateNavigationDots();
  
  // Start auto-rotation if there are multiple images
  if (carouselItems.length > 1) {
    startHeroCarousel();
  }
}

// Global functions for button clicks
window.nextHeroImage = nextHeroImage;
window.previousHeroImage = previousHeroImage;
window.goToHeroImage = goToHeroImage;
window.scrollPropertiesLeft = scrollPropertiesLeft;
window.scrollPropertiesRight = scrollPropertiesRight;

// Export functions for the system
function init() {
  // Initialize the hero background carousel
  initializeHeroCarousel();
  
  // Add touch/swipe support for properties carousel
  const propertiesCarousel = document.getElementById('properties-carousel');
  if (propertiesCarousel) {
    let isDown = false;
    let startX;
    let scrollLeft;

    propertiesCarousel.addEventListener('mousedown', (e) => {
      isDown = true;
      startX = e.pageX - propertiesCarousel.offsetLeft;
      scrollLeft = propertiesCarousel.scrollLeft;
    });

    propertiesCarousel.addEventListener('mouseleave', () => {
      isDown = false;
    });

    propertiesCarousel.addEventListener('mouseup', () => {
      isDown = false;
    });

    propertiesCarousel.addEventListener('mousemove', (e) => {
      if (!isDown) return;
      e.preventDefault();
      const x = e.pageX - propertiesCarousel.offsetLeft;
      const walk = (x - startX) * 2;
      propertiesCarousel.scrollLeft = scrollLeft - walk;
    });
  }
}

function teardown() {
  // Stop the hero background carousel
  stopHeroCarousel();
  isUserInteracting = false;
}

// Export the required functions
window.homePageInit = init;
window.homePageTeardown = teardown;