@php
    $documents = $patient->documents->sortByDesc('created_at');
    $canUpload = auth()->user()->can('patient-documents.upload');
    $canDelete = auth()->user()->can('patient-documents.delete');
    $canVerify = auth()->user()->can('patient-insurances.manage');

    $humanSize = function (?int $bytes): string {
        if (! $bytes) {
            return '—';
        }

        return $bytes >= 1048576
            ? number_format($bytes / 1048576, 1).' MB'
            : number_format(max($bytes, 1) / 1024).' KB';
    };
@endphp

<div class="space-y-4">
    @if ($documents->isEmpty())
        <x-card flush>
            <x-empty-state icon="paperclip"
                           title="Nothing scanned yet"
                           message="Insurance cards, national IDs, referral letters and signed consents captured at the counter are filed here. They live on the private disk, so every open is permission-checked and written to the audit trail.">
                @if ($canUpload)
                    <x-slot:actions>
                        <button type="button" class="hms-btn hms-btn-primary hms-btn-sm"
                                x-on:click="$dispatch('open-modal', 'document-upload')">
                            <x-icon name="upload" size="sm" /> Upload document
                        </button>
                    </x-slot:actions>
                @endif
            </x-empty-state>
        </x-card>
    @else
        <div class="flex flex-wrap items-center justify-between gap-2">
            <p class="text-sm text-slate-500">
                {{ $documents->count() }} document{{ $documents->count() === 1 ? '' : 's' }} on file
                · {{ $documents->where('is_verified', true)->count() }} verified
            </p>

            @if ($canUpload)
                <button type="button" class="hms-btn hms-btn-primary hms-btn-sm"
                        x-on:click="$dispatch('open-modal', 'document-upload')">
                    <x-icon name="upload" size="sm" /> Upload document
                </button>
            @endif
        </div>

        <x-card flush>
            <div class="overflow-x-auto">
                <table class="hms-table">
                    <thead>
                        <tr>
                            <th>Document</th>
                            <th>Number</th>
                            <th>Expiry</th>
                            <th>Size</th>
                            <th>Filed</th>
                            <th></th>
                        </tr>
                    </thead>
                    <tbody>
                        @foreach ($documents as $document)
                            <tr>
                                <td>
                                    <div class="flex items-start gap-2">
                                        <x-status-badge :label="$document->document_type_label"
                                                        :color="$document->document_type_color" size="sm" />
                                        <div class="min-w-0">
                                            <p class="truncate font-medium text-slate-800">{{ $document->title }}</p>
                                            <p class="truncate text-xs text-slate-500">{{ $document->original_name }}</p>
                                        </div>
                                    </div>
                                </td>

                                <td class="font-mono text-xs text-slate-600">{{ $document->document_number ?: '—' }}</td>

                                <td class="text-sm">
                                    @if ($document->expiry_date)
                                        <span class="{{ $document->expiry_date->isPast() ? 'font-medium text-red-600' : 'text-slate-700' }}">
                                            {{ $document->expiry_date->toDateString() }}
                                        </span>
                                        <span class="block text-xs text-slate-500">
                                            {{ $document->expiry_date->isPast() ? 'expired' : 'in '.$document->expiry_date->diffForHumans(null, true) }}
                                        </span>
                                    @else
                                        <span class="text-slate-400">—</span>
                                    @endif
                                </td>

                                <td class="text-xs text-slate-600">{{ $humanSize($document->size_bytes) }}</td>

                                <td class="text-xs text-slate-600">
                                    {{ $document->created_at?->format('d M Y') }}
                                    <span class="block text-slate-400">{{ $document->uploader?->name ?? 'system' }}</span>
                                </td>

                                <td>
                                    <div class="flex flex-wrap items-center justify-end gap-1.5">
                                        @if ($document->is_verified)
                                            <x-status-badge label="Verified" color="green" size="sm" dot />
                                        @elseif ($canVerify)
                                            <form method="POST" action="{{ route('patients.documents.verify', [$patient, $document]) }}">
                                                @csrf
                                                @method('PATCH')
                                                <button type="submit" class="hms-btn hms-btn-ghost hms-btn-sm">
                                                    <x-icon name="check" size="sm" /> Verify
                                                </button>
                                            </form>
                                        @else
                                            <x-status-badge label="Unverified" color="amber" size="sm" dot />
                                        @endif

                                        <a href="{{ route('patients.documents.show', [$patient, $document]) }}" target="_blank"
                                           class="hms-btn hms-btn-ghost hms-btn-sm">
                                            <x-icon name="eye" size="sm" /> Open
                                        </a>

                                        <a href="{{ route('patients.documents.download', [$patient, $document]) }}"
                                           class="hms-btn hms-btn-ghost hms-btn-sm">
                                            <x-icon name="download" size="sm" /> Download
                                        </a>

                                        @if ($canDelete)
                                            <form method="POST" action="{{ route('patients.documents.destroy', [$patient, $document]) }}"
                                                  onsubmit="return confirm('Delete {{ $document->title }}? The stored file is removed as well.')">
                                                @csrf
                                                @method('DELETE')
                                                <button type="submit" class="hms-btn hms-btn-ghost hms-btn-sm text-red-600 hover:bg-red-50">
                                                    <x-icon name="trash" size="sm" />
                                                </button>
                                            </form>
                                        @endif
                                    </div>
                                </td>
                            </tr>
                        @endforeach
                    </tbody>
                </table>
            </div>
        </x-card>
    @endif

    @if ($canUpload)
        <x-modal name="document-upload" maxWidth="lg">
            <form method="POST" action="{{ route('patients.documents.store', $patient) }}" enctype="multipart/form-data">
                @csrf

                <div class="space-y-4 p-6">
                    <h2 class="text-base font-semibold text-slate-800">Upload document</h2>
                    <p class="text-sm text-slate-500">
                        Stored on the private disk against {{ $patient->full_name }}. JPEG, PNG, WebP or PDF, up to 8 MB.
                    </p>

                    <x-form.select name="document_type" label="Document type" required
                                   :options="$documentTypes" :value="old('document_type')" />

                    <x-form.input name="title" label="Title" :value="old('title')"
                                  hint="Defaults to the file name if you leave it blank." />

                    <x-form.input name="document_number" label="Document number" :value="old('document_number')"
                                  hint="Policy number, ID number — whatever is printed on the document." />

                    <x-form.input name="expiry_date" label="Expiry date" type="date" :value="old('expiry_date')"
                                  hint="Optional. Used to warn the front desk before a card lapses." />

                    <div>
                        <label for="document-file" class="hms-label">File <span class="text-red-500">*</span></label>
                        <input id="document-file" name="file" type="file" required
                               accept=".jpg,.jpeg,.png,.webp,.pdf"
                               class="block w-full cursor-pointer rounded-lg border border-slate-300 text-sm text-slate-600 file:mr-3 file:rounded-l-lg file:border-0 file:bg-slate-100 file:px-4 file:py-2.5 file:text-sm file:font-medium file:text-slate-700 hover:file:bg-slate-200">
                        @error('file')<p class="hms-error">{{ $message }}</p>@enderror
                    </div>

                    <x-form.textarea name="notes" label="Notes" rows="2" :value="old('notes')" />
                </div>

                <div class="flex items-center justify-end gap-2 border-t border-slate-200 bg-slate-50 px-6 py-4">
                    <button type="button" class="hms-btn hms-btn-secondary" x-on:click="$dispatch('close-modal', 'document-upload')">Cancel</button>
                    <button type="submit" class="hms-btn hms-btn-primary">Upload</button>
                </div>
            </form>
        </x-modal>
    @endif
</div>