/**
 * Photo Gallery & Lightbox
 * Airbnb-style photo gallery with fullscreen lightbox viewer
 */
class PhotoGallery {
    constructor() {
        this.photos = [];
        this.currentIndex = 0;
        this.lightbox = null;
        this.isOpen = false;

        this.init();
    }

    init() {
        // Collect all gallery photos
        const galleryItems = document.querySelectorAll('.photo-gallery .photo-item img');
        galleryItems.forEach((img, index) => {
            this.photos.push({
                src: img.src,
                alt: img.alt || `Photo ${index + 1}`
            });
        });

        // Create lightbox DOM
        this.createLightbox();

        // Attach click events to gallery - redirect to photo tour page
        const gallery = document.querySelector('.photo-gallery');
        if (gallery) {
            gallery.addEventListener('click', (e) => {
                const photoItem = e.target.closest('.photo-item');
                if (photoItem) {
                    window.location.href = 'photos.php';
                }
            });
        }

        // Keyboard navigation
        document.addEventListener('keydown', (e) => {
            if (!this.isOpen) return;
            switch (e.key) {
                case 'Escape':
                    this.close();
                    break;
                case 'ArrowLeft':
                    this.prev();
                    break;
                case 'ArrowRight':
                    this.next();
                    break;
            }
        });
    }

    createLightbox() {
        this.lightbox = document.createElement('div');
        this.lightbox.className = 'lightbox-overlay';
        this.lightbox.innerHTML = `
            <button class="lightbox-close" aria-label="Fermer">
                <svg viewBox="0 0 32 32" fill="none" stroke="currentColor" stroke-width="3">
                    <path d="M8 8l16 16M24 8L8 24"/>
                </svg>
            </button>
            <button class="lightbox-nav lightbox-prev" aria-label="Photo précédente">
                <svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="2.5">
                    <path d="M10 12L6 8l4-4"/>
                </svg>
            </button>
            <img class="lightbox-image" src="" alt="">
            <button class="lightbox-nav lightbox-next" aria-label="Photo suivante">
                <svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="2.5">
                    <path d="M6 4l4 4-4 4"/>
                </svg>
            </button>
            <div class="lightbox-counter"></div>
        `;

        document.body.appendChild(this.lightbox);

        // Event listeners
        this.lightbox.querySelector('.lightbox-close').addEventListener('click', () => this.close());
        this.lightbox.querySelector('.lightbox-prev').addEventListener('click', () => this.prev());
        this.lightbox.querySelector('.lightbox-next').addEventListener('click', () => this.next());

        // Click outside image to close
        this.lightbox.addEventListener('click', (e) => {
            if (e.target === this.lightbox) this.close();
        });

        // Touch swipe support
        let touchStartX = 0;
        let touchEndX = 0;

        this.lightbox.addEventListener('touchstart', (e) => {
            touchStartX = e.changedTouches[0].screenX;
        }, { passive: true });

        this.lightbox.addEventListener('touchend', (e) => {
            touchEndX = e.changedTouches[0].screenX;
            const diff = touchStartX - touchEndX;
            if (Math.abs(diff) > 50) {
                if (diff > 0) this.next();
                else this.prev();
            }
        }, { passive: true });
    }

    open(index = 0) {
        this.currentIndex = index;
        this.isOpen = true;
        this.lightbox.classList.add('active');
        document.body.style.overflow = 'hidden';
        this.updateImage();
    }

    close() {
        this.isOpen = false;
        this.lightbox.classList.remove('active');
        document.body.style.overflow = '';
    }

    prev() {
        this.currentIndex = (this.currentIndex - 1 + this.photos.length) % this.photos.length;
        this.updateImage();
    }

    next() {
        this.currentIndex = (this.currentIndex + 1) % this.photos.length;
        this.updateImage();
    }

    updateImage() {
        const photo = this.photos[this.currentIndex];
        if (!photo) return;

        const img = this.lightbox.querySelector('.lightbox-image');
        const counter = this.lightbox.querySelector('.lightbox-counter');

        img.src = photo.src;
        img.alt = photo.alt;
        counter.textContent = `${this.currentIndex + 1} / ${this.photos.length}`;
    }
}

// Initialize gallery on DOM ready
document.addEventListener('DOMContentLoaded', function() {
    new PhotoGallery();
});