/**
 * PufferGo Product Gallery & Accordion
 *
 * Gallery thumbnail switching and specs accordion for single product pages.
 */
document.addEventListener('DOMContentLoaded', function() {
	// Gallery functionality
	var thumbnails = document.querySelectorAll('.thumbnail-btn');
	var mainContainer = document.getElementById('main-image-container');

	if (thumbnails.length > 0 && mainContainer) {
		// Set first thumbnail as selected
		thumbnails[0].querySelector('.selected-ring').classList.add('ring-brand-500');
		thumbnails[0].classList.add('ring-2', 'ring-brand-500');

		thumbnails.forEach(function(thumb) {
			thumb.addEventListener('click', function() {
				var type = this.getAttribute('data-type');
				var imageId = this.getAttribute('data-image-id');
				var videoSrc = this.getAttribute('data-video-src');
				var posterSrc = this.getAttribute('data-poster');

				// Swap main display content
				if (type === 'image') {
					var imageContainer = this.querySelector('span.absolute.inset-0');
					if (imageContainer) {
						var img = imageContainer.querySelector('img');
						if (img && img.src) {
							var originalSrc = img.src.replace(/-\d+x\d+(\.\w+)$/, '$1');
							mainContainer.innerHTML = '<img id="main-image" class="h-full w-full object-cover object-center sm:rounded-lg" src="' + originalSrc + '" alt="' + (img.alt || '') + '">';
						}
					}
				} else if (type === 'video' || type === 'url') {
					var posterAttr = posterSrc ? ' poster="' + posterSrc + '"' : '';
					mainContainer.innerHTML = '<video id="main-video" class="h-full w-full object-cover object-center sm:rounded-lg" controls preload="metadata" src="' + videoSrc + '"' + posterAttr + '></video>';
				}

				// Update selection state
				thumbnails.forEach(function(t) {
					t.classList.remove('ring-2', 'ring-brand-500');
					t.querySelector('.selected-ring').classList.remove('ring-brand-500');
				});

				this.classList.add('ring-2', 'ring-brand-500');
				this.querySelector('.selected-ring').classList.add('ring-brand-500');
			});
		});
	}

	// Specifications accordion functionality
	var specButtons = document.querySelectorAll('[data-toggle^="spec-"]');

	specButtons.forEach(function(button) {
		button.addEventListener('click', function() {
			var targetId = this.getAttribute('data-toggle');
			var targetContent = document.getElementById(targetId);
			var specGroup = this.closest('.spec-group');

			if (targetContent && specGroup) {
				var isHidden = targetContent.classList.contains('hidden');

				if (isHidden) {
					targetContent.classList.remove('hidden');
					specGroup.classList.add('group-expanded');
				} else {
					targetContent.classList.add('hidden');
					specGroup.classList.remove('group-expanded');
				}
			}
		});
	});

	// Open first spec section by default
	var firstSpecButton = document.querySelector('[data-toggle="spec-0"]');
	var firstSpecContent = document.getElementById('spec-0');

	if (firstSpecButton && firstSpecContent) {
		var firstSpecGroup = firstSpecButton.closest('.spec-group');
		firstSpecContent.classList.remove('hidden');
		if (firstSpecGroup) {
			firstSpecGroup.classList.add('group-expanded');
		}
	}
});
