let scale = 1;
let dx = 0;
let dy = 0;
let zoomEnabled = true;

const MIN_SCALE = 1;
const MAX_SCALE = 2;
const STEP = 0.1;

let modal;
let container;
let wrapper;
let btnIn;
let btnOut;
let btnReset;

function updateTransform() {
    wrapper.style.setProperty('--scale', scale);
    wrapper.style.setProperty('--dx', dx + 'px');
    wrapper.style.setProperty('--dy', dy + 'px');
}

function clampOffsets() {
    const cRect = container.getBoundingClientRect();
    // offsetWidth/Height are not affected by CSS transforms
    const baseWidth = wrapper.offsetWidth;
    const baseHeight = wrapper.offsetHeight;

    const scaledWidth = baseWidth * scale;
    const scaledHeight = baseHeight * scale;

    // Allow movement until edges touch container: range is half the size difference
    // const maxX = Math.abs(cRect.width - scaledWidth) / 2;
    const maxX = Math.max(0, (scaledWidth - cRect.width) / 2);
    // const maxY = Math.abs(cRect.height - scaledHeight) / 2;
    const maxY = Math.max(0, (scaledHeight - cRect.height) / 2);

    dx = Math.max(-maxX, Math.min(maxX, dx));
    dy = Math.max(-maxY, Math.min(maxY, dy));
}

function zoom(delta) {
    if (!zoomEnabled) return;
    scale = Math.max(MIN_SCALE, Math.min(MAX_SCALE, +(scale + delta).toFixed(2)));
    // Keep center-focused zoom: adjust dx, dy to maintain position under cursor if needed (simple: keep within bounds)
    clampOffsets();
    updateTransform();
}

function resetZoom() {
    scale = 1;
    dx = 0;
    dy = 0;
    clampOffsets();
    updateTransform();
}

var handleZoomIn = () => zoom(STEP);
var handleZoomReset = () => resetZoom();
var handleZoomOut = () => zoom(-STEP);

function addZoomListeners(care) {
    modal = document.querySelector('#' + care);
    container = document.querySelector('#' + care + ' .main-image-container');
    wrapper = container.querySelector('#zoomContainer');
    btnIn = modal.querySelector('#zoomIn');
    btnOut = modal.querySelector('#zoomOut');
    btnReset = modal.querySelector('#zoomReset');
    zoomEnabled = true;

    // adaug listenerele
    btnIn.addEventListener('click', handleZoomIn);
    btnOut.addEventListener('click', handleZoomOut);
    btnReset.addEventListener('click', handleZoomReset);

    // Use pointer events if available, otherwise fallback to mouse/touch
    if (window.PointerEvent) {
        wrapper.addEventListener('pointerdown', onPointerDown);
        window.addEventListener('pointermove', onPointerMove);
        window.addEventListener('pointerup', onPointerUp);
        window.addEventListener('pointercancel', onPointerUp);
    } else {
        wrapper.addEventListener('mousedown', onPointerDown);
        window.addEventListener('mousemove', onPointerMove);
        window.addEventListener('mouseup', onPointerUp);
        // wrapper.addEventListener('touchstart', onPointerDown, { passive: true });
        wrapper.addEventListener('touchstart', onPointerDown, { passive: false });
        window.addEventListener('touchmove', onPointerMove, { passive: false });
        window.addEventListener('touchend', onPointerUp);
        window.addEventListener('touchcancel', onPointerUp);
    }
};

function removeZoomListeners(care) {
    handleZoomReset();
    // intai scot listenerele
    btnIn.removeEventListener('click', handleZoomIn);
    btnOut.removeEventListener('click', handleZoomOut);
    btnReset.removeEventListener('click', handleZoomReset);
    if (window.PointerEvent) {
        wrapper.removeEventListener('pointerdown', onPointerDown);
        window.removeEventListener('pointermove', onPointerMove);
        window.removeEventListener('pointerup', onPointerUp);
        window.removeEventListener('pointercancel', onPointerUp);
    } else {
        wrapper.removeEventListener('mousedown', onPointerDown);
        window.removeEventListener('mousemove', onPointerMove);
        window.removeEventListener('mouseup', onPointerUp);
        wrapper.removeEventListener('touchstart', onPointerDown, { passive: true });
        window.removeEventListener('touchmove', onPointerMove, { passive: false });
        window.removeEventListener('touchend', onPointerUp);
        window.removeEventListener('touchcancel', onPointerUp);
    }

    modal = null;
    container = null;
    wrapper = null;
    btnIn = null;
    btnOut = null;
    btnReset = null;
    zoomEnabled = false;
};

document.querySelectorAll('.toggle-image-zoom').forEach(buton => {
    buton.addEventListener('click', (event) => {
        event.target.closest('.product-zoom').classList.toggle('zoom-image');
        if (event.target.closest('.product-zoom').classList.contains('zoom-image')) {
            addZoomListeners(event.target.closest('.product-zoom').id);
        } else {
            removeZoomListeners(event.target.closest('.product-zoom').id);
        };
    });
});

// document.querySelectorAll('.product-zoom').forEach((wrapper) => {
//     wrapper.querySelector('.main-image-wrapper').style.backgroundImage = 'url(' + wrapper.querySelector('.imagini-produs li img.active').dataset.zoom + ')';
//     wrapper.querySelector('.main-image-wrapper').style.backgroundSize = 'contain';
//     wrapper.querySelectorAll('.imagini-produs li img').forEach((imagine, index) => {
//         imagine.addEventListener('click', () => {
//             wrapper.querySelectorAll('.imagini-produs li img').forEach(item => {
//                 item.classList.remove('active');
//             })
//             imagine.classList.add('active');
//             wrapper.querySelector('.main-image-wrapper').style.backgroundImage = 'url(' + imagine.dataset.zoom + ')';
//         });
//     });
// });

document.querySelectorAll('.product-zoom').forEach((wrapper) => {
    const mainImageWrapper = wrapper.querySelector('.main-image-wrapper');
    const activeImg = wrapper.querySelector('.imagini-produs li img.active');

    if (mainImageWrapper && activeImg) {
        mainImageWrapper.style.backgroundImage = 'url(' + activeImg.dataset.zoom + ')';
        mainImageWrapper.style.backgroundSize = 'contain';
    }

    wrapper.querySelectorAll('.imagini-produs li img').forEach((imagine) => {
        imagine.addEventListener('click', () => {
            wrapper.querySelectorAll('.imagini-produs li img').forEach((item) => {
                item.classList.remove('active');
            });
            imagine.classList.add('active');
            if (mainImageWrapper && imagine.dataset.zoom) {
                mainImageWrapper.style.backgroundImage = 'url(' + imagine.dataset.zoom + ')';
            }
        });
    });
});

if (document.querySelector('.mobile .product-zoom .toggle-image-zoom')) {
    document.querySelector('.mobile .product-zoom .toggle-image-zoom').addEventListener('click', () => {
    });
}

document.querySelectorAll('.image-navigation-wrapper').forEach((wrapper) => {

    const prev = wrapper.querySelector('span:first-child');
    const next = wrapper.querySelector('span:last-child');
    if (!prev || !next) return;

    // prev.addEventListener('click', () => {
    //     navigateThroughImages('.imagini-produs li img', 'prev', (wrapper.closest('.product-zoom').id ? wrapper.closest('.product-zoom').id : null));
    // });
    // next.addEventListener('click', () => {
    //     navigateThroughImages('.imagini-produs li img', 'next', (wrapper.closest('.product-zoom').id ? wrapper.closest('.product-zoom').id : null));
    // });

    if (!prev.dataset.navBound) {
        prev.addEventListener('click', () => {
            navigateThroughImages('.imagini-produs li img', 'prev', (wrapper.closest('.product-zoom').id ? wrapper.closest('.product-zoom').id : null));
        });
        prev.dataset.navBound = '1';
    }

    if (!next.dataset.navBound) {
        next.addEventListener('click', () => {
            navigateThroughImages('.imagini-produs li img', 'next', (wrapper.closest('.product-zoom').id ? wrapper.closest('.product-zoom').id : null));
        });
        next.dataset.navBound = '1';
    }

});

function isMobile() {
    return document.querySelector('body').classList.contains('mobile');
}

function showLargerImage(element, target) {
    document.querySelectorAll(element).forEach((imagine, index) => {
        imagine.addEventListener('click', () => {
            document.querySelectorAll(element).forEach(item => {
                item.classList.remove('active');
            })
            currentGalleryImage = index;
            imagine.classList.add('active');
            zoomLevel = 1;
            handleZoomReset();
            document.querySelector(target).style.backgroundImage = 'url(' + imagine.dataset.zoom + ')';
        });
    });
}

function productImagesListListeners() {
    const poze = document.querySelectorAll('.imagini-produs li');
    const pozeOptions = {
        root: document.querySelector('.imagini-produs'),
        threshold: 1.0,
        rootMargin: "0px"
    };

    const pozeObserver = new IntersectionObserver(function(entries) {
        entries.forEach(entry => {
            if(!document.querySelector('.product-zoom.zoom-image')) {
                const index = entry.target.getAttribute('data-index');
                if (entry.isIntersecting) {
                    if(isMobile()) {
                        entry.target.classList.add('is-visible');
                        // // document.querySelectorAll('.mobile-image-navigation li')[index].classList.add('active');
                        // entry.target.childNodes[0].classList.add('active');
                        // console.log(entry.target.childNodes[0]);
                        // document.querySelector('.main-image-wrapper').style.backgroundImage = 'url(' + entry.target.childNodes[0].getAttribute('data-zoom') + ')';
                    }
                } else {
                    if (isMobile()) {
                        // entry.target.childNodes[0].classList.remove('active');
                        entry.target.classList.remove('is-visible');
                        // document.querySelectorAll('.mobile-image-navigation li')[index].classList.remove('active');
                    }
                }
            }
        });
    }, pozeOptions);

    poze.forEach((item, index) => {
        item.setAttribute('data-index', index);
        pozeObserver.observe(item);
    });

}

function navigateThroughImages(imageList, direction, parent = null) {
    if (parent) {
        imageList = '#' + parent + ' ' + imageList;
    } else {
        return;
    }
    if(document.querySelector('.product-zoom.zoom-image')) {
        handleZoomReset();
    }
    const imagesInGallery = document.querySelectorAll(imageList).length;
    const container = document.querySelector(`#${parent} .imagini-produs`);
    const imgs = container.querySelectorAll('li img');
    let cgi = Array.prototype.findIndex.call(imgs, (el) => el.classList.contains('active'));
    if (direction == 'prev' && cgi == 0) {
        cgi = imagesInGallery - 1;
    } else if (direction == 'prev') {
        cgi--;
    } else if (direction == 'next' && cgi == imagesInGallery - 1) {
        cgi = 0;
    } else {
        cgi++;
    }
    console.log('runs navigation');
    let activeImageWrapper = document.querySelectorAll(imageList.replace(' img', ''))[cgi];
    activeImageWrapper.querySelector('img').click();
    const scrollLeftPos = activeImageWrapper.offsetLeft - (container.clientWidth / 2) + (activeImageWrapper.clientWidth / 2);
    // need also scroll top if vertical
    const scrollTopPos = activeImageWrapper.offsetTop - (container.clientHeight / 2) + (activeImageWrapper.clientHeight / 2);
    container.scrollTo({ top: scrollTopPos, left: scrollLeftPos, behavior: 'smooth' });
}

function ensureOverlay() {
    if (document.querySelector('.overlay')) return; // already present
    const overlay = document.createElement('div');
    overlay.className = 'overlay';
    document.body.appendChild(overlay); // end of HTML
}

ensureOverlay();

productImagesListListeners();

// Drag logic
var dragging = false;
var startX = 0;
var startY = 0;
var startDx = 0;
var startDy = 0;

function onPointerDown(e) {
    if (!zoomEnabled) return;
    if (scale <= 1) return;
    if (e.cancelable) e.preventDefault();
    dragging = true;
    const p = e.type.startsWith('touch') ? e.touches[0] : e;
    startX = p.clientX;
    startY = p.clientY;
    startDx = dx;
    startDy = dy;
    wrapper.setPointerCapture?.(e.pointerId);
}

function onPointerMove(e) {
    if (!dragging) return;
    if (e.cancelable) e.preventDefault();
    const p = e.type.startsWith('touch') ? (e.touches[0] || e.changedTouches[0]) : e;
    const deltaX = p.clientX - startX;
    const deltaY = p.clientY - startY;
    dx = startDx + deltaX;
    dy = startDy + deltaY;
    clampOffsets();
    updateTransform();
}

function onPointerUp() {
    dragging = false;
}