@extends('layouts.public-layout')

@section("title", "Médiathèque - Mission Mondiale de la Parole de Vie - Les Rachetés de l'Eternel")
@section('meta_description', 'Médiathèque de la MMPV : vidéos de prédications, audios de louange, galeries photos de nos cultes et événements. Revivez les moments forts de notre mission.')
@section('og_title', 'Médiathèque - MMPV Les Rachetés de l\'Eternel')
@section('og_description', 'Vidéos, audios et photos de nos cultes et événements. Revivez les moments forts de notre mission.')

@section('content')
    <!-- Page Header -->
    <section class="bg-gradient-to-r from-slate-800 via-slate-700 to-slate-800 text-white py-16">
        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
            <div class="text-center">
                <h1 class="text-4xl md:text-5xl font-bold mb-4">
                    <i class="fas fa-photo-video mr-3 text-amber-400"></i>Médiathèque
                </h1>
                <p class="text-xl text-slate-200 max-w-2xl mx-auto">
                    Accédez à notre collection de vidéos, audios et images pour nourrir votre foi
                </p>
            </div>
        </div>
    </section>

    <!-- Media Tabs -->
    <section class="py-16 bg-gray-50">
        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
            <!-- Tab Navigation -->
            <div class="flex justify-center mb-8">
                <div class="bg-white rounded-lg shadow-md p-1 inline-flex border border-slate-200">
                    <button class="tab-btn active px-6 py-3 rounded-lg font-semibold transition" data-tab="images">
                        <i class="fas fa-image mr-2"></i>Images
                        <span class="ml-2 bg-emerald-100 text-emerald-700 px-2 py-1 rounded-full text-sm">{{ $images->count() }}</span>
                    </button>
                    <button class="tab-btn px-6 py-3 rounded-lg font-semibold transition" data-tab="videos">
                        <i class="fas fa-video mr-2"></i>Vidéos
                        <span class="ml-2 bg-slate-200 text-slate-700 px-2 py-1 rounded-full text-sm">{{ $videos->count() }}</span>
                    </button>
                    <button class="tab-btn px-6 py-3 rounded-lg font-semibold transition" data-tab="audios">
                        <i class="fas fa-music mr-2"></i>Audios
                        <span class="ml-2 bg-slate-200 text-slate-700 px-2 py-1 rounded-full text-sm">{{ $audios->count() }}</span>
                    </button>
                </div>
            </div>

            <!-- Images Section -->
            <div id="images-section" class="tab-content">
                {{-- Filtre catégories pour images --}}
                @if($imageCategories->count() > 0)
                    <div class="mb-6">
                        <div class="flex flex-wrap items-center gap-2">
                            @php
                                $imgFilterParams = array_filter([
                                    'video_category' => request('video_category'),
                                    'audio_category' => request('audio_category'),
                                ]);
                            @endphp
                            <a href="{{ route('public.media', $imgFilterParams) }}#images-section"
                               class="px-4 py-2 rounded-full text-sm font-medium transition border {{ !$selectedImageCategory ? 'bg-emerald-600 text-white border-emerald-600 shadow' : 'bg-white text-gray-700 border-gray-200 hover:border-emerald-300 hover:bg-emerald-50' }}">
                                Toutes
                            </a>
                            @foreach($imageCategories as $cat)
                                @php
                                    $isActive = $selectedImageCategory && $selectedImageCategory->id == $cat->id;
                                    $catParams = array_merge($imgFilterParams, ['image_category' => $cat->id]);
                                @endphp
                                <a href="{{ route('public.media', $catParams) }}#images-section"
                                   class="px-4 py-2 rounded-full text-sm font-medium transition border {{ $isActive ? 'text-white shadow border-transparent' : 'bg-white text-gray-700 border-gray-200 hover:shadow hover:border-opacity-60' }}"
                                   style="{{ $isActive ? 'background-color:'.$cat->color.';border-color:'.$cat->color : '' }}">
                                    @if($cat->icon)<i class="{{ $cat->icon }} mr-1" style="{{ !$isActive ? 'color:'.$cat->color : '' }}"></i>@endif
                                    {{ $cat->name }}
                                    <span class="ml-1 text-xs {{ $isActive ? 'bg-white bg-opacity-30' : 'bg-gray-100 text-gray-500' }} px-1.5 py-0.5 rounded-full">{{ $cat->media_count }}</span>
                                </a>
                            @endforeach
                        </div>
                    </div>
                @endif

                @if($images->count() > 0)
                    <div class="grid md:grid-cols-2 lg:grid-cols-3 gap-8">
                        @foreach($images as $image)
                            @php
                                $imageGalleryRaw = $image->images ?? [];
                                $imageGallery = array_map(fn($u) => str_starts_with($u, 'http') ? $u : asset($u), $imageGalleryRaw);
                                $mainImage = !empty($imageGallery) ? $imageGallery[0] : ($image->file_path ? asset($image->file_path) : ($image->thumbnail ? asset($image->thumbnail) : null));
                                $hasGallery = !empty($imageGallery) && count($imageGallery) > 1;
                            @endphp
                            <div class="bg-white rounded-lg shadow-md overflow-hidden hover:shadow-xl transition border border-slate-200">
                                <!-- Image Display -->
                                <div class="relative pb-56 bg-slate-100">
                                    @if($mainImage)
                                        <img src="{{ $mainImage }}"
                                             alt="{{ $image->title }}"
                                             class="absolute inset-0 w-full h-full object-cover cursor-pointer hover:opacity-95 transition"
                                             onclick="openGalleryModal({{ json_encode($imageGallery) }}, '{{ addslashes($image->title) }}', '{{ addslashes($image->description ?? '') }}', 0)">
                                    @else
                                        <!-- Placeholder if no image URL -->
                                        <div class="absolute inset-0 flex items-center justify-center bg-gradient-to-br from-emerald-100 to-slate-100">
                                            <i class="fas fa-image text-slate-400 text-5xl"></i>
                                        </div>
                                    @endif

                                    <!-- Gallery Badge -->
                                    @if($hasGallery)
                                        <div class="absolute top-3 left-3 bg-emerald-600 bg-opacity-90 px-3 py-1 rounded text-white text-sm">
                                            <i class="fas fa-images mr-1"></i>{{ count($imageGallery) }} photos
                                        </div>
                                    @else
                                        <div class="absolute top-3 right-3 bg-emerald-600 bg-opacity-90 px-3 py-1 rounded text-white text-sm">
                                            <i class="fas fa-image mr-1"></i>Image
                                        </div>
                                    @endif

                                    <!-- Thumbnails Preview (if gallery) -->
                                    @if($hasGallery)
                                        <div class="absolute bottom-3 left-3 right-3 flex gap-1">
                                            @foreach(array_slice($imageGallery, 0, 4) as $index => $thumbUrl)
                                                <div class="flex-1 h-12 rounded overflow-hidden {{ $index > 2 ? 'hidden sm:block' : '' }}">
                                                    <img src="{{ $thumbUrl }}" alt="" class="w-full h-full object-cover opacity-80 hover:opacity-100 transition cursor-pointer"
                                                         onclick="event.stopPropagation(); openGalleryModal({{ json_encode($imageGallery) }}, '{{ addslashes($image->title) }}', '{{ addslashes($image->description ?? '') }}', {{ $index }})">
                                                </div>
                                            @endforeach
                                            @if(count($imageGallery) > 4)
                                                <div class="flex-1 h-12 rounded overflow-hidden bg-black bg-opacity-70 flex items-center justify-center text-white text-xs font-bold cursor-pointer"
                                                     onclick="event.stopPropagation(); openGalleryModal({{ json_encode($imageGallery) }}, '{{ addslashes($image->title) }}', '{{ addslashes($image->description ?? '') }}', 0)">
                                                    +{{ count($imageGallery) - 4 }}
                                                </div>
                                            @endif
                                        </div>
                                    @endif
                                </div>

                                <!-- Image Info -->
                                <div class="p-5">
                                    <h3 class="font-bold text-lg text-gray-900 mb-2 line-clamp-2">{{ $image->title }}</h3>

                                    @if($image->description)
                                        <p class="text-gray-600 text-sm mb-4 line-clamp-3">{{ $image->description }}</p>
                                    @endif

                                    <div class="flex items-center justify-between text-sm text-slate-500 pt-3 border-t">
                                        <span>
                                            <i class="fas fa-calendar-alt mr-1"></i>
                                            {{ \Carbon\Carbon::parse($image->created_at)->format('d M Y') }}
                                        </span>
                                        @if($mainImage)
                                            <button onclick="openGalleryModal({{ json_encode($imageGallery) }}, '{{ addslashes($image->title) }}', '{{ addslashes($image->description ?? '') }}', 0)"
                                                    class="text-emerald-600 hover:text-emerald-700 font-semibold">
                                                Voir @if($hasGallery) la galerie @endif <i class="fas fa-eye ml-1"></i>
                                            </button>
                                        @endif
                                    </div>
                                </div>
                            </div>
                        @endforeach
                    </div>
                @else
                    <!-- Empty State -->
                    <div class="bg-white rounded-lg shadow-md p-16 text-center">
                        <div class="bg-gray-100 w-24 h-24 rounded-full flex items-center justify-center mx-auto mb-6">
                            <i class="fas fa-image text-gray-400 text-5xl"></i>
                        </div>
                        <h3 class="text-2xl font-bold text-gray-900 mb-3">Aucune image disponible</h3>
                        <p class="text-gray-600">
                            Nous n'avons pas encore d'images dans notre collection. Revenez bientôt !
                        </p>
                    </div>
                @endif
            </div>

            <!-- Videos Section -->
            <div id="videos-section" class="tab-content hidden">
                {{-- Filtre catégories pour vidéos --}}
                @if($videoCategories->count() > 0)
                    <div class="mb-6">
                        <div class="flex flex-wrap items-center gap-2">
                            @php
                                $vidFilterParams = array_filter([
                                    'image_category' => request('image_category'),
                                    'audio_category' => request('audio_category'),
                                ]);
                            @endphp
                            <a href="{{ route('public.media', $vidFilterParams) }}#videos-section"
                               class="px-4 py-2 rounded-full text-sm font-medium transition border {{ !$selectedVideoCategory ? 'bg-red-600 text-white border-red-600 shadow' : 'bg-white text-gray-700 border-gray-200 hover:border-red-300 hover:bg-red-50' }}">
                                Toutes
                            </a>
                            @foreach($videoCategories as $cat)
                                @php
                                    $isActive = $selectedVideoCategory && $selectedVideoCategory->id == $cat->id;
                                    $catParams = array_merge($vidFilterParams, ['video_category' => $cat->id]);
                                @endphp
                                <a href="{{ route('public.media', $catParams) }}#videos-section"
                                   class="px-4 py-2 rounded-full text-sm font-medium transition border {{ $isActive ? 'text-white shadow border-transparent' : 'bg-white text-gray-700 border-gray-200 hover:shadow hover:border-opacity-60' }}"
                                   style="{{ $isActive ? 'background-color:'.$cat->color.';border-color:'.$cat->color : '' }}">
                                    @if($cat->icon)<i class="{{ $cat->icon }} mr-1" style="{{ !$isActive ? 'color:'.$cat->color : '' }}"></i>@endif
                                    {{ $cat->name }}
                                    <span class="ml-1 text-xs {{ $isActive ? 'bg-white bg-opacity-30' : 'bg-gray-100 text-gray-500' }} px-1.5 py-0.5 rounded-full">{{ $cat->media_count }}</span>
                                </a>
                            @endforeach
                        </div>
                    </div>
                @endif

                @if($videos->count() > 0)
                    <div class="grid md:grid-cols-2 lg:grid-cols-3 gap-8">
                        @foreach($videos as $video)
                            <div class="bg-white rounded-lg shadow-md overflow-hidden hover:shadow-xl transition">
                                <!-- Video Thumbnail -->
                                <div class="relative pb-56 bg-gray-900">
                                    @if($video->youtube_id)
                                        <!-- YouTube Thumbnail -->
                                        <img src="https://img.youtube.com/vi/{{ $video->youtube_id }}/hqdefault.jpg"
                                             alt="{{ $video->title }}"
                                             class="absolute inset-0 w-full h-full object-cover"
                                             onerror="this.src='https://img.youtube.com/vi/{{ $video->youtube_id }}/mqdefault.jpg'">

                                        <!-- Play Button Overlay -->
                                        <div class="absolute inset-0 flex items-center justify-center bg-black bg-opacity-30 hover:bg-opacity-40 transition cursor-pointer"
                                             onclick="openVideoModal('{{ $video->youtube_id }}', '{{ addslashes($video->title) }}')">
                                            <div class="bg-red-600 bg-opacity-90 w-20 h-20 rounded-full flex items-center justify-center transform hover:scale-110 transition">
                                                <i class="fas fa-play text-white text-2xl ml-1"></i>
                                            </div>
                                        </div>

                                        <!-- Duration Badge -->
                                        <div class="absolute bottom-3 right-3 bg-black bg-opacity-80 px-2 py-1 rounded text-white text-sm">
                                            <i class="fas fa-play-circle mr-1"></i>Vidéo
                                        </div>
                                    @else
                                        <!-- Placeholder if no YouTube ID -->
                                        <div class="absolute inset-0 flex items-center justify-center">
                                            <i class="fas fa-video text-gray-600 text-5xl"></i>
                                        </div>
                                    @endif
                                </div>

                                <!-- Video Info -->
                                <div class="p-5">
                                    <h3 class="font-bold text-lg text-gray-900 mb-2 line-clamp-2">{{ $video->title }}</h3>

                                    @if($video->description)
                                        <p class="text-gray-600 text-sm mb-4 line-clamp-3">{{ $video->description }}</p>
                                    @endif

                                    <div class="flex items-center justify-between text-sm text-slate-500 pt-3 border-t">
                                        <span>
                                            <i class="fas fa-calendar-alt mr-1"></i>
                                            {{ \Carbon\Carbon::parse($video->created_at)->format('d M Y') }}
                                        </span>
                                        @if($video->youtube_id)
                                            <button onclick="openVideoModal('{{ $video->youtube_id }}', '{{ addslashes($video->title) }}')"
                                                    class="text-amber-600 hover:text-amber-700 font-semibold">
                                                Regarder <i class="fas fa-play-circle ml-1"></i>
                                            </button>
                                        @endif
                                    </div>
                                </div>
                            </div>
                        @endforeach
                    </div>
                @else
                    <!-- Empty State -->
                    <div class="bg-white rounded-lg shadow-md p-16 text-center">
                        <div class="bg-gray-100 w-24 h-24 rounded-full flex items-center justify-center mx-auto mb-6">
                            <i class="fas fa-video text-gray-400 text-5xl"></i>
                        </div>
                        <h3 class="text-2xl font-bold text-gray-900 mb-3">Aucune vidéo disponible</h3>
                        <p class="text-gray-600">
                            Nous n'avons pas encore de vidéos dans notre collection. Revenez bientôt !
                        </p>
                    </div>
                @endif
            </div>

            <!-- Audios Section -->
            <div id="audios-section" class="tab-content hidden">
                {{-- Filtre catégories pour audios --}}
                @if($audioCategories->count() > 0)
                    <div class="mb-6">
                        <div class="flex flex-wrap items-center gap-2">
                            @php
                                $audFilterParams = array_filter([
                                    'video_category' => request('video_category'),
                                    'image_category' => request('image_category'),
                                ]);
                            @endphp
                            <a href="{{ route('public.media', $audFilterParams) }}#audios-section"
                               class="px-4 py-2 rounded-full text-sm font-medium transition border {{ !$selectedAudioCategory ? 'bg-amber-600 text-white border-amber-600 shadow' : 'bg-white text-gray-700 border-gray-200 hover:border-amber-300 hover:bg-amber-50' }}">
                                Tous
                            </a>
                            @foreach($audioCategories as $cat)
                                @php
                                    $isActive = $selectedAudioCategory && $selectedAudioCategory->id == $cat->id;
                                    $catParams = array_merge($audFilterParams, ['audio_category' => $cat->id]);
                                @endphp
                                <a href="{{ route('public.media', $catParams) }}#audios-section"
                                   class="px-4 py-2 rounded-full text-sm font-medium transition border {{ $isActive ? 'text-white shadow border-transparent' : 'bg-white text-gray-700 border-gray-200 hover:shadow hover:border-opacity-60' }}"
                                   style="{{ $isActive ? 'background-color:'.$cat->color.';border-color:'.$cat->color : '' }}">
                                    @if($cat->icon)<i class="{{ $cat->icon }} mr-1" style="{{ !$isActive ? 'color:'.$cat->color : '' }}"></i>@endif
                                    {{ $cat->name }}
                                    <span class="ml-1 text-xs {{ $isActive ? 'bg-white bg-opacity-30' : 'bg-gray-100 text-gray-500' }} px-1.5 py-0.5 rounded-full">{{ $cat->media_count }}</span>
                                </a>
                            @endforeach
                        </div>
                    </div>
                @endif

                @if($audios->count() > 0)
                    <div id="audios-grid" class="grid md:grid-cols-2 lg:grid-cols-3 gap-8">
                        @foreach($audios as $audio)
                            @php
                                $scSrc = '';
                                if ($audio->soundcloud_url && str_contains($audio->soundcloud_url, '<iframe')) {
                                    preg_match('/src=["\']([^"\']+)/', $audio->soundcloud_url, $m);
                                    $scSrc = $m[1] ?? '';
                                } elseif ($audio->soundcloud_url) {
                                    $scSrc = 'https://w.soundcloud.com/player/?url=' . urlencode($audio->soundcloud_url) . '&color=%23f97316&auto_play=false&hide_related=false&show_comments=false&show_user=true&show_reposts=false&show_teaser=false&visual=false';
                                }
                            @endphp
                            <div class="audio-card bg-white rounded-xl shadow-lg overflow-hidden hover:shadow-2xl transition-all duration-300 border border-slate-100"
                                 data-sc-src="{{ $scSrc }}"
                                 data-audio-id="{{ $audio->id }}"
                                 data-spotify-url="{{ $audio->spotify_url ?? '' }}"
                                 data-file-path="{{ $audio->file_path ? asset('storage/' . $audio->file_path) : '' }}">
                                <!-- Podcast Cover with Play Button Overlay -->
                                <div class="relative h-64 bg-gradient-to-br from-blue-900 via-blue-800 to-blue-900 group cursor-pointer"
                                     onclick="lazyPlayAudio(this.closest('.audio-card'))">
                                    @if($audio->podcast_image)
                                        <img src="{{ asset($audio->podcast_image) }}"
                                             alt="{{ $audio->title }}"
                                             class="absolute inset-0 w-full h-full object-cover">
                                    @else
                                        <img src="{{ asset('images/defaults/podcast-default.svg') }}"
                                             alt="{{ $audio->title }}"
                                             class="absolute inset-0 w-full h-full object-cover">
                                    @endif

                                    <!-- Play Button Overlay -->
                                    <div id="play-overlay-{{ $audio->id }}" class="absolute inset-0 bg-black bg-opacity-30 group-hover:bg-opacity-50 transition-all duration-300 flex items-center justify-center">
                                        <div class="w-20 h-20 bg-gradient-to-br from-amber-400 to-orange-500 rounded-full flex items-center justify-center shadow-2xl transform group-hover:scale-110 transition-transform duration-300">
                                            <i id="cover-icon-{{ $audio->id }}" class="fas fa-play text-white text-3xl ml-1"></i>
                                        </div>
                                    </div>

                                    <!-- Duration Badge -->
                                    <div class="absolute top-3 right-3 bg-black bg-opacity-70 text-white text-xs px-3 py-1 rounded-full flex items-center gap-1">
                                        <i class="fas fa-headphones"></i>
                                        <span>Podcast</span>
                                    </div>
                                </div>

                                <!-- Audio Info -->
                                <div class="p-5">
                                    <h3 class="font-bold text-xl text-gray-900 mb-2 line-clamp-2">{{ $audio->title }}</h3>

                                    @if($audio->description)
                                        <p class="text-gray-600 text-sm mb-4 line-clamp-2">{{ $audio->description }}</p>
                                    @endif

                                    <!-- Player container - iframe sera injecté ici au clic -->
                                    <div id="sc-container-{{ $audio->id }}" style="position:absolute;left:-9999px;opacity:0;pointer-events:none;"></div>

                                    <!-- Custom Audio Player UI (hidden until play) -->
                                    <div id="podcast-{{ $audio->id }}" class="hidden mb-4">
                                        <div class="bg-gradient-to-br from-amber-50 via-orange-50 to-amber-50 rounded-xl p-5 shadow-inner border border-amber-100">
                                            <div class="flex items-center gap-4">
                                                <button onclick="togglePlayPause('{{ $audio->id }}')"
                                                        id="play-btn-{{ $audio->id }}"
                                                        class="flex-shrink-0 w-14 h-14 bg-gradient-to-br from-amber-400 to-orange-500 rounded-full flex items-center justify-center shadow-lg hover:shadow-xl transform hover:scale-105 transition-all">
                                                    <i id="play-icon-{{ $audio->id }}" class="fas fa-pause text-white text-xl"></i>
                                                </button>
                                                <div class="flex-grow">
                                                    <div class="flex justify-between text-xs text-gray-600 mb-2">
                                                        <span id="current-time-{{ $audio->id }}">0:00</span>
                                                        <span id="duration-{{ $audio->id }}">--:--</span>
                                                    </div>
                                                    <div class="relative h-2 bg-amber-200 rounded-full overflow-hidden cursor-pointer"
                                                         onclick="seekAudio(event, '{{ $audio->id }}')">
                                                        <div id="progress-{{ $audio->id }}"
                                                             class="absolute top-0 left-0 h-full bg-gradient-to-r from-amber-500 to-orange-500 rounded-full transition-all"
                                                             style="width: 0%"></div>
                                                    </div>
                                                </div>
                                                <div class="flex items-center gap-2">
                                                    <i class="fas fa-volume-up text-amber-600"></i>
                                                    <input type="range" min="0" max="100" value="80"
                                                           id="volume-{{ $audio->id }}"
                                                           onchange="changeVolume('{{ $audio->id }}', this.value)"
                                                           class="w-20 h-1 bg-amber-200 rounded-lg appearance-none cursor-pointer">
                                                </div>
                                            </div>
                                            <div class="mt-4 pt-4 border-t border-amber-200">
                                                <p class="text-sm text-gray-700 flex items-center gap-2">
                                                    <i class="fas fa-podcast text-amber-600"></i>
                                                    <span id="player-status-{{ $audio->id }}" class="font-medium">Chargement...</span>
                                                </p>
                                            </div>
                                        </div>
                                    </div>

                                    <div class="flex items-center justify-between text-sm text-slate-500 pt-3 border-t border-slate-100">
                                        <span class="flex items-center gap-1">
                                            <i class="fas fa-calendar-alt"></i>
                                            {{ \Carbon\Carbon::parse($audio->created_at)->translatedFormat('d M Y') }}
                                        </span>
                                        <span class="text-amber-600 font-semibold flex items-center gap-1">
                                            <i class="fas fa-podcast"></i>
                                            <span>Écouter</span>
                                        </span>
                                    </div>
                                </div>
                            </div>
                        @endforeach
                    </div>

                    <!-- Pagination -->
                    <div id="audio-pagination" class="flex justify-center items-center gap-2 mt-10"></div>
                @else
                    <!-- Empty State -->
                    <div class="bg-white rounded-lg shadow-md p-16 text-center">
                        <div class="bg-gray-100 w-24 h-24 rounded-full flex items-center justify-center mx-auto mb-6">
                            <i class="fas fa-music text-gray-400 text-5xl"></i>
                        </div>
                        <h3 class="text-2xl font-bold text-gray-900 mb-3">Aucun audio disponible</h3>
                        <p class="text-gray-600">
                            Nous n'avons pas encore d'audios dans notre collection. Revenez bientôt !
                        </p>
                    </div>
                @endif
            </div>
        </div>
    </section>

    <!-- Video Modal -->
    <div id="videoModal" class="fixed inset-0 bg-black bg-opacity-90 z-50 hidden items-center justify-center p-4">
        <div class="relative w-full max-w-5xl">
            <button onclick="closeVideoModal()" class="absolute -top-12 right-0 text-white hover:text-gray-300 text-4xl">
                <i class="fas fa-times"></i>
            </button>
            <div class="bg-black rounded-lg overflow-hidden">
                <div class="relative pb-[56.25%]">
                    <iframe id="videoFrame"
                            class="absolute inset-0 w-full h-full"
                            frameborder="0"
                            allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
                            allowfullscreen>
                    </iframe>
                </div>
                <div id="videoTitle" class="p-4 text-white font-semibold"></div>
            </div>
        </div>
    </div>

    <!-- Gallery Modal -->
    <div id="galleryModal" class="fixed inset-0 bg-black bg-opacity-95 z-50 hidden items-center justify-center p-4">
        <div class="relative w-full max-w-6xl">
            <!-- Close Button -->
            <button onclick="closeGalleryModal()" class="absolute -top-12 right-0 text-white hover:text-gray-300 text-4xl z-10">
                <i class="fas fa-times"></i>
            </button>

            <!-- Image Counter -->
            <div class="absolute -top-12 left-0 text-white text-lg">
                <span id="currentImageIndex">1</span> / <span id="totalImages">1</span>
            </div>

            <div class="bg-black rounded-lg overflow-hidden">
                <!-- Main Image -->
                <div class="relative">
                    <img id="galleryMainImage" src="" alt="" class="w-full h-auto max-h-[70vh] object-contain">

                    <!-- Navigation Arrows -->
                    <button id="prevImageBtn" onclick="navigateGallery(-1)"
                            class="absolute left-4 top-1/2 -translate-y-1/2 bg-white bg-opacity-20 hover:bg-opacity-30 text-white p-4 rounded-full transition hidden">
                        <i class="fas fa-chevron-left text-2xl"></i>
                    </button>
                    <button id="nextImageBtn" onclick="navigateGallery(1)"
                            class="absolute right-4 top-1/2 -translate-y-1/2 bg-white bg-opacity-20 hover:bg-opacity-30 text-white p-4 rounded-full transition hidden">
                        <i class="fas fa-chevron-right text-2xl"></i>
                    </button>
                </div>

                <!-- Image Info -->
                <div class="p-6 bg-white">
                    <h3 id="galleryTitle" class="text-2xl font-bold text-gray-900 mb-2"></h3>
                    <p id="galleryDescription" class="text-gray-600 mb-4"></p>

                    <!-- Thumbnails -->
                    <div id="galleryThumbnails" class="flex gap-2 overflow-x-auto pb-2">
                        <!-- Thumbnails will be inserted here by JavaScript -->
                    </div>
                </div>
            </div>
        </div>
    </div>

@endsection

@push('scripts')
<script>
    // Tab switching
    document.addEventListener('DOMContentLoaded', function() {
        const tabBtns = document.querySelectorAll('.tab-btn');
        const tabContents = document.querySelectorAll('.tab-content');

        tabBtns.forEach(btn => {
            btn.addEventListener('click', function() {
                const tabName = this.dataset.tab;

                // Update active button
                tabBtns.forEach(b => {
                    b.classList.remove('active', 'bg-slate-800', 'text-white');
                    b.classList.add('text-slate-700');
                });
                this.classList.add('active', 'bg-slate-800', 'text-white');
                this.classList.remove('text-slate-700');

                // Show/hide content
                tabContents.forEach(content => {
                    content.classList.add('hidden');
                });
                document.getElementById(tabName + '-section').classList.remove('hidden');

            });
        });

        // Set initial active state based on URL hash or active category filter
        const hash = window.location.hash;
        const params = new URLSearchParams(window.location.search);
        let initialTab = 'images'; // default

        if (hash === '#audios-section' || (!hash && params.has('audio_category'))) {
            initialTab = 'audios';
        } else if (hash === '#videos-section' || (!hash && params.has('video_category'))) {
            initialTab = 'videos';
        } else if (hash === '#images-section' || (!hash && params.has('image_category'))) {
            initialTab = 'images';
        }

        // Activate the correct tab
        const initialBtn = document.querySelector(`.tab-btn[data-tab="${initialTab}"]`);
        if (initialBtn) {
            tabBtns.forEach(b => {
                b.classList.remove('active', 'bg-slate-800', 'text-white');
                b.classList.add('text-slate-700');
            });
            initialBtn.classList.add('active', 'bg-slate-800', 'text-white');
            initialBtn.classList.remove('text-slate-700');

            // Show correct content
            tabContents.forEach(content => content.classList.add('hidden'));
            document.getElementById(initialTab + '-section').classList.remove('hidden');
        }
    });

    // Video modal functions
    function openVideoModal(youtubeId, title) {
        const modal = document.getElementById('videoModal');
        const frame = document.getElementById('videoFrame');
        const titleEl = document.getElementById('videoTitle');

        frame.src = `https://www.youtube.com/embed/${youtubeId}?autoplay=1`;
        titleEl.textContent = title;
        modal.classList.remove('hidden');
        modal.classList.add('flex');

        // Prevent body scroll
        document.body.style.overflow = 'hidden';
    }

    function closeVideoModal() {
        const modal = document.getElementById('videoModal');
        const frame = document.getElementById('videoFrame');

        frame.src = '';
        modal.classList.add('hidden');
        modal.classList.remove('flex');

        // Restore body scroll
        document.body.style.overflow = 'auto';
    }

    // Gallery modal state
    let currentGalleryImages = [];
    let currentGalleryIndex = 0;
    let currentGalleryTitle = '';
    let currentGalleryDescription = '';

    // Gallery modal functions
    function openGalleryModal(images, title, description, startIndex = 0) {
        // Si images est vide ou null, utiliser un tableau vide
        currentGalleryImages = Array.isArray(images) && images.length > 0 ? images : [];
        currentGalleryIndex = startIndex;
        currentGalleryTitle = title;
        currentGalleryDescription = description;

        // Si pas d'images, ne pas ouvrir la modal
        if (currentGalleryImages.length === 0) {
            return;
        }

        updateGalleryDisplay();

        const modal = document.getElementById('galleryModal');
        modal.classList.remove('hidden');
        modal.classList.add('flex');

        // Prevent body scroll
        document.body.style.overflow = 'hidden';
    }

    function closeGalleryModal() {
        const modal = document.getElementById('galleryModal');
        modal.classList.add('hidden');
        modal.classList.remove('flex');

        // Restore body scroll
        document.body.style.overflow = 'auto';

        // Reset state
        currentGalleryImages = [];
        currentGalleryIndex = 0;
    }

    function navigateGallery(direction) {
        currentGalleryIndex += direction;

        // Loop around
        if (currentGalleryIndex < 0) {
            currentGalleryIndex = currentGalleryImages.length - 1;
        } else if (currentGalleryIndex >= currentGalleryImages.length) {
            currentGalleryIndex = 0;
        }

        updateGalleryDisplay();
    }

    function updateGalleryDisplay() {
        const mainImage = document.getElementById('galleryMainImage');
        const titleEl = document.getElementById('galleryTitle');
        const descEl = document.getElementById('galleryDescription');
        const currentIndexEl = document.getElementById('currentImageIndex');
        const totalImagesEl = document.getElementById('totalImages');
        const thumbnailsContainer = document.getElementById('galleryThumbnails');
        const prevBtn = document.getElementById('prevImageBtn');
        const nextBtn = document.getElementById('nextImageBtn');

        // Update main image
        mainImage.src = currentGalleryImages[currentGalleryIndex];
        mainImage.alt = currentGalleryTitle;

        // Update text
        titleEl.textContent = currentGalleryTitle;
        descEl.textContent = currentGalleryDescription || '';
        descEl.style.display = currentGalleryDescription ? 'block' : 'none';

        // Update counter
        currentIndexEl.textContent = currentGalleryIndex + 1;
        totalImagesEl.textContent = currentGalleryImages.length;

        // Show/hide navigation arrows
        if (currentGalleryImages.length > 1) {
            prevBtn.classList.remove('hidden');
            nextBtn.classList.remove('hidden');
        } else {
            prevBtn.classList.add('hidden');
            nextBtn.classList.add('hidden');
        }

        // Update thumbnails
        thumbnailsContainer.innerHTML = '';
        if (currentGalleryImages.length > 1) {
            currentGalleryImages.forEach((imageUrl, index) => {
                const thumb = document.createElement('div');
                thumb.className = `flex-shrink-0 w-20 h-20 rounded overflow-hidden cursor-pointer border-2 transition ${
                    index === currentGalleryIndex ? 'border-emerald-600 opacity-100' : 'border-transparent opacity-60 hover:opacity-100'
                }`;
                thumb.innerHTML = `<img src="${imageUrl}" alt="" class="w-full h-full object-cover">`;
                thumb.onclick = () => {
                    currentGalleryIndex = index;
                    updateGalleryDisplay();
                };
                thumbnailsContainer.appendChild(thumb);
            });
        }
    }

    // Close modals on escape key
    document.addEventListener('keydown', function(e) {
        if (e.key === 'Escape') {
            closeVideoModal();
            closeGalleryModal();
        } else if (e.key === 'ArrowLeft') {
            if (!document.getElementById('galleryModal').classList.contains('hidden')) {
                navigateGallery(-1);
            }
        } else if (e.key === 'ArrowRight') {
            if (!document.getElementById('galleryModal').classList.contains('hidden')) {
                navigateGallery(1);
            }
        }
    });

    // Close video modal on background click
    document.getElementById('videoModal').addEventListener('click', function(e) {
        if (e.target === this) {
            closeVideoModal();
        }
    });

    // Close gallery modal on background click
    document.getElementById('galleryModal').addEventListener('click', function(e) {
        if (e.target === this) {
            closeGalleryModal();
        }
    });

    // Store widget instances
    const widgets = {};
    const updateIntervals = {};

    // ===================== AUDIO PAGINATION =====================
    const AUDIOS_PER_PAGE = 12;
    let currentAudioPage = 1;
    const allAudioCards = document.querySelectorAll('.audio-card');
    const totalAudioPages = Math.ceil(allAudioCards.length / AUDIOS_PER_PAGE);

    function showAudioPage(page) {
        currentAudioPage = page;
        allAudioCards.forEach((card, i) => {
            const start = (page - 1) * AUDIOS_PER_PAGE;
            const end = start + AUDIOS_PER_PAGE;
            card.style.display = (i >= start && i < end) ? '' : 'none';
        });
        renderAudioPagination();
        // Scroll to top of audio section
        document.getElementById('audios-section').scrollIntoView({ behavior: 'smooth', block: 'start' });
    }

    function renderAudioPagination() {
        const container = document.getElementById('audio-pagination');
        if (!container || totalAudioPages <= 1) return;
        let html = '';

        // Previous
        html += `<button onclick="showAudioPage(${currentAudioPage - 1})" ${currentAudioPage === 1 ? 'disabled' : ''}
            class="px-3 py-2 rounded-lg text-sm font-medium transition ${currentAudioPage === 1 ? 'bg-gray-100 text-gray-400 cursor-not-allowed' : 'bg-white text-gray-700 border border-gray-200 hover:bg-amber-50 hover:border-amber-300'}">
            <i class="fas fa-chevron-left"></i>
        </button>`;

        // Pages
        for (let p = 1; p <= totalAudioPages; p++) {
            if (p === 1 || p === totalAudioPages || (p >= currentAudioPage - 1 && p <= currentAudioPage + 1)) {
                html += `<button onclick="showAudioPage(${p})"
                    class="px-4 py-2 rounded-lg text-sm font-medium transition ${p === currentAudioPage ? 'bg-amber-500 text-white shadow' : 'bg-white text-gray-700 border border-gray-200 hover:bg-amber-50 hover:border-amber-300'}">
                    ${p}
                </button>`;
            } else if (p === currentAudioPage - 2 || p === currentAudioPage + 2) {
                html += `<span class="px-2 py-2 text-gray-400">...</span>`;
            }
        }

        // Next
        html += `<button onclick="showAudioPage(${currentAudioPage + 1})" ${currentAudioPage === totalAudioPages ? 'disabled' : ''}
            class="px-3 py-2 rounded-lg text-sm font-medium transition ${currentAudioPage === totalAudioPages ? 'bg-gray-100 text-gray-400 cursor-not-allowed' : 'bg-white text-gray-700 border border-gray-200 hover:bg-amber-50 hover:border-amber-300'}">
            <i class="fas fa-chevron-right"></i>
        </button>`;

        container.innerHTML = html;
    }

    // Init pagination
    if (allAudioCards.length > AUDIOS_PER_PAGE) {
        showAudioPage(1);
    }

    // ===================== LAZY LOAD AUDIO (iframe créé au clic) =====================
    let scApiLoaded = false;
    let scApiLoading = false;
    let scApiCallbacks = [];

    function loadSCApi(callback) {
        if (scApiLoaded) { callback(); return; }
        scApiCallbacks.push(callback);
        if (scApiLoading) return;
        scApiLoading = true;
        const s = document.createElement('script');
        s.src = 'https://w.soundcloud.com/player/api.js';
        s.onload = function() {
            scApiLoaded = true;
            scApiCallbacks.forEach(fn => fn());
            scApiCallbacks = [];
        };
        document.head.appendChild(s);
    }

    function lazyPlayAudio(card) {
        const audioId = card.dataset.audioId;
        const scSrc = card.dataset.scSrc;
        const overlay = document.getElementById('play-overlay-' + audioId);
        const playerUI = document.getElementById('podcast-' + audioId);
        const container = document.getElementById('sc-container-' + audioId);
        const coverIcon = document.getElementById('cover-icon-' + audioId);
        const statusEl = document.getElementById('player-status-' + audioId);

        // Show player UI
        if (playerUI) playerUI.classList.remove('hidden');

        // Si déjà initialisé, toggle play/pause
        if (widgets[audioId]) {
            widgets[audioId].isPaused(function(paused) {
                if (paused) { widgets[audioId].play(); }
                else { widgets[audioId].pause(); }
            });
            return;
        }

        // Afficher spinner sur le cover
        if (coverIcon) coverIcon.className = 'fas fa-spinner fa-spin text-white text-3xl';
        if (statusEl) statusEl.textContent = 'Chargement...';

        if (scSrc) {
            // Créer l'iframe SoundCloud à la demande
            const iframe = document.createElement('iframe');
            iframe.id = 'sc-widget-' + audioId;
            iframe.width = '100%';
            iframe.height = '166';
            iframe.scrolling = 'no';
            iframe.frameBorder = 'no';
            iframe.allow = 'autoplay';
            iframe.src = scSrc;
            container.appendChild(iframe);

            // Charger l'API SC puis initialiser le widget
            loadSCApi(function() {
                widgets[audioId] = SC.Widget(iframe);

                widgets[audioId].bind(SC.Widget.Events.READY, function() {
                    if (statusEl) statusEl.textContent = 'En lecture...';
                    if (coverIcon) coverIcon.className = 'fas fa-pause text-white text-3xl';
                    if (overlay) overlay.style.display = 'none';

                    widgets[audioId].getDuration(function(duration) {
                        var el = document.getElementById('duration-' + audioId);
                        if (el) el.textContent = formatTime(duration / 1000);
                    });

                    widgets[audioId].play();
                    startProgressUpdate(audioId);
                });

                widgets[audioId].bind(SC.Widget.Events.PLAY, function() {
                    var el = document.getElementById('play-icon-' + audioId);
                    if (el) el.className = 'fas fa-pause text-white text-xl';
                    if (coverIcon) coverIcon.className = 'fas fa-pause text-white text-3xl';
                });

                widgets[audioId].bind(SC.Widget.Events.PAUSE, function() {
                    var el = document.getElementById('play-icon-' + audioId);
                    if (el) el.className = 'fas fa-play text-white text-xl ml-1';
                    if (coverIcon) coverIcon.className = 'fas fa-play text-white text-3xl ml-1';
                });

                widgets[audioId].bind(SC.Widget.Events.FINISH, function() {
                    var el = document.getElementById('play-icon-' + audioId);
                    if (el) el.className = 'fas fa-play text-white text-xl ml-1';
                    if (coverIcon) coverIcon.className = 'fas fa-play text-white text-3xl ml-1';
                    var prog = document.getElementById('progress-' + audioId);
                    if (prog) prog.style.width = '0%';
                    if (statusEl) statusEl.textContent = 'Terminé';
                });
            });
        }
    }

    // Toggle play/pause
    function togglePlayPause(audioId) {
        if (widgets[audioId]) {
            widgets[audioId].isPaused(function(paused) {
                if (paused) { widgets[audioId].play(); }
                else { widgets[audioId].pause(); }
            });
        }
    }

    // Change volume
    function changeVolume(audioId, volume) {
        if (widgets[audioId]) { widgets[audioId].setVolume(volume); }
    }

    // Seek audio
    function seekAudio(event, audioId) {
        if (widgets[audioId]) {
            const rect = event.currentTarget.getBoundingClientRect();
            const percent = (event.clientX - rect.left) / rect.width;
            widgets[audioId].getDuration(function(duration) {
                widgets[audioId].seekTo(duration * percent);
            });
        }
    }

    // Start progress update
    function startProgressUpdate(audioId) {
        if (updateIntervals[audioId]) clearInterval(updateIntervals[audioId]);
        updateIntervals[audioId] = setInterval(function() {
            if (!widgets[audioId]) return;
            widgets[audioId].getPosition(function(position) {
                widgets[audioId].getDuration(function(duration) {
                    var prog = document.getElementById('progress-' + audioId);
                    var time = document.getElementById('current-time-' + audioId);
                    if (prog) prog.style.width = ((position / duration) * 100) + '%';
                    if (time) time.textContent = formatTime(position / 1000);
                });
            });
        }, 500);
    }

    // Format time helper
    function formatTime(seconds) {
        const mins = Math.floor(seconds / 60);
        const secs = Math.floor(seconds % 60);
        return mins + ':' + (secs < 10 ? '0' : '') + secs;
    }

</script>

@endpush