@props([
    'gallery' => null,
    'alt' => '',
    'mode' => 'product',
])

@php
    /** @var \App\DTO\Media\OrderedGalleryDTO|null $gallery */
    $mode = in_array($mode, ['product', 'service'], true) ? $mode : 'product';
    $isProduct = $mode === 'product';
    $items = $gallery?->items()->map(fn ($item) => $item->toArray())->values()->all() ?? [];
    $first = $items[0] ?? null;
    $count = count($items);
    $showChrome = $isProduct || $count > 1;
@endphp

@if ($first)
    <div
        @class([
            'site-image-gallery',
            'site-image-gallery--product' => $isProduct,
            'site-image-gallery--service' => ! $isProduct,
        ])
        x-data="{
            active: 0,
            lightbox: false,
            items: @js($items),
            mode: @js($mode),
            select(i) { this.active = i; },
            openLightbox(i) {
                if (this.mode !== 'product') return;
                this.active = i;
                this.lightbox = true;
                document.documentElement.classList.add('overflow-hidden');
            },
            closeLightbox() {
                this.lightbox = false;
                document.documentElement.classList.remove('overflow-hidden');
            },
            prev() { this.active = (this.active - 1 + this.items.length) % this.items.length; },
            next() { this.active = (this.active + 1) % this.items.length; },
            isVideo(item) { return !!(item && item.is_video); },
        }"
        @keydown.escape.window="lightbox && closeLightbox()"
        @keydown.left.window="lightbox && items.length > 1 && prev()"
        @keydown.right.window="lightbox && items.length > 1 && next()"
    >
        <div @class([
            'site-image-gallery__hero relative overflow-hidden rounded-2xl border eca-theme-border',
            'bg-[color-mix(in_srgb,var(--eca-card)_92%,transparent)]',
        ])>
            <template x-if="!isVideo(items[active])">
                <div class="site-image-gallery__frame relative h-full">
                    @if ($isProduct)
                        <button type="button" class="block h-full w-full" @click="openLightbox(active)" aria-label="{{ __('site.gallery_zoom') }}">
                            <img
                                :src="items[active]?.url"
                                :alt="items[active]?.alt || @js($alt)"
                                class="site-image-gallery__img site-image-gallery__img--product"
                                loading="eager"
                                fetchpriority="high"
                                decoding="async"
                            />
                        </button>
                    @else
                        <img
                            :src="items[active]?.url"
                            :alt="items[active]?.alt || @js($alt)"
                            class="site-image-gallery__img site-image-gallery__img--service"
                            loading="eager"
                            fetchpriority="high"
                            decoding="async"
                        />
                    @endif
                </div>
            </template>
            <template x-if="isVideo(items[active])">
                <div class="site-image-gallery__frame">
                    <video
                        :src="items[active]?.url"
                        :poster="items[active]?.poster_url || undefined"
                        @class([
                            'site-image-gallery__img',
                            'site-image-gallery__img--product' => $isProduct,
                            'site-image-gallery__img--service' => ! $isProduct,
                        ])
                        muted
                        preload="metadata"
                        controls
                        playsinline
                    ></video>
                </div>
            </template>

            @if ($showChrome && $count > 1)
                <button
                    type="button"
                    class="site-image-gallery__nav site-image-gallery__nav--prev"
                    @click.stop="prev()"
                    aria-label="{{ __('site.gallery_prev') }}"
                >‹</button>
                <button
                    type="button"
                    class="site-image-gallery__nav site-image-gallery__nav--next"
                    @click.stop="next()"
                    aria-label="{{ __('site.gallery_next') }}"
                >›</button>
            @endif
        </div>

        @if ($count > 1)
            <div @class([
                'site-image-gallery__thumbs',
                'site-image-gallery__thumbs--compact' => ! $isProduct,
            ])>
                <template x-for="(item, index) in items" :key="index">
                    <button
                        type="button"
                        class="site-image-gallery__thumb overflow-hidden rounded-lg border transition"
                        :class="active === index ? 'border-brand-accent ring-2 ring-brand-accent/30' : 'eca-theme-border'"
                        @click="select(index)"
                    >
                        <template x-if="!isVideo(item)">
                            <img :src="item.url" :alt="item.alt || ''" class="aspect-square w-full object-cover" loading="lazy" decoding="async" />
                        </template>
                        <template x-if="isVideo(item)">
                            <div class="relative aspect-square bg-slate-900">
                                <video :src="item.url" :poster="item.poster_url || undefined" class="h-full w-full object-cover" muted preload="metadata"></video>
                                <span class="absolute inset-0 flex items-center justify-center text-lg text-white/90">▶</span>
                            </div>
                        </template>
                    </button>
                </template>
            </div>
        @endif

        @if ($isProduct)
            <div
                x-show="lightbox"
                x-cloak
                x-transition.opacity
                class="site-image-gallery__lightbox fixed inset-0 flex items-center justify-center bg-slate-950/85 p-4"
                @click.self="closeLightbox()"
            >
                <button type="button" class="absolute end-4 top-4 rounded-full bg-white/10 px-3 py-2 text-white" @click="closeLightbox()">
                    <x-site.svg-icon name="close" class="h-6 w-6" />
                    
                </button>
                <button type="button" class="absolute start-4 top-1/2 -translate-y-1/2 rounded-full bg-white/10 px-3 py-2 text-white" @click="prev()" x-show="items.length > 1">‹</button>
                <template x-if="!isVideo(items[active])">
                    <img :src="items[active]?.url" :alt="items[active]?.alt || ''" class="max-h-[85vh] max-w-full rounded-xl object-contain" />
                </template>
                <template x-if="isVideo(items[active])">
                    <video
                        :src="items[active]?.url"
                        :poster="items[active]?.poster_url || undefined"
                        class="max-h-[85vh] max-w-full rounded-xl"
                        muted
                        preload="metadata"
                        controls
                        playsinline
                    ></video>
                </template>
                <button type="button" class="absolute end-4 top-1/2 -translate-y-1/2 rounded-full bg-white/10 px-3 py-2 text-white" @click="next()" x-show="items.length > 1">›</button>
            </div>
        @endif
    </div>
@endif