@props([
    'title' => 'Our Work',
    'relatedWorks' => null,
    'items' => null,
    'viewAllUrl' => route('frontend.archive'),
    'viewAllText' => 'View All',
    'enableGalleryLightbox' => true,
    'lightboxTrigger' => 'archive',
])

@php
    $defaultItems = require base_path('Modules/Frontend/resources/data/gallery-portfolio-items.php');
    $carouselItems = [];

    if (is_array($items) && $items !== []) {
        if (isset($items['list']) && is_array($items['list'])) {
            $relatedWorks = $items;
        } else {
            $carouselItems = array_values($items);
        }
    }
    if ($carouselItems === [] && is_array($relatedWorks)) {
        $rows = null;
        if (isset($relatedWorks['list']) && is_array($relatedWorks['list'])) {
            $rows = $relatedWorks['list'];
        } elseif (array_is_list($relatedWorks)) {
            $rows = $relatedWorks;
        }
        if (is_array($rows)) {
            foreach ($rows as $row) {
                if (! is_array($row)) {
                    continue;
                }
                $catName = '';
                if (! empty($row['categories'][0]) && is_array($row['categories'][0])) {
                    $catName = (string) ($row['categories'][0]['name'] ?? '');
                }

                $mediaSlides = \Modules\Frontend\app\Support\GalleryMediaSlides::fromContentListRow($row);

                $coverImage = '';
                foreach ($mediaSlides as $s) {
                    if (($s['type'] ?? '') === 'image' && ! empty($s['src'])) {
                        $coverImage = $s['src'];
                        break;
                    }
                }
                if ($coverImage === '') {
                    $coverImage = check_file($row['image'] ?? '');
                }

                $galleryImages = [];
                if ($coverImage !== '') {
                    $galleryImages[] = $coverImage;
                }
                $legacy = $row['images'] ?? null;
                if (is_array($legacy) && $legacy !== []) {
                    foreach (array_values(array_filter($legacy)) as $p) {
                        if (is_string($p) && trim($p) !== '') {
                            $galleryImages[] = trim($p);
                        }
                    }
                }
                $galleryImages = array_values(array_unique($galleryImages));

                if (count($mediaSlides) === 0 && $galleryImages === []) {
                    continue;
                }

                $carouselItems[] = [
                    'category' => $catName,
                    'title' => (string) ($row['title'] ?? $row['name'] ?? ''),
                    'images' => $galleryImages,
                    'image' => $galleryImages[0] ?? $coverImage,
                    'url' => $row['url'] ?? null,
                    'media_slides' => $mediaSlides,
                ];
            }
        }
    }

    if ($carouselItems === []) {
        $carouselItems = $defaultItems;
    }
@endphp

<section class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8 lg:py-12 relative">
    <div class="flex items-center justify-between mb-6 sm:mb-8">
        <h2 class="text-2xl sm:text-3xl font-bold tracking-[0.25em] uppercase">
            {{ $title }}
        </h2>
        <div class="hidden sm:flex items-center gap-3">
            <button
                type="button"
                class="w-9 h-9 flex items-center justify-center rounded-full border border-white/40 hover:bg-white hover:text-black transition-colors related-work-prev"
            >
                <i class="ph ph-caret-left text-sm"></i>
            </button>
            <button
                type="button"
                class="w-9 h-9 flex items-center justify-center rounded-full border border-white/40 hover:bg-white hover:text-black transition-colors related-work-next"
            >
                <i class="ph ph-caret-right text-sm"></i>
            </button>
        </div>
    </div>

    <div class="relative -mx-2 sm:-mx-3 lg:-mx-4">
        <div class="swiper related-work-swiper px-1 sm:px-2">
            <div class="swiper-wrapper py-[2rem]">
                @foreach ($carouselItems as $index => $item)
                    @php
                        $category = $item['category'] ?? '';
                        $slideTitle = $item['title'] ?? 'Title';
                        $galleryImages = $item['images'] ?? [];
                        if (empty($galleryImages) && isset($item['image'])) {
                            $galleryImages = [$item['image']];
                        }

                        $mediaSlides = $item['media_slides'] ?? [];
                        if (! is_array($mediaSlides)) {
                            $mediaSlides = [];
                        }
                        if (count($mediaSlides) === 0) {
                            foreach ($galleryImages as $src) {
                                $src = is_string($src) ? trim($src) : '';
                                if ($src === '' || preg_match('/\.(mp4|webm|ogg)(\?.*)?$/i', $src)) {
                                    continue;
                                }
                                $mediaSlides[] = ['type' => 'image', 'src' => $src];
                            }
                        }

                        $coverImage = $galleryImages[0] ?? '';
                        if ($coverImage === '') {
                            foreach ($mediaSlides as $s) {
                                if (($s['type'] ?? '') === 'image' && ! empty($s['src'])) {
                                    $coverImage = $s['src'];
                                    break;
                                }
                            }
                        }
                        $hasImageSlide = false;
                        foreach ($mediaSlides as $s) {
                            if (($s['type'] ?? '') === 'image') {
                                $hasImageSlide = true;
                                break;
                            }
                        }
                        $coverFallback = 'https://images.pexels.com/photos/3220090/pexels-photo-3220090.jpeg?auto=compress&cs=tinysrgb&w=800';
                        $displayCover = $coverImage !== '' ? $coverImage : $coverFallback;
                        $youtubeOnly = count($mediaSlides) > 0 && ! $hasImageSlide;
                        $itemUrl = $item['url'] ?? null;
                        $href = $itemUrl ?: route('frontend.archive', ['open' => $index]);

                        $openLightbox = $enableGalleryLightbox && count($mediaSlides) > 0;
                    @endphp
                    @if ($openLightbox || ! empty($galleryImages))
                        <div class="swiper-slide">
                            @if ($openLightbox)
                                <button
                                    type="button"
                                    class="group rounded-2xl bg-[#141414] border border-white/10 overflow-hidden relative flex flex-col h-full text-left w-full cursor-pointer"
                                    data-lightbox-trigger="{{ $lightboxTrigger }}"
                                    data-gallery-slides='@json($mediaSlides)'
                                    data-gallery-index="{{ $index }}"
                                    aria-label="{{ $slideTitle !== '' ? 'Open gallery: '.$slideTitle : 'Open gallery' }}"
                                >
                                    <div class="aspect-[4/3] overflow-hidden relative">
                                        @if ($youtubeOnly)
                                            <div class="w-full h-full flex items-center justify-center bg-black/70 min-h-[10rem]">
                                                <i class="ph ph-play-circle text-5xl text-white/80" aria-hidden="true"></i>
                                            </div>
                                        @else
                                            <img
                                                src="{{ $displayCover }}"
                                                alt="{{ $slideTitle }}"
                                                class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500"
                                            >
                                        @endif
                                        <div class="absolute inset-0 bg-gradient-to-t from-black/80 via-black/20 to-transparent"></div>
                                    </div>
                                    <div class="absolute inset-x-0 bottom-0 p-4 pointer-events-none">
                                        @if ($category !== '')
                                            <p class="text-[10px] uppercase tracking-[0.25em] text-gray-300 mb-1">
                                                {{ $category }}
                                            </p>
                                        @endif
                                        <h3 class="text-sm sm:text-base font-semibold mb-1">
                                            {{ $slideTitle }}
                                        </h3>
                                    </div>
                                </button>
                            @else
                                <a
                                    href="{{ $href }}"
                                    class="group rounded-2xl bg-[#141414] border border-white/10 overflow-hidden relative flex flex-col h-full text-left w-full"
                                >
                                    <div class="aspect-[4/3] overflow-hidden relative">
                                        <img
                                            src="{{ $displayCover }}"
                                            alt="{{ $slideTitle }}"
                                            class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500"
                                        >
                                        <div class="absolute inset-0 bg-gradient-to-t from-black/80 via-black/20 to-transparent"></div>
                                    </div>
                                    <div class="absolute inset-x-0 bottom-0 p-4">
                                        @if ($category !== '')
                                            <p class="text-[10px] uppercase tracking-[0.25em] text-gray-300 mb-1">
                                                {{ $category }}
                                            </p>
                                        @endif
                                        <h3 class="text-sm sm:text-base font-semibold mb-1">
                                            {{ $slideTitle }}
                                        </h3>
                                    </div>
                                </a>
                            @endif
                        </div>
                    @endif
                @endforeach
            </div>
            <div class="swiper-pagination mt-2"></div>
        </div>
    </div>

    <div class="mt-8 flex justify-center">
        <a
            href="{{ $viewAllUrl }}"
            class="inline-flex items-center justify-center px-10 py-2.5 rounded-full bg-le-primary text-xs sm:text-sm font-medium hover:bg-le-primary/80 transition-colors"
        >
            {{ $viewAllText }} <i class="ph ph-caret-right"></i>
        </a>
    </div>
</section>

@if ($enableGalleryLightbox)
    @once
        @include('frontend::components.card-gallery-lightbox')
    @endonce
@endif