<div>
    <x-card>
        <p class="text-sm text-slate-600">
            Upload clear, readable copies. Accepted formats: PDF, JPG and PNG.
            Your documents are stored privately and are only visible to you and our admissions team.
        </p>
    </x-card>

    @error('files')
        <x-alert type="danger" class="mt-5">{{ $message }}</x-alert>
    @enderror

    <div class="mt-6 space-y-4">
        @foreach ($types as $type)
            @php $document = $uploaded[$type->slug] ?? null; @endphp

            <x-card wire:key="doc-type-{{ $type->id }}">
                <div class="flex flex-wrap items-start justify-between gap-4">
                    <div class="min-w-0 flex-1">
                        <h2 class="flex flex-wrap items-center gap-2 text-base font-semibold text-slate-900">
                            {{ $type->name }}
                            @if ($type->is_required)
                                <span class="text-xs font-normal text-red-600">Required</span>
                            @else
                                <x-badge color="slate" size="sm">Optional</x-badge>
                            @endif
                        </h2>
                        <p class="mt-1 text-sm text-slate-600">{{ $type->description }}</p>
                        <p class="mt-1 text-xs text-slate-400">
                            {{ strtoupper(implode(', ', $type->allowedMimes())) }}
                            &middot; max {{ round($type->maxSizeKb() / 1024, 1) }} MB
                        </p>
                    </div>

                    @if ($document)
                        <x-status-badge :status="$document->verification_status" />
                    @endif
                </div>

                <div class="mt-5">
                    @if ($document)
                        {{-- Uploaded state --}}
                        <div class="flex flex-wrap items-center gap-4 rounded-lg border border-slate-200 bg-slate-50 p-4">
                            <span class="flex h-10 w-10 shrink-0 items-center justify-center rounded-lg bg-white text-brand-700 ring-1 ring-slate-200">
                                <svg class="h-5 w-5" fill="currentColor" viewBox="0 0 20 20" aria-hidden="true">
                                    <path fill-rule="evenodd" d="M4 4a2 2 0 0 1 2-2h5.6a2 2 0 0 1 1.4.6l3.4 3.4a2 2 0 0 1 .6 1.4V16a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V4Zm7 0v3a1 1 0 0 0 1 1h3l-4-4Z" clip-rule="evenodd"/>
                                </svg>
                            </span>

                            <div class="min-w-0 flex-1">
                                <p class="truncate text-sm font-medium text-slate-900">{{ $document->original_filename }}</p>
                                <p class="mt-0.5 text-xs text-slate-500">
                                    {{ $document->humanSize() }} &middot; uploaded {{ $document->created_at->diffForHumans() }}
                                </p>
                            </div>

                            <div class="flex shrink-0 items-center gap-2">
                                <a href="{{ route('applicant.documents.preview', $document) }}"
                                   target="_blank" rel="noopener"
                                   class="rounded-lg border border-slate-300 bg-white px-3 py-1.5 text-xs font-medium text-slate-700 transition hover:bg-slate-50">
                                    View
                                </a>

                                <label class="cursor-pointer rounded-lg border border-slate-300 bg-white px-3 py-1.5 text-xs font-medium text-slate-700 transition hover:bg-slate-50">
                                    Replace
                                    <input type="file" class="sr-only"
                                           wire:model="files.{{ $type->slug }}"
                                           accept="{{ $type->acceptAttribute() }}">
                                </label>

                                <button type="button" wire:click="remove({{ $document->id }})"
                                        wire:confirm="Remove {{ $document->original_filename }}?"
                                        class="rounded-lg p-1.5 text-slate-400 transition hover:bg-red-50 hover:text-red-600"
                                        aria-label="Remove document">
                                    <svg class="h-4 w-4" fill="currentColor" viewBox="0 0 20 20" aria-hidden="true">
                                        <path fill-rule="evenodd" d="M8 2a1 1 0 0 0-1 1v1H4a1 1 0 0 0 0 2h12a1 1 0 1 0 0-2h-3V3a1 1 0 0 0-1-1H8ZM5 7h10l-.8 9.1a2 2 0 0 1-2 1.9H7.8a2 2 0 0 1-2-1.9L5 7Z" clip-rule="evenodd"/>
                                    </svg>
                                </button>
                            </div>
                        </div>

                        @if ($document->isRejected() && $document->rejection_reason)
                            <x-alert type="danger" class="mt-3">
                                <p class="font-medium">This document was not accepted</p>
                                <p class="mt-0.5">{{ $document->rejection_reason }}</p>
                                <p class="mt-1 text-xs">Please upload a replacement.</p>
                            </x-alert>
                        @endif
                    @else
                        {{-- Empty state --}}
                        <label class="flex cursor-pointer flex-col items-center justify-center rounded-lg border border-dashed border-slate-300 bg-slate-50/60 px-6 py-8 text-center transition hover:border-brand-400 hover:bg-brand-50/40">
                            <svg class="h-8 w-8 text-slate-400" fill="none" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24" aria-hidden="true">
                                <path stroke-linecap="round" stroke-linejoin="round" d="M12 16.5V9.75m0 0 3 3m-3-3-3 3M6.75 19.5a4.5 4.5 0 0 1-.41-8.98 4.5 4.5 0 0 1 8.08-3.05 4.5 4.5 0 0 1 5.58 5.53A4.5 4.5 0 0 1 17.25 19.5H6.75Z" />
                            </svg>

                            <span class="mt-3 text-sm font-medium text-brand-700">Choose a file to upload</span>
                            <span class="mt-1 text-xs text-slate-500">or drag and drop it here</span>

                            <input type="file" class="sr-only"
                                   wire:model="files.{{ $type->slug }}"
                                   accept="{{ $type->acceptAttribute() }}">
                        </label>
                    @endif

                    {{-- Progress + errors --}}
                    <div wire:loading wire:target="files.{{ $type->slug }}" class="mt-3">
                        <x-progress-bar :value="100" label="Uploading…" :show-value="false" />
                    </div>

                    @error('files.'.$type->slug)
                        <p class="mt-2 text-xs text-red-600">{{ $message }}</p>
                    @enderror
                </div>
            </x-card>
        @endforeach
    </div>

    <div class="mt-6 flex flex-wrap items-center justify-between gap-3">
        <x-button type="button" wire:click="previousStep" variant="outline">Back</x-button>

        <x-button type="button" wire:click="save" size="lg" wire:loading.attr="disabled">
            Save &amp; Continue
        </x-button>
    </div>
</div>
