<!-- resources/views/livewire/file-upload.blade.php -->
<div class="relative p-8 mt-4 border-2 border-dashed rounded-lg"
     x-data="{ isDragging: false }"
     @dragover.prevent="isDragging = true"
     @dragleave.prevent="isDragging = false"
     @drop.prevent="isDragging = false; $wire.uploadFiles(event.dataTransfer.files)"
     :class="{ 'border-blue-500 bg-blue-50': isDragging }">
     
    <div class="text-center">
        <input type="file" id="fileInput" wire:model="files" multiple class="hidden">
        
        <template x-if="!$wire.previews.length">
            <div>
                <x-icons icon="upload" class="w-12 h-12 mx-auto text-gray-400" />
                <p class="mt-2 text-sm text-gray-600">
                    Arrastra archivos aquí o 
                    <button class="text-blue-600 hover:underline" 
                            @click="document.getElementById('fileInput').click()">
                        selecciona desde tu equipo
                    </button>
                </p>
                <p class="mt-1 text-xs text-gray-500">
                    Máximo {{ $maxSize }}MB por archivo
                </p>
            </div>
        </template>

        <template x-if="$wire.previews.length">
            <div class="grid grid-cols-2 gap-4 md:grid-cols-4">
                <template x-for="(preview, index) in $wire.previews" :key="index">
                    <div class="relative p-2 border rounded-lg">
                        <button class="absolute top-1 right-1 text-red-500 hover:text-red-700"
                                @click="$wire.removePreview(index)">
                            <x-icons icon="x" class="w-4 h-4" />
                        </button>
                        
                        <template x-if="preview.preview">
                            <img :src="preview.preview" class="object-cover h-32 mx-auto rounded">
                        </template>
                        
                        <template x-if="!preview.preview">
                            <x-icons icon="document" class="w-32 h-32 mx-auto text-gray-400" />
                        </template>
                        
                        <div class="mt-2 text-xs truncate" x-text="preview.name"></div>
                        <div class="text-xs text-gray-500" 
                             x-text="formatBytes(preview.size)"></div>
                    </div>
                </template>
            </div>
        </template>
    </div>
</div>

<script>
function formatBytes(bytes) {
    const units = ['B', 'KB', 'MB', 'GB'];
    let size = bytes;
    let unitIndex = 0;
    
    while (size >= 1024 && unitIndex < units.length - 1) {
        size /= 1024;
        unitIndex++;
    }
    
    return `${size.toFixed(1)} ${units[unitIndex]}`;
}
</script>

