@extends('layouts.app')

@section('title', $search ? "Search: {$search}" : 'All Videos')

@section('content')
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8 lg:py-12">

        {{-- Page Header --}}
        <div class="mb-8">
            <h1 class="text-3xl md:text-4xl font-bold text-white">
                @if($search)
                    Search Results
                @else
                    All Videos
                @endif
            </h1>
            @if($search)
                <div class="mt-3 flex items-center gap-3 flex-wrap">
                    <p class="text-gray-400">
                        Showing results for: <span class="text-yellow-400 font-medium">"{{ $search }}"</span>
                    </p>
                    <a href="{{ route('videos.index') }}" class="inline-flex items-center gap-1.5 px-3 py-1 bg-gray-700 hover:bg-gray-600 text-gray-300 text-sm rounded-full transition-colors">
                        <svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"/>
                        </svg>
                        Clear search
                    </a>
                </div>
            @endif
            @if(isset($month) && $month)
                <div class="mt-3 flex items-center gap-3 flex-wrap">
                    <p class="text-gray-400">
                        Filtered by: <span class="text-yellow-400 font-medium">{{ $months[$month] ?? $month }}</span>
                    </p>
                    <a href="{{ route($search ? 'videos.search' : 'videos.index', array_filter(['q' => $search, 'sort' => $sort])) }}"
                       class="inline-flex items-center gap-1.5 px-3 py-1 bg-gray-700 hover:bg-gray-600 text-gray-300 text-sm rounded-full transition-colors">
                        <svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"/>
                        </svg>
                        Clear month filter
                    </a>
                </div>
            @endif
        </div>

        {{-- Search Bar (prominent) --}}
        <div class="mb-6">
            <form action="{{ route('videos.search') }}" method="GET">
                <div class="relative">
                    <input
                        type="text"
                        name="q"
                        value="{{ $search ?? '' }}"
                        placeholder="Search by title, topic, state, scripture..."
                        class="w-full bg-gray-800 border border-gray-700 rounded-xl pl-12 pr-24 py-4 text-white placeholder-gray-500 focus:outline-none focus:border-red-500 focus:ring-2 focus:ring-red-500/30 transition-all text-lg"
                    >
                    <div class="absolute left-4 top-1/2 -translate-y-1/2 text-gray-500">
                        <svg class="w-5 h-5" 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 0z"/>
                        </svg>
                    </div>
                    <button type="submit" class="absolute right-3 top-1/2 -translate-y-1/2 bg-red-600 hover:bg-red-700 text-white px-5 py-2 rounded-lg text-sm font-medium transition-colors">
                        Search
                    </button>
                </div>
            </form>
        </div>

        {{-- Category Filter Pills --}}
        @if(isset($categories) && $categories->isNotEmpty())
            <div class="flex flex-wrap gap-2 mb-6">
                <a href="{{ route($search ? 'videos.search' : 'videos.index', array_filter(['q' => $search, 'sort' => $sort, 'month' => $month ?? null])) }}"
                   class="inline-flex items-center px-4 py-2 rounded-full text-sm font-medium transition-colors {{ !isset($categorySlug) || !$categorySlug ? 'bg-red-600 text-white' : 'bg-gray-800 text-gray-300 border border-gray-700 hover:border-red-500/50 hover:text-white' }}">
                    All
                </a>
                @foreach($categories as $category)
                    <a href="{{ route($search ? 'videos.search' : 'videos.index', array_filter(['q' => $search, 'sort' => $sort, 'month' => $month ?? null, 'category' => $category->slug])) }}"
                       class="inline-flex items-center gap-1.5 px-4 py-2 rounded-full text-sm font-medium transition-colors {{ isset($categorySlug) && $categorySlug === $category->slug ? 'text-white' : 'border hover:text-white' }}"
                       style="{{ isset($categorySlug) && $categorySlug === $category->slug ? 'background-color: ' . $category->color : 'background-color: ' . $category->color . '10; border-color: ' . $category->color . '40; color: ' . $category->color }}">
                        <span class="w-2 h-2 rounded-full" style="background-color: {{ isset($categorySlug) && $categorySlug === $category->slug ? '#fff' : $category->color }}"></span>
                        {{ $category->name }}
                        <span class="text-xs opacity-70">({{ $category->videos_count }})</span>
                    </a>
                @endforeach
            </div>
        @endif

        {{-- Active Category Banner --}}
        @if(isset($activeCategory) && $activeCategory)
            <div class="flex items-center gap-3 mb-4">
                <p class="text-gray-400">
                    Category: <span class="font-medium" style="color: {{ $activeCategory->color }}">{{ $activeCategory->name }}</span>
                </p>
                <a href="{{ route($search ? 'videos.search' : 'videos.index', array_filter(['q' => $search, 'sort' => $sort, 'month' => $month ?? null])) }}"
                   class="inline-flex items-center gap-1.5 px-3 py-1 bg-gray-700 hover:bg-gray-600 text-gray-300 text-sm rounded-full transition-colors">
                    <svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"/>
                    </svg>
                    Clear category
                </a>
            </div>
        @endif

        {{-- Filter & Sort Controls --}}
        <div class="flex flex-col sm:flex-row gap-3 mb-8">
            {{-- Month Filter --}}
            @if(isset($months) && $months->isNotEmpty())
                <form method="GET" action="{{ $search ? route('videos.search') : route('videos.index') }}" class="flex-shrink-0">
                    @if($search)
                        <input type="hidden" name="q" value="{{ $search }}">
                    @endif
                    @if($sort)
                        <input type="hidden" name="sort" value="{{ $sort }}">
                    @endif
                    <select
                        name="month"
                        onchange="this.form.submit()"
                        class="bg-gray-800 border border-gray-700 rounded-xl px-4 py-3 text-white focus:outline-none focus:border-red-500 focus:ring-1 focus:ring-red-500 transition-colors cursor-pointer min-w-[180px]"
                    >
                        <option value="">All Months</option>
                        @foreach($months as $key => $label)
                            <option value="{{ $key }}" {{ (isset($month) && $month === $key) ? 'selected' : '' }}>{{ $label }}</option>
                        @endforeach
                    </select>
                </form>
            @endif

            {{-- Sort Dropdown --}}
            <form method="GET" action="{{ $search ? route('videos.search') : route('videos.index') }}" class="flex-shrink-0">
                @if($search)
                    <input type="hidden" name="q" value="{{ $search }}">
                @endif
                @if(isset($month) && $month)
                    <input type="hidden" name="month" value="{{ $month }}">
                @endif
                <select
                    name="sort"
                    onchange="this.form.submit()"
                    class="bg-gray-800 border border-gray-700 rounded-xl px-4 py-3 text-white focus:outline-none focus:border-red-500 focus:ring-1 focus:ring-red-500 transition-colors cursor-pointer min-w-[180px]"
                >
                    <option value="newest" {{ $sort === 'newest' ? 'selected' : '' }}>Newest First</option>
                    <option value="oldest" {{ $sort === 'oldest' ? 'selected' : '' }}>Oldest First</option>
                    <option value="title_asc" {{ $sort === 'title_asc' ? 'selected' : '' }}>Title A-Z</option>
                    <option value="title_desc" {{ $sort === 'title_desc' ? 'selected' : '' }}>Title Z-A</option>
                    <option value="duration" {{ $sort === 'duration' ? 'selected' : '' }}>Duration</option>
                </select>
            </form>

            {{-- Play All & Shuffle Buttons --}}
            @if(isset($allMatchingVideos) && $allMatchingVideos->isNotEmpty())
                <div class="flex items-center gap-2">
                    <button onclick="playAllVideos(false)"
                            class="inline-flex items-center gap-1.5 bg-red-600 hover:bg-red-700 text-white px-4 py-3 rounded-xl text-sm font-medium transition-colors shadow-lg shadow-red-900/20">
                        <svg class="w-4 h-4" fill="currentColor" viewBox="0 0 24 24"><path d="M8 5v14l11-7z"/></svg>
                        Play All
                    </button>
                    <button onclick="playAllVideos(true)"
                            class="inline-flex items-center gap-1.5 bg-gray-800 hover:bg-gray-700 text-gray-300 hover:text-white px-4 py-3 rounded-xl text-sm font-medium transition-colors border border-gray-700">
                        <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="M7 16V4m0 0L3 8m4-4l4 4m6 0v12m0 0l4-4m-4 4l-4-4"/>
                        </svg>
                        Shuffle
                    </button>
                </div>
            @endif

            {{-- Results Count (pushed right) --}}
            <div class="sm:ml-auto flex items-center">
                <p class="text-sm text-gray-400">
                    {{ $videos->total() }} {{ Str::plural('video', $videos->total()) }} found
                </p>
            </div>
        </div>

        {{-- Inline Player (hidden by default) --}}
        <div id="videos-player-wrapper" class="hidden mb-8">
            <div class="bg-gray-900 rounded-xl border border-gray-800 overflow-hidden">
                <div class="relative aspect-video max-h-[480px]">
                    <div id="videos-yt-player" class="absolute inset-0 w-full h-full"></div>
                </div>
                <div class="p-4 flex flex-col sm:flex-row items-start sm:items-center justify-between gap-3">
                    <div class="min-w-0 flex-1">
                        <p class="text-xs text-gray-500 uppercase tracking-wider font-medium">Now Playing</p>
                        <h3 id="videos-now-playing" class="text-white font-bold truncate mt-0.5"></h3>
                    </div>
                    <div class="flex items-center gap-2 shrink-0">
                        <button onclick="videosPrev()" class="text-gray-400 hover:text-white transition-colors p-2 rounded-lg hover:bg-gray-800" title="Previous">
                            <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24"><path d="M6 6h2v12H6zm3.5 6l8.5 6V6z"/></svg>
                        </button>
                        <button onclick="videosNext()" class="text-gray-400 hover:text-white transition-colors p-2 rounded-lg hover:bg-gray-800" title="Next">
                            <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24"><path d="M6 18l8.5-6L6 6v12zM16 6v12h2V6h-2z"/></svg>
                        </button>
                        <button onclick="toggleVideosLoop()" id="videos-loop-btn"
                                class="text-gray-400 hover:text-white transition-colors p-2 rounded-lg hover:bg-gray-800" title="Loop">
                            <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15"/>
                            </svg>
                        </button>
                        <span id="videos-counter" class="text-gray-500 text-sm font-mono ml-1"></span>
                        <button onclick="closeVideosPlayer()" class="text-gray-400 hover:text-red-400 transition-colors p-2 rounded-lg hover:bg-gray-800 ml-1" title="Close player">
                            <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"/>
                            </svg>
                        </button>
                    </div>
                </div>
            </div>
        </div>

        {{-- Video Grid --}}
        @if($videos->isEmpty())
            <div class="text-center py-20">
                <svg class="w-16 h-16 text-gray-600 mx-auto mb-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"/>
                </svg>
                @if($search)
                    <h3 class="text-xl font-semibold text-gray-400">No videos found for "{{ $search }}"</h3>
                    <p class="text-gray-500 mt-2">Try a different search term or browse all videos.</p>
                    <a href="{{ route('videos.index') }}" class="inline-block mt-6 px-6 py-2.5 bg-red-600 hover:bg-red-700 text-white rounded-lg transition-colors font-medium">
                        Browse All Videos
                    </a>
                @else
                    <h3 class="text-xl font-semibold text-gray-400">No videos available</h3>
                    <p class="text-gray-500 mt-2">Check back soon for new content!</p>
                @endif
            </div>
        @else
            <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6">
                {{-- Pinned: Today's Devotional --}}
                @if(isset($todaysVideo) && $todaysVideo && $videos->currentPage() === 1)
                    <a href="{{ route('videos.show', $todaysVideo) }}" class="group block relative">
                        <div class="bg-gray-800 rounded-xl overflow-hidden border-2 border-yellow-500/50 transition-all duration-300 group-hover:scale-[1.03] group-hover:shadow-xl group-hover:shadow-yellow-900/20 group-hover:border-yellow-400/70">
                            <div class="absolute top-3 left-3 z-10">
                                <span class="inline-flex items-center gap-1 px-2.5 py-1 rounded-full text-xs font-bold bg-yellow-500 text-black shadow-lg">
                                    <i class="fa-solid fa-calendar-day text-[10px]"></i>
                                    TODAY
                                </span>
                            </div>
                            <div class="relative aspect-video overflow-hidden">
                                <img src="https://img.youtube.com/vi/{{ $todaysVideo->youtube_id }}/hqdefault.jpg"
                                     alt="{{ $todaysVideo->title }}"
                                     class="w-full h-full object-cover transition-transform duration-300 group-hover:scale-110"
                                     loading="lazy">
                                <div class="absolute inset-0 bg-black/0 group-hover:bg-black/30 transition-all duration-300 flex items-center justify-center">
                                    <div class="w-14 h-14 rounded-full bg-yellow-500/90 flex items-center justify-center opacity-0 group-hover:opacity-100 transition-all duration-300 transform scale-75 group-hover:scale-100">
                                        <svg class="w-6 h-6 text-black ml-1" fill="currentColor" viewBox="0 0 24 24">
                                            <path d="M8 5v14l11-7z"/>
                                        </svg>
                                    </div>
                                </div>
                                <div class="absolute bottom-2 right-2 bg-black/80 text-white text-xs font-medium px-2 py-1 rounded">
                                    {{ $todaysVideo->formatted_duration }}
                                </div>
                            </div>
                            <div class="p-4">
                                <h3 class="text-sm font-semibold text-white line-clamp-2 leading-snug group-hover:text-yellow-300 transition-colors">
                                    {{ $todaysVideo->title }}
                                </h3>
                            </div>
                        </div>
                    </a>
                @endif

                @foreach($videos as $video)
                    @if(isset($todaysVideo) && $todaysVideo && $video->id === $todaysVideo->id && $videos->currentPage() === 1)
                        @continue
                    @endif
                    <a href="{{ route('videos.show', $video) }}" class="group block">
                        <div class="bg-gray-800 rounded-xl overflow-hidden border border-gray-700/50 transition-all duration-300 group-hover:scale-[1.03] group-hover:shadow-xl group-hover:shadow-red-900/20 group-hover:border-red-600/30">
                            {{-- Thumbnail --}}
                            <div class="relative aspect-video overflow-hidden">
                                <img
                                    src="https://img.youtube.com/vi/{{ $video->youtube_id }}/hqdefault.jpg"
                                    alt="{{ $video->title }}"
                                    class="w-full h-full object-cover transition-transform duration-300 group-hover:scale-110"
                                    loading="lazy"
                                >
                                {{-- Hover overlay --}}
                                <div class="absolute inset-0 bg-black/0 group-hover:bg-black/30 transition-all duration-300 flex items-center justify-center">
                                    <div class="w-14 h-14 rounded-full bg-red-600/90 flex items-center justify-center opacity-0 group-hover:opacity-100 transition-all duration-300 transform scale-75 group-hover:scale-100">
                                        <svg class="w-6 h-6 text-white ml-1" fill="currentColor" viewBox="0 0 24 24">
                                            <path d="M8 5v14l11-7z"/>
                                        </svg>
                                    </div>
                                </div>
                                {{-- Duration badge --}}
                                <div class="absolute bottom-2 right-2 bg-black/80 text-white text-xs font-medium px-2 py-1 rounded">
                                    {{ $video->formatted_duration }}
                                </div>
                            </div>
                            {{-- Info --}}
                            <div class="p-4">
                                <h3 class="text-sm font-semibold text-white line-clamp-2 leading-snug group-hover:text-yellow-300 transition-colors">
                                    {{ $video->title }}
                                </h3>
                            </div>
                        </div>
                    </a>
                @endforeach
            </div>

            {{-- Pagination --}}
            @if($videos->hasPages())
                <div class="mt-10">
                    {{ $videos->appends(request()->query())->links() }}
                </div>
            @endif
        @endif
    </div>
@endsection

@push('scripts')
<script>
    @if(isset($allMatchingVideos) && $allMatchingVideos->isNotEmpty())
    @php
        $playerVideos = $allMatchingVideos->map(function($v) {
            return ['youtube_id' => $v->youtube_id, 'title' => $v->title];
        })->values();
    @endphp
    const allVideos = @json($playerVideos);
    @else
    const allVideos = [];
    @endif

    let vPlayer = null;
    let vIndex = -1;
    let vLoop = false;
    let vShuffle = false;
    let vOrder = [];
    let vReady = false;

    function playAllVideos(shuffle) {
        vShuffle = shuffle;

        // Load YouTube API if not loaded
        if (!window.YT) {
            const tag = document.createElement('script');
            tag.src = 'https://www.youtube.com/iframe_api';
            tag.onload = function() {
                // YT API calls onYouTubeIframeAPIReady when fully loaded
            };
            document.head.appendChild(tag);
            window._pendingShuffle = shuffle;
            window.onYouTubeIframeAPIReady = function() {
                vPlayer = new YT.Player('videos-yt-player', {
                    height: '100%', width: '100%',
                    playerVars: { autoplay: 0, rel: 0, modestbranding: 1, origin: window.location.origin },
                    events: {
                        onReady: function() { vReady = true; startPlayback(window._pendingShuffle); },
                        onStateChange: function(e) {
                            if (e.data === YT.PlayerState.ENDED) videosNext();
                        }
                    }
                });
            };
        } else if (!vPlayer) {
            vPlayer = new YT.Player('videos-yt-player', {
                height: '100%', width: '100%',
                playerVars: { autoplay: 0, rel: 0, modestbranding: 1, origin: window.location.origin },
                events: {
                    onReady: function() { vReady = true; startPlayback(shuffle); },
                    onStateChange: function(e) {
                        if (e.data === YT.PlayerState.ENDED) videosNext();
                    }
                }
            });
        } else {
            startPlayback(shuffle);
        }
    }

    function startPlayback(shuffle) {
        vOrder = Array.from({ length: allVideos.length }, function(_, i) { return i; });
        if (shuffle) {
            for (let i = vOrder.length - 1; i > 0; i--) {
                const j = Math.floor(Math.random() * (i + 1));
                const t = vOrder[i]; vOrder[i] = vOrder[j]; vOrder[j] = t;
            }
        }
        vShuffle = shuffle;
        playVideoAt(0);
    }

    function playVideoAt(orderPos) {
        if (orderPos < 0 || orderPos >= vOrder.length) {
            if (vLoop) { if (vShuffle) startPlayback(true); else playVideoAt(0); }
            return;
        }
        vIndex = orderPos;
        const video = allVideos[vOrder[orderPos]];

        document.getElementById('videos-player-wrapper').classList.remove('hidden');
        document.getElementById('videos-player-wrapper').scrollIntoView({ behavior: 'smooth', block: 'start' });

        if (vReady && vPlayer) vPlayer.loadVideoById(video.youtube_id);
        document.getElementById('videos-now-playing').textContent = video.title;
        document.getElementById('videos-counter').textContent = (orderPos + 1) + ' / ' + allVideos.length;
    }

    function videosNext() {
        const next = vIndex + 1;
        if (next < vOrder.length) { playVideoAt(next); }
        else if (vLoop) { if (vShuffle) startPlayback(true); else playVideoAt(0); }
    }

    function videosPrev() {
        if (vIndex > 0) playVideoAt(vIndex - 1);
        else if (vLoop) playVideoAt(vOrder.length - 1);
    }

    function toggleVideosLoop() {
        vLoop = !vLoop;
        const btn = document.getElementById('videos-loop-btn');
        btn.classList.toggle('text-red-400', vLoop);
        btn.classList.toggle('text-gray-400', !vLoop);
        btn.title = vLoop ? 'Loop On' : 'Loop Off';
    }

    function closeVideosPlayer() {
        document.getElementById('videos-player-wrapper').classList.add('hidden');
        if (vPlayer && vReady) vPlayer.stopVideo();
        vIndex = -1;
    }
</script>
@endpush

@push('styles')
<style>
    /* Custom pagination styling for dark theme */
    nav[role="navigation"] {
        display: flex;
        justify-content: center;
    }
    nav[role="navigation"] .relative.inline-flex {
        display: flex;
        gap: 0.25rem;
    }
    nav[role="navigation"] span[aria-current="page"] span,
    nav[role="navigation"] a {
        padding: 0.5rem 1rem;
        border-radius: 0.5rem;
        font-size: 0.875rem;
        font-weight: 500;
        transition: all 0.15s;
    }
    nav[role="navigation"] a {
        background-color: rgb(31 41 55);
        color: rgb(209 213 219);
        border: 1px solid rgb(55 65 81);
    }
    nav[role="navigation"] a:hover {
        background-color: rgb(220 38 38);
        color: white;
        border-color: rgb(220 38 38);
    }
    nav[role="navigation"] span[aria-current="page"] span {
        background-color: rgb(220 38 38);
        color: white;
        border: 1px solid rgb(220 38 38);
    }
    nav[role="navigation"] span[aria-disabled="true"] span {
        padding: 0.5rem 1rem;
        border-radius: 0.5rem;
        font-size: 0.875rem;
        background-color: rgb(31 41 55);
        color: rgb(107 114 128);
        border: 1px solid rgb(55 65 81);
        cursor: not-allowed;
    }
    /* Hide the "Showing X to Y of Z results" text */
    nav[role="navigation"] > div:first-child {
        display: none;
    }
</style>
@endpush