@props([
    'images' => collect(),
    'focusedImageId' => null,
])

@php
// Images are already pre-structured from getGroupedVisibleImages()
// with thumb, medium, and large paths mapped to appropriate sizes
$mappedImages = $images->toArray();
$componentId = 'gallery-' . uniqid();

// Find the index of the focused image if provided
$initialIndex = 0;
if ($focusedImageId) {
    foreach ($mappedImages as $index => $img) {
        if (isset($img['id']) && $img['id'] == $focusedImageId) {
            $initialIndex = $index;
            break;
        }
    }
}
@endphp

<div
    id="{{ $componentId }}"
    x-data="{
        selectedIndex: {{ $initialIndex }},
        imageLoading: false,
        images: @js($mappedImages),
        lightbox: null,
        get currentImage() {
            return this.images[this.selectedIndex] || null;
        },
        selectImage(index) {
            this.selectedIndex = index;
            this.imageLoading = true;
        },
        nextImage() {
            this.selectedIndex = (this.selectedIndex + 1) % this.images.length;
            this.imageLoading = true;
        },
        prevImage() {
            this.selectedIndex = (this.selectedIndex - 1 + this.images.length) % this.images.length;
            this.imageLoading = true;
        },
        openLightbox() {
            if (!this.lightbox) {
                this.lightbox = new window.PhotoSwipeLightbox({
                    dataSource: this.images.map(img => ({
                        src: img.large,
                        msrc: img.medium,
                        width: img.width || 2500,
                        height: img.height || 2500,
                        alt: img.alt
                    })),
                    pswpModule: window.PhotoSwipe,
                    showHideAnimationType: 'zoom',
                    bgOpacity: 0.95,
                    padding: { top: 20, bottom: 20, left: 20, right: 20 },
                    wheelToZoom: true,
                    pinchToClose: true,
                    closeOnVerticalDrag: true,
                });

                this.lightbox.init();
            }

            this.lightbox.loadAndOpen(this.selectedIndex);
        }
    }"
    x-init="$nextTick(() => { imageLoading = false; })"
    class="relative"
>
    <!-- Main Image Container -->
    <div class="relative bg-white dark:bg-zinc-900 rounded-lg overflow-hidden">
        <!-- Main Image Display -->
        <div class="relative aspect-[4/3] bg-white dark:bg-zinc-900">
            <template x-if="currentImage">
                <div class="w-full h-full flex items-center justify-center p-4">
                    <!-- Loading Spinner -->
                    <div x-show="imageLoading" class="absolute inset-0 flex items-center justify-center">
                        <svg class="animate-spin h-10 w-10 text-indigo-600" fill="none" viewBox="0 0 24 24">
                            <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
                            <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
                        </svg>
                    </div>

                    <!-- Actual Image -->
                    <img
                        x-bind:src="currentImage.large"
                        x-bind:alt="currentImage.alt"
                        x-on:load="imageLoading = false"
                        x-on:error="imageLoading = false"
                        x-on:click="openLightbox"
                        class="max-w-full max-h-full object-contain cursor-zoom-in hover:opacity-95 transition-opacity"
                        loading="eager"
                    />
                </div>
            </template>

            <!-- No Image Placeholder -->
            <template x-if="!currentImage">
                <div class="w-full h-full flex items-center justify-center text-zinc-400 dark:text-zinc-600">
                    <svg class="w-24 h-24" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z" />
                    </svg>
                </div>
            </template>
        </div>

        <!-- Image Controls -->
        <template x-if="images.length > 1">
            <div class="absolute inset-x-0 top-1/2 -translate-y-1/2 flex justify-between px-4 pointer-events-none">
                <button
                    @click="prevImage"
                    class="pointer-events-auto p-2 bg-white/90 dark:bg-zinc-800/90 hover:bg-white dark:hover:bg-zinc-800 rounded-full shadow-lg transition-all"
                    aria-label="Previous image"
                >
                    <svg class="w-6 h-6 text-zinc-700 dark:text-zinc-300" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7" />
                    </svg>
                </button>
                <button
                    @click="nextImage"
                    class="pointer-events-auto p-2 bg-white/90 dark:bg-zinc-800/90 hover:bg-white dark:hover:bg-zinc-800 rounded-full shadow-lg transition-all"
                    aria-label="Next image"
                >
                    <svg class="w-6 h-6 text-zinc-700 dark:text-zinc-300" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" />
                    </svg>
                </button>
            </div>
        </template>

        <!-- Zoom Hint -->
        <div class="absolute bottom-4 right-4 bg-black/50 text-white px-3 py-1.5 rounded-full text-sm flex items-center gap-2">
            <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0zM10 7v3m0 0v3m0-3h3m-3 0H7" />
            </svg>
            Click to zoom
        </div>
    </div>

    <!-- Thumbnail Gallery -->
    <template x-if="images.length > 1">
        <div class="mt-4">
            <div class="flex gap-2 overflow-x-auto pb-2 scrollbar-thin scrollbar-thumb-zinc-300 dark:scrollbar-thumb-zinc-600">
                <template x-for="(image, index) in images" :key="image.id">
                    <button
                        @click="selectImage(index)"
                        x-bind:class="{
                            'ring-2 ring-indigo-500': selectedIndex === index,
                            'hover:ring-2 hover:ring-zinc-300 dark:hover:ring-zinc-600': selectedIndex !== index
                        }"
                        class="flex-shrink-0 w-20 h-20 rounded-lg overflow-hidden bg-white dark:bg-zinc-800 transition-all"
                    >
                        <img
                            x-bind:src="image.medium"
                            x-bind:alt="image.alt + ' thumbnail ' + (index + 1)"
                            class="w-full h-full object-cover"
                            loading="lazy"
                        />
                    </button>
                </template>
            </div>

            <!-- Image Counter -->
            <div class="text-center mt-2 text-sm text-zinc-500 dark:text-zinc-400">
                <span x-text="selectedIndex + 1"></span> / <span x-text="images.length"></span>
            </div>
        </div>
    </template>
</div>