/**
 * A reusable Slideshow class to manage a carousel component.
 */
class Slideshow {
    /**
     * @param {string} containerSelector - The CSS selector for the slideshow container element.
     * @param {object} [options] - Optional configuration for the slideshow.
     * @param {number} [options.slideInterval=5000] - The time in milliseconds between automatic slide transitions.
     */
    constructor(containerSelector, options = {}) {
        this.container = document.querySelector(containerSelector);
        if (!this.container) {
            console.warn(`Slideshow container '${containerSelector}' not found.`);
            this.isInitialized = false; // Mark as uninitialized
            return;
        }

        this.slides = this.container.querySelectorAll('.slide');
        this.dots = this.container.querySelectorAll('.dot');

        if (this.slides.length === 0) {
            console.warn(`No slides found in container '${containerSelector}'.`);
            this.isInitialized = false; // Mark as uninitialized
            return;
        }

        this.currentSlide = 0;
        this.slideInterval = options.slideInterval || 5000;
        this.slideTimer = null;
        this.isInitialized = true; // Mark as initialized

        this._setupEventListeners();
        this.start();
        console.log('Slideshow initialized.');
    }

    _showSlide(n) {
        if (!this.isInitialized) return;

        // Optimize: Only remove 'active' from the previously active slide/dot
        if (this.slides[this.currentSlide]) {
            this.slides[this.currentSlide].classList.remove('active');
        }
        if (this.dots[this.currentSlide]) {
            this.dots[this.currentSlide].classList.remove('active');
        }

        this.currentSlide = (n + this.slides.length) % this.slides.length;

        if (this.slides[this.currentSlide]) {
            this.slides[this.currentSlide].classList.add('active');
        }
        if (this.dots[this.currentSlide]) {
            this.dots[this.currentSlide].classList.add('active');
        }
    }

    _nextSlide() {
        this._showSlide(this.currentSlide + 1);
    }

    _setupEventListeners() {
        if (!this.isInitialized) return;
        this.dots.forEach((dot, index) => {
            // Store the listener function to remove it later
            dot._slideshowClickListener = () => {
                this.stop();
                this._showSlide(index);
                this.start();
            };
            dot.addEventListener('click', dot._slideshowClickListener);
        });
    }

    start() {
        if (!this.isInitialized) return;
        if (this.slideTimer) clearInterval(this.slideTimer);
        this.slideTimer = setInterval(this._nextSlide.bind(this), this.slideInterval); // Bind 'this' for clarity
    }

    stop() {
        clearInterval(this.slideTimer);
        this.slideTimer = null;
    }

    destroy() {
        if (!this.isInitialized) return;
        this.stop();
        // Remove event listeners from dots
        this.dots.forEach((dot) => {
            if (dot._slideshowClickListener) {
                dot.removeEventListener('click', dot._slideshowClickListener);
            }
        });
        console.log('Slideshow destroyed.');
    }
}