@props([
    'name' => 'media_id',
    'value' => null,
    'label' => 'Select image',
    'mode' => 'id', // id | url
    'altName' => null,
    'altValue' => null,
    'help' => null,
    'previewUrl' => null,
])

@php
    $preview = $previewUrl;
    if (! $preview && $mode === 'url' && filled($value)) {
        $preview = str_starts_with((string) $value, 'http') || str_starts_with((string) $value, '//')
            ? $value
            : asset(ltrim((string) $value, '/'));
    }
@endphp

<div
    class="home-image-field"
    x-data="mediaPicker({
        pickerUrl: @js(route('admin.media.index', ['format' => 'json'])),
        uploadUrl: @js(route('admin.media.upload')),
        updateUrlTemplate: @js(url('/admin/media/__ID__')),
        csrf: @js(csrf_token()),
        fieldName: @js($name),
        mode: @js($mode),
        selectedId: @js($mode === 'id' ? $value : null),
        selectedUrl: @js($mode === 'url' ? (string) ($value ?? '') : ''),
        previewUrl: @js($preview),
        altName: @js($altName),
        altValue: @js((string) ($altValue ?? '')),
        label: @js($label),
    })"
    {{ $attributes }}
>
    @if ($mode === 'url')
        <input type="hidden" name="{{ $name }}" value="{{ $value }}" :value="selectedUrl">
    @else
        <input type="hidden" name="{{ $name }}" value="{{ $value }}" :value="selectedId">
    @endif

    @if ($altName)
        <input type="hidden" name="{{ $altName }}" value="{{ $altValue }}" :value="altValue">
    @endif

    <div class="home-image-field__card">
        <div class="home-image-field__preview" :class="{ 'is-empty': ! previewUrl }">
            <template x-if="previewUrl">
                <img :src="previewUrl" :alt="altValue || label" class="home-image-field__img">
            </template>
            <template x-if="! previewUrl">
                <div class="home-image-field__placeholder">
                    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" aria-hidden="true">
                        <path stroke-linecap="round" stroke-linejoin="round" d="M2.25 15.75v-8.25A2.25 2.25 0 0 1 4.5 5.25h15A2.25 2.25 0 0 1 21.75 7.5v8.25m-19.5 0A2.25 2.25 0 0 0 4.5 18h15a2.25 2.25 0 0 0 2.25-2.25m-19.5 0v.243a2.25 2.25 0 0 0 1.07 1.916l7.364 4.21a2.25 2.25 0 0 0 2.132 0l7.364-4.21a2.25 2.25 0 0 0 1.07-1.916V15.75M9 10.5a.75.75 0 1 1-1.5 0 .75.75 0 0 1 1.5 0Zm6.75-.75a.75.75 0 1 0 0 1.5.75.75 0 0 0 0-1.5Z"/>
                    </svg>
                    <span x-text="label"></span>
                </div>
            </template>
        </div>

        <div class="home-image-field__meta">
            <p class="home-image-field__label" x-text="label"></p>
            <p class="home-image-field__name" x-text="previewName || (previewUrl ? 'Image selected' : 'No image yet')"></p>
            @if ($help)
                <p class="home-image-field__help">{{ $help }}</p>
            @endif
            <div class="home-image-field__actions">
                <button type="button" class="home-btn home-btn--primary" @click="openLibrary()">
                    <svg viewBox="0 0 20 20" fill="currentColor" aria-hidden="true"><path d="M10.75 4.75a.75.75 0 0 0-1.5 0v4.5h-4.5a.75.75 0 0 0 0 1.5h4.5v4.5a.75.75 0 0 0 1.5 0v-4.5h4.5a.75.75 0 0 0 0-1.5h-4.5v-4.5Z"/></svg>
                    Upload / Select
                </button>
                <button type="button" class="home-btn home-btn--ghost" x-show="previewUrl" x-cloak @click="clearSelection()">
                    Remove
                </button>
            </div>
            <p class="home-image-field__alt" x-show="altName && altValue" x-cloak>
                Alt: <span x-text="altValue"></span>
            </p>
        </div>
    </div>

    {{-- Media gallery modal --}}
    <div
        x-show="open"
        x-cloak
        class="media-modal"
        x-transition.opacity
        @keydown.escape.window="open && closeLibrary()"
    >
        <div class="media-modal__backdrop" @click="closeLibrary()"></div>
        <div class="media-modal__panel" role="dialog" aria-modal="true" aria-label="Media gallery" @click.stop>
            <header class="media-modal__header">
                <div>
                    <p class="media-modal__eyebrow">Media gallery</p>
                    <h3 class="media-modal__title">Choose or upload an image</h3>
                </div>
                <button type="button" class="media-modal__close" @click="closeLibrary()" aria-label="Close">
                    <svg viewBox="0 0 20 20" fill="currentColor"><path d="M6.28 5.22a.75.75 0 0 0-1.06 1.06L8.94 10l-3.72 3.72a.75.75 0 1 0 1.06 1.06L10 11.06l3.72 3.72a.75.75 0 1 0 1.06-1.06L11.06 10l3.72-3.72a.75.75 0 0 0-1.06-1.06L10 8.94 6.28 5.22Z"/></svg>
                </button>
            </header>

            <div class="media-modal__toolbar">
                <label class="home-btn home-btn--primary home-btn--sm cursor-pointer">
                    <svg viewBox="0 0 20 20" fill="currentColor" aria-hidden="true"><path d="M9.25 13.25a.75.75 0 0 0 1.5 0V7.56l1.97 1.97a.75.75 0 1 0 1.06-1.06l-3.25-3.25a.75.75 0 0 0-1.06 0L6.22 8.47a.75.75 0 0 0 1.06 1.06l1.97-1.97v5.69Z"/><path d="M3.5 12.75a.75.75 0 0 0-1.5 0v2.5A2.75 2.75 0 0 0 4.75 18h10.5A2.75 2.75 0 0 0 18 15.25v-2.5a.75.75 0 0 0-1.5 0v2.5c0 .69-.56 1.25-1.25 1.25H4.75c-.69 0-1.25-.56-1.25-1.25v-2.5Z"/></svg>
                    Upload from PC
                    <input type="file" accept="image/*" multiple class="hidden" @change="handleUpload($event.target.files); $event.target.value = ''">
                </label>
                <div class="media-modal__search">
                    <svg viewBox="0 0 20 20" fill="currentColor" aria-hidden="true"><path fill-rule="evenodd" d="M9 3.5a5.5 5.5 0 1 0 0 11 5.5 5.5 0 0 0 0-11ZM2 9a7 7 0 1 1 12.452 4.391l3.328 3.329a.75.75 0 1 1-1.06 1.06l-3.329-3.328A7 7 0 0 1 2 9Z" clip-rule="evenodd"/></svg>
                    <input type="search" x-model="search" @input.debounce.300ms="loadMedia" placeholder="Search library…">
                </div>
                <span class="media-modal__status" x-show="uploading" x-cloak>Uploading…</span>
                <span class="media-modal__status" x-show="savingMeta" x-cloak>Saving details…</span>
            </div>

            <div class="media-modal__body">
                <div class="media-modal__grid-wrap">
                    <div class="media-modal__grid">
                        <template x-for="item in items" :key="item.id">
                            <button
                                type="button"
                                class="media-modal__tile"
                                :class="{ 'is-active': draft?.id == item.id }"
                                @click="focusItem(item)"
                            >
                                <template x-if="item.is_image || (item.mime_type && item.mime_type.startsWith('image/'))">
                                    <img :src="item.url" :alt="item.alt_text || item.name" loading="lazy">
                                </template>
                                <template x-if="!(item.is_image || (item.mime_type && item.mime_type.startsWith('image/')))">
                                    <div class="media-modal__file" x-text="item.type_label || 'FILE'"></div>
                                </template>
                                <span class="media-modal__tile-name" x-text="item.name"></span>
                            </button>
                        </template>
                    </div>
                    <p x-show="!items.length && !loading" class="media-modal__empty">No media found. Upload from your PC to get started.</p>
                    <p x-show="loading" class="media-modal__empty" x-cloak>Loading library…</p>
                </div>

                <aside class="media-modal__details" x-show="draft" x-cloak>
                    <div class="media-modal__details-preview">
                        <template x-if="draft && (draft.is_image || (draft.mime_type && draft.mime_type.startsWith('image/')))">
                            <img :src="draft.url" :alt="draft.alt_text || draft.name">
                        </template>
                    </div>
                    <p class="media-modal__details-title">Attachment details</p>
                    <div class="media-modal__fields">
                        <label>
                            <span>Title</span>
                            <input type="text" x-model="draft.title">
                        </label>
                        <label>
                            <span>Alt text</span>
                            <input type="text" x-model="draft.alt_text" placeholder="Describe the image">
                        </label>
                        <label>
                            <span>Caption</span>
                            <input type="text" x-model="draft.caption">
                        </label>
                        <label>
                            <span>Description</span>
                            <textarea rows="3" x-model="draft.description"></textarea>
                        </label>
                        <label>
                            <span>Focus keyword</span>
                            <input type="text" x-model="draft.focus_keyword" placeholder="SEO keyword for this image">
                        </label>
                    </div>
                    <div class="media-modal__details-actions">
                        <button type="button" class="home-btn home-btn--ghost home-btn--sm" @click="saveDraftMeta()" :disabled="savingMeta">
                            Save details
                        </button>
                        <button type="button" class="home-btn home-btn--primary home-btn--sm" @click="insertDraft()">
                            Use this image
                        </button>
                    </div>
                    <p class="media-modal__hint" x-show="metaSaved" x-cloak>Details saved to media library.</p>
                </aside>

                <aside class="media-modal__details media-modal__details--empty" x-show="!draft" x-cloak>
                    <p>Select an image to edit title, description, caption, keywords, and insert it into the form.</p>
                </aside>
            </div>
        </div>
    </div>
</div>