class Gallery {
	constructor(modal, config = {}) {
		this.container = config.container
			? document.querySelector(config.container)
			: document.querySelector('main');

		this.gallerySelector = config.gallerySelector || 'img[data-small]';

		this.modal = new window.jvbModal(modal, {
			onOpen: false,
			onSave: false,
			onClose: () => this.closeGallery(false)
		});

		this.modalElement = (typeof modal === 'string')
			? document.querySelector(modal)
			: modal;

		if (!this.modalElement) return;

		this.a11y = window.jvbA11y;
		this.index = 0;
		this.items = [];

		this.swipe = {
			touchStart: null,
			touchEnd: null,
			minSwipe: 50,
		};

		this.initElements();
		this.initListeners();
	}

	initElements() {
		this.prevBtn = this.modalElement.querySelector('.prev');
		this.nextBtn = this.modalElement.querySelector('.next');
		this.image = this.modalElement.querySelector('.image');
		this.counter = this.modalElement.querySelector('.counter');
	}

	initListeners() {
		// Delegate click handling to container
		this.container.addEventListener('click', this.handleClick.bind(this));

		// Modal-specific listeners added only when open
		this.boundKeyHandler = this.handleKeys.bind(this);
		this.boundTouchStart = this.handleTouchStart.bind(this);
		this.boundTouchMove = this.handleTouchMove.bind(this);
		this.boundTouchEnd = this.handleTouchEnd.bind(this);
	}

	handleClick(e) {
		// Open gallery when clicking images
		const img = e.target.closest(this.gallerySelector);
		if (img && !this.modal.isOpen) {
			e.preventDefault();
			this.openGallery(img);
			return;
		}

		// Navigation within gallery
		if (this.modal.isOpen) {
			if (e.target.closest('.next')) {
				this.navigate(1);
			} else if (e.target.closest('.prev')) {
				this.navigate(-1);
			}
		}
	}

	handleKeys(e) {
		if (!this.modal.isOpen) return;

		switch (e.key) {
			case 'ArrowLeft':
				e.preventDefault();
				this.navigate(-1);
				break;
			case 'ArrowRight':
				e.preventDefault();
				this.navigate(1);
				break;
		}
	}

	handleTouchStart(e) {
		if (!this.modal.isOpen) return;
		this.swipe.touchStart = e.touches[0].clientX;
	}

	handleTouchMove(e) {
		if (!this.modal.isOpen) return;
		this.swipe.touchEnd = e.touches[0].clientX;
	}

	handleTouchEnd(e) {
		if (!this.modal.isOpen || !this.swipe.touchStart || !this.swipe.touchEnd) return;

		const distance = this.swipe.touchStart - this.swipe.touchEnd;

		if (Math.abs(distance) > this.swipe.minSwipe) {
			this.navigate(distance > 0 ? 1 : -1);
		}

		this.swipe.touchStart = null;
		this.swipe.touchEnd = null;
	}

	buildGalleryItems() {
		return Array.from(this.container.querySelectorAll(this.gallerySelector))
			.map((img, index) => ({
				id: img.dataset.id || index,
				small: img.dataset.small || img.src,
				medium: img.dataset.medium || img.src,
				full: img.dataset.full || img.src,
				alt: img.alt || '',
				element: img
			}));
	}

	openGallery(clickedImg) {
		// Build fresh gallery items
		this.items = this.buildGalleryItems();

		// Find clicked image index
		this.index = this.items.findIndex(item =>
			item.element === clickedImg
		);

		if (this.index === -1) this.index = 0;

		// Attach modal-specific listeners
		document.addEventListener('keydown', this.boundKeyHandler);
		document.addEventListener('touchstart', this.boundTouchStart, { passive: true });
		document.addEventListener('touchmove', this.boundTouchMove, { passive: true });
		document.addEventListener('touchend', this.boundTouchEnd, { passive: true });

		this.modal.handleOpen();
		this.updateDisplay();
		this.preloadAdjacent();

		this.a11y.announce(
			`Gallery opened. Image ${this.index + 1} of ${this.items.length}. Use arrow keys to navigate.`
		);
	}

	closeGallery(useModal = true) {
		// Remove modal-specific listeners
		document.removeEventListener('keydown', this.boundKeyHandler);
		document.removeEventListener('touchstart', this.boundTouchStart);
		document.removeEventListener('touchmove', this.boundTouchMove);
		document.removeEventListener('touchend', this.boundTouchEnd);

		if (useModal) {
			this.modal.handleClose();
		}
	}

	navigate(direction) {
		let newIndex = this.index + direction;

		// Wrap around
		if (newIndex < 0) {
			newIndex = this.items.length - 1;
		} else if (newIndex >= this.items.length) {
			newIndex = 0;
		} else if (this.items.length - newIndex === 3) {
			this.notify('load-more');
		}

		this.index = newIndex;
		this.updateDisplay();
		this.preloadAdjacent();

		this.a11y.announce(`Image ${this.index + 1} of ${this.items.length}`);
	}

	updateDisplay() {
		const item = this.items[this.index];
		if (!item) return;

		// Use medium/full based on viewport
		const src = window.innerWidth < 1000
			? (item.medium || item.src)
			: (item.full || item.src);

		this.image.src = src;
		this.image.alt = item.alt;
		this.counter.textContent = `${this.index + 1} / ${this.items.length}`;

		// Update button states
		this.prevBtn.classList.toggle('disabled', this.items.length <= 1);
		this.nextBtn.classList.toggle('disabled', this.items.length <= 1);
	}

	preloadAdjacent() {
		[-1, 1].forEach(offset => {
			const index = this.index + offset;
			if (index >= 0 && index < this.items.length) {
				const item = this.items[index];
				const img = new Image();
				img.src = window.innerWidth < 1000
					? (item.medium || item.src)
					: (item.full || item.src);
			}
		});
	}

	cleanup() {
		this.container.removeEventListener('click', this.handleClick);
		this.closeGallery(false);
	}
}


document.addEventListener('DOMContentLoaded', function() {
	let galleries = document.querySelectorAll('dialog.gallery');
	if (galleries.length > 0) {
		window.galleries = new Map();

		galleries.forEach(gallery => {
			let id = gallery.id;
			window.galleries.set(id, new Gallery(gallery));
		});
	}
});