@props([
    'label' => null,
    'model' => null,
    'multiple' => false,
    'accept' => null,
    'maxSize' => '10MB',
    'dropzone' => true,
    'preview' => true,
])

@php
    $attributes = $attributes->class([
        'file-upload-modern'
    ]);
    
    $wireModel = $attributes->whereStartsWith('wire:model')->first();
    $model = $model ?? $wireModel;
    $id = uniqid('file-upload-');
@endphp

<div {{ $attributes }}>
    
    @if($label)
        <label class="form-label fw-medium mb-2">{{ $label }}</label>
    @endif
    
    <!-- Drop Zone -->
    <div x-data="{
        isDragOver: false,
        handleDrop(event) {
            this.isDragOver = false;
            const droppedFiles = event.dataTransfer.files;
            this.handleFiles(droppedFiles);
        },
        handleFiles(fileList) {
            // Let Livewire handle the file input assignment
            const input = this.$refs.fileInput;
            input.files = fileList;
            input.dispatchEvent(new Event('change', { bubbles: true }));
        }
    }"
        x-on:dragover.prevent="isDragOver = true"
        x-on:dragleave.prevent="isDragOver = false"
        x-on:drop.prevent="handleDrop($event)"
        x-bind:class="{'border-primary bg-light': isDragOver}"
        class="file-upload-area dropzone rounded-xl p-4 text-center transition-colors cursor-pointer hover:border-primary hover:bg-light"
        x-on:click="$refs.fileInput.click()">
        
        <div wire:loading wire:target="{{ $model }}" wire:loading.class="flex-column align-items-center">
            <div class="spinner-border spinner-border-sm text-primary mb-2" role="status"></div>
            <small class="text-muted">{{ __('Uploading...') }}</small>
        </div>
        
        <div wire:loading.remove wire:target="{{ $model }}">
            <x-ui.nicon name="upload" class="text-primary fs-24px mb-2"/>
            <p class="mb-1 fw-medium text-dark">{{ __('Drop files here or click to select') }}</p>
            <p class="small text-muted mb-0">{{ __('Maximum file size: :size', ['size' => $maxSize]) }}</p>
        </div>
        
        <input type="file" 
            x-ref="fileInput"
            wire:model="{{ $model }}"
            class="d-none"
            @if($multiple) multiple @endif
            @if($accept) accept="{{ $accept }}" @endif>
    </div>
    
    <x-ui.error :key="$model"/>
</div>