/**
 * Property Gallery JavaScript
 *
 * Lightbox and thumbnail navigation
 *
 * @package HomeProz
 */

(function($) {
    'use strict';

    var PropertyGallery = {
        // Elements
        $gallery: null,
        $lightbox: null,
        $mainImage: null,
        $thumbnails: null,
        $lightboxImage: null,
        $lightboxCounter: null,

        // State
        images: [],
        currentIndex: 0,

        /**
         * Initialize
         */
        init: function() {
            this.$gallery = $('.property-gallery');
            this.$lightbox = $('#property-lightbox');

            if (!this.$gallery.length) {
                return;
            }

            this.$mainImage = this.$gallery.find('.gallery-main-image img');
            this.$thumbnails = this.$gallery.find('.gallery-thumbnail');
            this.$lightboxImage = this.$lightbox.find('.lightbox-image');
            this.$lightboxCounter = this.$lightbox.find('.lightbox-current');

            // Load images data
            var $dataScript = $('#gallery-images-data');
            if ($dataScript.length) {
                this.images = JSON.parse($dataScript.text());
            }

            if (this.images.length === 0) {
                return;
            }

            this.bindEvents();
        },

        /**
         * Bind events
         */
        bindEvents: function() {
            var self = this;

            // Thumbnail clicks
            this.$thumbnails.on('click', function() {
                var index = parseInt($(this).data('index'));
                self.setMainImage(index);
            });

            // Open lightbox
            this.$gallery.find('[data-lightbox-trigger]').on('click', function() {
                self.openLightbox(self.currentIndex);
            });

            // Close lightbox
            this.$lightbox.find('.lightbox-close, .lightbox-overlay').on('click', function() {
                self.closeLightbox();
            });

            // Navigation
            this.$lightbox.find('.lightbox-prev').on('click', function() {
                self.prevImage();
            });

            this.$lightbox.find('.lightbox-next').on('click', function() {
                self.nextImage();
            });

            // Keyboard navigation
            $(document).on('keydown', function(e) {
                if (!self.$lightbox.is('[aria-hidden="false"]')) {
                    return;
                }

                switch (e.key) {
                    case 'Escape':
                        self.closeLightbox();
                        break;
                    case 'ArrowLeft':
                        self.prevImage();
                        break;
                    case 'ArrowRight':
                        self.nextImage();
                        break;
                }
            });
        },

        /**
         * Set main gallery image
         */
        setMainImage: function(index) {
            if (index < 0 || index >= this.images.length) {
                return;
            }

            this.currentIndex = index;

            // Update main image
            var image = this.images[index];
            this.$mainImage.attr('src', image.url);
            this.$mainImage.attr('alt', image.alt || 'Property photo');

            // Update active thumbnail
            this.$thumbnails.removeClass('is-active');
            this.$thumbnails.filter('[data-index="' + index + '"]').addClass('is-active');
        },

        /**
         * Open lightbox
         */
        openLightbox: function(index) {
            this.currentIndex = index;
            this.updateLightboxImage();

            this.$lightbox.attr('aria-hidden', 'false');
            $('body').addClass('lightbox-open');
        },

        /**
         * Close lightbox
         */
        closeLightbox: function() {
            this.$lightbox.attr('aria-hidden', 'true');
            $('body').removeClass('lightbox-open');
        },

        /**
         * Previous image
         */
        prevImage: function() {
            var newIndex = this.currentIndex - 1;
            if (newIndex < 0) {
                newIndex = this.images.length - 1;
            }
            this.currentIndex = newIndex;
            this.updateLightboxImage();
        },

        /**
         * Next image
         */
        nextImage: function() {
            var newIndex = this.currentIndex + 1;
            if (newIndex >= this.images.length) {
                newIndex = 0;
            }
            this.currentIndex = newIndex;
            this.updateLightboxImage();
        },

        /**
         * Update lightbox image
         */
        updateLightboxImage: function() {
            var image = this.images[this.currentIndex];
            this.$lightboxImage.attr('src', image.url);
            this.$lightboxImage.attr('alt', image.alt || 'Property photo');
            this.$lightboxCounter.text(this.currentIndex + 1);
        }
    };

    // Initialize on document ready
    $(function() {
        PropertyGallery.init();
    });

})(jQuery);
