@props([
    'name' => 'image',
    'label' => 'Image',
    'required' => false,
    'accept' => 'image/*',
    'maxSize' => '2MB',
    'currentImage' => null,
    'multiple' => false,
    'id' => null
])

@php
    $inputId = $id ?? 'image_' . Str::random(8);
    $previewId = 'preview_' . $inputId;
@endphp

<div class="image-uploader-wrapper" x-data="imageUploader_{{ $inputId }}()">
    <label class="block text-sm font-medium text-slate-700 dark:text-slate-300 mb-2">
        {{ $label }} @if($required)<span class="text-red-500">*</span>@endif
    </label>
    
    <div class="border-2 border-dashed rounded-xl p-4 text-center transition-colors"
         :class="isDragging ? 'border-indigo-500 bg-indigo-50 dark:bg-indigo-900/20' : 'border-slate-300 dark:border-slate-600 hover:border-indigo-500'"
         @dragenter.prevent="isDragging = true"
         @dragover.prevent="isDragging = true"
         @dragleave.prevent="isDragging = false"
         @drop.prevent="handleDrop($event)">
        
        <input type="file" 
               name="{{ $name }}{{ $multiple ? '[]' : '' }}" 
               id="{{ $inputId }}" 
               accept="{{ $accept }}" 
               class="hidden"
               {{ $multiple ? 'multiple' : '' }}
               {{ $required && !$currentImage ? 'required' : '' }}
               @change="handleFileSelect($event)">
        
        <!-- Preview Area -->
        <div x-show="hasPreview || hasCurrentImage" class="mb-4">
            <!-- Single Image Preview -->
            <template x-if="!isMultiple">
                <div class="relative inline-block">
                    <img :src="previewUrl || currentImageUrl" 
                         alt="Preview" 
                         class="max-h-48 mx-auto rounded-lg object-cover">
                    <button type="button" 
                            @click="removeImage()"
                            class="absolute -top-2 -right-2 w-6 h-6 bg-red-500 text-white rounded-full flex items-center justify-center hover:bg-red-600 transition-colors shadow-lg">
                        <i data-lucide="x" class="w-4 h-4"></i>
                    </button>
                </div>
            </template>
            
            <!-- Multiple Images Preview -->
            <template x-if="isMultiple">
                <div class="flex flex-wrap gap-3 justify-center">
                    <template x-for="(img, index) in previewImages" :key="index">
                        <div class="relative">
                            <img :src="img.url" 
                                 alt="Preview" 
                                 class="w-24 h-24 object-cover rounded-lg">
                            <button type="button" 
                                    @click="removeMultipleImage(index)"
                                    class="absolute -top-2 -right-2 w-5 h-5 bg-red-500 text-white rounded-full flex items-center justify-center hover:bg-red-600 transition-colors shadow-lg">
                                <i data-lucide="x" class="w-3 h-3"></i>
                            </button>
                        </div>
                    </template>
                </div>
            </template>
        </div>
        
        <!-- Upload Prompt -->
        <label :for="inputId" class="cursor-pointer" x-show="!hasPreview && !hasCurrentImage">
            <i data-lucide="upload-cloud" class="w-10 h-10 text-slate-400 mx-auto mb-2"></i>
            <p class="text-sm text-slate-600 dark:text-slate-400">Click to upload or drag and drop</p>
            <p class="text-xs text-slate-400 mt-1">PNG, JPG, WEBP up to {{ $maxSize }}</p>
        </label>
        
        <!-- Change Image Button (when image exists) -->
        <label :for="inputId" class="cursor-pointer inline-flex items-center px-3 py-1.5 bg-slate-100 dark:bg-slate-700 text-slate-600 dark:text-slate-300 rounded-lg text-sm hover:bg-slate-200 dark:hover:bg-slate-600 transition-colors mt-2" x-show="hasPreview || hasCurrentImage">
            <i data-lucide="upload" class="w-4 h-4 mr-1"></i>
            Change
        </label>
    </div>
    
    @error($name)
    <p class="text-red-500 text-xs mt-1">{{ $message }}</p>
    @enderror
</div>

<script>
function imageUploader_{{ $inputId }}() {
    return {
        inputId: '{{ $inputId }}',
        isMultiple: {{ $multiple ? 'true' : 'false' }},
        isDragging: false,
        previewUrl: null,
        previewImages: [],
        currentImageUrl: '{{ $currentImage ? Storage::url($currentImage) : '' }}',
        hasCurrentImage: {{ $currentImage ? 'true' : 'false' }},
        
        get hasPreview() {
            return this.isMultiple ? this.previewImages.length > 0 : !!this.previewUrl;
        },
        
        handleFileSelect(event) {
            const files = event.target.files;
            if (files.length === 0) return;
            
            if (this.isMultiple) {
                this.previewImages = [];
                Array.from(files).forEach(file => {
                    const reader = new FileReader();
                    reader.onload = (e) => {
                        this.previewImages.push({ url: e.target.result, file: file });
                    };
                    reader.readAsDataURL(file);
                });
            } else {
                const reader = new FileReader();
                reader.onload = (e) => {
                    this.previewUrl = e.target.result;
                    this.hasCurrentImage = false;
                };
                reader.readAsDataURL(files[0]);
            }
            
            this.$nextTick(() => {
                if (typeof reinitIcons !== 'undefined') reinitIcons();
            });
        },
        
        handleDrop(event) {
            this.isDragging = false;
            const files = event.dataTransfer.files;
            const input = document.getElementById(this.inputId);
            
            // Create a new DataTransfer to set files
            const dt = new DataTransfer();
            Array.from(files).forEach(file => dt.items.add(file));
            input.files = dt.files;
            
            // Trigger change event
            input.dispatchEvent(new Event('change'));
        },
        
        removeImage() {
            this.previewUrl = null;
            this.hasCurrentImage = false;
            this.currentImageUrl = '';
            const input = document.getElementById(this.inputId);
            input.value = '';
            
            this.$nextTick(() => {
                if (typeof reinitIcons !== 'undefined') reinitIcons();
            });
        },
        
        removeMultipleImage(index) {
            this.previewImages.splice(index, 1);
            
            // Update the file input
            const input = document.getElementById(this.inputId);
            const dt = new DataTransfer();
            this.previewImages.forEach(img => {
                if (img.file) dt.items.add(img.file);
            });
            input.files = dt.files;
            
            this.$nextTick(() => {
                if (typeof reinitIcons !== 'undefined') reinitIcons();
            });
        }
    }
}
</script>