@can('viewAny', App\Models\UserBulkImport::class)
<x-modal name="user-import-history" :show="false" maxWidth="2xl" focusable backdrop>
    <div
        class="p-6"
        x-data="{
            historyUrl: @js(route('users.import.history')),
            loading: false,
            error: null,
            rows: [],
            meta: { current_page: 1, last_page: 1, total: 0, from: null, to: null },
            async loadHistory(page = 1) {
                this.loading = true;
                this.error = null;
                try {
                    const params = new URLSearchParams({ page: String(page), per_page: '25' });
                    const res = await fetch(this.historyUrl + '?' + params.toString(), {
                        headers: { Accept: 'application/json', 'X-Requested-With': 'XMLHttpRequest' },
                    });
                    if (!res.ok) {
                        this.error = 'Não foi possível carregar o histórico.';
                        return;
                    }
                    const data = await res.json();
                    this.rows = data.data ?? [];
                    this.meta = data.meta ?? this.meta;
                } catch (e) {
                    this.error = 'Não foi possível carregar o histórico.';
                } finally {
                    this.loading = false;
                }
            },
        }"
        x-on:open-modal.window="if ($event.detail === 'user-import-history') { loadHistory(1); }"
    >
        <div class="flex items-start justify-between gap-3">
            <div>
                <h2 class="text-lg font-semibold text-gray-900">Histórico de importações</h2>
                <p class="mt-1 text-sm text-gray-500">
                    Todas as importações em lote da sua empresa, com data, responsável e status.
                </p>
            </div>
            <button
                type="button"
                class="rounded-lg p-1 text-gray-400 hover:bg-gray-100 hover:text-gray-600"
                x-on:click="$dispatch('close-modal', 'user-import-history')"
                aria-label="Fechar"
            >
                <i class="fa-solid fa-xmark" aria-hidden="true"></i>
            </button>
        </div>

        <div class="mt-4">
            <p x-show="loading" class="text-sm text-gray-500">
                <i class="fa-solid fa-spinner fa-spin mr-1" aria-hidden="true"></i>
                Carregando…
            </p>
            <p x-show="error" class="text-sm text-red-700" x-text="error"></p>

            <div x-show="!loading && !error" class="overflow-x-auto">
                <x-table.table>
                    <thead class="border-b bg-gray-50">
                        <tr>
                            <x-table.th>Data e hora</x-table.th>
                            <x-table.th>Importado por</x-table.th>
                            <x-table.th>Arquivo</x-table.th>
                            <x-table.th>Tipo</x-table.th>
                            <x-table.th>Status</x-table.th>
                            <x-table.th class="text-right">Resultado</x-table.th>
                            <x-table.th class="text-right">Ações</x-table.th>
                        </tr>
                    </thead>
                    <tbody class="divide-y">
                        <template x-if="rows.length === 0">
                            <tr>
                                <td colspan="7" class="px-4 py-8 text-center text-sm text-gray-500">
                                    Nenhuma importação registrada ainda.
                                </td>
                            </tr>
                        </template>
                        <template x-for="row in rows" :key="row.id">
                            <tr class="hover:bg-gray-50">
                                <td class="whitespace-nowrap px-4 py-3 text-sm text-gray-900" x-text="row.created_at_label"></td>
                                <td class="px-4 py-3">
                                    <p class="text-sm font-medium text-gray-900" x-text="row.initiated_by_name"></p>
                                    <p class="text-xs text-gray-500" x-show="row.initiated_by_email" x-text="row.initiated_by_email"></p>
                                </td>
                                <td
                                    class="max-w-[10rem] truncate px-4 py-3 text-sm text-gray-600"
                                    x-bind:title="row.original_filename"
                                    x-text="row.original_filename"
                                ></td>
                                <td class="px-4 py-3 text-sm text-gray-600" x-text="row.account_kind_label"></td>
                                <td class="px-4 py-3">
                                    <span
                                        class="inline-flex rounded-full px-2 py-0.5 text-xs font-medium"
                                        x-bind:class="{
                                            'bg-green-100 text-green-800': row.status === 'completed',
                                            'bg-amber-100 text-amber-800': row.status === 'processing' || row.status === 'pending',
                                            'bg-red-100 text-red-800': row.status === 'failed',
                                            'bg-gray-100 text-gray-600': row.status === 'cancelled',
                                        }"
                                        x-text="row.status_label"
                                    ></span>
                                </td>
                                <td class="px-4 py-3 text-right text-sm tabular-nums text-gray-700">
                                    <template x-if="row.total_rows !== null && row.total_rows > 0">
                                        <span>
                                            <span x-text="row.created_users_count.toLocaleString('pt-BR')"></span> criado(s),
                                            <span x-text="row.error_rows_count.toLocaleString('pt-BR')"></span> erro(s)
                                        </span>
                                    </template>
                                    <template x-if="row.total_rows === null || row.total_rows === 0">
                                        <span>—</span>
                                    </template>
                                </td>
                                <td class="px-4 py-3 text-right">
                                    <template x-if="row.has_report">
                                        <a
                                            x-bind:href="row.report_url"
                                            class="text-sm font-medium text-blue-600 hover:text-blue-800"
                                        >
                                            Relatório
                                        </a>
                                    </template>
                                    <template x-if="!row.has_report">
                                        <span class="text-sm text-gray-400">—</span>
                                    </template>
                                </td>
                            </tr>
                        </template>
                    </tbody>
                </x-table.table>
            </div>

            <div
                x-show="!loading && meta.last_page > 1"
                class="mt-4 flex flex-wrap items-center justify-between gap-2 text-sm text-gray-600"
            >
                <span>
                    <template x-if="meta.total > 0">
                        <span>
                            Exibindo <span x-text="meta.from"></span>–<span x-text="meta.to"></span>
                            de <span x-text="meta.total"></span>
                        </span>
                    </template>
                </span>
                <div class="flex gap-2">
                    <button
                        type="button"
                        class="rounded-lg border border-gray-300 bg-white px-3 py-1.5 text-sm font-medium text-gray-700 hover:bg-gray-50 disabled:opacity-50"
                        x-bind:disabled="meta.current_page <= 1 || loading"
                        x-on:click="loadHistory(meta.current_page - 1)"
                    >
                        Anterior
                    </button>
                    <button
                        type="button"
                        class="rounded-lg border border-gray-300 bg-white px-3 py-1.5 text-sm font-medium text-gray-700 hover:bg-gray-50 disabled:opacity-50"
                        x-bind:disabled="meta.current_page >= meta.last_page || loading"
                        x-on:click="loadHistory(meta.current_page + 1)"
                    >
                        Próxima
                    </button>
                </div>
            </div>
        </div>

        <div class="mt-6 flex justify-end">
            <x-ui.button type="button" x-on:click="$dispatch('close-modal', 'user-import-history')">
                Fechar
            </x-ui.button>
        </div>
    </div>
</x-modal>
@endcan