<div x-data="editorImagePicker()" x-on:keydown.escape.window="close()">
<div x-show="open" x-cloak style="position:fixed; inset:0; z-index:9999;">
    {{-- Backdrop --}}
    <div style="position:absolute; inset:0; background:rgba(0,0,0,0.5);" x-on:click="close()"></div>

    {{-- Centering wrapper --}}
    <div style="position:absolute; inset:0; display:flex; align-items:center; justify-content:center; padding:24px; pointer-events:none;">

    {{-- Modal --}}
    <div style="position:relative; background:#fff; border-radius:12px; width:100%; max-width:860px; max-height:85vh; display:flex; flex-direction:column; overflow:hidden; box-shadow:0 20px 60px rgba(0,0,0,0.3); pointer-events:auto;"
         class="dark:bg-gray-800">

        {{-- Header --}}
        <div class="flex items-center justify-between px-5 py-4 border-b border-gray-200 dark:border-gray-700">
            <h3 class="font-semibold text-gray-900 dark:text-white text-sm">Insert Image</h3>
            <button type="button" x-on:click="close()" class="text-gray-400 hover:text-gray-600 dark:hover:text-gray-200">
                <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"/>
                </svg>
            </button>
        </div>

        {{-- Toolbar --}}
        <div class="flex items-center gap-3 px-5 py-3 border-b border-gray-200 dark:border-gray-700 bg-gray-50 dark:bg-gray-700/30">
            <input type="text" placeholder="Search images..." x-model="search" x-on:input="onSearchInput()"
                   class="flex-1 text-sm border border-gray-300 dark:border-gray-600 rounded-lg px-3 py-1.5 bg-white dark:bg-gray-700 text-gray-900 dark:text-white outline-none focus:ring-2 focus:ring-indigo-500">
            <input type="file" accept="image/*" class="hidden" x-ref="fileInput" x-on:change="upload($event)">
            <button type="button" x-on:click="showUploadForm = !showUploadForm" :disabled="uploading"
                    :class="showUploadForm ? 'bg-indigo-700' : 'bg-indigo-600 hover:bg-indigo-700'"
                    class="px-3 py-1.5 disabled:opacity-60 text-white text-sm font-medium rounded-lg flex items-center gap-2">
                <svg x-show="uploading" class="w-3.5 h-3.5 animate-spin" fill="none" viewBox="0 0 24 24">
                    <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"/>
                    <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z"/>
                </svg>
                <svg x-show="!uploading" class="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-8l-4-4m0 0L8 8m4-4v12"/>
                </svg>
                <span x-text="uploading ? 'Uploading...' : 'Upload'"></span>
            </button>
        </div>

        {{-- Upload form (shown when upload toggled) --}}
        <div x-show="showUploadForm" class="flex items-center gap-2 px-5 py-3 border-b border-indigo-100 dark:border-indigo-900/40 bg-indigo-50 dark:bg-indigo-900/10">
            <svg class="w-4 h-4 text-indigo-400 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z"/>
            </svg>
            <input type="text" x-model="uploadCaption" placeholder="Caption (optional)"
                   class="flex-1 text-sm border border-indigo-200 dark:border-indigo-700 rounded-lg px-3 py-1.5 bg-white dark:bg-gray-700 text-gray-900 dark:text-white outline-none focus:ring-2 focus:ring-indigo-500">
            <button type="button" x-on:click="$refs.fileInput.click()" :disabled="uploading"
                    class="px-3 py-1.5 bg-indigo-600 hover:bg-indigo-700 disabled:opacity-60 text-white text-sm font-medium rounded-lg whitespace-nowrap">
                Browse file
            </button>
            <button type="button" x-on:click="showUploadForm = false; uploadCaption = ''"
                    class="p-1.5 text-gray-400 hover:text-gray-600 rounded">
                <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"/></svg>
            </button>
        </div>

        {{-- Grid --}}
        <div class="flex-1 overflow-y-auto p-4">
            <div x-show="loading && items.length === 0" class="flex items-center justify-center py-16 text-gray-400 text-sm">
                Loading...
            </div>
            <div x-show="!loading && items.length === 0" class="flex items-center justify-center py-16 text-gray-400 text-sm">
                No images found.
            </div>
            <div style="display:grid; grid-template-columns:repeat(auto-fill, minmax(130px, 1fr)); gap:10px;">
                <template x-for="item in items" :key="item.id">
                    <div x-on:click="selectItem(item)"
                         :style="selectedItem?.id === item.id ? 'border-color:#6366f1;' : 'border-color:transparent;'"
                         style="cursor:pointer; border-radius:8px; overflow:hidden; border:2px solid transparent; transition:border-color 0.15s; position:relative;">
                        <img :src="item.url" :alt="item.name"
                             style="width:100%; height:90px; object-fit:cover; display:block;">
                        <div style="padding:4px 6px;">
                            <div style="font-size:11px; color:#6b7280; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;" x-text="item.name"></div>
                            <div x-show="item.caption" style="font-size:10px; color:#9ca3af; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; font-style:italic;" x-text="item.caption"></div>
                        </div>
                        {{-- Checkmark when selected --}}
                        <div x-show="selectedItem?.id === item.id"
                             style="position:absolute; top:4px; right:4px; background:#6366f1; border-radius:50%; width:20px; height:20px; display:flex; align-items:center; justify-content:center;">
                            <svg style="width:12px; height:12px; color:white;" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="3" d="M5 13l4 4L19 7"/>
                            </svg>
                        </div>
                    </div>
                </template>
            </div>
            <div x-show="page < lastPage" class="flex justify-center mt-4">
                <button type="button" x-on:click="loadMedia(page + 1)" :disabled="loading"
                        class="px-4 py-2 text-sm text-indigo-600 hover:text-indigo-800 dark:text-indigo-400 font-medium disabled:opacity-50">
                    Load more
                </button>
            </div>
        </div>

        {{-- Insert panel (shown when image selected) --}}
        <div x-show="selectedItem" class="border-t border-gray-200 dark:border-gray-700 px-5 py-4 bg-gray-50 dark:bg-gray-700/30 flex items-center gap-3">
            <img :src="selectedItem?.url" style="width:48px; height:48px; object-fit:cover; border-radius:6px; flex-shrink:0;">
            <div class="flex-1 min-w-0">
                <p class="text-xs font-medium text-gray-700 dark:text-gray-300 truncate mb-1" x-text="selectedItem?.name"></p>
                <input type="text" x-model="captionText" placeholder="Alt text / caption (optional)"
                       class="w-full text-xs border border-gray-300 dark:border-gray-600 rounded-lg px-2.5 py-1.5 bg-white dark:bg-gray-700 text-gray-900 dark:text-white outline-none focus:ring-2 focus:ring-indigo-500">
            </div>
            <button type="button" x-on:click="insert()"
                    class="flex-shrink-0 px-4 py-2 bg-indigo-600 hover:bg-indigo-700 text-white text-sm font-medium rounded-lg">
                Insert
            </button>
        </div>

    </div>{{-- modal --}}
    </div>{{-- centering wrapper --}}
</div>{{-- x-show --}}
</div>{{-- x-data --}}
