@props(['id', 'name', 'label' => 'Upload File', 'accept' => '*/*', 'multiple' => false, 'required' => false])

<div class="file-upload-container" x-data="{ 
    fileName: '', 
    filePreview: null,
    isImage: false,
    isDragging: false,
    handleFiles(files) {
        if (!files.length) return;
        const file = files[0];
        this.fileName = file.name;
        
        // Check if it's an image
        this.isImage = file.type.startsWith('image/');
        
        // Create preview for images
        if (this.isImage) {
            const reader = new FileReader();
            reader.onload = (e) => {
                this.filePreview = e.target.result;
            };
            reader.readAsDataURL(file);
        } else {
            this.filePreview = null;
        }
    }
}">
    <label 
        for="{{ $id }}" 
        class="flex flex-col items-center justify-center w-full h-32 border-2 border-dashed rounded-lg cursor-pointer transition-all duration-200"
        :class="{ 
            'border-primary/70 bg-primary/5': isDragging, 
            'border-gray-300 hover:bg-gray-50 dark:hover:bg-gray-800': !isDragging && !filePreview,
            'border-green-300 bg-green-50': filePreview
        }"
        @dragover.prevent="isDragging = true"
        @dragleave.prevent="isDragging = false"
        @drop.prevent="isDragging = false; handleFiles($event.dataTransfer.files)"
    >
        <div class="flex flex-col items-center justify-center pt-5 pb-6" x-show="!filePreview">
            <svg class="w-8 h-8 mb-3 text-gray-500" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 20 16">
                <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 13h3a3 3 0 0 0 0-6h-.025A5.56 5.56 0 0 0 16 6.5 5.5 5.5 0 0 0 5.207 5.021C5.137 5.017 5.071 5 5 5a4 4 0 0 0 0 8h2.167M10 15V6m0 0L8 8m2-2 2 2"/>
            </svg>
            <p class="mb-1 text-sm text-gray-500"><span class="font-semibold">{{ $label }}</span> or drag and drop</p>
            <p class="text-xs text-gray-500">{{ $accept === 'image/*' ? 'PNG, JPG or GIF' : 'PDF, DOC, DOCX, JPG, PNG' }}</p>
        </div>
        
        <div class="flex flex-col items-center justify-center" x-show="filePreview">
            <template x-if="isImage">
                <img :src="filePreview" class="object-cover h-20 w-auto mb-2 rounded" />
            </template>
            <template x-if="!isImage">
                <div class="bg-gray-100 p-2 rounded mb-2">
                    <svg xmlns="http://www.w3.org/2000/svg" class="h-8 w-8 text-gray-500" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" />
                    </svg>
                </div>
            </template>
            <p class="text-sm text-gray-500 truncate max-w-[200px]" x-text="fileName"></p>
            <button type="button" @click.prevent="fileName = ''; filePreview = null;" class="text-xs text-red-500 mt-1 hover:underline">Remove</button>
        </div>
    </label>
    
    <input 
        id="{{ $id }}" 
        type="file" 
        name="{{ $name }}" 
        class="hidden" 
        accept="{{ $accept }}" 
        {{ $multiple ? 'multiple' : '' }} 
        {{ $required ? 'required' : '' }}
        @change="handleFiles($event.target.files)"
    />
</div>