@props(['import'])

<div
    class="flex flex-col gap-4"
    x-data="{
        importId: {{ $import->id }},
        progressUrl: @js(route('users.import.progress', $import)),
        cancelUrl: @js(route('users.import.cancel', $import)),
        status: @js($import->status->value),
        statusLabel: @js($import->status->label()),
        totalRows: @js($import->total_rows),
        processedRows: @js((int) $import->processed_rows),
        createdCount: @js((int) $import->created_users_count),
        errorCount: @js((int) $import->error_rows_count),
        percent: @js($import->progressPercent()),
        isFinished: @js($import->status->isFinished()),
        isCancellable: @js($import->isCancellable()),
        failureMessage: @js($import->failure_message),
        cancelling: false,
        pollTimer: null,
        async cancelImport() {
            if (this.cancelling || !confirm('Encerrar esta importação? As linhas já processadas permanecem; o restante não será importado.')) {
                return;
            }
            this.cancelling = true;
            const formData = new FormData();
            formData.append('_token', @js(csrf_token()));
            try {
                const res = await fetch(this.cancelUrl, {
                    method: 'POST',
                    body: formData,
                    headers: {
                        Accept: 'application/json',
                        'X-Requested-With': 'XMLHttpRequest',
                    },
                });
                if (res.ok) {
                    window.location.reload();
                    return;
                }
            } catch (e) {
                /* ignore */
            }
            this.cancelling = false;
            alert('Não foi possível encerrar a importação. Tente novamente.');
        },
        async poll() {
            if (this.isFinished) {
                return;
            }
            try {
                const res = await fetch(this.progressUrl, {
                    headers: { Accept: 'application/json', 'X-Requested-With': 'XMLHttpRequest' },
                });
                if (!res.ok) {
                    return;
                }
                const data = await res.json();
                this.status = data.status;
                this.statusLabel = data.status_label;
                this.totalRows = data.total_rows;
                this.processedRows = data.processed_rows;
                this.createdCount = data.created_users_count;
                this.errorCount = data.error_rows_count;
                this.percent = data.percent;
                this.isFinished = data.is_finished;
                this.isCancellable = data.is_cancellable;
                this.failureMessage = data.failure_message;
                if (data.is_finished) {
                    window.location.reload();
                }
            } catch (e) {
                /* ignore */
            }
        },
        init() {
            this.poll();
            this.pollTimer = setInterval(() => this.poll(), 2000);
        },
        destroy() {
            if (this.pollTimer) {
                clearInterval(this.pollTimer);
            }
        },
    }"
    x-init="init()"
>
    <div class="flex flex-wrap items-start justify-between gap-3">
        <div>
            <p class="text-sm font-medium text-blue-900">
                <template x-if="!isFinished">
                    <span><i class="fa-solid fa-spinner fa-spin mr-1" aria-hidden="true"></i></span>
                </template>
                <span x-text="'Importação em andamento (' + statusLabel + ')'"></span>
            </p>
            <p class="mt-1 text-sm text-gray-600">
                <span x-show="totalRows !== null && totalRows > 0">
                    <span x-text="processedRows.toLocaleString('pt-BR')"></span>
                    de
                    <span x-text="totalRows.toLocaleString('pt-BR')"></span>
                    linhas
                    <template x-if="percent !== null">
                        (<span x-text="percent"></span>%)
                    </template>
                    —
                    <span x-text="createdCount.toLocaleString('pt-BR')"></span> criado(s),
                    <span x-text="errorCount.toLocaleString('pt-BR')"></span> com erro
                </span>
                <span x-show="totalRows === null || totalRows === 0">
                    Contando linhas ou aguardando início do processamento…
                </span>
            </p>
            <p class="mt-1 text-xs text-gray-500">
                Mantenha o worker ativo: <code>php artisan queue:work</code>
            </p>
        </div>
        <div class="flex flex-wrap items-center gap-2">
            @include('users._import-history-button')
            <button
                type="button"
                x-show="isCancellable"
                class="inline-flex items-center justify-center rounded-lg border border-red-300 bg-white px-4 py-2 text-sm font-medium text-red-700 shadow-sm hover:bg-red-50 disabled:opacity-50"
                x-bind:disabled="cancelling"
                x-on:click="cancelImport()"
            >
                <span x-show="!cancelling">Encerrar importação</span>
                <span x-show="cancelling">Encerrando…</span>
            </button>
        </div>
    </div>

    <div class="h-2 w-full overflow-hidden rounded-full bg-gray-200" role="progressbar" :aria-valuenow="percent ?? 0" aria-valuemin="0" aria-valuemax="100">
        <div
            class="h-full rounded-full bg-blue-600 transition-all duration-300"
            :style="'width: ' + (percent ?? (status === 'processing' ? 5 : 0)) + '%'"
        ></div>
    </div>

    <p x-show="failureMessage" class="text-sm text-red-700" x-text="failureMessage"></p>
</div>