{{-- Bulk Upload Users Modal --}}
<div
    x-show="showBulkUpload"
    x-transition:enter="transition ease-out duration-200"
    x-transition:enter-start="opacity-0"
    x-transition:enter-end="opacity-100"
    x-transition:leave="transition ease-in duration-150"
    x-transition:leave-start="opacity-100"
    x-transition:leave-end="opacity-0"
    class="fixed inset-0 z-50 flex animate-fade-in items-center justify-center bg-black/50 p-4 backdrop-blur-sm"
    x-cloak
    role="dialog"
    aria-modal="true"
    aria-labelledby="bulk-upload-title">
    <div
        x-transition:enter="transition ease-out duration-200"
        x-transition:enter-start="opacity-0 scale-95"
        x-transition:enter-end="opacity-100 scale-100"
        x-transition:leave="transition ease-in duration-150"
        x-transition:leave-start="opacity-100 scale-100"
        x-transition:leave-end="opacity-0 scale-95"
        class="w-full animate-slide-up max-h-[90vh] overflow-y-auto rounded-2xl border border-border bg-card text-card-foreground shadow-2xl max-w-xl">
        {{-- Header --}}
        <div class="flex items-center justify-between border-b border-border px-6 py-4 sticky top-0 bg-card z-10">
            <h3 id="bulk-upload-title" class="text-base font-semibold text-surface-900 dark:text-surface-100">
                {{ __('pages/admin/users.bulk_upload.modal_title') }}
            </h3>
            <button
                @click="closeBulkUploadModal()"
                type="button"
                :disabled="bulkUploadSubmitting"
                class="rounded-lg p-2 text-muted-foreground transition-colors hover:bg-muted hover:text-foreground focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 focus:ring-offset-background disabled:opacity-50"
                aria-label="Close">
                <x-heroicon-o-x-mark class="w-5 h-5" />
            </button>
        </div>

        <div class="px-6 py-5 space-y-5">
            {{-- Instructions --}}
            <div class="rounded-xl border border-blue-200 bg-blue-50 p-4 dark:border-blue-800 dark:bg-blue-950/40">
                <div class="flex items-start gap-2.5">
                    <x-heroicon-o-information-circle class="w-5 h-5 flex-shrink-0 text-blue-600 dark:text-blue-400 mt-0.5" />
                    <div class="space-y-2 text-sm text-blue-800 dark:text-blue-200">
                        <p class="font-medium">{{ __('pages/admin/users.bulk_upload.instructions.title') }}</p>
                        <ul class="list-disc list-inside space-y-1 text-blue-700/90 dark:text-blue-300/90">
                            <li>{{ __('pages/admin/users.bulk_upload.instructions.line1') }}</li>
                            <li>{{ __('pages/admin/users.bulk_upload.instructions.line2') }}</li>
                            <li>{{ __('pages/admin/users.bulk_upload.instructions.line3') }}</li>
                        </ul>
                        <p class="text-xs font-medium text-amber-700 dark:text-amber-300">
                            {{ __('pages/admin/users.bulk_upload.max_records', ['max' => \App\Services\Admin\UserBulkImportService::MAX_RECORDS]) }}
                        </p>
                    </div>
                </div>
            </div>

            {{-- Sample download --}}
            <div class="flex items-center justify-end">
                <x-buttons.secondary
                    :href="route('admin.users.bulk-upload.sample')"
                    size="sm"
                    target="_blank"
                    rel="noopener">
                    <x-heroicon-o-arrow-down-tray class="w-4 h-4" />
                    {{ __('pages/admin/users.bulk_upload.sample_download') }}
                </x-buttons.secondary>
            </div>

            {{-- Validation message --}}
            <div
                x-show="bulkUploadError"
                x-cloak
                class="rounded-lg border border-red-200 bg-red-50 px-4 py-3 text-sm text-red-700 dark:border-red-800 dark:bg-red-950/40 dark:text-red-300"
                x-text="bulkUploadError">
            </div>

            {{-- Upload zone --}}
            <div
                x-show="!bulkUploadSubmitting"
                x-data="{ dragging: false }"
                @dragover.prevent="dragging = true"
                @dragleave.prevent="dragging = false"
                @drop.prevent="dragging = false; handleBulkFileDrop($event)"
                :class="dragging ? 'border-primary-500 bg-primary-50 dark:bg-primary-950/20' : 'border-surface-300 dark:border-surface-600'"
                class="relative flex flex-col items-center justify-center w-full min-h-[9rem] px-4 border-2 border-dashed rounded-xl cursor-pointer bg-surface-50 dark:bg-surface-800/50 hover:border-primary-400 dark:hover:border-primary-500 transition-colors duration-200">
                <input
                    type="file"
                    id="bulk-upload-file"
                    accept=".csv,text/csv"
                    class="absolute inset-0 w-full h-full opacity-0 cursor-pointer"
                    x-show="!bulkUploadFile"
                    :disabled="bulkUploadSubmitting"
                    @change="handleBulkFileSelect($event)" />

                <template x-if="!bulkUploadFile">
                    <div class="flex flex-col items-center justify-center text-center pointer-events-none py-4">
                        <x-heroicon-o-cloud-arrow-up class="w-10 h-10 mb-2 text-surface-400" />
                        <p class="text-sm font-medium text-surface-700 dark:text-surface-300">
                            {{ __('pages/admin/users.bulk_upload.upload_zone.title') }}
                        </p>
                        <p class="text-xs text-surface-500 dark:text-surface-400 mt-1">
                            {{ __('pages/admin/users.bulk_upload.upload_zone.hint') }}
                        </p>
                    </div>
                </template>

                <template x-if="bulkUploadFile">
                    <div class="relative flex w-full items-center gap-3 rounded-lg border border-border bg-card px-4 py-3 shadow-sm">
                        <div class="flex h-10 w-10 shrink-0 items-center justify-center rounded-lg bg-primary-50 dark:bg-primary-950/40">
                            <x-heroicon-o-document-text class="w-5 h-5 text-primary-600 dark:text-primary-400" />
                        </div>
                        <div class="min-w-0 flex-1 text-left">
                            <p class="text-xs font-medium uppercase tracking-wide text-surface-500 dark:text-surface-400">
                                {{ __('pages/admin/users.bulk_upload.upload_zone.selected') }}
                            </p>
                            <p class="truncate text-sm font-semibold text-surface-900 dark:text-surface-100" x-text="bulkUploadFile?.name"></p>
                            <p class="text-xs text-surface-500 dark:text-surface-400" x-text="formatBulkFileSize(bulkUploadFile?.size)"></p>
                        </div>
                        <button
                            type="button"
                            @click.stop="clearBulkUploadFile()"
                            :disabled="bulkUploadSubmitting"
                            class="shrink-0 rounded-lg p-2 text-surface-500 transition-colors hover:bg-muted hover:text-surface-900 focus:outline-none focus:ring-2 focus:ring-ring disabled:pointer-events-none disabled:opacity-50 dark:hover:text-surface-100"
                            aria-label="{{ __('pages/admin/users.bulk_upload.upload_zone.remove') }}">
                            <x-heroicon-o-x-mark class="w-5 h-5" />
                        </button>
                    </div>
                </template>
            </div>

            {{-- Import progress --}}
            <div
                x-show="bulkUploadSubmitting"
                x-cloak
                class="rounded-xl border border-border bg-muted/30 p-4 space-y-4">
                <div class="flex items-center justify-between gap-3">
                    <p class="text-sm font-medium text-surface-900 dark:text-surface-100">
                        {{ __('pages/admin/users.bulk_upload.progress.title') }}
                    </p>
                    <span
                        class="text-xs font-medium text-surface-500 dark:text-surface-400 tabular-nums"
                        x-text="bulkUploadProgressLabel()">
                    </span>
                </div>

                <div
                    class="h-2.5 w-full overflow-hidden rounded-full bg-surface-200 dark:bg-surface-700"
                    role="progressbar"
                    :aria-valuenow="bulkUploadProgressPercent"
                    aria-valuemin="0"
                    aria-valuemax="100">
                    <div
                        class="h-full rounded-full bg-primary-500 transition-all duration-300 ease-out"
                        :style="`width: ${bulkUploadProgressPercent}%`">
                    </div>
                </div>

                <div class="grid grid-cols-3 gap-3">
                    <div class="rounded-lg border border-border bg-card px-3 py-2.5 text-center">
                        <p class="text-xs font-medium uppercase tracking-wide text-surface-500 dark:text-surface-400">
                            {{ __('pages/admin/users.bulk_upload.progress.total') }}
                        </p>
                        <p
                            class="mt-1 text-xl font-bold tabular-nums text-surface-900 dark:text-surface-100"
                            x-text="bulkUploadProgress.total">0</p>
                    </div>
                    <div class="rounded-lg border border-green-200 bg-green-50 px-3 py-2.5 text-center dark:border-green-800 dark:bg-green-950/40">
                        <p class="text-xs font-medium uppercase tracking-wide text-green-700 dark:text-green-300">
                            {{ __('pages/admin/users.bulk_upload.progress.success') }}
                        </p>
                        <p
                            class="mt-1 text-xl font-bold tabular-nums text-green-700 dark:text-green-300"
                            x-text="bulkUploadProgress.imported">0</p>
                    </div>
                    <div class="rounded-lg border border-red-200 bg-red-50 px-3 py-2.5 text-center dark:border-red-800 dark:bg-red-950/40">
                        <p class="text-xs font-medium uppercase tracking-wide text-red-700 dark:text-red-300">
                            {{ __('pages/admin/users.bulk_upload.progress.failed') }}
                        </p>
                        <p
                            class="mt-1 text-xl font-bold tabular-nums text-red-700 dark:text-red-300"
                            x-text="bulkUploadProgress.failed">0</p>
                    </div>
                </div>
            </div>
        </div>

        {{-- Footer --}}
        <div class="flex flex-col-reverse sm:flex-row items-stretch sm:items-center justify-end gap-3 border-t border-border px-6 py-4 sticky bottom-0 bg-card">
            <x-buttons.secondary
                type="button"
                @click="closeBulkUploadModal()"
                x-bind:disabled="bulkUploadSubmitting">
                {{ __('buttons.cancel') }}
            </x-buttons.secondary>
            <x-buttons.primary
                type="button"
                @click="submitBulkUpload()"
                x-bind:disabled="bulkUploadSubmitting || !bulkUploadFile">
                <x-heroicon-o-arrow-path class="w-4 h-4 animate-spin" x-show="bulkUploadSubmitting" />
                <span x-text="bulkUploadSubmitting ? '{{ __('pages/admin/users.bulk_upload.uploading') }}' : '{{ __('pages/admin/users.bulk_upload.submit') }}'"></span>
            </x-buttons.primary>
        </div>
    </div>
</div>