{{--
    Parameters:
    $previewRoute — named route for the preview/validation step
    $confirmRoute — named route for the confirm/import step
--}}
<div class="modal fade" id="importModal" tabindex="-1" aria-labelledby="importModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="importModalLabel">Importar dados</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Fechar"></button>
            </div>

            <div class="modal-body">
                {{-- Step 1: file picker --}}
                <div id="importStepUpload">
                    <form id="importForm" enctype="multipart/form-data">
                        @csrf
                        <div class="mb-3">
                            <label class="form-label fw-semibold">Ficheiro (CSV, XLSX ou JSON)</label>
                            <input type="file" class="form-control custom-file" name="file"
                                   accept=".csv,.xlsx,.json" required>
                            <div class="form-text">O ficheiro deve seguir a estrutura do ficheiro de exportação.</div>
                        </div>
                    </form>
                </div>

                {{-- Step 2: validation errors --}}
                <div id="importStepErrors" style="display:none">
                    <div class="alert alert-danger mb-0">
                        <strong>O ficheiro contém erros e não pode ser importado:</strong>
                        <ul id="importErrorsList" class="mb-0 mt-2 ps-3"></ul>
                    </div>
                </div>

                {{-- Step 3: confirmation preview --}}
                <div id="importStepPreview" style="display:none">
                    <div class="alert alert-info mb-2">
                        Serão importados <strong><span id="importCount">0</span> registos</strong>,
                        todos em estado <strong>inativo</strong>.
                    </div>
                    <div id="importWarningsBlock" style="display:none">
                        <div class="alert alert-warning mb-2">
                            <strong>Avisos:</strong>
                            <ul id="importWarningsList" class="mb-0 mt-1 ps-3"></ul>
                        </div>
                    </div>
                    <div id="importIgnoredBlock" style="display:none">
                        <p class="mb-1 small text-muted fw-semibold">Colunas ignoradas (presentes no ficheiro mas não importadas):</p>
                        <p id="importIgnoredList" class="small text-muted mb-2"></p>
                    </div>
                    <div id="importUnexpectedBlock" style="display:none">
                        <p class="mb-1 small text-warning fw-semibold">Colunas desconhecidas (fora da estrutura esperada, não serão importadas):</p>
                        <p id="importUnexpectedList" class="small text-warning mb-0"></p>
                    </div>
                </div>

                {{-- Loading spinner --}}
                <div id="importLoading" class="text-center py-3" style="display:none">
                    <div class="spinner-border text-primary" role="status"></div>
                    <p class="mt-2 mb-0 text-muted small">A processar...</p>
                </div>
            </div>

            <div class="modal-footer">
                <button type="button" class="btn btn-sm btn-primary-outline" data-bs-dismiss="modal">Cancelar</button>
                <button type="button" class="btn btn-sm btn-primary" id="importValidateBtn">Validar ficheiro</button>
                <button type="button" class="btn btn-sm btn-primary" id="importConfirmBtn" style="display:none">Confirmar importação</button>
            </div>
        </div>
    </div>
</div>

<script>
    document.addEventListener("DOMContentLoaded", function () {
        const previewUrl = @json(route($previewRoute));
        const confirmUrl = @json(route($confirmRoute));
        const csrfToken  = '{{ csrf_token() }}';

        const modal = document.getElementById('importModal');
        const form = document.getElementById('importForm');
        const stepUpload = document.getElementById('importStepUpload');
        const stepErrors = document.getElementById('importStepErrors');
        const stepPreview = document.getElementById('importStepPreview');
        const loading = document.getElementById('importLoading');
        const validateBtn = document.getElementById('importValidateBtn');
        const confirmBtn = document.getElementById('importConfirmBtn');
        const errorsList = document.getElementById('importErrorsList');
        const importCount = document.getElementById('importCount');
        const warningsBlock = document.getElementById('importWarningsBlock');
        const warningsList = document.getElementById('importWarningsList');
        const ignoredBlock = document.getElementById('importIgnoredBlock');
        const ignoredList = document.getElementById('importIgnoredList');
        const unexpectedBlock = document.getElementById('importUnexpectedBlock');
        const unexpectedList = document.getElementById('importUnexpectedList');

        function resetModal() {
            stepUpload.style.display = '';
            stepErrors.style.display = 'none';
            stepPreview.style.display = 'none';
            loading.style.display = 'none';
            validateBtn.style.display = '';
            confirmBtn.style.display = 'none';
            confirmBtn.disabled = false;
            form.reset();
        }

        modal.addEventListener('hidden.bs.modal', resetModal);

        validateBtn.addEventListener('click', async function () {
            const fileInput = form.querySelector('input[type="file"]');

            if (!fileInput.files.length) {
                alert('Por favor selecione um ficheiro.');
                return;
            }

            stepUpload.style.display = 'none';
            stepErrors.style.display = 'none';
            stepPreview.style.display = 'none';
            loading.style.display = '';
            validateBtn.style.display = 'none';

            try {
                const response = await fetch(previewUrl, {
                    method: 'POST',
                    headers: { 'X-CSRF-TOKEN': csrfToken },
                    body: new FormData(form),
                });

                const data = await response.json();
                loading.style.display = 'none';

                if (!response.ok || data.error) {
                    errorsList.innerHTML = '<li>' + (data.error ?? 'Erro desconhecido') + '</li>';
                    stepErrors.style.display = '';
                    stepUpload.style.display = '';
                    validateBtn.style.display = '';
                    return;
                }

                if (data.errors && data.errors.length > 0) {
                    errorsList.innerHTML = data.errors.map(e => '<li>' + e + '</li>').join('');
                    stepErrors.style.display = '';
                    stepUpload.style.display = '';
                    validateBtn.style.display = '';
                    return;
                }

                importCount.textContent = data.rowCount;

                if (data.warnings && data.warnings.length > 0) {
                    warningsList.innerHTML = data.warnings.map(w => '<li>' + w + '</li>').join('');
                    warningsBlock.style.display = '';
                } else {
                    warningsBlock.style.display = 'none';
                }

                if (data.ignoredLabels && data.ignoredLabels.length > 0) {
                    ignoredList.textContent = data.ignoredLabels.join(', ');
                    ignoredBlock.style.display = '';
                } else {
                    ignoredBlock.style.display = 'none';
                }

                if (data.unexpectedLabels && data.unexpectedLabels.length > 0) {
                    unexpectedList.textContent = data.unexpectedLabels.join(', ');
                    unexpectedBlock.style.display = '';
                } else {
                    unexpectedBlock.style.display = 'none';
                }

                stepPreview.style.display = '';
                confirmBtn.style.display = '';

            } catch (err) {
                loading.style.display = 'none';
                stepUpload.style.display = '';
                validateBtn.style.display = '';
                alert('Erro ao validar o ficheiro: ' + err.message);
            }
        });

        confirmBtn.addEventListener('click', async function () {
            this.disabled = true;
            stepPreview.style.display = 'none';
            loading.style.display = '';

            try {
                const response = await fetch(confirmUrl, {
                    method: 'POST',
                    headers: {
                        'X-CSRF-TOKEN': csrfToken,
                        'Content-Type': 'application/json',
                    },
                });

                const data = await response.json();

                if (!response.ok || data.error) {
                    loading.style.display = 'none';
                    stepPreview.style.display = '';
                    this.disabled = false;
                    alert('Erro ao importar: ' + (data.error ?? 'Erro desconhecido'));
                    return;
                }

                bootstrap.Modal.getInstance(modal).hide();
                window.location.reload();

            } catch (err) {
                loading.style.display = 'none';
                stepPreview.style.display = '';
                this.disabled = false;
                alert('Erro ao importar: ' + err.message);
            }
        });
    });
</script>