/**
 * Carousel Module
 * Handles image carousel functionality with auto-slide and manual controls
 */

class Carousel {
  constructor(containerId, options = {}) {
    this.container = document.getElementById(containerId);
    if (!this.container) {
      console.error(`Carousel container with ID ${containerId} not found`);
      return;
    }

    // Options
    this.options = {
      autoSlide: options.autoSlide !== false,
      slideInterval: options.slideInterval || 5000, // 5 seconds
      transitionSpeed: options.transitionSpeed || 800, // 0.8 seconds
      ...options,
    };

    this.currentSlide = 0;
    this.slides = [];
    this.autoSlideTimeout = null;
    this.isTransitioning = false;

    this.init();
  }

  /**
   * Initialize carousel
   */
  init() {
    this.slides = this.container.querySelectorAll('.carousel-slide');

    if (this.slides.length === 0) {
      console.warn('No carousel slides found');
      return;
    }

    this.setupControls();
    this.goToSlide(0);

    if (this.options.autoSlide) {
      this.startAutoSlide();
    }

    // Pause auto-slide on hover
    this.container.addEventListener('mouseenter', () => this.stopAutoSlide());
    this.container.addEventListener('mouseleave', () => {
      if (this.options.autoSlide) {
        this.startAutoSlide();
      }
    });
  }

  /**
   * Setup carousel controls (arrows and dots)
   */
  setupControls() {
    // Previous button
    const prevBtn = this.container.querySelector('.carousel-arrow.prev');
    if (prevBtn) {
      prevBtn.addEventListener('click', () => this.previousSlide());
    }

    // Next button
    const nextBtn = this.container.querySelector('.carousel-arrow.next');
    if (nextBtn) {
      nextBtn.addEventListener('click', () => this.nextSlide());
    }

    // Dots
    const dots = this.container.querySelectorAll('.carousel-dot');
    dots.forEach((dot, index) => {
      dot.addEventListener('click', () => this.goToSlide(index));
    });
  }

  /**
   * Go to specific slide
   * @param {number} slideIndex - Index of slide to show
   */
  goToSlide(slideIndex) {
    if (slideIndex >= this.slides.length) {
      this.currentSlide = 0;
    } else if (slideIndex < 0) {
      this.currentSlide = this.slides.length - 1;
    } else {
      this.currentSlide = slideIndex;
    }

    this.updateSlides();
    this.updateDots();

    // Reset auto-slide timer
    if (this.options.autoSlide) {
      this.stopAutoSlide();
      this.startAutoSlide();
    }
  }

  /**
   * Go to next slide
   */
  nextSlide() {
    this.goToSlide(this.currentSlide + 1);
  }

  /**
   * Go to previous slide
   */
  previousSlide() {
    this.goToSlide(this.currentSlide - 1);
  }

  /**
   * Update slide visibility
   */
  updateSlides() {
    this.slides.forEach((slide, index) => {
      if (index === this.currentSlide) {
        slide.classList.add('active');
      } else {
        slide.classList.remove('active');
      }
    });
  }

  /**
   * Update dot indicators
   */
  updateDots() {
    const dots = this.container.querySelectorAll('.carousel-dot');
    dots.forEach((dot, index) => {
      if (index === this.currentSlide) {
        dot.classList.add('active');
      } else {
        dot.classList.remove('active');
      }
    });
  }

  /**
   * Start auto-slide
   */
  startAutoSlide() {
    if (this.autoSlideTimeout) {
      clearTimeout(this.autoSlideTimeout);
    }

    this.autoSlideTimeout = setInterval(() => {
      this.nextSlide();
    }, this.options.slideInterval);
  }

  /**
   * Stop auto-slide
   */
  stopAutoSlide() {
    if (this.autoSlideTimeout) {
      clearTimeout(this.autoSlideTimeout);
      this.autoSlideTimeout = null;
    }
  }

  /**
   * Destroy carousel (cleanup)
   */
  destroy() {
    this.stopAutoSlide();
    this.slides = [];
  }
}

/**
 * Initialize hero carousel on page load
 */
function initHeroCarousel() {
  const heroCarousel = document.getElementById('hero-carousel');
  if (heroCarousel) {
    new Carousel('hero-carousel', {
      autoSlide: true,
      slideInterval: 5000,
      transitionSpeed: 800,
    });
  }
}

/**
 * Initialize category carousel on page load
 */
function initCategoryCarousel() {
  const categoryCarousel = document.getElementById('category-carousel');
  if (categoryCarousel) {
    new Carousel('category-carousel', {
      autoSlide: false, // Manual control only for category carousel
      slideInterval: 5000,
      transitionSpeed: 600,
    });
  }
}

/**
 * Initialize all carousels
 */
function initAllCarousels() {
  initHeroCarousel();
  initCategoryCarousel();
}

// Auto-initialize when DOM is ready
document.addEventListener('DOMContentLoaded', () => {
  initAllCarousels();
});
