/**
 * AIEO PDP gallery enhancements:
 *  1) Nudge FlexSlider to recompute slide widths after lazy images load.
 *  2) Vertical thumbnail strip with ↑ / ↓ chevron arrows (design style): show a
 *     few thumbnails, the arrows scroll to reveal the rest. Arrows only appear
 *     when the strip actually overflows. Clicking a thumbnail still selects the
 *     main image (FlexSlider's own handler is preserved).
 *
 * @package ai-eshop-optimizer
 */
(function ($) {
	'use strict';

	function nudge() {
		try { window.dispatchEvent(new Event('resize')); } catch (e) {}
	}

	function addArrows() {
		$('.single-product .woocommerce-product-gallery').each(function () {
			var $g = $(this);
			if ($g.data('aieoArrows')) { return; }
			var $thumbs = $g.find('.flex-control-thumbs');
			// Single-image products have no thumbnail strip → no arrows.
			if (!$thumbs.length) { return; }
			$g.data('aieoArrows', 1);
			var thumbEl = $thumbs.get(0);

			var $up   = $('<button type="button" class="aieo-gallery-arrow aieo-gallery-arrow--up" aria-label="Scroll thumbnails up"></button>');
			var $down = $('<button type="button" class="aieo-gallery-arrow aieo-gallery-arrow--down" aria-label="Scroll thumbnails down"></button>');
			var $strip = $('<div class="aieo-gallery-thumbs-strip"></div>');
			$thumbs.before($strip);
			$strip.append($up).append($thumbs).append($down);

			var stepPx = function () {
				var $f = $thumbs.children().first();
				return $f.length ? Math.round($f.outerHeight(true) * 2) : 200; // ~2 thumbs
			};
			$up.on('click',   function (e) { e.preventDefault(); thumbEl.scrollTop -= stepPx(); });
			$down.on('click', function (e) { e.preventDefault(); thumbEl.scrollTop += stepPx(); });

			// Show the arrows only when the thumbnails overflow the visible strip.
			var sync = function () {
				$strip.toggleClass('aieo-has-overflow', thumbEl.scrollHeight > thumbEl.clientHeight + 2);
			};
			sync();
			$thumbs.on('scroll', sync);
			$(window).on('resize', sync);
		});
	}

	// A single click/tap anywhere on the main image opens the lightbox (gallery
	// view). The magnifier icon is hidden via CSS; we trigger its handler.
	// Guarded so it never double-opens if WooCommerce's own handler also fires.
	function enableClickLightbox() {
		$('.single-product .woocommerce-product-gallery').each(function () {
			var $g = $(this);
			if ($g.data('aieoClickLb')) { return; }
			$g.data('aieoClickLb', 1);
			$g.on('click', '.flex-viewport, .woocommerce-product-gallery__wrapper', function (e) {
				if ($(e.target).closest('.flex-control-thumbs').length) { return; } // not a thumbnail
				e.preventDefault();
				setTimeout(function () {
					if (document.querySelector('.pswp--open, .pswp.pswp--visible')) { return; }
					var $t = $g.find('.woocommerce-product-gallery__trigger');
					if ($t.length) { $t.trigger('click'); }
				}, 30);
			});
		});
	}

	$(window).on('load', function () {
		[150, 450, 1000].forEach(function (t) { setTimeout(nudge, t); });
		// Run after the nudges so FlexSlider has settled the thumbnail strip.
		setTimeout(addArrows, 500);
		setTimeout(addArrows, 1300);
		setTimeout(enableClickLightbox, 600);
	});
})(jQuery);
