{{--
    Single global image-manager modal — rendered once per page, triggered from
    anywhere via `$dispatch('open-product-images', { type: 'product'|'variant', id, label })`.
    Pure Alpine + fetch against App\Http\Controllers\Admin\ProductImageController — no
    Livewire round-trip while uploading/deleting, then `$wire.$refresh()` once done so the
    enclosing page's thumbnails/counts stay in sync.
--}}
<div
    x-data="{
        open: false,
        loading: false,
        uploading: false,
        uploadProgress: 0,
        compressRatio: '',
        type: 'product',
        itemId: null,
        itemLabel: '',
        images: [],
        csrfToken: '',

        init() {
            this.csrfToken = document.querySelector('meta[name=csrf-token]')?.content ?? '';
        },

        openModal(type, id, label) {
            this.type = type;
            this.itemId = id;
            this.itemLabel = label;
            this.images = [];
            this.open = true;
            this.loadImages();
        },

        async loadImages() {
            this.loading = true;
            try {
                const r = await fetch(`/images/${this.type}/${this.itemId}`, {
                    headers: { 'Accept': 'application/json', 'X-Requested-With': 'XMLHttpRequest' },
                });
                this.images = await r.json();
            } finally {
                this.loading = false;
            }
        },

        async handleFiles(files) {
            for (const file of files) {
                await this.compressAndUpload(file);
            }
        },

        handlePaste(e) {
            if (!this.open) return;
            const items = Array.from(e.clipboardData?.items ?? []);
            const imageItem = items.find(i => i.type.startsWith('image/'));
            if (!imageItem) return;
            const file = imageItem.getAsFile();
            if (file) this.compressAndUpload(file);
        },

        compressImage(file) {
            return new Promise(resolve => {
                const reader = new FileReader();
                reader.onload = e => {
                    const img = new Image();
                    img.onload = () => {
                        const maxW = 1920;
                        let w = img.width, h = img.height;
                        if (w > maxW) { h = Math.round(h * maxW / w); w = maxW; }
                        const canvas = document.createElement('canvas');
                        canvas.width = w; canvas.height = h;
                        canvas.getContext('2d').drawImage(img, 0, 0, w, h);
                        canvas.toBlob(blob => resolve({ blob, originalSize: file.size }), 'image/webp', 0.85);
                    };
                    img.src = e.target.result;
                };
                reader.readAsDataURL(file);
            });
        },

        async compressAndUpload(file) {
            this.uploading = true;
            this.uploadProgress = 5;
            this.compressRatio = '';
            try {
                const { blob, originalSize } = await this.compressImage(file);
                const ratio = ((1 - blob.size / originalSize) * 100).toFixed(0);
                this.compressRatio = originalSize > blob.size
                    ? this.fmtBytes(originalSize) + ' → ' + this.fmtBytes(blob.size) + ' (−' + ratio + '%)'
                    : this.fmtBytes(blob.size);
                this.uploadProgress = 40;

                const fd = new FormData();
                fd.append('image', blob, 'image.webp');

                const r = await fetch(`/images/${this.type}/${this.itemId}`, {
                    method: 'POST',
                    headers: {
                        'X-CSRF-TOKEN': this.csrfToken,
                        'Accept': 'application/json',
                        'X-Requested-With': 'XMLHttpRequest',
                    },
                    body: fd,
                });
                this.uploadProgress = 90;
                if (r.ok) {
                    const newImg = await r.json();
                    this.images.push(newImg);
                    this.$wire.$refresh();
                }
                this.uploadProgress = 100;
            } finally {
                setTimeout(() => { this.uploading = false; this.uploadProgress = 0; }, 600);
            }
        },

        fmtBytes(b) {
            if (b >= 1048576) return (b / 1048576).toFixed(1) + ' MB';
            return Math.round(b / 1024) + ' KB';
        },

        async setDefault(imageId) {
            await fetch(`/images/${imageId}/default`, {
                method: 'PATCH',
                headers: { 'X-CSRF-TOKEN': this.csrfToken, 'Accept': 'application/json', 'X-Requested-With': 'XMLHttpRequest' },
            });
            this.images = this.images.map(img => ({ ...img, is_default: img.id === imageId }));
            this.$wire.$refresh();
        },

        async deleteImage(imageId) {
            if (!confirm('Delete this image? This cannot be undone.')) return;
            const r = await fetch(`/images/${imageId}`, {
                method: 'DELETE',
                headers: { 'X-CSRF-TOKEN': this.csrfToken, 'Accept': 'application/json', 'X-Requested-With': 'XMLHttpRequest' },
            });
            if (r.ok) {
                this.images = this.images.filter(img => img.id !== imageId);
                if (this.images.length > 0 && !this.images.some(img => img.is_default)) {
                    this.images[0].is_default = true;
                }
                this.$wire.$refresh();
            }
        },
    }"
    x-on:open-product-images.window="openModal($event.detail.type, $event.detail.id, $event.detail.label)"
    x-on:paste.window="handlePaste($event)"
    x-show="open"
    x-cloak
    class="fixed inset-0 z-50 flex items-center justify-center p-4"
>
    <div class="absolute inset-0 bg-stone-950/60 backdrop-blur-sm" x-on:click="open = false"></div>

    <div
        x-show="open"
        x-transition:enter="ease-out duration-200"
        x-transition:enter-start="opacity-0 scale-95"
        x-transition:enter-end="opacity-100 scale-100"
        x-transition:leave="ease-in duration-150"
        x-transition:leave-start="opacity-100 scale-100"
        x-transition:leave-end="opacity-0 scale-95"
        class="relative flex max-h-[90vh] w-full max-w-2xl flex-col overflow-hidden rounded-2xl bg-white shadow-panel dark:bg-stone-900 dark:ring-1 dark:ring-stone-800"
    >
        <div class="flex shrink-0 items-center justify-between border-b border-stone-200 px-6 py-4 dark:border-stone-800">
            <div>
                <x-ui.heading size="sm">Photos</x-ui.heading>
                <p class="mt-0.5 max-w-xs truncate text-xs text-stone-500 dark:text-stone-400" x-text="itemLabel"></p>
            </div>
            <button type="button" x-on:click="open = false" class="rounded-lg p-1.5 text-stone-400 transition-colors hover:bg-stone-100 hover:text-stone-600 dark:hover:bg-stone-800">
                <x-icon name="x-close" class="size-5" />
            </button>
        </div>

        <div class="flex-1 space-y-5 overflow-y-auto p-6">
            <div
                class="relative cursor-pointer rounded-xl border-2 border-dashed p-6 text-center transition-colors"
                :class="uploading ? 'border-brand-400 bg-brand-50 dark:bg-brand-950/20' : 'border-stone-300 hover:border-brand-400 hover:bg-stone-50 dark:border-stone-700 dark:hover:bg-stone-800'"
                x-on:click="$refs.fileInput.click()"
                x-on:dragover.prevent
                x-on:drop.prevent="handleFiles($event.dataTransfer.files)"
            >
                <input type="file" accept="image/*" multiple x-ref="fileInput" class="hidden"
                       x-on:change="handleFiles($event.target.files); $event.target.value = null">

                <div x-show="!uploading">
                    <x-icon name="photo" class="mx-auto mb-2 size-8 text-stone-400" />
                    <p class="text-sm font-medium text-stone-700 dark:text-stone-300">Click or drag images here</p>
                    <p class="mt-1 text-xs text-stone-400 dark:text-stone-500">Compressed automatically · Max 8&nbsp;MB each · or Ctrl+V to paste</p>
                </div>
                <div x-show="uploading" class="space-y-2">
                    <svg class="mx-auto size-8 animate-spin text-brand-500" 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-8v8H4z"/>
                    </svg>
                    <p class="text-sm font-medium text-brand-600 dark:text-brand-400">Compressing &amp; uploading…</p>
                    <div class="h-1.5 w-full rounded-full bg-stone-200 dark:bg-stone-700">
                        <div class="h-1.5 rounded-full bg-brand-500 transition-all duration-300" :style="'width:' + uploadProgress + '%'"></div>
                    </div>
                    <p class="text-xs text-stone-500 dark:text-stone-400" x-text="compressRatio" x-show="compressRatio"></p>
                </div>
            </div>

            <div x-show="loading" class="flex justify-center py-8">
                <svg class="size-8 animate-spin text-stone-400" 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-8v8H4z"/>
                </svg>
            </div>

            <div x-show="!loading && images.length === 0" class="py-6 text-center text-sm text-stone-400 dark:text-stone-500">
                No images yet. Upload one above.
            </div>

            <div x-show="!loading && images.length > 0" class="grid grid-cols-3 gap-3">
                <template x-for="img in images" :key="img.id">
                    <div class="group relative overflow-hidden rounded-xl border-2 transition-colors"
                         :class="img.is_default ? 'border-brand-500' : 'border-stone-200 dark:border-stone-700'">
                        <div class="aspect-square bg-stone-100 dark:bg-stone-800">
                            <img :src="img.thumb_url" alt="" loading="lazy" decoding="async" class="h-full w-full object-cover">
                        </div>

                        <div x-show="img.is_default" class="absolute top-1 left-1 rounded-full bg-brand-500 px-1.5 py-0.5 text-[10px] font-bold text-white">
                            Default
                        </div>

                        <div class="absolute inset-0 flex items-center justify-center gap-2 bg-black/0 opacity-0 transition-opacity group-hover:bg-black/40 group-hover:opacity-100">
                            <button type="button" x-show="!img.is_default" x-on:click.stop="setDefault(img.id)"
                                    title="Set as default"
                                    class="rounded-full bg-white/90 p-1.5 text-brand-600 shadow transition-colors hover:bg-white">
                                <x-icon name="check" class="size-4" />
                            </button>
                            <button type="button" x-on:click.stop="deleteImage(img.id)"
                                    title="Delete"
                                    class="rounded-full bg-white/90 p-1.5 text-red-600 shadow transition-colors hover:bg-white">
                                <x-icon name="trash" class="size-4" />
                            </button>
                        </div>
                    </div>
                </template>
            </div>

            <p x-show="!loading && images.length > 0" class="text-center text-xs text-stone-400 dark:text-stone-500">
                Hover an image to set it as default or delete it. The default image appears in the product list.
            </p>
        </div>
    </div>
</div>