/**
 * Product Image Grid Lightbox
 * Lightweight lightbox for the product image grid widget
 *
 * @package GGM_Commerce
 */
(function () {
	'use strict';

	function initImageGridLightbox() {
		var grids = document.querySelectorAll('.ggmc-image-grid[data-lightbox="true"]');

		grids.forEach(function (grid) {
			if (grid.dataset.lightboxInit) {
				return;
			}
			grid.dataset.lightboxInit = 'true';

			var lightbox = grid.parentElement.querySelector('.ggmc-image-grid-lightbox');
			if (!lightbox) {
				return;
			}

			var items = grid.querySelectorAll('.ggmc-image-grid__item');
			var image = lightbox.querySelector('.ggmc-image-grid-lightbox__image');
			var overlay = lightbox.querySelector('.ggmc-image-grid-lightbox__overlay');
			var closeBtn = lightbox.querySelector('.ggmc-image-grid-lightbox__close');
			var prevBtn = lightbox.querySelector('.ggmc-image-grid-lightbox__prev');
			var nextBtn = lightbox.querySelector('.ggmc-image-grid-lightbox__next');
			var currentSpan = lightbox.querySelector('.current');
			var total = parseInt(lightbox.dataset.total, 10) || items.length;
			var currentIndex = 0;

			function openLightbox(index) {
				currentIndex = index;
				updateImage();
				lightbox.style.display = 'flex';
				document.body.style.overflow = 'hidden';
			}

			function closeLightbox() {
				lightbox.style.display = 'none';
				document.body.style.overflow = '';
			}

			function updateImage() {
				var item = items[currentIndex];
				if (!item) {
					return;
				}
				var fullUrl = item.dataset.fullUrl || item.querySelector('img').src;
				var alt = item.querySelector('img').alt || '';
				image.src = fullUrl;
				image.alt = alt;
				if (currentSpan) {
					currentSpan.textContent = currentIndex + 1;
				}
			}

			function navigate(direction) {
				currentIndex = (currentIndex + direction + total) % total;
				updateImage();
			}

			// Click on grid items to open lightbox
			items.forEach(function (item, index) {
				item.addEventListener('click', function () {
					openLightbox(index);
				});
			});

			// Close lightbox
			if (closeBtn) {
				closeBtn.addEventListener('click', closeLightbox);
			}
			if (overlay) {
				overlay.addEventListener('click', closeLightbox);
			}

			// Navigation
			if (prevBtn) {
				prevBtn.addEventListener('click', function (e) {
					e.stopPropagation();
					navigate(-1);
				});
			}
			if (nextBtn) {
				nextBtn.addEventListener('click', function (e) {
					e.stopPropagation();
					navigate(1);
				});
			}

			// Keyboard navigation
			document.addEventListener('keydown', function (e) {
				if (lightbox.style.display === 'none') {
					return;
				}
				if (e.key === 'Escape') {
					closeLightbox();
				} else if (e.key === 'ArrowLeft') {
					navigate(-1);
				} else if (e.key === 'ArrowRight') {
					navigate(1);
				}
			});
		});
	}

	/**
	 * Initialize "Load More" links for image grids.
	 */
	function initImageGridLoadMore() {
		var links = document.querySelectorAll('.ggmc-image-grid__load-more');

		links.forEach(function (link) {
			if (link.dataset.loadMoreInit) {
				return;
			}
			link.dataset.loadMoreInit = 'true';

			link.addEventListener('click', function (e) {
				e.preventDefault();

				var grid = link.closest('.ggmc-image-grid');
				if (!grid) return;

				// Reveal hidden items
				var hiddenItems = grid.querySelectorAll('.ggmc-image-grid__item--hidden');
				hiddenItems.forEach(function (item) {
					item.classList.remove('ggmc-image-grid__item--hidden');
				});

				// Reveal hidden rows (alternating layout)
				var hiddenRows = grid.querySelectorAll('.ggmc-image-grid__row--hidden');
				hiddenRows.forEach(function (row) {
					row.classList.remove('ggmc-image-grid__row--hidden');
				});

				// Hide the load more link
				link.style.display = 'none';
			});
		});
	}

	// Initialize on DOM ready
	if (document.readyState === 'loading') {
		document.addEventListener('DOMContentLoaded', function () {
			initImageGridLightbox();
			initImageGridLoadMore();
		});
	} else {
		initImageGridLightbox();
		initImageGridLoadMore();
	}

	// Re-initialize when Elementor frontend is loaded (for editor preview)
	if (typeof jQuery !== 'undefined') {
		jQuery(window).on('elementor/frontend/init', function () {
			if (typeof elementorFrontend !== 'undefined') {
				elementorFrontend.hooks.addAction('frontend/element_ready/ggmc-product-image-grid.default', function () {
					initImageGridLightbox();
					initImageGridLoadMore();
				});
			}
		});
	}
})();
