@php use Illuminate\Support\Str; @endphp
<div
    class="fixed inset-0 z-[999] flex items-center justify-center bg-black/50"
    id="mediaManagerModal"
    wire:ignore.self
    x-data="{ show: @entangle('showModal') }"
    x-show="show"
    x-transition.opacity
    x-on:click.self="$wire.closeModal()"
    x-cloak
>
    <div class="container relative">
        <x-card
            class="relative flex max-h-[90vh] min-h-96 flex-col overscroll-contain rounded-xl p-5 shadow-xl"
            class:body="static flex flex-col overflow-hidden rounded-lg border p-0"
            size="lg"
        >
            <button
                class="absolute -end-3 -top-3 inline-grid size-8 place-items-center rounded-full bg-card-background shadow-lg shadow-black/5 transition md:-end-4 md:-top-4"
                type="button"
                wire:click="closeModal"
                aria-label="{{ __('Close') }}"
            >
                <x-tabler-x class="size-5" />
            </button>

            {{-- Header with Title, Filters, Sorting, and Search --}}
            <x-slot:head
                class="mb-5 w-full rounded-lg border"
            >
                <h2 class="mb-4 text-xl font-semibold">@lang('Content Manager')</h2>

                <div class="flex w-full justify-between text-xs max-md:flex-col max-md:gap-2">
                    <p class="-mb-3 hidden text-xs opacity-80 max-md:block">
                        @lang('Filters'):
                    </p>
                    <div
                        class="relative md:-ms-3"
                        x-data="{ open: false }"
                        @click.outside="open = false"
                    >
                        <button
                            class="hidden w-full items-center gap-1.5 py-2 text-sm font-medium max-md:flex"
                            @click.prevent="open = !open"
                            type="button"
                        >
                            {{ $activeFilter }}
                            <x-tabler-chevron-down
                                class="size-4 transition"
                                ::class="{ 'rotate-180': open }"
                            />
                        </button>
                        {{-- Filters Tabs --}}
                        <ul
                            class="w-full grow text-sm transition-all max-md:pointer-events-none max-md:invisible max-md:absolute max-md:start-0 max-md:top-full max-md:z-[90] max-md:mt-1 max-md:min-w-[min(195px,100%)] max-md:translate-y-1 max-md:rounded-dropdown max-md:border max-md:border-dropdown-border max-md:bg-dropdown-background max-md:p-2 max-md:opacity-0 max-md:shadow-lg max-md:shadow-black/5 max-md:before:absolute max-md:before:inset-x-0 max-md:before:-top-1 max-md:before:bottom-full md:flex md:flex-wrap md:items-center md:justify-start md:gap-2 xl:gap-5 max-md:[&.open]:pointer-events-auto max-md:[&.open]:visible max-md:[&.open]:translate-y-0 max-md:[&.open]:opacity-100"
                            :class="{ 'open': open }"
                        >
                            @foreach ($filters as $filter)
                                <li>
                                    <button
                                        wire:click="changeFilter('{{ $filter }}'); open = false;"
                                        @class([
                                            'rounded-full px-3 py-2 leading-tight transition-all hover:bg-accent/80 hover:text-accent-foreground max-md:w-full max-md:rounded-md max-md:text-start [&.lqd-is-active]:shadow-md [&.lqd-is-active]:shadow-black/5 [&.lqd-is-active]:bg-accent [&.lqd-is-active]:text-accent-foreground',
                                            'lqd-is-active' => $activeFilter === $filter,
                                        ])
                                    >
                                        @lang($filter)
                                    </button>
                                </li>
                            @endforeach
                        </ul>
                    </div>
                    {{-- Sorting & Search --}}
                    <div class="flex items-center gap-2">
                        <div class="flex text-nowrap text-sm font-medium text-heading-foreground">
                            <x-dropdown.dropdown
                                class:dropdown-dropdown="max-lg:end-auto max-lg:start-0"
                                :teleport="false"
                                offsetY="1rem"
                                anchor="end"
                            >
                                <x-slot:trigger
                                    class="whitespace-nowrap px-0 py-1"
                                    variant="link"
                                    size="xs"
                                >
                                    {{ __('Sort by') }}
                                    <x-tabler-chevron-down
                                        class="size-4 transition"
                                        ::class="{ 'rotate-180': open }"
                                    />
                                </x-slot:trigger>

                                <x-slot:dropdown
                                    class="overflow-hidden text-2xs font-medium"
                                >
                                    <div class="lqd-sort-list flex flex-col">
                                        @foreach ($sortButtons as $button)
                                            <button
                                                class="{{ $sort === $button['sort'] ? 'bg-foreground/5' : '' }} group flex w-full items-center gap-1 px-3 py-2 hover:bg-foreground/5"
                                                wire:click.prevent="changeSort('{{ $button['sort'] }}')"
                                            >
                                                {{ $button['label'] }}
                                                @if ($sort === $button['sort'])
                                                    <x-tabler-caret-down-filled class="{{ $sortAscDesc === 'asc' ? 'rotate-180' : '' }} size-3 opacity-80" />
                                                @endif
                                            </button>
                                        @endforeach
                                    </div>
                                </x-slot:dropdown>
                            </x-dropdown.dropdown>
                        </div>
                        {{-- Search input with clear button --}}
                        <div class="relative">
                            <x-tabler-search
                                class="pointer-events-none absolute start-3 top-1/2 z-10 size-4 -translate-y-1/2 opacity-75"
                                stroke-width="1.5"
                            />
                            <x-forms.input
                                class="min-w-48 border-none bg-heading-foreground/5 ps-10 transition-colors max-lg:rounded-md"
                                id="serach-resources"
                                container-class="peer"
                                wire:model.live.debounce.300ms="searchTerm"
                                type="text"
                                placeholder="{{ __('Search') }}"
                            />
                            @if (!empty($searchTerm))
                                <button
                                    class="absolute right-2 top-1/2 -translate-y-1/2 transform text-gray-400 hover:text-gray-600"
                                    wire:click="clearSearch"
                                    type="button"
                                >
                                    <x-tabler-x class="size-3" />
                                </button>
                            @endif
                            {{-- Search loading indicator --}}
                            <div
                                class="absolute right-2 top-1/2 -translate-y-1/2 transform"
                                wire:loading
                                wire:target="searchTerm"
                            >
                                <div class="h-3 w-3 animate-spin rounded-full border-b border-blue-500"></div>
                            </div>
                        </div>
                    </div>
                </div>
            </x-slot:head>

            {{-- Upload Files Section --}}
            @if ($activeFilter === 'Upload Files')
                <div class="p-4">
                    {{-- Upload Area --}}
                    <div
                        class="group/drop-area relative w-full rounded-3xl border-2 border-dashed px-5 py-8 transition-colors"
                        x-data="mediaManagerUploadArea"
                        @dragover="handleDragOver($event)"
                        @dragleave="handleDragLeave($event)"
                        @drop="handleDrop($event)"
                        :class="{ 'border-blue-500 bg-blue-50': dragover }"
                    >
                        <div class="mx-auto space-y-4 text-center">
                            <div class="mx-auto mb-4 inline-grid w-12 place-content-center">
                                <x-tabler-circle-arrow-up
                                    class="size-12 text-heading-foreground opacity-60"
                                    stroke-width="1.5"
                                />
                            </div>

                            <h4 class="text-base">@lang('Drag and Drop a File')</h4>

                            <div class="mx-auto flex w-[300px] items-center gap-7 text-2xs font-medium text-heading-foreground">
                                <span class="inline-flex h-px grow bg-heading-foreground/5"></span>
                                @lang('or')
                                <span class="inline-flex h-px grow bg-heading-foreground/5"></span>
                            </div>

                            {{-- File Processing Indicator --}}
                            <div
                                class="w-full px-8"
                                x-show="fileProcessing && (!$wire.uploadingFiles || $wire.uploadingFiles.length === 0)"
                                x-transition.opacity
                            >
                                <div class="rounded-lg border border-blue-200 bg-blue-50 p-3">
                                    <div class="flex items-center justify-center gap-2">
                                        <div class="h-4 w-4 animate-spin rounded-full border-b-2 border-blue-500"></div>
                                        <span class="text-xs text-blue-600">@lang('Processing selected files')...</span>
                                    </div>
                                    <p class="mt-1 text-center text-xs text-blue-500">@lang('Please wait, validating large files may take a moment.')</p>
                                </div>
                            </div>

                            {{-- File List --}}
                            @if (count($uploadingFiles))
                                <div
                                    class="w-full px-8"
                                    x-data
                                    x-init="$el.closest('[x-data]').fileProcessing = false"
                                >
                                    <ul class="mt-2 space-y-1 rounded-lg bg-gray-50 p-3 text-left text-xs text-gray-600">
                                        @foreach ($uploadingFiles as $file)
                                            <li class="flex items-center justify-between">
                                                <span>{{ $file?->getClientOriginalName() }}</span>
                                                <span class="text-gray-400">{{ number_format($file?->getSize() / 1024, 1) }} KB</span>
                                            </li>
                                        @endforeach
                                    </ul>
                                </div>
                            @endif

                            {{-- Upload Errors --}}
                            @if (!empty($uploadErrors))
                                <div class="w-full px-8">
                                    <div class="rounded-lg border border-red-200 bg-red-50 p-3">
                                        <ul class="space-y-1 text-xs text-red-600">
                                            @foreach ($uploadErrors as $error)
                                                <li>• {{ $error }}</li>
                                            @endforeach
                                        </ul>
                                    </div>
                                </div>
                            @endif

                            {{-- Upload Progress --}}
                            @if ($isUploading && !empty($uploadProgress))
                                <div class="w-full px-8">
                                    <div class="rounded-lg border border-blue-200 bg-blue-50 p-3">
                                        <div class="flex items-center gap-2">
                                            <div class="h-4 w-4 animate-spin rounded-full border-b-2 border-blue-500"></div>
                                            <span class="text-xs text-blue-600">{{ $uploadProgress }}</span>
                                        </div>
                                    </div>
                                </div>
                            @endif

                            {{-- Upload Success --}}
                            @if (!empty($uploadedFiles) && !$isUploading)
                                <div class="w-full px-8">
                                    <div class="rounded-lg border border-green-200 bg-green-50 p-3">
                                        <p class="text-xs font-medium text-green-600">✓ {{ count($uploadedFiles) }} file(s) uploaded successfully!</p>
                                        <ul class="mt-1 space-y-1 text-xs text-green-600">
                                            @foreach ($uploadedFiles as $file)
                                                <li>• {{ $file['name'] }}</li>
                                            @endforeach
                                        </ul>
                                    </div>
                                </div>
                            @endif

                            {{-- Action Buttons --}}
                            <div>
                                <input
                                    class="hidden"
                                    id="fileInput"
                                    data-exclude-media-manager="true"
                                    type="file"
                                    multiple
                                    wire:model="uploadingFiles"
                                    x-ref="fileInput"
                                    @change="handleFileSelect()"
                                    accept="*"
                                />

								<x-button
									type="button"
									onclick="document.getElementById('fileInput').click()"
									variant="outline"
									:disabled="$isUploading"
								>
									{{ count($uploadingFiles) ? __('Add More') : __('Browse Files') }}
								</x-button>
                            </div>

                            <p class="m-0 text-3xs font-medium opacity-60">
                                @lang('Max :max files, :maxSize MB each.', [
                                    'max' => setting('media_max_files', 5),
                                    'maxSize' => setting('media_max_size', 25),
                                ])
                                <br>
                                @lang('Allowed types: :types', [
                                    'types' => setting('media_allowed_types', 'jpg, png, gif, webp, svg, mp4, avi, mov, wmv, flv, webm, mp3, wav, m4a, pdf, doc, docx, xls, xlsx'),
                                ])
                            </p>
                        </div>
                    </div>
                </div>
            @endif

            {{-- Images Section --}}
            @if ($activeFilter === 'Images')
                <div
                    class="overflow-y-auto overscroll-contain p-4"
                    x-data="infiniteScroll"
                    x-ref="scrollContainer"
                >
                    {{-- Search results info --}}
                    @if (!empty($searchTerm))
                        <div class="mb-4 text-sm text-gray-600">
                            @if ($images->count() > 0)
                                @lang('Found :count images for', ['count' => $images->count()]) "<strong>{{ $searchTerm }}</strong>"
                            @else
                                @lang('No images found for') "<strong>{{ $searchTerm }}</strong>"
                            @endif
                        </div>
                    @endif

                    <div
                        class="grid grid-cols-2 gap-4 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-6"
                        wire:loading.class="opacity-50"
                    >
                        @forelse ($images as $image)
                            @php
                                $isDisabledImage = $this->isCardDisabled('image', $this->allowedTypes);
                            @endphp
                            <div
                                class="{{ in_array((string) $image->id, $selectedImages ?? [], true) ? 'outline outline-[3px] outline-accent' : '' }} {{ $isDisabledImage ? 'pointer-events-none opacity-30 bg-gray-50 border-gray-200 cursor-not-allowed filter grayscale' : 'cursor-pointer hover:bg-gray-100 hover:shadow-md hover:border-gray-300' }} group relative w-fit overflow-hidden rounded-lg border p-2.5 transition-all duration-200"
                                @if (!$isDisabledImage && $allowMultipleSelection) wire:click="toggleSelect('image', '{{ $image->id }}')"
								@elseif (!$isDisabledImage)
									wire:click="$set('selectedImages', ['{{ $image->id }}'])" @endif
                                tabindex="{{ $isDisabledImage ? '-1' : '0' }}"
                                role="button"
                                @if ($isDisabledImage) aria-disabled="true" @endif
                            >
                                <div class="relative overflow-hidden rounded-lg">

									@php
										$img = $image->output_url ?? $image->url;
										if (Str::contains($img, 'uploads')) {
											$img = Str::after($img, '/uploads');
											$img = '/uploads' . $img;
										}
									@endphp
                                    <img
                                        class="h-32 w-32 object-cover"
                                        src="{{ ThumbImage($img) }}"
                                        alt="{{ $image->title ?? $image->input }}"
                                        loading="lazy"
                                        onerror="this.src='data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjQiIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHJlY3Qgd2lkdGg9IjI0IiBoZWlnaHQ9IjI0IiBmaWxsPSIjRjNGNEY2Ii8+CjxwYXRoIGQ9Ik0xMiAxNkM4LjY4NjI5IDE2IDYgMTMuMzEzNyA2IDEwQzYgNi42ODYyOSA4LjY4NjI5IDQgMTIgNEMxNS4zMTM3IDQgMTggNi42ODYyOSAxOCAxMEMxOCAxMy4zMTM3IDE1LjMxMzcgMTYgMTIgMTZaIiBmaWxsPSIjOUI5QkEwIi8+CjxwYXRoIGQ9Ik0xMiAxMkMxMC44OTU0IDEyIDEwIDExLjEwNDYgMTAgMTBDMTAgOC44OTU0MyAxMC44OTU0IDggMTIgOEMxMy4xMDQ2IDggMTQgOC44OTU0MyAxNCAxMEMxNCAxMS4xMDQ2IDEzLjEwNDYgMTIgMTIgMTJaIiBmaWxsPSJ3aGl0ZSIvPgo8L3N2Zz4K'"
                                    />
                                    <div
                                        class="{{ in_array((string) $image->id, $selectedImages ?? [], true) ? 'opacity-100' : '' }} pointer-events-none absolute bottom-0 left-0 right-0 truncate bg-background p-1 text-xs text-heading-foreground opacity-0 transition-opacity duration-300 group-hover:opacity-100"
                                        style="pointer-events:none;"
                                    >
                                        {{ $image->title ?? Str::limit($image->input ?? ($image->filename ?? 'Untitled'), 30) }}
                                    </div>

                                    {{-- Show creation date on hover --}}
                                    <div
                                        class="absolute right-1 top-1 rounded bg-background px-1 py-0.5 text-xs text-heading-foreground opacity-0 transition-opacity group-hover:opacity-100">
                                        {{ $image->format_date ?? $image->created_at->format('M d, Y') }}
                                    </div>

                                    {{-- Selection indicator --}}
                                    @if (in_array((string) $image->id, $selectedImages ?? [], true))
                                        <span class="absolute end-1 top-1.5 flex items-center justify-center rounded-full bg-background p-2 shadow-lg">
                                            <x-tabler-check class="size-4" />
                                        </span>
                                    @endif
                                </div>
                            </div>
                        @empty
                            <div class="col-span-6 py-8 text-center text-gray-500">
                                <x-tabler-photo class="mx-auto mb-2 size-12 opacity-50" />
                                <p>@lang('No images found.')</p>
                                @if (!empty($searchTerm))
                                    <p class="mt-1 text-sm">@lang('Try adjusting your search term.')</p>
                                    <button
                                        class="mt-2 text-sm text-blue-500 underline hover:text-blue-700"
                                        wire:click="clearSearch"
                                    >
                                        @lang('Clear search')
                                    </button>
                                @endif
                            </div>
                        @endforelse
                    </div>

                    {{-- Loading indicator --}}
                    @if ($hasMoreImages && !$isLoading && $images->count() > 0)
                        <div
                            class="flex justify-center py-4"
                            x-ref="loadTrigger"
                        >
                            <div class="text-sm text-gray-500">
                                @lang('Scroll for more images...')
                            </div>
                        </div>
                    @endif

                    {{-- Loading spinner --}}
                    <div
                        class="flex items-center justify-center py-4"
                        wire:loading
                    >
                        <x-tabler-loader-2 class="size-6 animate-spin"></x-tabler-loader-2>
                    </div>
                </div>

                @if (!empty($selectedImages) && count($selectedImages) > 0)
                    <div class="flex justify-end border-t border-gray-200 px-4 pb-4 pt-4">
                        <x-button
                            class="w-full p-2 opacity-90 hover:opacity-100"
                            wire:click="insertSelected('image')"
                            type="button"
                            size="sm"
                            variant="secondary"
                        >
                            @lang($allowMultipleSelection ? 'Insert Selected Images' : 'Insert Selected Image')
                            @if ($allowMultipleSelection)
                                ({{ count($selectedImages) }})
                            @endif
                        </x-button>
                    </div>
                @endif
            @endif

            {{-- Videos Section --}}
            @if ($activeFilter === 'Videos')
                <div
                    class="overflow-y-auto overscroll-contain p-4"
                    x-data="infiniteScroll"
                    x-ref="scrollContainer"
                >
                    {{-- Search results info --}}
                    @if (!empty($searchTerm))
                        <div class="mb-4 text-sm text-gray-600">
                            @if ($videos->count() > 0)
                                @lang('Found :count videos for', ['count' => $videos->count()]) "<strong>{{ $searchTerm }}</strong>"
                            @else
                                @lang('No videos found for') "<strong>{{ $searchTerm }}</strong>"
                            @endif
                        </div>
                    @endif

                    <div
                        class="grid grid-cols-2 items-center gap-4 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-6"
                        wire:loading.class="opacity-50"
                    >
                        @forelse ($videos as $video)
                            @php
                                $isDisabledVideo = $this->isCardDisabled('video', $this->allowedTypes);
                            @endphp
                            <div
                                class="{{ in_array((string) $video->id, $selectedVideos ?? [], true) ? 'outline outline-[3px] outline-accent' : '' }} {{ $isDisabledVideo ? 'pointer-events-none opacity-30 bg-gray-50 border-gray-200 cursor-not-allowed filter grayscale' : 'cursor-pointer hover:bg-gray-100 hover:shadow-md hover:border-gray-300' }} group relative w-fit items-center justify-center overflow-hidden rounded-lg border p-2.5 transition-all duration-200"
                                @if (!$isDisabledVideo && $allowMultipleSelection) wire:click="toggleSelect('video', '{{ $video->id }}')"
								@elseif (!$isDisabledVideo)
									wire:click="$set('selectedVideos', ['{{ $video->id }}'])" @endif
                                tabindex="{{ $isDisabledVideo ? '-1' : '0' }}"
                                role="button"
                                @if ($isDisabledVideo) aria-disabled="true" @endif
                                x-data="{
                                    isPlaying: false,
                                    showControls: false,
                                    videoLoaded: false,
                                    loadVideo() {
                                        if (!this.videoLoaded) {
                                            this.$refs.videoPlayer.src = '{{ $video->output_url }}';
                                            this.videoLoaded = true;
                                        }
                                    }
                                }"
                            >
                                <div class="relative overflow-hidden rounded-lg">
                                    {{-- Video thumbnail or video player --}}
                                    @if (isset($video->output_url) && $video->output_url)
                                        <div class="relative h-32 w-32">
                                            {{-- Static thumbnail/placeholder shown initially --}}
                                            <div
                                                class="absolute inset-0 flex items-center justify-center bg-gray-200"
                                                x-show="!videoLoaded"
                                            >
                                                <x-tabler-video class="size-8 text-gray-400" />
                                            </div>

                                            {{-- Video element (initially without src) --}}
                                            <video
                                                class="h-32 w-32 object-cover"
                                                muted
                                                preload="none"
                                                x-ref="videoPlayer"
                                                x-show="videoLoaded"
                                                @mouseenter="showControls = true"
                                                @mouseleave="showControls = false"
                                                @click.stop
                                                @ended="isPlaying = false"
                                                @play="isPlaying = true"
                                                @pause="isPlaying = false"
                                                @loadeddata="$refs.videoPlayer.currentTime = 0"
                                            >
                                                {{-- Source will be added dynamically via Alpine.js --}}
                                            </video>
                                        </div>
                                    @else
                                        <div class="flex h-32 w-32 items-center justify-center bg-gray-200">
                                            <x-tabler-video class="size-8 text-gray-400" />
                                        </div>
                                    @endif

                                    {{-- Video Controls Overlay --}}
                                    @if (isset($video->output_url) && $video->output_url)
                                        <div
                                            class="absolute inset-0 flex items-center justify-center transition-opacity"
                                            x-show="showControls || !isPlaying"
                                            x-transition:enter="transition-opacity duration-200"
                                            x-transition:enter-start="opacity-0"
                                            x-transition:enter-end="opacity-100"
                                            x-transition:leave="transition-opacity duration-200"
                                            x-transition:leave-start="opacity-100"
                                            x-transition:leave-end="opacity-0"
                                        >
                                            <div class="rounded-full bg-black/50 p-2">
                                                <button
                                                    class="flex items-center justify-center text-white transition-colors hover:text-gray-300"
                                                    @click.stop="
                                            if (!videoLoaded) {
                                                loadVideo();
                                                // Wait a bit for video to load before playing
                                                setTimeout(() => {
                                                    $refs.videoPlayer.play();
                                                }, 100);
                                            } else if (isPlaying) {
                                                $refs.videoPlayer.pause();
                                            } else {
                                                $refs.videoPlayer.play();
                                            }
                                        "
                                                >
                                                    {{-- Show loading spinner when video is being loaded --}}
                                                    <div
                                                        class="h-6 w-6 animate-spin rounded-full border-2 border-white border-t-transparent"
                                                        x-show="videoLoaded && !isPlaying && $refs.videoPlayer && $refs.videoPlayer.readyState < 3"
                                                    ></div>

                                                    <x-tabler-player-play
                                                        class="size-6"
                                                        x-show="!isPlaying && (!videoLoaded || ($refs.videoPlayer && $refs.videoPlayer.readyState >= 3))"
                                                    />
                                                    <x-tabler-player-pause
                                                        class="size-6"
                                                        x-show="isPlaying"
                                                    />
                                                </button>
                                            </div>
                                        </div>
                                    @endif

                                    <div
                                        class="pointer-events-none absolute bottom-0 left-0 right-0 z-1 truncate bg-background p-1 text-xs text-heading-foreground opacity-100"
                                        style="pointer-events:none;"
                                    >
                                        {{ $video->title ?? Str::limit($video->input ?? ($video->filename ?? 'Untitled'), 30) }}
                                    </div>

                                    {{-- Show creation date on hover --}}
                                    <div
                                        class="absolute right-1 top-1 rounded bg-background px-1 py-0.5 text-xs text-heading-foreground opacity-0 transition-opacity group-hover:opacity-100">
                                        {{ $video->format_date ?? $video->created_at->format('M d, Y') }}
                                    </div>

                                    {{-- Selection indicator --}}
                                    @if (in_array((string) $video->id, $selectedVideos ?? [], true))
                                        <span class="absolute end-1 top-1.5 flex items-center justify-center rounded-full bg-background p-2 shadow-lg">
                                            <x-tabler-check class="size-4" />
                                        </span>
                                    @endif

                                    @if (!in_array((string) $video->id, $selectedVideos ?? [], true))
                                        <div class="absolute bottom-8 start-2 flex gap-1 rounded-md bg-background p-1">
                                            <x-tabler-video class="size-4" />
                                        </div>
                                    @endif
                                </div>
                            </div>
                        @empty
                            <div class="col-span-6 py-8 text-center text-gray-500">
                                <x-tabler-video class="mx-auto mb-2 size-12 opacity-50" />
                                <p>@lang('No videos found.')</p>
                                @if (!empty($searchTerm))
                                    <p class="mt-1 text-sm">@lang('Try adjusting your search term.')</p>
                                    <button
                                        class="mt-2 text-sm text-blue-500 underline hover:text-blue-700"
                                        wire:click="clearSearch"
                                    >
                                        @lang('Clear search')
                                    </button>
                                @endif
                            </div>
                        @endforelse
                    </div>

                    {{-- Loading indicator --}}
                    @if ($hasMoreVideos && !$isLoading && $videos->count() > 0)
                        <div
                            class="flex justify-center py-4"
                            x-ref="loadTrigger"
                        >
                            <div class="text-sm text-gray-500">
                                @lang('Scroll for more videos...')
                            </div>
                        </div>
                    @endif

                    {{-- Loading spinner --}}
                    <div
                        class="flex items-center justify-center py-4"
                        wire:loading
                    >
                        <x-tabler-loader-2 class="size-6 animate-spin"></x-tabler-loader-2>
                    </div>
                </div>

                @if (!empty($selectedVideos) && count($selectedVideos) > 0)
                    <div class="flex justify-end border-t border-gray-200 px-4 pb-4 pt-4">
                        <x-button
                            class="w-full p-2 opacity-90 hover:opacity-100"
                            wire:click="insertSelected('video')"
                            type="button"
                            size="sm"
                            variant="secondary"
                        >
                            @lang($allowMultipleSelection ? 'Insert Selected Videos' : 'Insert Selected Video')
                            @if ($allowMultipleSelection && count($selectedVideos))
                                ({{ count($selectedVideos) }})
                            @endif
                        </x-button>
                    </div>
                @endif
            @endif

            {{-- Other Files Section --}}
            @if ($activeFilter === 'Other Files')
                <div
                    class="overflow-y-auto overscroll-contain p-4"
                    x-data="infiniteScroll"
                    x-ref="scrollContainer"
                >
                    {{-- Search results info --}}
                    @if (!empty($searchTerm))
                        <div class="mb-4 text-sm text-gray-600">
                            @if ($otherFiles->count() > 0)
                                @lang('Found :count files for', ['count' => $otherFiles->count()]) "<strong>{{ $searchTerm }}</strong>"
                            @else
                                @lang('No files found for') "<strong>{{ $searchTerm }}</strong>"
                            @endif
                        </div>
                    @endif

                    <div
                        class="grid grid-cols-1 gap-4 md:grid-cols-2 lg:grid-cols-3"
                        wire:loading.class="opacity-50"
                    >
                        @forelse ($otherFiles as $file)
                            @php
                                $isDisabledOther = $this->isCardDisabled('other', $this->allowedTypes);
                            @endphp
                            <div
                                class="{{ in_array((string) $file->id, $selectedOtherFiles ?? [], true) ? 'outline outline-[3px] outline-accent' : '' }} {{ $isDisabledOther ? 'pointer-events-none opacity-30 bg-gray-50 border-gray-200 cursor-not-allowed filter grayscale' : 'cursor-pointer hover:bg-gray-100 hover:shadow-md hover:border-gray-300' }} group relative overflow-hidden rounded-lg border p-3 transition-all duration-200"
                                @if (!$isDisabledOther && $allowMultipleSelection) wire:click="toggleSelect('other', '{{ $file->id }}')"
								@elseif (!$isDisabledOther)
									wire:click="$set('selectedOtherFiles', ['{{ $file->id }}'])" @endif
                                tabindex="{{ $isDisabledOther ? '-1' : '0' }}"
                                role="button"
                                @if ($isDisabledOther) aria-disabled="true" @endif
                            >
                                <div class="flex items-center space-x-3">
                                    {{-- File icon based on extension --}}
                                    <div class="flex-shrink-0">
                                        @if (in_array($file->extension, ['pdf']))
                                            <x-tabler-file-type-pdf class="size-8 text-red-500" />
                                        @elseif (in_array($file->extension, ['doc', 'docx']))
                                            <x-tabler-file-type-doc class="size-8 text-blue-500" />
                                        @elseif (in_array($file->extension, ['xls', 'xlsx']))
                                            <x-tabler-file-type-xls class="size-8 text-green-500" />
                                        @elseif (in_array($file->extension, ['ppt', 'pptx']))
                                            <x-tabler-file-type-ppt class="size-8 text-orange-500" />
                                        @else
                                            <x-tabler-file class="size-8 text-gray-500" />
                                        @endif
                                    </div>

                                    {{-- File info --}}
                                    <div class="min-w-0 flex-1">
                                        <p class="truncate text-sm font-medium text-gray-900">
                                            {{ \Illuminate\Support\Str::limit($file->filename, 20, '...') }}
                                        </p>
                                        <p class="truncate text-sm text-gray-500">
                                            {{ strtoupper($file->extension) }} • {{ number_format($file->file_size / 1024, 1) }} KB
                                        </p>
                                        <p class="text-xs text-gray-400">
                                            {{ $file->format_date }}
                                        </p>
                                    </div>

                                    {{-- Selection indicator --}}
                                    @if (in_array((string) $file->id, $selectedOtherFiles ?? [], true))
                                        <span class="flex items-center justify-center rounded-full bg-accent p-2 text-white">
                                            <x-tabler-check class="size-4" />
                                        </span>
                                    @endif
                                </div>
                            </div>
                        @empty
                            <div class="col-span-3 py-8 text-center text-gray-500">
                                <x-tabler-files class="mx-auto mb-2 size-12 opacity-50" />
                                <p>@lang('No files found.')</p>
                                @if (!empty($searchTerm))
                                    <p class="mt-1 text-sm">@lang('Try adjusting your search term.')</p>
                                    <button
                                        class="mt-2 text-sm text-blue-500 underline hover:text-blue-700"
                                        wire:click="clearSearch"
                                    >
                                        @lang('Clear search')
                                    </button>
                                @endif
                            </div>
                        @endforelse
                    </div>

                    {{-- Loading indicator --}}
                    @if ($hasMoreOtherFiles && !$isLoading && $otherFiles->count() > 0)
                        <div
                            class="flex justify-center py-4"
                            x-ref="loadTrigger"
                        >
                            <div class="text-sm text-gray-500">
                                @lang('Scroll for more files...')
                            </div>
                        </div>
                    @endif

                    {{-- Loading spinner --}}
                    <div
                        class="flex items-center justify-center py-4"
                        wire:loading
                    >
                        <x-tabler-loader-2 class="size-6 animate-spin"></x-tabler-loader-2>
                    </div>
                </div>

                @if (!empty($selectedOtherFiles) && count($selectedOtherFiles) > 0)
                    <div class="flex justify-end border-t border-gray-200 px-4 pb-4 pt-4">
                        <x-button
                            class="w-full p-2 opacity-90 hover:opacity-100"
                            wire:click="insertSelected('other')"
                            type="button"
                            size="sm"
                            variant="secondary"
                        >
                            @lang('Insert Selected Files') ({{ count($selectedOtherFiles) }})
                        </x-button>
                    </div>
                @endif
            @endif

            {{-- Google Drive Section --}}
            @if ($activeFilter === 'Google Drive')
                <div class="p-4">
                    <div class="py-8 text-center text-gray-500">
                        <x-tabler-brand-google-drive class="mx-auto mb-2 size-12 opacity-50" />
                        <p>@lang('Google Drive integration coming soon...')</p>
                    </div>
                </div>
            @endif

            {{-- Stock Images Section --}}
            @if ($activeFilter === 'Stock Images')
                <div class="overflow-y-auto overscroll-contain p-4">
                    {{-- Search results info --}}
                    @if (!empty($searchTerm))
                        <div class="mb-4 text-sm text-gray-600">
                            @if ($stockImages->count() > 0)
                                @lang('Found :count stock images for', ['count' => $stockImages->count()]) "<strong>{{ $searchTerm }}</strong>"
                            @else
                                @lang('No stock images found for') "<strong>{{ $searchTerm }}</strong>"
                            @endif
                        </div>
                    @endif

                    <div
                        class="grid grid-cols-2 gap-4 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-6"
                        wire:loading.class="opacity-50"
                    >
                        @forelse ($stockImages as $stockImage)
                            @php
                                $isDisabledImage = $this->isCardDisabled('image', $this->allowedTypes);
                                // Check if this stock image is selected
                                $isSelected = in_array((string) $stockImage->id, $selectedStockImages ?? [], true);
                            @endphp
                            <div
                                class="{{ $isSelected ? 'outline outline-[3px] outline-accent' : '' }} {{ $isDisabledImage ? 'pointer-events-none opacity-30 bg-gray-50 border-gray-200 cursor-not-allowed filter grayscale' : 'cursor-pointer hover:bg-gray-100 hover:shadow-md hover:border-gray-300' }} group relative w-fit overflow-hidden rounded-lg border p-2.5 transition-all duration-200"
                                @if (!$isDisabledImage && $allowMultipleSelection) wire:click="toggleSelect('stockImage', '{{ $stockImage->id }}')"
								@elseif (!$isDisabledImage)
									wire:click="$set('selectedStockImages', ['{{ $stockImage->id }}'])" @endif
                                tabindex="{{ $isDisabledImage ? '-1' : '0' }}"
                                role="button"
                                @if ($isDisabledImage) aria-disabled="true" @endif
                            >
                                <div class="relative overflow-hidden rounded-lg">
                                    <img
                                        class="h-32 w-32 object-cover"
                                        src="{{ $stockImage->thumbnail }}"
                                        alt="{{ $stockImage->title }}"
                                        loading="lazy"
                                        onerror="this.src='data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjQiIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHJlY3Qgd2lkdGg9IjI0IiBoZWlnaHQ9IjI0IiBmaWxsPSIjRjNGNEY2Ii8+CjxwYXRoIGQ9Ik0xMiAxNkM4LjY4NjI5IDE2IDYgMTMuMzEzNyA2IDEwQzYgNi42ODYyOSA4LjY4NjI5IDQgMTIgNEMxNS4zMTM3IDQgMTggNi42ODYyOSAxOCAxMEMxOCAxMy4zMTM3IDE1LjMxMzcgMTYgMTIgMTZaIiBmaWxsPSIjOUI5QkEwIi8+CjxwYXRoIGQ9Ik0xMiAxMkMxMC44OTU0IDEyIDEwIDExLjEwNDYgMTAgMTBDMTAgOC44OTU0MyAxMC44OTU0IDggMTIgOEMxMy4xMDQ2IDggMTQgOC44OTU0MyAxNCAxMEMxNCAxMS4xMDQ2IDEzLjEwNDYgMTIgMTIgMTJaIiBmaWxsPSJ3aGl0ZSIvPgo8L3N2Zz4K'"
                                    />

                                    {{-- Title overlay - matches images section style --}}
                                    <div
                                        class="{{ $isSelected ? 'opacity-100' : '' }} pointer-events-none absolute bottom-0 left-0 right-0 truncate bg-background p-1 text-xs text-heading-foreground opacity-0 transition-opacity duration-300 group-hover:opacity-100"
                                        style="pointer-events:none;"
                                    >
                                        {{ Str::limit($stockImage->title ?? 'Untitled', 30) }}
                                    </div>

                                    {{-- Selection indicator --}}
                                    @if ($isSelected)
                                        <span class="absolute end-1 top-1.5 flex items-center justify-center rounded-full bg-background p-2 shadow-lg">
                                            <x-tabler-check class="size-4" />
                                        </span>
                                    @endif
                                </div>
                            </div>
                        @empty
                            <div class="col-span-6 py-8 text-center text-gray-500">
                                <x-tabler-photo class="mx-auto mb-2 size-12 opacity-50" />
                                @if (empty($searchTerm))
                                    <p>@lang('Enter a search term to find stock images')</p>
                                @else
                                    <p>@lang('No stock images found for') "<strong>{{ $searchTerm }}</strong>"</p>
                                    <p class="mt-1 text-sm">@lang('Try adjusting your search term.')</p>
                                    <button
                                        class="mt-2 text-sm text-blue-500 underline hover:text-blue-700"
                                        wire:click="clearSearch"
                                    >
                                        @lang('Clear search')
                                    </button>
                                @endif
                            </div>
                        @endforelse
                    </div>

                    {{-- Loading spinner --}}
                    <div
                        class="flex items-center justify-center py-4"
                        wire:loading
                    >
                        <x-tabler-loader-2 class="size-6 animate-spin"></x-tabler-loader-2>
                    </div>
                </div>

                {{-- Insert button for selected stock images --}}
                @if (!empty($selectedStockImages) && count($selectedStockImages) > 0)
                    <div class="flex justify-end border-t border-gray-200 px-4 pb-4 pt-4">
                        <x-button
                            class="w-full p-2 opacity-90 hover:opacity-100"
                            wire:click="downloadAndInsertStockImages"
                            type="button"
                            size="sm"
                            variant="secondary"
                            wire:loading.attr="disabled"
                            wire:loading.class="opacity-50"
                        >
                            <span
                                wire:loading.remove
                                wire:target="downloadAndInsertStockImages"
                            >
                                @lang($allowMultipleSelection ? 'Download & Insert Selected Images' : 'Download & Insert Selected Image')
                                @if ($allowMultipleSelection)
                                    ({{ count($selectedStockImages) }})
                                @endif
                            </span>
                            <span
                                class="flex items-center"
                                wire:loading
                                wire:target="downloadAndInsertStockImages"
                            >
                                <svg
                                    class="-ml-1 mr-2 h-4 w-4 animate-spin text-white"
                                    xmlns="http://www.w3.org/2000/svg"
                                    fill="none"
                                    viewBox="0 0 24 24"
                                >
                                    <circle
                                        class="opacity-25"
                                        cx="12"
                                        cy="12"
                                        r="10"
                                        stroke="currentColor"
                                        stroke-width="4"
                                    ></circle>
                                    <path
                                        class="opacity-75"
                                        fill="currentColor"
                                        d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
                                    ></path>
                                </svg>
                                @lang('Downloading...')
                            </span>
                        </x-button>
                    </div>
                @endif
            @endif

            {{-- Stock Videos Section --}}
            @if ($activeFilter === 'Stock Videos')
                <div class="overflow-y-auto overscroll-contain p-4">
                    {{-- Search results info --}}
                    @if (!empty($searchTerm))
                        <div class="mb-4 text-sm text-gray-600">
                            @if ($stockVideos->count() > 0)
                                @lang('Found :count stock videos for', ['count' => $stockVideos->count()]) "<strong>{{ $searchTerm }}</strong>"
                            @else
                                @lang('No stock videos found for') "<strong>{{ $searchTerm }}</strong>"
                            @endif
                        </div>
                    @endif

                    <div
                        class="grid grid-cols-2 gap-4 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-6"
                        wire:loading.class="opacity-50"
                    >
                        @forelse ($stockVideos as $stockVideo)
                            @php
                                $isDisabledVideo = $this->isCardDisabled('video', $this->allowedTypes);
                                // Check if this stock video is selected
                                $isSelected = in_array((string) $stockVideo->id, $selectedStockVideos ?? [], true);
                            @endphp
                            <div
                                class="{{ $isSelected ? 'outline outline-[3px] outline-accent' : '' }} {{ $isDisabledVideo ? 'pointer-events-none opacity-30 bg-gray-50 border-gray-200 cursor-not-allowed filter grayscale' : 'cursor-pointer hover:bg-gray-100 hover:shadow-md hover:border-gray-300' }} group relative w-fit overflow-hidden rounded-lg border p-2.5 transition-all duration-200"
                                @if (!$isDisabledVideo && $allowMultipleSelection) wire:click="toggleSelect('stockVideo', '{{ $stockVideo->id }}')"
								@elseif (!$isDisabledVideo)
									wire:click="$set('selectedStockVideos', ['{{ $stockVideo->id }}'])" @endif
                                tabindex="{{ $isDisabledVideo ? '-1' : '0' }}"
                                role="button"
                                @if ($isDisabledVideo) aria-disabled="true" @endif
                                x-data="{ isPlaying: false, showControls: false, videoLoaded: false }"
                            >
                                <div class="relative overflow-hidden rounded-lg">
                                    {{-- Video thumbnail with hidden video player --}}
                                    @if ($stockVideo->thumbnail)
                                        <div class="relative">
                                            <img
                                                class="h-32 w-32 object-cover"
                                                src="{{ $stockVideo->thumbnail }}"
                                                alt="{{ $stockVideo->title }}"
                                                loading="lazy"
                                                x-show="!isPlaying"
                                                onerror="this.src='data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjQiIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHJlY3Qgd2lkdGg9IjI0IiBoZWlnaHQ9IjI0IiBmaWxsPSIjRjNGNEY2Ii8+CjxwYXRoIGQ9Ik0xMiAxNkM4LjY4NjI5IDE2IDYgMTMuMzEzNyA2IDEwQzYgNi42ODYyOSA4LjY4NjI5IDQgMTIgNEMxNS4zMTM3IDQgMTggNi42ODYyOSAxOCAxMEMxOCAxMy4zMTM3IDE1LjMxMzcgMTYgMTIgMTZaIiBmaWxsPSIjOUI5QkEwIi8+CjxwYXRoIGQ9Ik0xMiAxMkMxMC44OTU0IDEyIDEwIDExLjEwNDYgMTAgMTBDMTAgOC44OTU0MyAxMC44OTU0IDggMTIgOEMxMy4xMDQ2IDggMTQgOC44OTU0MyAxNCAxMEMxNCAxMS4xMDQ2IDEzLjEwNDYgMTIgMTIgMTJaIiBmaWxsPSJ3aGl0ZSIvPgo8L3N2Zz4K'"
                                            />

                                            {{-- Hidden video player for stock videos --}}
                                            @if ($stockVideo->preview_url || $stockVideo->url)
                                                <video
                                                    class="absolute inset-0 h-32 w-32 object-cover"
                                                    x-show="isPlaying"
                                                    muted
                                                    preload="none"
                                                    x-ref="stockVideoPlayer"
                                                    @mouseenter="showControls = true"
                                                    @mouseleave="showControls = false"
                                                    @click.stop
                                                    @ended="isPlaying = false"
                                                    @play="isPlaying = true"
                                                    @pause="isPlaying = false"
                                                    @loadeddata="videoLoaded = true"
                                                >
                                                    <source
                                                        src="{{ $stockVideo->preview_url ?? $stockVideo->url }}"
                                                        type="video/mp4"
                                                    >
                                                </video>
                                            @endif
                                        </div>
                                    @else
                                        <div class="flex h-32 w-32 items-center justify-center bg-gray-200">
                                            <x-tabler-video class="size-8 text-gray-400" />
                                        </div>
                                    @endif

                                    {{-- Video Controls Overlay --}}
                                    @if ($stockVideo->preview_url || $stockVideo->url)
                                        <div
                                            class="absolute inset-0 flex items-center justify-center transition-opacity"
                                            x-show="showControls || !isPlaying"
                                            x-transition:enter="transition-opacity duration-200"
                                            x-transition:enter-start="opacity-0"
                                            x-transition:enter-end="opacity-100"
                                            x-transition:leave="transition-opacity duration-200"
                                            x-transition:leave-start="opacity-100"
                                            x-transition:leave-end="opacity-0"
                                            @mouseenter="showControls = true"
                                            @mouseleave="showControls = false"
                                        >
                                            <div class="rounded-full bg-black/50 p-2">
                                                <button
                                                    class="flex items-center justify-center text-white transition-colors hover:text-gray-300"
                                                    @click.stop="
														if (isPlaying) {
															$refs.stockVideoPlayer.pause();
														} else {
															$refs.stockVideoPlayer.play();
														}
													"
                                                >
                                                    <x-tabler-player-play
                                                        class="size-6"
                                                        x-show="!isPlaying"
                                                    />
                                                    <x-tabler-player-pause
                                                        class="size-6"
                                                        x-show="isPlaying"
                                                    />
                                                </button>
                                            </div>
                                        </div>
                                    @endif

                                    {{-- Duration badge --}}
                                    @if ($stockVideo->duration > 0)
                                        <div class="absolute bottom-2 left-2 rounded bg-black bg-opacity-70 px-1 py-0.5 text-xs text-white">
                                            {{ gmdate('i:s', $stockVideo->duration) }}
                                        </div>
                                    @endif

                                    {{-- Title overlay --}}
                                    <div
                                        class="{{ $isSelected ? 'opacity-100' : '' }} pointer-events-none absolute bottom-0 left-0 right-0 truncate bg-background p-1 text-xs text-heading-foreground opacity-0 transition-opacity duration-300 group-hover:opacity-100"
                                        style="pointer-events:none;"
                                    >
                                        {{ Str::limit($stockVideo->title ?? 'Untitled', 30) }}
                                    </div>

                                    {{-- Selection indicator --}}
                                    @if ($isSelected)
                                        <span class="absolute end-1 top-1.5 flex items-center justify-center rounded-full bg-background p-2 shadow-lg">
                                            <x-tabler-check class="size-4" />
                                        </span>
                                    @endif
                                </div>
                            </div>
                        @empty
                            <div class="col-span-6 py-8 text-center text-gray-500">
                                <x-tabler-video class="mx-auto mb-2 size-12 opacity-50" />
                                @if (empty($searchTerm))
                                    <p>@lang('Enter a search term to find stock videos')</p>
                                @else
                                    <p>@lang('No stock videos found for') "<strong>{{ $searchTerm }}</strong>"</p>
                                    <p class="mt-1 text-sm">@lang('Try adjusting your search term.')</p>
                                    <button
                                        class="mt-2 text-sm text-blue-500 underline hover:text-blue-700"
                                        wire:click="clearSearch"
                                    >
                                        @lang('Clear search')
                                    </button>
                                @endif
                            </div>
                        @endforelse
                    </div>

                    {{-- Loading spinner --}}
                    <div
                        class="flex items-center justify-center py-4"
                        wire:loading
                    >
                        <x-tabler-loader-2 class="size-6 animate-spin"></x-tabler-loader-2>
                    </div>
                </div>

                {{-- Insert button for selected stock videos --}}
                @if (!empty($selectedStockVideos) && count($selectedStockVideos) > 0)
                    <div class="flex justify-end border-t border-gray-200 px-4 pb-4 pt-4">
                        <x-button
                            class="w-full p-2 opacity-90 hover:opacity-100"
                            wire:click="downloadAndInsertStockVideos"
                            type="button"
                            size="sm"
                            variant="secondary"
                            wire:loading.attr="disabled"
                            wire:loading.class="opacity-50"
                        >
                            <span
                                wire:loading.remove
                                wire:target="downloadAndInsertStockVideos"
                            >
                                @lang($allowMultipleSelection ? 'Download & Insert Selected Videos' : 'Download & Insert Selected Video')
                                @if ($allowMultipleSelection)
                                    ({{ count($selectedStockVideos) }})
                                @endif
                            </span>
                            <span
                                class="flex items-center"
                                wire:loading
                                wire:target="downloadAndInsertStockVideos"
                            >
                                <svg
                                    class="-ml-1 mr-2 h-4 w-4 animate-spin text-white"
                                    xmlns="http://www.w3.org/2000/svg"
                                    fill="none"
                                    viewBox="0 0 24 24"
                                >
                                    <circle
                                        class="opacity-25"
                                        cx="12"
                                        cy="12"
                                        r="10"
                                        stroke="currentColor"
                                        stroke-width="4"
                                    ></circle>
                                    <path
                                        class="opacity-75"
                                        fill="currentColor"
                                        d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
                                    ></path>
                                </svg>
                                @lang('Downloading...')
                            </span>
                        </x-button>
                    </div>
                @endif
            @endif
        </x-card>
    </div>
</div>

<script>
    // Enhanced file upload handling
    document.addEventListener('livewire:init', () => {
        Livewire.on('uploadComplete', (data) => {
            //console.log('Upload completed:', data);
        });

        // Add global file input change listener for immediate feedback
        document.addEventListener('change', function(e) {
            if (e.target.matches('input[type="file"][data-exclude-media-manager]')) {
                const files = Array.from(e.target.files);
                if (files.length > 0) {
                    // Show immediate feedback for file selection
                    const fileNames = files.map(f => f.name).join(', ');
                    //console.log(`Selected files: ${fileNames}`);

                    // Check for large files and show warning
                    const largeFiles = files.filter(f => f.size > 10 * 1024 * 1024); // 10MB+
                    if (largeFiles.length > 0) {
                        // Create a temporary notification for large file processing
                        const tempNotification = document.createElement('div');
                        tempNotification.className = 'fixed top-4 right-4 z-[999999] px-4 py-3 rounded-lg shadow-lg text-white bg-blue-500';
                        tempNotification.innerHTML = `
							<div class="flex items-center gap-2">
								<div class="animate-spin rounded-full h-4 w-4 border-b-2 border-white"></div>
								<span>@lang('Processing large files, please wait...')</span>
							</div>
						`;
                        document.body.appendChild(tempNotification);

                        // Remove after file processing should be complete
                        setTimeout(() => {
                            if (tempNotification.parentNode) {
                                tempNotification.remove();
                            }
                        }, 1000);
                    }
                }
            }
        });

        Alpine.data('infiniteScroll', () => ({
            observer: null,
            mutationTimeout: null,

            init() {
                this.$nextTick(() => {
                    this.setupIntersectionObserver();
                });

                // Listen for Livewire updates and reinitialize observer
                this.$wire.on('searchUpdated', () => {
                    this.$nextTick(() => {
                        this.setupIntersectionObserver();
                    });
                });

                // Listen for upload completion
                this.$wire.on('uploadComplete', (data) => {
                    // Show success notification
                    if (data.message) {
                        this.showNotification(data.message, 'success');
                    }
                });

                // Listen for file processing events
                this.$wire.on('fileProcessingStarted', () => {
                    //console.log('File processing started');
                });

                this.$wire.on('fileProcessingCompleted', (data) => {
                    //console.log('File processing completed', data);
                    if (data.validFileCount > 0) {
                        this.showNotification(`${data.validFileCount} file(s) ready for upload`, 'info');
                    }
                    if (data.hasErrors) {
                        this.showNotification('Some files had validation errors', 'warning');
                    }
                });

                // Listen for upload progress clearing
                this.$wire.on('clearUploadProgress', () => {
                    setTimeout(() => {
                        this.$wire.uploadProgress = '';
                    }, 3000);
                });

                // Also listen for DOM updates via MutationObserver as fallback
                this.setupMutationObserver();
            },

            setupIntersectionObserver() {
                // Disconnect existing observer
                if (this.observer) {
                    this.observer.disconnect();
                }

                const loadTrigger = this.$refs.loadTrigger;
                if (!loadTrigger) {
                    // If no load trigger exists, try again after a short delay
                    setTimeout(() => {
                        this.setupIntersectionObserver();
                    }, 100);
                    return;
                }

                this.observer = new IntersectionObserver((entries) => {
                    entries.forEach(entry => {
                        if (entry.isIntersecting) {
                            // Add a small debounce to prevent multiple rapid calls
                            if (!this.isLoading) {
                                this.$wire.loadMore();
                            }
                        }
                    });
                }, {
                    root: this.$refs.scrollContainer,
                    threshold: 0.1,
                    rootMargin: '50px'
                });

                this.observer.observe(loadTrigger);
            },

            setupMutationObserver() {
                // Watch for changes in the scroll container
                const mutationObserver = new MutationObserver(() => {
                    // Debounce the observer setup
                    clearTimeout(this.mutationTimeout);
                    this.mutationTimeout = setTimeout(() => {
                        this.setupIntersectionObserver();
                    }, 100);
                });

                if (this.$refs.scrollContainer) {
                    mutationObserver.observe(this.$refs.scrollContainer, {
                        childList: true,
                        subtree: true
                    });
                }
            },

            showNotification(message, type = 'info') {
                // Enhanced notification system with better styling
                const notification = document.createElement('div');
                notification.className = `fixed top-4 right-4 z-[999999] px-4 py-3 rounded-lg shadow-lg text-white transform transition-all duration-300 translate-x-full opacity-0 ${
					type === 'success' ? 'bg-green-500' :
						type === 'error' ? 'bg-red-500' :
							type === 'warning' ? 'bg-yellow-500' :
								'bg-blue-500'
				}`;
                notification.textContent = message;

                document.body.appendChild(notification);

                // Animate in
                setTimeout(() => {
                    notification.style.transform = 'translateX(0)';
                    notification.style.opacity = '1';
                }, 100);

                // Animate out and remove
                setTimeout(() => {
                    notification.style.transform = 'translateX(full)';
                    notification.style.opacity = '0';
                    setTimeout(() => {
                        if (notification.parentNode) {
                            notification.remove();
                        }
                    }, 300);
                }, 4000);
            },

            destroy() {
                if (this.observer) {
                    this.observer.disconnect();
                }
                if (this.mutationTimeout) {
                    clearTimeout(this.mutationTimeout);
                }
            }
        }))

        Alpine.data('mediaManagerUploadArea', () => ({
            dragover: false,
            fileProcessing: false,
            handleDrop(e) {
                e.preventDefault();
                    this.dragover = false;
                    const files = Array.from(e.dataTransfer.files);
                    if (!files.length) return;

                    // Show processing state immediately
                    this.fileProcessing = true;

                    // Get reference to hidden file input
                    const fileInput = this.$refs.fileInput;
                    if (!fileInput) {
                        console.error('File input not found');
                        this.fileProcessing = false;
                        return;
                    }

                    try {
                        // Create DataTransfer object to simulate input change
                        const dt = new DataTransfer();
                        files.forEach(file => dt.items.add(file));

                        // Set files to the input
                        fileInput.files = dt.files;

                        // Trigger the input change event to make Livewire detect the change
                        fileInput.dispatchEvent(new Event('change', {
                            bubbles: true
                        }));
                    } catch (error) {
                        console.error('Error handling file drop:', error);
                        this.fileProcessing = false;
                    }
            },
            handleFileSelect() {
				// Show processing state immediately when files are selected
				this.fileProcessing = true;

				// Set a timeout to hide processing state if no files are shown
				setTimeout(() => {
					// Check if upload is still in progress
					if (!this.$wire.uploadingFiles || this.$wire.uploadingFiles.length === 0) {
						this.fileProcessing = false;
					}
				}, 10000); // 10 seconds timeout
            },
            handleDragOver(e) {
                e.preventDefault();
                this.dragover = true;
            },
            handleDragLeave(e) {
                e.preventDefault();
                // Only set dragover to false if we're actually leaving the drop area
                const rect = this.$el.getBoundingClientRect();
                const x = e.clientX;
                const y = e.clientY;

                if (x < rect.left || x > rect.right || y < rect.top || y > rect.bottom) {
                    this.dragover = false;
                }
            }
        }))
    });
</script>