@use('Illuminate\Support\Number')

{{--
    Catálogo de mídia (ADR-026 §4) — o serviço informa `title`/`breadcrumbs` e preenche apenas o
    `<main>`; o shell CMS fornece estrutura, navegação e acessibilidade (ADR-009/ADR-016).
--}}
<x-layout::cms
    :title="__('gallery::gallery.title')"
    :breadcrumbs="[['label' => __('gallery::gallery.title')]]">
    @php
        $batchMaxFiles = (int) config('media.batch.max_files', 50);
        $batchMaxBytes = (int) config('media.batch.max_bytes', 262_144_000);
        $batchMaxBytesHuman = Number::fileSize($batchMaxBytes, 0);
        $batchLimitsHint = $limitsHint ?? '';
        $gt = static fn (string $key, array $replace = []): string => (string) __('gallery::gallery.'.$key, $replace);
    @endphp

    @if (session('status'))
        <x-cms::alert variant="success">{{ session('status') }}</x-cms::alert>
    @endif

    @if (session('warning'))
        <x-cms::alert variant="warning">{{ session('warning') }}</x-cms::alert>
    @endif

    <x-cms::card :title="__('gallery::gallery.upload')" class="mb-6">
        <form method="post" action="{{ route('gallery.upload') }}" enctype="multipart/form-data" class="grid gap-4">
            @csrf
            <input type="hidden" name="module" value="Media">

            <label class="form-control w-full">
                <span class="label"><span class="label-text">{{ __('gallery::gallery.file') }}</span></span>
                <input
                    type="file"
                    name="file"
                    required
                    accept="{{ implode(',', $config->mimes) }}"
                    class="file-input file-input-bordered w-full"
                    aria-describedby="gallery-file-hint @error('file') gallery-file-error @enderror"
                    @error('file') aria-invalid="true" @enderror
                >
                <span id="gallery-file-hint" class="label-text-alt">{{ $limitsHint }}</span>
                @error('file')
                    <span id="gallery-file-error" class="label-text-alt text-error" role="alert">{{ $message }}</span>
                @enderror
            </label>

            <x-cms::form-group
                name="alt"
                :label="__('gallery::gallery.alt')"
                :help="__('gallery::gallery.alt_help')"
                required />

            @if ($config->allowShared)
                <label class="label cursor-pointer justify-start gap-3">
                    <input type="checkbox" name="shared" value="1" class="checkbox checkbox-primary">
                    <span class="label-text">{{ __('gallery::gallery.shared') }}</span>
                </label>
            @endif

            <div>
                <x-cms::button type="submit" variant="primary">{{ __('gallery::gallery.submit') }}</x-cms::button>
            </div>
        </form>
    </x-cms::card>

    {{-- Lote (ADR-026 §2/§4): a seleção vira N requisições de 1 arquivo; a grade exige alt por
         imagem. O formulário individual acima continua sendo o caminho sem JS. --}}
    <section
        class="mb-6"
        data-gallery-batch
        data-batch-url="{{ route('media.batch.store') }}"
        data-upload-url="{{ route('media.upload') }}"
        data-batch-status-url="{{ route('media.batch.status', ['batch' => '__batch__'], false) }}"
        data-complete-url="{{ route('media.batch.complete', ['batch' => '__batch__'], false) }}"
        data-commit-url="{{ route('gallery.batch.commit', ['batch' => '__batch__'], false) }}"
        data-csrf-token="{{ csrf_token() }}"
        data-module="Media"
        data-shared="{{ $config->allowShared ? '1' : '0' }}"
        data-max-files="{{ $batchMaxFiles }}"
        data-max-bytes="{{ $batchMaxBytes }}"
        data-i18n-batch-alt="{{ $gt('batch_alt') }}"
        data-i18n-batch-no-files="{{ $gt('batch_no_files') }}"
        data-i18n-batch-remove="{{ $gt('batch_remove') }}"
        data-i18n-batch-pending="{{ $gt('batch_pending') }}"
        data-i18n-batch-uploading="{{ $gt('batch_uploading') }}"
        data-i18n-batch-processing="{{ $gt('batch_processing') }}"
        data-i18n-batch-done="{{ $gt('batch_done') }}"
        data-i18n-batch-failed="{{ $gt('batch_failed') }}"
        data-i18n-batch-catalogued="{{ $gt('batch_catalogued') }}"
        data-i18n-batch-skipped="{{ $gt('batch_skipped') }}"
        data-i18n-batch-required-alt="{{ $gt('batch_required_alt') }}"
        data-i18n-batch-too-many="{{ $gt('batch_too_many') }}"
        data-i18n-batch-too-large="{{ $gt('batch_too_large') }}"
        data-i18n-batch-upload-error="{{ $gt('batch_upload_error') }}"
        data-i18n-batch-commit-error="{{ $gt('batch_commit_error') }}"
        hidden
    >
        <x-cms::card :title="$gt('batch_title')">
            <div class="grid gap-4">
                <p class="text-sm">{{ $gt('batch_help', ['max' => $batchMaxFiles, 'bytes' => $batchMaxBytesHuman]) }}</p>
                <p class="text-xs opacity-70">{{ $batchLimitsHint }}</p>

                <label class="form-control w-full">
                    <span class="label"><span class="label-text">{{ $gt('batch_select') }}</span></span>
                    <input
                        type="file"
                        multiple
                        accept="{{ implode(',', $config->mimes) }}"
                        class="file-input file-input-bordered w-full"
                        data-batch-files
                    >
                </label>

                <ul data-batch-grid role="list" class="grid gap-3"></ul>
                <p data-batch-status role="status" aria-live="polite" hidden></p>

                <div>
                    <button type="button" class="btn btn-primary" data-batch-start>{{ $gt('batch_start') }}</button>
                </div>

                <noscript>
                    <p class="text-sm">{{ $gt('batch_noscript') }}</p>
                </noscript>
            </div>
        </x-cms::card>
    </section>

    @vite('src/services/Gallery/Assets/js/batch.js')

    @if ($media->isEmpty())
        <x-cms::empty-state :title="__('gallery::gallery.empty')" />
    @else
        <ul role="list" class="grid gap-4 sm:grid-cols-2 lg:grid-cols-4">
            @foreach ($media as $item)
                <li class="card bg-base-100 shadow-sm">
                    <div class="aspect-video overflow-hidden bg-base-200">
                        @if ($item->kind === 'image')
                            <x-media::picture
                                :path="$item->path"
                                :sources="$item->sources"
                                :alt="$item->alt_text"
                                :width="$item->width"
                                :height="$item->height"
                                figure-class="contents"
                                img-class="h-full w-full object-cover"
                                sizes="(min-width: 1024px) 25vw, (min-width: 640px) 50vw, 100vw" />
                        @else
                            <a
                                href="{{ route('media.stream', ['path' => $item->path]) }}"
                                class="flex h-full items-center justify-center gap-2 p-4 text-sm">
                                <x-ui::icon name="file-text" aria-hidden="true" focusable="false" />
                                <span>{{ $item->alt_text }}</span>
                            </a>
                        @endif
                    </div>

                    <div class="card-body gap-2 p-3">
                        <p class="line-clamp-2 text-sm font-medium">{{ $item->alt_text }}</p>
                        <p class="text-xs opacity-70">{{ $item->mime }} · {{ $item->width }}×{{ $item->height }}</p>

                        @if ($item->isArchived())
                            <form method="post" action="{{ route('gallery.restore', $item) }}">
                                @csrf
                                <x-cms::button type="submit" variant="ghost">{{ __('gallery::gallery.restore') }}</x-cms::button>
                            </form>
                        @else
                            <form method="post" action="{{ route('gallery.archive', $item) }}">
                                @csrf
                                <x-cms::button type="submit" variant="ghost">{{ __('gallery::gallery.archive') }}</x-cms::button>
                            </form>
                        @endif
                    </div>
                </li>
            @endforeach
        </ul>

        <x-cms::pagination :paginator="$media" />
    @endif
</x-layout::cms>