@php
    use App\Enums\MediaType;

    $existingImages = collect($existingImages ?? []);
    $existingMedia = collect($existingMedia ?? []);
    $maxItems = (int) config('admin.media.max_gallery_items', 10);
    $maxImage = (int) config('admin.media.max_image_size', 2048);
    $maxVideo = (int) config('admin.media.max_video_size', 25600);
    $maxImageMb = max(1, (int) round($maxImage / 1024));
    $maxVideoMb = max(1, (int) round($maxVideo / 1024));
    $canUpload = (bool) auth()->user()?->can(\App\Models\Permission::MEDIA_UPLOAD);
    $canDelete = (bool) auth()->user()?->can(\App\Models\Permission::MEDIA_DELETE);

    $existingPayload = [];

    foreach ($existingImages as $image) {
        $item = [
            'id' => $image->id,
            'url' => '/storage/'.ltrim((string) $image->path, '/'),
            'type' => 'image',
            'kind' => 'legacy_image',
        ];
        if ($canDelete && ! empty($deleteRouteName)) {
            $item['deleteUrl'] = route($deleteRouteName, array_merge($deleteRouteParams ?? [], ['image' => $image->id]));
        }
        $existingPayload[] = $item;
    }

    foreach ($existingMedia as $media) {
        $type = MediaType::fromMime($media->mime_type)?->value ?? 'image';
        $item = [
            'id' => $media->id,
            'url' => '/storage/'.ltrim((string) $media->path, '/'),
            'type' => $type,
            'kind' => 'media',
        ];
        if ($canDelete && ! empty($deleteMediaRouteName)) {
            $item['deleteUrl'] = route($deleteMediaRouteName, array_merge($deleteMediaRouteParams ?? [], ['media' => $media->id]));
        }
        $existingPayload[] = $item;
    }

    $accept = implode(',', array_merge(
        MediaType::allowedImageMimeTypes(),
        MediaType::allowedVideoMimeTypes(),
    ));
@endphp

<div
    class="sm:col-span-2"
    @if ($canUpload)
        x-data="adminMediaUploader({
            maxItems: {{ $maxItems }},
            maxImageSize: {{ $maxImage }},
            maxVideoSize: {{ $maxVideo }},
            imageMimes: @js(MediaType::allowedImageMimeTypes()),
            videoMimes: @js(MediaType::allowedVideoMimeTypes()),
            csrfToken: @js(csrf_token()),
            confirmDelete: @js(__('admin.confirm_delete')),
            existing: @js($existingPayload),
            labels: {
                remove: @js(__('admin.delete')),
                maxItems: @js(__('admin.gallery_max_items')),
                invalidType: @js(__('admin.gallery_invalid_type')),
                tooLarge: @js(__('admin.gallery_file_too_large')),
            },
        })"
    @endif
>
    <label class="admin-label">{{ __('admin.gallery_media') }}</label>
    <p class="mb-2 text-xs text-slate-500">
        {{ __('admin.gallery_media_hint') }}
        — {{ __('admin.gallery_drop_hint') }}
        — {{ __('admin.gallery_size_hint', ['image' => $maxImageMb, 'video' => $maxVideoMb, 'max' => $maxItems]) }}
    </p>

    <div data-media-grid class="admin-media-grid mb-4">
        {{-- SSR so gallery is visible even before/without JS --}}
        @foreach ($existingPayload as $item)
            <div class="admin-media-card" data-existing-id="{{ $item['id'] }}" data-existing-type="{{ $item['type'] }}">
                @if (($item['type'] ?? '') === 'video')
                    <video src="{{ $item['url'] }}" class="admin-media-card__media" muted preload="metadata" controls playsinline></video>
                @else
                    <img src="{{ $item['url'] }}" alt="" class="admin-media-card__media" loading="lazy" />
                @endif
                @if ($canDelete && ! empty($item['deleteUrl']))
                    <button
                        type="button"
                        class="admin-media-card__remove"
                        data-media-remove
                        data-delete-url="{{ $item['deleteUrl'] }}"
                        data-id="{{ $item['id'] }}"
                        data-type="{{ $item['type'] }}"
                        aria-label="{{ __('admin.delete') }}"
                    ><x-site.svg-icon name="close" class="h-6 w-6" /></button>
                @endif
            </div>
        @endforeach
    </div>

    @if ($canUpload)
        <div
            data-media-dropzone
            class="admin-media-dropzone"
            role="button"
            tabindex="0"
        >
            <p class="text-sm font-semibold text-slate-700">{{ __('admin.gallery_drop_title') }}</p>
            <p class="mt-1 text-xs text-slate-500">{{ __('admin.gallery_drop_hint') }}</p>
            <p class="mt-2 text-[11px] font-medium text-slate-400" data-media-hint>{{ count($existingPayload) }} / {{ $maxItems }}</p>
        </div>

        {{-- Keep outside any nested semantics; JS syncs selected FileList here --}}
        <input
            type="file"
            name="gallery_files[]"
            accept="{{ $accept }}"
            multiple
            class="sr-only"
            data-media-input
        />

        <p class="mt-2 text-xs text-rose-600" x-show="error" x-text="error" x-cloak></p>
    @endif
</div>