@props([
    'name' => 'image',
    'id' => 'image_upload_' . uniqid(),
    'label' => 'Photograph / Image File',
    'currentImage' => null,
    'required' => false,
    'multiple' => false,
    'help' => 'Supports JPG, PNG, WebP, GIF, SVG, AVIF, BMP, TIFF, HEIC (Max 5 MB)',
    'maxSizeMb' => 5,
])

<div x-data="{
        isDragging: false,
        multiple: {{ $multiple ? 'true' : 'false' }},
        previewUrl: '{{ $currentImage ?? '' }}',
        previews: [],
        fileName: '',
        fileSize: '',
        errorMsg: '',
        maxBytes: {{ (int) $maxSizeMb }} * 1024 * 1024,
        handleFiles(fileList) {
            this.errorMsg = '';
            if (!fileList || fileList.length === 0) return;

            const validExts = ['.jpg', '.jpeg', '.png', '.webp', '.gif', '.svg', '.avif', '.bmp', '.tiff', '.heic', '.heif'];
            const input = this.$refs.fileInput;
            const dataTransfer = new DataTransfer();

            if (this.multiple) {
                this.previews = [];
                let rejectedCount = 0;

                Array.from(fileList).forEach(file => {
                    const ext = '.' + file.name.split('.').pop().toLowerCase();
                    if (!validExts.includes(ext) || file.size > this.maxBytes) {
                        rejectedCount++;
                        return;
                    }
                    dataTransfer.items.add(file);
                    this.previews.push({
                        name: file.name,
                        size: (file.size / 1024).toFixed(0) + ' KB',
                        url: URL.createObjectURL(file)
                    });
                });

                if (rejectedCount > 0) {
                    this.errorMsg = rejectedCount + ' file(s) were skipped (unsupported format or exceeded ' + {{ $maxSizeMb }} + ' MB).';
                }

                input.files = dataTransfer.files;
            } else {
                const file = fileList[0];
                const fileExt = '.' + file.name.split('.').pop().toLowerCase();
                
                if (!validExts.includes(fileExt)) {
                    this.errorMsg = 'Unsupported file format (' + fileExt + '). Please select a valid photo format.';
                    return;
                }

                if (file.size > this.maxBytes) {
                    this.errorMsg = 'File is too large (' + (file.size / (1024 * 1024)).toFixed(1) + ' MB). Max allowed is ' + {{ $maxSizeMb }} + ' MB.';
                    return;
                }

                this.fileName = file.name;
                this.fileSize = file.size > 1048576 
                    ? (file.size / 1048576).toFixed(2) + ' MB' 
                    : Math.round(file.size / 1024) + ' KB';

                if (this.previewUrl && !this.previewUrl.startsWith('http') && !this.previewUrl.startsWith('/')) {
                    URL.revokeObjectURL(this.previewUrl);
                }
                this.previewUrl = URL.createObjectURL(file);

                dataTransfer.items.add(file);
                input.files = dataTransfer.files;
            }
        },
        removeFile() {
            this.fileName = '';
            this.fileSize = '';
            this.errorMsg = '';
            if (this.previewUrl && !this.previewUrl.startsWith('http') && !this.previewUrl.startsWith('/')) {
                URL.revokeObjectURL(this.previewUrl);
            }
            this.previewUrl = '{{ $currentImage ?? '' }}';
            this.previews = [];
            this.$refs.fileInput.value = '';
        }
    }" 
    class="space-y-2">
    
    @if($label)
        <label for="{{ $id }}" class="block font-semibold text-slate-300 text-xs">
            {{ $label }} @if($required)<span class="text-amber-400">*</span>@endif
        </label>
    @endif

    <!-- Drop Zone Box -->
    <div 
        @dragover.prevent="isDragging = true"
        @dragleave.prevent="isDragging = false"
        @drop.prevent="isDragging = false; handleFiles($event.dataTransfer.files)"
        :class="isDragging ? 'border-sky-400 bg-sky-500/10 scale-[1.01] shadow-lg shadow-sky-500/10' : 'border-slate-800 bg-slate-950/70 hover:border-slate-700'"
        class="relative border-2 border-dashed rounded-2xl p-6 transition duration-200 text-center flex flex-col items-center justify-center cursor-pointer group">

        <!-- Hidden Native File Input -->
        <input 
            type="file" 
            name="{{ $name }}" 
            id="{{ $id }}" 
            x-ref="fileInput"
            @change="handleFiles($event.target.files)"
            accept="image/*,.jpg,.jpeg,.png,.webp,.gif,.svg,.avif,.bmp,.tiff,.heic,.heif"
            @if($multiple) multiple @endif
            class="absolute inset-0 w-full h-full opacity-0 cursor-pointer z-10"
            @if($required && empty($currentImage)) required @endif>

        <!-- Multi-File Previews -->
        <template x-if="multiple && previews.length > 0">
            <div class="w-full space-y-3 pointer-events-none">
                <div class="flex items-center justify-between">
                    <span class="text-xs font-bold text-emerald-400 flex items-center">
                        <span class="w-2 h-2 rounded-full bg-emerald-400 mr-1.5 animate-pulse"></span>
                        <span x-text="previews.length + ' photos selected for upload'"></span>
                    </span>
                    <button type="button" @click.stop="removeFile()" class="pointer-events-auto px-2.5 py-1 rounded text-[11px] bg-rose-500/15 text-rose-400 hover:bg-rose-500/25 border border-rose-500/20 font-bold">
                        Clear All
                    </button>
                </div>
                <div class="grid grid-cols-2 sm:grid-cols-4 md:grid-cols-6 gap-2">
                    <template x-for="(prev, idx) in previews" :key="idx">
                        <div class="relative rounded-xl overflow-hidden bg-slate-900 border border-slate-800 aspect-square">
                            <img :src="prev.url" :alt="prev.name" class="w-full h-full object-cover">
                            <div class="absolute bottom-0 inset-x-0 p-1 bg-slate-950/80 text-[9px] text-slate-300 truncate text-center" x-text="prev.name"></div>
                        </div>
                    </template>
                </div>
                <p class="text-[11px] text-slate-400 text-center">Click or drop more images to change selection.</p>
            </div>
        </template>

        <!-- Single File Preview State -->
        <template x-if="!multiple && previewUrl">
            <div class="w-full flex flex-col sm:flex-row items-center gap-4 text-left pointer-events-none">
                <div class="relative w-28 h-24 sm:w-36 sm:h-28 rounded-xl overflow-hidden bg-slate-900 border border-slate-700/80 shrink-0 shadow-md">
                    <img :src="previewUrl" alt="Upload preview" class="w-full h-full object-cover">
                </div>
                <div class="flex-1 min-w-0 space-y-1">
                    <div class="flex items-center space-x-2">
                        <span class="px-2 py-0.5 rounded text-[10px] font-bold bg-emerald-500/15 text-emerald-400 border border-emerald-500/20">Ready to Upload</span>
                        <span x-show="fileSize" class="text-[11px] text-slate-400 font-mono" x-text="fileSize"></span>
                    </div>
                    <div class="text-xs font-bold text-white truncate max-w-xs" x-text="fileName || 'Current photograph'"></div>
                    <p class="text-[11px] text-slate-400">Drag a different image here or click to replace.</p>
                </div>
                <div class="pointer-events-auto">
                    <button type="button" @click.stop="removeFile()" class="px-3 py-1.5 rounded-lg bg-rose-500/15 text-rose-400 hover:bg-rose-500/25 border border-rose-500/20 text-xs font-bold transition">
                        Remove
                    </button>
                </div>
            </div>
        </template>

        <!-- Empty / Idle Drop State -->
        <template x-if="(!multiple && !previewUrl) || (multiple && previews.length === 0)">
            <div class="py-4 space-y-3 pointer-events-none">
                <div class="w-14 h-14 rounded-2xl bg-sky-500/10 text-sky-400 mx-auto flex items-center justify-center group-hover:scale-110 transition duration-300 border border-sky-500/20">
                    <svg class="w-7 h-7" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.8" d="M7 16a4 4 0 01-.88-7.903A5 5 0 1115.9 6L16 6a5 5 0 011 9.9M15 13l-3-3m0 0l-3 3m3-3v12"/>
                    </svg>
                </div>
                <div>
                    <span class="text-sm font-bold text-white block">
                        Drag & Drop <span x-text="multiple ? 'multiple images' : 'your image'"></span> here, or <span class="text-sky-400 underline decoration-sky-400/50 group-hover:decoration-sky-400">browse files</span>
                    </span>
                    <span class="text-[11px] text-slate-400 block mt-1">
                        {{ $help }}
                    </span>
                </div>
                <div class="flex flex-wrap justify-center gap-1.5 pt-1 text-[10px] text-slate-500">
                    <span class="px-2 py-0.5 rounded bg-slate-900 border border-slate-800">PNG</span>
                    <span class="px-2 py-0.5 rounded bg-slate-900 border border-slate-800">JPG</span>
                    <span class="px-2 py-0.5 rounded bg-slate-900 border border-slate-800">WebP</span>
                    <span class="px-2 py-0.5 rounded bg-slate-900 border border-slate-800">AVIF</span>
                    <span class="px-2 py-0.5 rounded bg-slate-900 border border-slate-800">GIF</span>
                    <span class="px-2 py-0.5 rounded bg-slate-900 border border-slate-800">HEIC</span>
                </div>
            </div>
        </template>
    </div>

    <!-- Live Client Error Alert -->
    <div x-show="errorMsg" x-cloak class="p-2.5 rounded-xl bg-rose-500/10 border border-rose-500/20 text-rose-400 text-xs flex items-center space-x-2">
        <svg class="w-4 h-4 shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/></svg>
        <span x-text="errorMsg"></span>
    </div>
</div>