{{--
    File Upload Component
    Props:
      $name, $label, $accept, $hint, $multiple, $required
--}}
@props([
    'name' => '',
    'label' => '',
    'accept' => '*',
    'hint' => 'PNG, JPG, PDF up to 10MB',
    'multiple' => false,
    'required' => false,
])

@php
    $inputId = 'file-upload-' . \Illuminate\Support\Str::uuid();
@endphp

@once
    @push('before-app-js')
        @vite(['resources/js/components/file-upload.js'])
    @endpush
@endonce

<div
    class="space-y-1.5"
    x-data="fileUpload({ multiple: @js($multiple) })">
    @if($label)
        <label for="{{ $inputId }}" class="mb-1.5 block text-sm font-medium text-foreground">
            {{ $label }}
            @if($required)<span class="ml-0.5 text-red-500">*</span>@endif
        </label>
    @endif

    <div
        x-show="files.length === 0"
        @dragover.prevent="dragging = true"
        @dragleave.prevent="dragging = false"
        @drop.prevent="handleDrop($event.dataTransfer.files)"
        :class="dragging ? 'border-primary-500 bg-primary-50 dark:bg-primary-950/20' : 'border-surface-300 dark:border-surface-600'"
        class="flex h-32 w-full cursor-pointer flex-col items-center justify-center rounded-xl border-2 border-dashed bg-surface-50 px-4 transition-colors duration-200 hover:border-primary-400 hover:bg-primary-50 dark:bg-surface-800 dark:hover:border-primary-500 dark:hover:bg-primary-950/20"
        @click="triggerPicker()">
        <div class="pointer-events-none flex flex-col items-center justify-center text-center">
            <svg class="mb-2 h-8 w-8 text-surface-400" fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true">
                <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>
            <p class="text-sm text-surface-500 dark:text-surface-400">Click or drag &amp; drop to upload</p>
            <p class="mt-1 text-xs text-surface-400 dark:text-surface-500">{{ $hint }}</p>
        </div>
    </div>

    <div x-show="files.length > 0" x-cloak class="space-y-3">
        <div class="{{ $multiple ? 'grid grid-cols-1 items-stretch gap-3 sm:grid-cols-2 lg:grid-cols-3' : 'w-full' }}">
            <template x-for="(entry, index) in files" :key="`${entry.name}-${entry.size}-${index}`">
                <div class="{{ $multiple ? 'flex h-full min-h-[220px] flex-col' : 'w-full' }} overflow-hidden rounded-xl border border-border bg-card shadow-sm transition-colors duration-200 hover:border-primary-400 dark:hover:border-primary-500">
                    <div class="{{ $multiple ? 'aspect-video' : 'h-40 sm:h-48' }} relative flex w-full items-center justify-center overflow-hidden bg-surface-100 dark:bg-surface-800">
                        <template x-if="entry.preview">
                            <img :src="entry.preview" :alt="entry.name" class="h-full w-full object-cover" />
                        </template>

                        <template x-if="!entry.preview">
                            <div class="flex h-full w-full flex-col items-center justify-center gap-2 px-4 text-center text-surface-500 dark:text-surface-400">
                                <template x-if="entry.kind === 'pdf'">
                                    <svg class="h-10 w-10 text-red-500" fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true">
                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"
                                            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 0120 9.414V19a2 2 0 01-2 2z" />
                                    </svg>
                                </template>
                                <template x-if="entry.kind === 'doc'">
                                    <svg class="h-10 w-10 text-blue-500" fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true">
                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"
                                            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 0120 9.414V19a2 2 0 01-2 2z" />
                                    </svg>
                                </template>
                                <template x-if="entry.kind === 'file'">
                                    <svg class="h-10 w-10 text-surface-400" fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true">
                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"
                                            d="M7 21h10a2 2 0 002-2V9.414a1 1 0 00-.293-.707l-5.414-5.414A1 1 0 0012.586 3H7a2 2 0 00-2 2v14a2 2 0 002 2z" />
                                    </svg>
                                </template>
                                <span class="text-xs font-medium uppercase tracking-wide" x-text="entry.kind"></span>
                            </div>
                        </template>
                    </div>

                    <div class="{{ $multiple ? 'flex flex-1 flex-col justify-between' : 'sm:flex sm:items-center sm:justify-between sm:gap-4' }} space-y-3 p-3">
                        <div class="min-w-0 {{ $multiple ? '' : 'sm:flex-1' }}">
                            <p class="truncate text-sm font-medium text-foreground" x-text="entry.name"></p>
                            <p class="mt-0.5 text-xs text-muted-foreground" x-text="formatSize(entry.size)"></p>
                        </div>

                        <div class="{{ $multiple ? 'grid grid-cols-2' : 'grid grid-cols-2 sm:w-48' }} gap-2">
                            <button
                                type="button"
                                @click="changeFile(index)"
                                class="inline-flex h-9 items-center justify-center gap-1.5 rounded-lg border border-border px-3 text-xs font-medium text-foreground transition-colors duration-150 hover:border-primary-400 hover:text-primary-600 dark:hover:border-primary-500 dark:hover:text-primary-400">
                                <svg class="h-3.5 w-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                        d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-8l-4-4m0 0L8 8m4-4v12" />
                                </svg>
                                Change
                            </button>
                            <button
                                type="button"
                                @click="removeFile(index)"
                                class="inline-flex h-9 items-center justify-center gap-1.5 rounded-lg border border-red-200 px-3 text-xs font-medium text-red-600 transition-colors duration-150 hover:border-red-300 hover:bg-red-50 dark:border-red-900/60 dark:text-red-400 dark:hover:border-red-700 dark:hover:bg-red-950/20">
                                <svg class="h-3.5 w-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                        d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16" />
                                </svg>
                                Remove
                            </button>
                        </div>
                    </div>
                </div>
            </template>

            @if($multiple)
                <button
                    type="button"
                    @click="triggerPicker('append')"
                    @dragover.prevent="dragging = true"
                    @dragleave.prevent="dragging = false"
                    @drop.prevent="handleDrop($event.dataTransfer.files)"
                    :class="dragging ? 'border-primary-500 bg-primary-50 dark:bg-primary-950/20' : 'border-surface-300 dark:border-surface-600'"
                    class="flex h-full min-h-[220px] flex-col items-center justify-center rounded-xl border-2 border-dashed bg-surface-50 px-4 text-center transition-colors duration-200 hover:border-primary-400 hover:bg-primary-50 dark:bg-surface-800 dark:hover:border-primary-500 dark:hover:bg-primary-950/20">
                    <svg class="mb-2 h-7 w-7 text-primary-500" fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4" />
                    </svg>
                    <span class="text-sm font-medium text-foreground">Add more files</span>
                    <span class="mt-1 text-xs text-muted-foreground">{{ $hint }}</span>
                </button>
            @endif
        </div>
    </div>

    <input
        id="{{ $inputId }}"
        x-ref="input"
        name="{{ $name }}{{ $multiple ? '[]' : '' }}"
        type="file"
        accept="{{ $accept }}"
        {{ $multiple ? 'multiple' : '' }}
        {{ $required ? 'required' : '' }}
        @change="handleInputChange($event)"
        class="hidden" />

    <x-forms.error :name="$name" />
</div>