// Divne Store — lightweight UI behaviours for the static frontend pages.

const prefersReducedMotion = window.matchMedia('(prefers-reduced-motion: reduce)').matches;

/* Mobile navigation drawer */
function initMobileMenu() {
    const toggle = document.querySelector('[data-menu-toggle]');
    const drawer = document.querySelector('[data-mobile-menu]');
    const overlay = document.querySelector('[data-menu-overlay]');
    const closeBtn = document.querySelector('[data-menu-close]');
    if (!toggle || !drawer) return;

    const setOpen = (open) => {
        drawer.classList.toggle('-translate-x-full', !open);
        overlay?.classList.toggle('opacity-0', !open);
        overlay?.classList.toggle('pointer-events-none', !open);
        toggle.setAttribute('aria-expanded', String(open));
        document.body.classList.toggle('overflow-hidden', open);
    };

    toggle.addEventListener('click', () => setOpen(drawer.classList.contains('-translate-x-full')));
    closeBtn?.addEventListener('click', () => setOpen(false));
    overlay?.addEventListener('click', () => setOpen(false));
    document.addEventListener('keydown', (e) => {
        if (e.key === 'Escape') setOpen(false);
    });
}

/* Hero slider — smooth auto fade between slides & clickable dot controls */
function initHeroSlider() {
    const slider = document.querySelector('[data-hero-slider]');
    if (!slider) return;
    const slides = [...slider.querySelectorAll('[data-slide]')];
    const dots = [...slider.querySelectorAll('[data-slide-dot]')];
    if (slides.length < 2) return;

    let current = 0;
    let timer = null;

    const show = (index) => {
        current = (index + slides.length) % slides.length;
        slides.forEach((slide, i) => {
            if (i === current) {
                slide.style.opacity = '1';
                slide.style.pointerEvents = 'auto';
                slide.style.zIndex = '10';
            } else {
                slide.style.opacity = '0';
                slide.style.pointerEvents = 'none';
                slide.style.zIndex = '0';
            }
        });
        dots.forEach((dot, i) => {
            if (i === current) {
                dot.style.backgroundColor = '#186297';
                dot.style.width = '28px';
                dot.style.opacity = '1';
            } else {
                dot.style.backgroundColor = 'rgba(24, 98, 151, 0.3)';
                dot.style.width = '10px';
                dot.style.opacity = '0.6';
            }
        });
    };

    const play = () => {
        if (prefersReducedMotion) return;
        stop();
        timer = setInterval(() => show(current + 1), 4500);
    };
    const stop = () => {
        if (timer) clearInterval(timer);
    };

    dots.forEach((dot, i) =>
        dot.addEventListener('click', (e) => {
            e.preventDefault();
            show(i);
            play();
        }),
    );

    slider.addEventListener('mouseenter', stop);
    slider.addEventListener('mouseleave', play);

    show(0);
    play();
}

/* Product gallery — clicking a thumbnail swaps the main image */
function initGallery() {
    const gallery = document.querySelector('[data-gallery]');
    if (!gallery) return;
    const main = gallery.querySelector('[data-gallery-main]');
    const thumbs = [...gallery.querySelectorAll('[data-gallery-thumb]')];

    thumbs.forEach((thumb) =>
        thumb.addEventListener('click', () => {
            const img = thumb.querySelector('img');
            if (img && main) {
                main.src = img.src;
                main.alt = img.alt;
            }
            thumbs.forEach((t) => t.classList.toggle('border-ink-900', t === thumb));
            thumbs.forEach((t) => t.classList.toggle('border-transparent', t !== thumb));
        }),
    );
}

/* Quantity steppers */
function initQuantity() {
    document.querySelectorAll('[data-qty]').forEach((wrap) => {
        const input = wrap.querySelector('input');
        wrap.querySelector('[data-qty-minus]')?.addEventListener('click', () => {
            input.value = Math.max(1, parseInt(input.value || '1', 10) - 1);
        });
        wrap.querySelector('[data-qty-plus]')?.addEventListener('click', () => {
            input.value = Math.min(99, parseInt(input.value || '1', 10) + 1);
        });
    });
}

/* Horizontal product carousels — arrow buttons scroll the track */
function initCarousels() {
    document.querySelectorAll('[data-carousel]').forEach((carousel) => {
        const track = carousel.querySelector('[data-carousel-track]');
        if (!track) return;
        const step = () => track.clientWidth * 0.8;
        carousel
            .querySelector('[data-carousel-prev]')
            ?.addEventListener('click', () => track.scrollBy({ left: -step(), behavior: prefersReducedMotion ? 'auto' : 'smooth' }));
        carousel
            .querySelector('[data-carousel-next]')
            ?.addEventListener('click', () => track.scrollBy({ left: step(), behavior: prefersReducedMotion ? 'auto' : 'smooth' }));
    });
}

/* Header — soft shadow once the page scrolls */
function initHeaderShadow() {
    const header = document.querySelector('[data-site-header]');
    if (!header) return;
    const onScroll = () => header.classList.toggle('shadow-soft', window.scrollY > 8);
    window.addEventListener('scroll', onScroll, { passive: true });
    onScroll();
}

document.addEventListener('DOMContentLoaded', () => {
    initMobileMenu();
    initHeroSlider();
    initGallery();
    initQuantity();
    initCarousels();
    initHeaderShadow();
});
