// GalleryModal.js - Fullscreen gallery viewer component
class GalleryModal {
    constructor(items, initialIndex = 0) {
        this.items = items || [];
        this.currentIndex = initialIndex;
        this.touchStart = null;
        this.touchEnd = null;
        this.minSwipeDistance = 50;
        this.modal = null;
        this.keyHandler = null;
        this.loading = false;
    }

    /**
     * Show the gallery modal
     */
    show() {
        // Create modal if not already created
        if (!this.modal) {
        	this.modal = this.createModal();
			document.body.appendChild(this.modal);
		}

		// Lock body scroll
		document.body.style.overflow = 'hidden';

		// Bind event handlers
		this.bindEvents();

		// Show current image
		this.updateDisplay();

		// Preload adjacent images
		this.preloadImages();

		// Announce to screen readers
		this.announceToScreenReaders();
	}

	/**
	 * Create the modal element
	 */
	createModal() {
		const modal = document.createElement('div');
		modal.className = 'gallery-modal';
		modal.setAttribute('role', 'dialog');
		modal.setAttribute('aria-modal', 'true');
		modal.setAttribute('aria-label', 'Image Gallery');

		modal.innerHTML = `
      <div class="gallery-overlay">
        <button class="gallery-close" aria-label="Close gallery">
          <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
            <line x1="18" y1="6" x2="6" y2="18"></line>
            <line x1="6" y1="6" x2="18" y2="18"></line>
          </svg>
        </button>

        <button class="gallery-nav gallery-prev" aria-label="Previous image">
          <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
            <polyline points="15 18 9 12 15 6"></polyline>
          </svg>
        </button>

        <button class="gallery-nav gallery-next" aria-label="Next image">
          <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
            <polyline points="9 18 15 12 9 6"></polyline>
          </svg>
        </button>

        <div class="gallery-content">
          <img src="" alt="" class="gallery-image">
          <details>
            <summary>DETAILS</summary>
            <div class="item-info"></div>
          </details>
        </div>

        <div class="gallery-favourite"></div>
        <div class="gallery-counter"></div>

        <div class="live-region" role="status" aria-live="polite" class="screen-reader-text"></div>
      </div>
    `;

		// Add styles if they don't exist
		this.ensureGalleryStyles();

		return modal;
	}

	/**
	 * Ensure gallery styles are in the document
	 */
	ensureGalleryStyles() {
		if (!document.getElementById('gallery-styles')) {
			const styles = document.createElement('style');
			styles.id = 'gallery-styles';
			styles.textContent = `
        .gallery-modal {
          position: fixed;
          top: 0;
          left: 0;
          right: 0;
          bottom: 0;
          z-index: 9999;
          background: rgba(27, 27, 27, 0.9);
          display: flex;
          align-items: center;
          justify-content: center;
        }

        .gallery-overlay {
          position: relative;
          width: 100%;
          height: 100%;
          display: flex;
          align-items: center;
          justify-content: center;
        }

        .gallery-content {
          position: relative;
          max-width: 100%;
          max-height: 100%;
          display: flex;
          align-items: center;
          justify-content: center;
          padding: 2rem;
        }

        .gallery-favourite button.favourite {
          top: unset;
          bottom: 1rem;
          right: 1rem;
        }

        .gallery-image {
          max-width: 100%;
          max-height: calc(100vh - 4rem);
          object-fit: contain;
        }

        .gallery-close {
          position: absolute;
          top: 1rem;
          right: 1rem;
          background: none;
          border: none;
          color: white;
          cursor: pointer;
          padding: 0.5rem;
          z-index: 10;
          transition: color 0.3s ease;
        }

        .gallery-close:hover {
          color: #FF0080;
        }

        .gallery-nav {
          position: absolute;
          top: 50%;
          transform: translateY(-50%);
          background: none;
          border: none;
          color: white;
          cursor: pointer;
          padding: 1rem;
          transition: color 0.3s ease;
        }

        .gallery-nav:hover {
          color: #FF0080;
        }

        .gallery-prev {
          left: 1rem;
        }

        .gallery-next {
          right: 1rem;
        }

        .gallery-counter {
          position: absolute;
          top: 1rem;
          left: 1rem;
          color: white;
          font-size: 0.875rem;
        }

        .gallery-content details {
          position: absolute;
          bottom: 1rem;
          left: 2rem;
          width: calc(100% - 4rem);
          padding: 0;
        }

        .gallery-content details summary {
          background-color: rgba(249,249,249,.2);
          backdrop-filter: blur(5px);
          border: none;
          cursor: pointer;
        }

        .gallery-content details:hover summary,
        .gallery-content details[open] summary {
          background-color: rgba(255,0,128,.4);
          backdrop-filter: blur(5px);
        }

        .gallery-content .item-info {
          background-color: rgba(249,249,249,.6);
          backdrop-filter: blur(5px);
        }
      `;
			document.head.appendChild(styles);
		}
	}

	/**
	 * Bind event handlers
	 */
	bindEvents() {
		// Close button
		this.modal.querySelector('.gallery-close').addEventListener('click', () => this.close());

		// Navigation buttons
		const prevBtn = this.modal.querySelector('.gallery-prev');
		const nextBtn = this.modal.querySelector('.gallery-next');

		prevBtn.addEventListener('click', () => this.navigate(-1));
		nextBtn.addEventListener('click', () => this.navigate(1));

		// Keyboard navigation
		this.keyHandler = (e) => {
			switch (e.key) {
				case 'ArrowLeft':
					this.navigate(-1);
					break;
				case 'ArrowRight':
					this.navigate(1);
					break;
				case 'Escape':
					this.close();
					break;
			}
		};
		document.addEventListener('keydown', this.keyHandler);

		// Touch events
		this.modal.addEventListener('touchstart', (e) => {
			this.touchStart = e.touches[0].clientX;
		});

		this.modal.addEventListener('touchmove', (e) => {
			this.touchEnd = e.touches[0].clientX;
		});

		this.modal.addEventListener('touchend', () => {
			if (!this.touchStart || !this.touchEnd) return;

			const distance = this.touchStart - this.touchEnd;
			const isLeftSwipe = distance > this.minSwipeDistance;
			const isRightSwipe = distance < -this.minSwipeDistance;

			if (isLeftSwipe) {
				this.navigate(1);
			} else if (isRightSwipe) {
				this.navigate(-1);
			}

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

	/**
	 * Navigate to previous/next image
	 */
	async navigate(direction) {
		const newIndex = this.currentIndex + direction;

		// Check if out of bounds
		if (newIndex < 0 || newIndex >= this.items.length) {
			this.announceNavigation(direction > 0 ? 'last' : 'first');
			return;
		}

		// Update current index
		this.currentIndex = newIndex;

		// Update display
		this.updateDisplay();

		// Preload adjacent images
		this.preloadImages();

		// Announce to screen readers
		this.announceNavigation(direction > 0 ? 'next' : 'previous');

		// Trigger onNavigate callback if provided
		if (this.onNavigate) {
			this.onNavigate(this.currentIndex);
		}

		// Check if near the end and can load more
		if (direction > 0 && newIndex >= this.items.length - 3 && this.onLoadMore) {
			if (!this.loading) {
				this.loading = true;
				const loadedMore = await this.onLoadMore();
				this.loading = false;

				if (loadedMore) {
					// Update navigation buttons
					this.updateNavigationButtons();
				}
			}
		}
	}

	/**
	 * Preload adjacent images
	 */
	preloadImages() {
		// Preload current, previous and next images
		[-1, 0, 1].forEach(offset => {
			const index = this.currentIndex + offset;
			if (index >= 0 && index < this.items.length) {
				const img = new Image();
				const item = this.items[index];

				if (window.innerWidth < 1000) {
					img.src = item.large || item.src;
				} else {
					img.src = item.full || item.src;
				}
			}
		});
	}

	/**
	 * Update display with current image
	 */
	updateDisplay() {
		const item = this.items[this.currentIndex];
		if (!item) return;

		// Get elements
		const favourite = this.modal.querySelector('.gallery-favourite');
		const image = this.modal.querySelector('.gallery-image');
		const counter = this.modal.querySelector('.gallery-counter');
		const info = this.modal.querySelector('.item-info');

		// Update image
		image.src = window.innerWidth < 1000 ?
			(item.large || item.src) :
			(item.full || item.src);

		image.alt = item.alt || '';

		// Update favourite button
		if (favourite && item.fav) {
			favourite.innerHTML = '';
			favourite.appendChild(item.fav.cloneNode(true));
		}

		// Update info
		if (info && item.info) {
			info.innerHTML = '';
			const clone = item.info.cloneNode(true);
			info.appendChild(clone);
		}

		// Update counter
		counter.textContent = `${this.currentIndex + 1} / ${this.items.length}`;

		// Update navigation buttons
		this.updateNavigationButtons();
	}

	/**
	 * Update navigation button visibility
	 */
	updateNavigationButtons() {
		const prevBtn = this.modal.querySelector('.gallery-prev');
		const nextBtn = this.modal.querySelector('.gallery-next');

		prevBtn.style.display = this.currentIndex > 0 ? '' : 'none';
		nextBtn.style.display = this.currentIndex < this.items.length - 1 ? '' : 'none';
	}

	/**
	 * Close the gallery
	 */
	close() {
		// Remove event listeners
		document.removeEventListener('keydown', this.keyHandler);

		// Remove modal from DOM
		if (this.modal && this.modal.parentNode) {
			document.body.removeChild(this.modal);
		}

		// Restore body scroll
		document.body.style.overflow = '';

		// Reset state
		this.modal = null;
		this.keyHandler = null;

		// Dispatch close event
		document.dispatchEvent(new CustomEvent('galleryClose'));

		// Call onClose callback if provided
		if (this.onClose) {
			this.onClose();
		}
	}

	/**
	 * Announce to screen readers
	 */
	announceToScreenReaders() {
		const liveRegion = this.modal.querySelector('.live-region');
		if (liveRegion) {
			liveRegion.textContent = `Image ${this.currentIndex + 1} of ${this.items.length}. Use arrow keys to navigate.`;
		}
	}


	/**
	 * Update gallery items
	 * @param {Array} newItems - New gallery items
	 */
	updateItems(newItems) {
		// Store original current index and item
		const currentItem = this.items[this.currentIndex];

		// Update items array
		this.items = newItems;

		// Try to keep the same item selected
		if (currentItem) {
			// Find the same item in the new array by matching source
			const newIndex = this.items.findIndex(item =>
				item.full === currentItem.full ||
				item.large === currentItem.large
			);

			if (newIndex !== -1) {
				this.currentIndex = newIndex;
			}
		}

		// Update navigation buttons
		this.updateNavigationButtons();
	}


	/**
	 * Set callbacks
	 * @param {Object} callbacks - Callback functions
	 */
	setCallbacks(callbacks = {}) {
		const { onClose, onLoadMore, onNavigate } = callbacks;

		this.onClose = onClose;
		this.onLoadMore = onLoadMore;
		this.onNavigate = onNavigate;
	}


	/**
	 * Ensure gallery is accessible
	 */
	setupAccessibility() {
		if (!this.modal) return;

		// Add ARIA attributes
		this.modal.setAttribute('role', 'dialog');
		this.modal.setAttribute('aria-modal', 'true');
		this.modal.setAttribute('aria-label', 'Image Gallery');

		// Create live region for announcements
		this.liveRegion = document.createElement('div');
		this.liveRegion.setAttribute('aria-live', 'polite');
		this.liveRegion.setAttribute('role', 'status');
		this.liveRegion.className = 'screen-reader-text';
		this.modal.querySelector('.gallery-overlay').appendChild(this.liveRegion);

		// Announce initial state
		this.announceToScreenReader(`Image ${this.currentIndex + 1} of ${this.items.length}. Use arrow keys to navigate.`);

		// Set up focus trap
		const focusableElements = this.modal.querySelectorAll(
			'button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])'
		);
		if (focusableElements.length) {
			focusableElements[0].focus();
			this.trapFocus(this.modal);
		}
	}

	/**
	 * Announce to screen readers
	 */
	announceToScreenReader(message) {
		if (!this.liveRegion) return;
		this.liveRegion.textContent = message;
	}

	/**
	 * Trap focus within gallery modal
	 */
	trapFocus(element) {
		const focusableElements = element.querySelectorAll('button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])');
		const firstFocusable = focusableElements[0];
		const lastFocusable = focusableElements[focusableElements.length - 1];

		element.addEventListener('keydown', function(e) {
			if (e.key === 'Tab') {
				// Shift+Tab on first element focuses last element
				if (e.shiftKey && document.activeElement === firstFocusable) {
					lastFocusable.focus();
					e.preventDefault();
				}
				// Tab on last element focuses first element
				else if (!e.shiftKey && document.activeElement === lastFocusable) {
					firstFocusable.focus();
					e.preventDefault();
				}
			}
		});
	}
	/**
	 * Announce navigation to screen readers
	 */
	announceNavigation(direction) {
		if (!this.liveRegion) return;

		if (direction === 'first') {
			this.liveRegion.textContent = 'At first image';
		} else if (direction === 'last') {
			this.liveRegion.textContent = 'At last image';
		} else {
			this.liveRegion.textContent = `Image ${this.currentIndex + 1} of ${this.items.length}`;
		}
	}

	/**
	 * Set callbacks
	 */
	setCallbacks(callbacks = {}) {
		const { onClose, onLoadMore, onNavigate } = callbacks;

		if (onClose) this.onClose = onClose;
		if (onLoadMore) this.onLoadMore = onLoadMore;
		if (onNavigate) this.onNavigate = onNavigate;
	}
}

export default GalleryModal;