@props([
    'name' => 'file',
    'label' => 'Upload File',
    'accept' => 'image/*',
    'required' => false,
    'error' => null,
    'hint' => null,
    'existing' => null,
    'maxSize' => '2MB',
])

<div x-data="{ dragging: false, fileName: '', filePreview: '', existingFile: '{{ $existing ?: '' }}' }">
    <label class="form-label" for="{{ $name }}">
        {{ $label }}
        @if($required) <span class="text-red-500">*</span> @endif
    </label>

    <div
        class="file-upload-zone"
        :class="{ 'dragover': dragging }"
        @click="$refs.input.click()"
        @dragover.prevent="dragging = true"
        @dragleave.prevent="dragging = false"
        @drop.prevent="
            dragging = false;
            const file = $event.dataTransfer.files[0];
            if (file) {
                $refs.input.files = $event.dataTransfer.files;
                fileName = file.name;
                if (file.type.startsWith('image/')) {
                    const reader = new FileReader();
                    reader.onload = (e) => filePreview = e.target.result;
                    reader.readAsDataURL(file);
                }
            }
        "
    >
        <template x-if="!fileName && !existingFile">
            <div>
                <div class="w-12 h-12 rounded-full bg-gray-100 dark:bg-dark-border flex items-center justify-center mx-auto mb-3">
                    <svg class="w-6 h-6 text-gray-400 dark:text-dark-muted" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" 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>
                <p class="text-sm font-medium text-gray-600 dark:text-dark-muted">
                    <span class="text-primary-600">Click to upload</span> or drag and drop
                </p>
                <p class="text-xs text-gray-400 dark:text-dark-muted mt-1">Max {{ $maxSize }}</p>
            </div>
        </template>

        <template x-if="fileName && !filePreview">
            <div class="file-upload-preview">
                <svg class="w-5 h-5 text-primary-500" fill="none" stroke="currentColor" viewBox="0 0 24 24"><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>
                <span class="text-sm text-gray-700 dark:text-dark-text" x-text="fileName"></span>
                <button @click.stop="fileName = ''; filePreview = ''; $refs.input.value = ''" class="text-gray-400 hover:text-red-500">
                    <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"/></svg>
                </button>
            </div>
        </template>

        <template x-if="filePreview">
            <div class="file-upload-preview">
                <img :src="filePreview" alt="Preview">
                <span class="text-sm text-gray-700 dark:text-dark-text" x-text="fileName"></span>
                <button @click.stop="fileName = ''; filePreview = ''; $refs.input.value = ''" class="text-gray-400 hover:text-red-500">
                    <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"/></svg>
                </button>
            </div>
        </template>

        <template x-if="!fileName && existingFile">
            <div class="file-upload-preview">
                <img src="{{ $existing }}" alt="Current">
                <span class="text-sm text-gray-700 dark:text-dark-text">Current file</span>
                <button @click.stop="existingFile = ''; $refs.input.value = ''" class="text-gray-400 hover:text-red-500">
                    <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"/></svg>
                </button>
            </div>
        </template>

        <input
            x-ref="input"
            type="file"
            name="{{ $name }}"
            id="{{ $name }}"
            accept="{{ $accept }}"
            @if($required) required @endif
            class="hidden"
            @change="
                const file = $event.target.files[0];
                if (file) {
                    fileName = file.name;
                    if (file.type.startsWith('image/')) {
                        const reader = new FileReader();
                        reader.onload = (e) => filePreview = e.target.result;
                        reader.readAsDataURL(file);
                    }
                }
            "
        >
    </div>

    @if($hint)
        <p class="mt-1.5 text-xs text-gray-400 dark:text-dark-muted">{{ $hint }}</p>
    @endif

    @if($error)
        <p class="mt-1.5 text-xs text-red-500 flex items-center gap-1 animate-shake">
            <svg class="w-3.5 h-3.5" 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>
            {{ $error }}
        </p>
    @endif
</div>