{% extends "admin/base.html" %}

{% block title %}Data Importer — {{ site_header }}{% endblock %}

{% block content %}
<div class="p-6" x-data="importerWizard()" x-init="init()">

    <!-- ================================================================
         HEADER
    ================================================================ -->
    <div class="flex items-center justify-between mb-6">
        <div>
            <h1 class="text-2xl font-bold text-gray-900 dark:text-white">Data Importer</h1>
            <p class="text-sm text-gray-500 dark:text-gray-400 mt-1">Importe dados de um dump SQL MySQL/MariaDB para os models do sistema</p>
        </div>
        <!-- Step indicator -->
        <div class="hidden md:flex items-center gap-1">
            <template x-for="(label, idx) in stepLabels" :key="idx">
                <div class="flex items-center">
                    <div class="flex items-center gap-1.5">
                        <div class="w-6 h-6 rounded-full flex items-center justify-center text-xs font-semibold transition-all"
                             :class="idx + 1 < step ? 'bg-green-500 text-white' :
                                     idx + 1 === step ? 'bg-primary-600 text-white' :
                                     'bg-gray-200 dark:bg-gray-700 text-gray-500 dark:text-gray-400'">
                            <template x-if="idx + 1 < step">
                                <svg class="w-3.5 h-3.5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3"><polyline points="20 6 9 17 4 12"/></svg>
                            </template>
                            <template x-if="idx + 1 >= step">
                                <span x-text="idx + 1"></span>
                            </template>
                        </div>
                        <span class="text-xs font-medium hidden lg:block"
                              :class="idx + 1 === step ? 'text-primary-600 dark:text-primary-400' : 'text-gray-400 dark:text-gray-500'"
                              x-text="label"></span>
                    </div>
                    <div x-show="idx < stepLabels.length - 1"
                         class="w-6 h-px mx-1"
                         :class="idx + 1 < step ? 'bg-green-400' : 'bg-gray-200 dark:bg-gray-700'"></div>
                </div>
            </template>
        </div>
    </div>

    <!-- ================================================================
         STEP 1 — UPLOAD
    ================================================================ -->
    <template x-if="step === 1">
        <div class="max-w-2xl mx-auto">
            <div class="bg-white dark:bg-gray-800 rounded-2xl border border-gray-200 dark:border-gray-700 p-8">
                <h2 class="text-lg font-semibold text-gray-900 dark:text-white mb-2">Upload do arquivo SQL</h2>
                <p class="text-sm text-gray-500 dark:text-gray-400 mb-6">Selecione um dump MySQL/MariaDB (.sql). Arquivos grandes são processados em streaming.</p>

                <!-- Drop zone -->
                <div class="relative"
                     @dragover.prevent="dragover = true"
                     @dragleave="dragover = false"
                     @drop.prevent="handleDrop($event)">
                    <div class="border-2 border-dashed rounded-xl p-10 text-center transition-all cursor-pointer"
                         :class="dragover ? 'border-primary-400 bg-primary-50 dark:bg-primary-900/20' :
                                 selectedFile ? 'border-green-400 bg-green-50 dark:bg-green-900/20' :
                                 'border-gray-300 dark:border-gray-600 hover:border-primary-400 hover:bg-gray-50 dark:hover:bg-gray-700/50'"
                         @click="$refs.fileInput.click()">

                        <template x-if="!selectedFile">
                            <div>
                                <svg class="w-12 h-12 mx-auto mb-3 text-gray-300 dark:text-gray-600" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><polyline points="16 16 12 12 8 16"/><line x1="12" y1="12" x2="12" y2="21"/><path d="M20.39 18.39A5 5 0 0 0 18 9h-1.26A8 8 0 1 0 3 16.3"/></svg>
                                <p class="text-sm font-medium text-gray-700 dark:text-gray-300">Arraste o arquivo .sql aqui</p>
                                <p class="text-xs text-gray-400 dark:text-gray-500 mt-1">ou clique para selecionar</p>
                            </div>
                        </template>

                        <template x-if="selectedFile">
                            <div class="flex items-center justify-center gap-3">
                                <div class="w-10 h-10 rounded-lg bg-green-100 dark:bg-green-900/30 flex items-center justify-center flex-shrink-0">
                                    <svg class="w-5 h-5 text-green-600 dark:text-green-400" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/><polyline points="14 2 14 8 20 8"/></svg>
                                </div>
                                <div class="text-left">
                                    <p class="text-sm font-medium text-gray-800 dark:text-gray-200" x-text="selectedFile.name"></p>
                                    <p class="text-xs text-gray-500 dark:text-gray-400" x-text="formatBytes(selectedFile.size)"></p>
                                </div>
                                <button @click.stop="selectedFile = null" class="ml-2 text-gray-400 hover:text-red-500 transition-colors">
                                    <svg class="w-4 h-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></svg>
                                </button>
                            </div>
                        </template>
                    </div>
                    <input type="file" accept=".sql" x-ref="fileInput" class="hidden" @change="handleFileSelect($event)">
                </div>

                <!-- Error -->
                <template x-if="uploadError">
                    <div class="mt-4 p-3 bg-red-50 dark:bg-red-900/20 border border-red-200 dark:border-red-800 rounded-xl text-sm text-red-700 dark:text-red-400" x-text="uploadError"></div>
                </template>

                <!-- Upload button -->
                <div class="mt-6 flex justify-end">
                    <button @click="uploadFile()"
                            :disabled="!selectedFile || uploading"
                            class="inline-flex items-center gap-2 px-5 py-2.5 bg-primary-600 text-white text-sm font-medium rounded-xl hover:bg-primary-700 disabled:opacity-50 disabled:cursor-not-allowed transition-all">
                        <svg x-show="!uploading" class="w-4 h-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="16 16 12 12 8 16"/><line x1="12" y1="12" x2="12" y2="21"/><path d="M20.39 18.39A5 5 0 0 0 18 9h-1.26A8 8 0 1 0 3 16.3"/></svg>
                        <svg x-show="uploading" class="w-4 h-4 animate-spin" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M21.5 2v6h-6M2.5 22v-6h6M2 11.5a10 10 0 0 1 18.8-4.3M22 12.5a10 10 0 0 1-18.8 4.2"/></svg>
                        <span x-text="uploading ? 'Processando...' : 'Analisar arquivo'"></span>
                    </button>
                </div>
            </div>
        </div>
    </template>

    <!-- ================================================================
         STEP 2 — SCHEMA
    ================================================================ -->
    <template x-if="step === 2">
        <div>
            <!-- Summary bar -->
            <div class="bg-white dark:bg-gray-800 rounded-xl border border-gray-200 dark:border-gray-700 p-4 mb-5 flex flex-wrap gap-4 items-center">
                <div class="flex items-center gap-2 text-sm">
                    <div class="w-8 h-8 rounded-lg bg-blue-100 dark:bg-blue-900/30 flex items-center justify-center">
                        <svg class="w-4 h-4 text-blue-600 dark:text-blue-400" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/></svg>
                    </div>
                    <div>
                        <div class="font-medium text-gray-900 dark:text-white" x-text="uploadResult.filename"></div>
                        <div class="text-xs text-gray-500" x-text="formatBytes(uploadResult.file_size)"></div>
                    </div>
                </div>
                <div class="flex gap-4 text-sm">
                    <div class="text-center">
                        <div class="text-lg font-bold text-gray-900 dark:text-white" x-text="Object.keys(uploadResult.tables).length"></div>
                        <div class="text-xs text-gray-500">tabelas</div>
                    </div>
                    <div class="text-center">
                        <div class="text-lg font-bold text-gray-900 dark:text-white" x-text="uploadResult.total_rows.toLocaleString()"></div>
                        <div class="text-xs text-gray-500">registros</div>
                    </div>
                </div>
                <template x-if="uploadResult.parse_errors && uploadResult.parse_errors.length > 0">
                    <div class="text-xs text-amber-600 dark:text-amber-400 bg-amber-50 dark:bg-amber-900/20 px-3 py-1.5 rounded-lg">
                        ⚠ <span x-text="uploadResult.parse_errors.length"></span> avisos de parse
                    </div>
                </template>
                <div class="ml-auto flex gap-2">
                    <button @click="step = 1" class="px-3 py-1.5 text-sm text-gray-600 dark:text-gray-300 border border-gray-200 dark:border-gray-600 rounded-lg hover:bg-gray-50 dark:hover:bg-gray-700 transition-colors">
                        ← Voltar
                    </button>
                    <button @click="goToMapping()" class="px-4 py-1.5 text-sm bg-primary-600 text-white font-medium rounded-lg hover:bg-primary-700 transition-colors">
                        Configurar mapeamento →
                    </button>
                </div>
            </div>

            <!-- Tables grid -->
            <div class="grid grid-cols-1 lg:grid-cols-2 xl:grid-cols-3 gap-4">
                <template x-for="(schema, tableName) in uploadResult.tables" :key="tableName">
                    <div class="bg-white dark:bg-gray-800 rounded-xl border border-gray-200 dark:border-gray-700 overflow-hidden">
                        <!-- Table header -->
                        <div class="flex items-center justify-between px-4 py-3 border-b border-gray-100 dark:border-gray-700">
                            <div class="flex items-center gap-2">
                                <svg class="w-4 h-4 text-gray-400" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="3" y="3" width="18" height="18" rx="2"/><path d="M3 9h18M3 15h18M9 3v18"/></svg>
                                <span class="font-semibold text-sm text-gray-900 dark:text-white" x-text="tableName"></span>
                            </div>
                            <span class="text-xs font-medium text-gray-500 dark:text-gray-400 bg-gray-100 dark:bg-gray-700 px-2 py-0.5 rounded-full"
                                  x-text="(uploadResult.row_counts[tableName] || 0).toLocaleString() + ' rows'"></span>
                        </div>
                        <!-- Columns list -->
                        <div class="divide-y divide-gray-50 dark:divide-gray-700/50 max-h-48 overflow-y-auto">
                            <template x-for="col in schema.columns" :key="col.name">
                                <div class="flex items-center justify-between px-4 py-1.5 text-xs">
                                    <div class="flex items-center gap-2">
                                        <template x-if="col.is_pk">
                                            <span class="text-amber-500 font-bold" title="Primary Key">PK</span>
                                        </template>
                                        <template x-if="col.is_fk">
                                            <span class="text-blue-400" title="Foreign Key">FK</span>
                                        </template>
                                        <span class="font-mono text-gray-700 dark:text-gray-300" x-text="col.name"></span>
                                    </div>
                                    <span class="font-medium px-1.5 py-0.5 rounded text-[10px]"
                                          :class="{
                                            'bg-purple-100 text-purple-700 dark:bg-purple-900/30 dark:text-purple-400': col.python_type === 'json',
                                            'bg-green-100 text-green-700 dark:bg-green-900/30 dark:text-green-400': col.python_type === 'bool',
                                            'bg-blue-100 text-blue-700 dark:bg-blue-900/30 dark:text-blue-400': col.python_type === 'int' || col.python_type === 'float',
                                            'bg-amber-100 text-amber-700 dark:bg-amber-900/30 dark:text-amber-400': col.python_type === 'datetime' || col.python_type === 'date',
                                            'bg-gray-100 text-gray-600 dark:bg-gray-700 dark:text-gray-400': col.python_type === 'str' || col.python_type === 'uuid',
                                          }"
                                          x-text="col.python_type"></span>
                                </div>
                            </template>
                        </div>
                    </div>
                </template>
            </div>
        </div>
    </template>

    <!-- ================================================================
         STEP 3 — MAPPING
    ================================================================ -->
    <template x-if="step === 3">
        <div>
            <!-- Top bar -->
            <div class="flex items-center justify-between mb-5">
                <div>
                    <h2 class="text-lg font-semibold text-gray-900 dark:text-white">Mapeamento de tabelas e campos</h2>
                    <p class="text-sm text-gray-500 dark:text-gray-400 mt-0.5">Configure qual tabela SQL mapeia para qual model, e quais campos importar</p>
                </div>
                <div class="flex gap-2">
                    <!-- Global settings -->
                    <div class="flex items-center gap-3 text-sm bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded-xl px-4 py-2">
                        <label class="text-gray-600 dark:text-gray-400">Batch size:</label>
                        <input type="number" x-model.number="executeConfig.batch_size" min="10" max="5000" step="50"
                               class="w-20 text-sm border border-gray-200 dark:border-gray-600 rounded-lg px-2 py-1 bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100">
                        <label class="text-gray-600 dark:text-gray-400">Conflito:</label>
                        <select x-model="executeConfig.on_conflict"
                                class="text-sm border border-gray-200 dark:border-gray-600 rounded-lg px-2 py-1 bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100">
                            <option value="skip">Ignorar (skip)</option>
                            <option value="fail">Falhar</option>
                        </select>
                    </div>
                    <button @click="step = 2" class="px-3 py-2 text-sm text-gray-600 dark:text-gray-300 border border-gray-200 dark:border-gray-600 rounded-xl hover:bg-gray-50 dark:hover:bg-gray-700 transition-colors">
                        ← Voltar
                    </button>
                    <button @click="runPreview()" class="px-4 py-2 text-sm bg-primary-600 text-white font-medium rounded-xl hover:bg-primary-700 transition-colors">
                        Preview →
                    </button>
                </div>
            </div>

            <!-- FK Dependency Analysis Banner -->
            <template x-if="depsOrder.length > 0 || depsWarnings.length > 0">
                <div class="mb-4 space-y-3">
                    <!-- Import order pill -->
                    <template x-if="depsOrder.length > 0">
                        <div class="flex items-center gap-2 flex-wrap bg-blue-50 dark:bg-blue-900/20 border border-blue-200 dark:border-blue-700 rounded-xl px-4 py-2.5">
                            <span class="text-xs font-semibold text-blue-700 dark:text-blue-300 flex-shrink-0">
                                <svg class="w-3.5 h-3.5 inline mr-1" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="9 11 12 14 22 4"/><path d="M21 12v7a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11"/></svg>
                                Ordem sugerida de importação:
                            </span>
                            <template x-for="(modelKey, oi) in depsOrder" :key="modelKey">
                                <div class="flex items-center gap-1">
                                    <span class="inline-flex items-center gap-1 text-[11px] font-medium bg-white dark:bg-blue-900/40 border border-blue-200 dark:border-blue-600 text-blue-700 dark:text-blue-300 px-2 py-0.5 rounded-full">
                                        <span class="text-blue-400 dark:text-blue-500" x-text="oi + 1 + '.'"></span>
                                        <span x-text="modelKey.split('.').pop()"></span>
                                    </span>
                                    <svg x-show="oi < depsOrder.length - 1" class="w-3 h-3 text-blue-300 dark:text-blue-600" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M5 12h14M12 5l7 7-7 7"/></svg>
                                </div>
                            </template>
                        </div>
                    </template>

                    <!-- FK warnings -->
                    <template x-if="depsWarnings.length > 0">
                        <div class="bg-amber-50 dark:bg-amber-900/20 border border-amber-200 dark:border-amber-700 rounded-xl p-3 space-y-2">
                            <p class="text-xs font-semibold text-amber-700 dark:text-amber-300 mb-1">
                                <svg class="w-3.5 h-3.5 inline mr-1" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M10.29 3.86L1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z"/><line x1="12" y1="9" x2="12" y2="13"/><line x1="12" y1="17" x2="12.01" y2="17"/></svg>
                                Avisos de dependências FK (<span x-text="depsWarnings.length"></span>)
                            </p>
                            <template x-for="(w, wi) in depsWarnings" :key="wi">
                                <div class="text-xs text-amber-700 dark:text-amber-400 flex items-start gap-2">
                                    <span class="font-mono font-semibold flex-shrink-0"
                                          :class="w.type === 'fk_missing' ? 'text-orange-600 dark:text-orange-400' : 'text-amber-600 dark:text-amber-400'"
                                          x-text="w.type === 'fk_missing' ? '⚠ FK faltando' : '⚠ Tipo divergente'"></span>
                                    <span x-text="w.message"></span>
                                </div>
                            </template>
                        </div>
                    </template>
                </div>
            </template>

            <!-- Table mappings -->
            <div class="space-y-4">
                <template x-for="(tableMap, idx) in mappings" :key="tableMap.source_table">
                    <div class="bg-white dark:bg-gray-800 rounded-xl border border-gray-200 dark:border-gray-700 overflow-hidden">
                        <!-- Table header accordion -->
                        <div class="flex items-center gap-3 px-4 py-3 cursor-pointer hover:bg-gray-50 dark:hover:bg-gray-700/50 transition-colors"
                             @click="tableMap._open = !tableMap._open">
                            <!-- Enable toggle -->
                            <button @click.stop="tableMap.enabled = !tableMap.enabled; analyzeDeps()"
                                    class="relative w-9 h-5 rounded-full transition-colors flex-shrink-0"
                                    :class="tableMap.enabled ? 'bg-primary-600' : 'bg-gray-300 dark:bg-gray-600'">
                                <span class="absolute top-0.5 left-0.5 w-4 h-4 bg-white rounded-full shadow transition-transform"
                                      :class="tableMap.enabled ? 'translate-x-4' : 'translate-x-0'"></span>
                            </button>

                            <!-- Table name -->
                            <div class="flex items-center gap-2 flex-1">
                                <svg class="w-4 h-4 text-gray-400" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="3" y="3" width="18" height="18" rx="2"/><path d="M3 9h18M3 15h18M9 3v18"/></svg>
                                <span class="font-semibold text-sm text-gray-900 dark:text-white" x-text="tableMap.source_table"></span>
                                <span class="text-xs text-gray-400" x-text="'(' + (uploadResult.row_counts[tableMap.source_table] || 0).toLocaleString() + ' rows)'"></span>
                            </div>

                            <!-- Arrow -->
                            <svg class="w-4 h-4 text-gray-400 flex-shrink-0" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M5 12h14M12 5l7 7-7 7"/></svg>

                            <!-- Model selector -->
                            <select @click.stop
                                    @change="tableMap.target_model = $event.target.value; onModelSelect(tableMap)"
                                    :disabled="!tableMap.enabled"
                                    class="text-sm border border-gray-200 dark:border-gray-600 rounded-lg px-3 py-1.5 bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100 min-w-[200px] disabled:opacity-50">
                                <option value="" :selected="!tableMap.target_model">— Selecionar model —</option>
                                <template x-for="m in availableModels" :key="m.key">
                                    <option :value="m.key" :selected="m.key === tableMap.target_model" x-text="m.key + ' (' + m.table_name + ')'"></option>
                                </template>
                            </select>

                            <!-- Collapse icon -->
                            <svg class="w-4 h-4 text-gray-400 transition-transform flex-shrink-0"
                                 :class="tableMap._open ? 'rotate-180' : ''"
                                 viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="6 9 12 15 18 9"/></svg>
                        </div>

                        <!-- Column mappings -->
                        <div x-show="tableMap._open && tableMap.enabled" x-collapse>
                            <div class="border-t border-gray-100 dark:border-gray-700">
                                <!-- Column headers -->
                                <div class="grid grid-cols-12 gap-2 px-4 py-2 text-xs font-semibold text-gray-400 uppercase tracking-wider bg-gray-50 dark:bg-gray-700/50">
                                    <div class="col-span-2">Campo origem (SQL)</div>
                                    <div class="col-span-1 text-center">Tipo</div>
                                    <div class="col-span-3">Campo destino (Model)</div>
                                    <div class="col-span-3">Transformação</div>
                                    <div class="col-span-2">Default</div>
                                    <div class="col-span-1 text-center">Skip</div>
                                </div>

                                <template x-for="(colMap, cidx) in tableMap.columns" :key="colMap.source">
                                    <div>
                                    <!-- Main row -->
                                    <div class="grid grid-cols-12 gap-2 px-4 py-2 items-center border-t border-gray-50 dark:border-gray-700/50 text-sm"
                                         :class="colMap.target === null ? 'opacity-50' : ''">
                                        <!-- Source column -->
                                        <div class="col-span-2 flex items-center gap-1.5">
                                            <span class="text-xs font-mono text-gray-600 dark:text-gray-300 truncate" x-text="colMap.source"></span>
                                            <template x-if="colMap._schema && colMap._schema.is_pk">
                                                <span class="text-[10px] font-bold text-amber-500">PK</span>
                                            </template>
                                        </div>

                                        <!-- Source type badge -->
                                        <div class="col-span-1 text-center">
                                            <span class="text-[10px] font-medium px-1.5 py-0.5 rounded"
                                                  :class="{
                                                    'bg-purple-100 text-purple-700 dark:bg-purple-900/30 dark:text-purple-400': colMap._schema && colMap._schema.python_type === 'json',
                                                    'bg-green-100 text-green-700 dark:bg-green-900/30 dark:text-green-400': colMap._schema && colMap._schema.python_type === 'bool',
                                                    'bg-blue-100 text-blue-700 dark:bg-blue-900/30 dark:text-blue-400': colMap._schema && (colMap._schema.python_type === 'int' || colMap._schema.python_type === 'float'),
                                                    'bg-amber-100 text-amber-700 dark:bg-amber-900/30 dark:text-amber-400': colMap._schema && (colMap._schema.python_type === 'datetime' || colMap._schema.python_type === 'date'),
                                                    'bg-gray-100 text-gray-600 dark:bg-gray-700 dark:text-gray-400': !colMap._schema || colMap._schema.python_type === 'str' || colMap._schema.python_type === 'uuid',
                                                  }"
                                                  x-text="colMap._schema ? colMap._schema.python_type : '?'"></span>
                                        </div>

                                        <!-- Target field -->
                                        <div class="col-span-3">
                                            <div class="space-y-1">
                                                <select @change="colMap.target = $event.target.value"
                                                        :disabled="colMap.target === null || !tableMap.target_model"
                                                        class="w-full text-xs border border-gray-200 dark:border-gray-600 rounded-lg px-2 py-1.5 bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100 disabled:opacity-40">
                                                    <option value="" :selected="!colMap.target">— ignorar coluna —</option>
                                                    <template x-for="f in getModelFields(tableMap.target_model)" :key="f.name">
                                                        <option :value="f.name" :selected="f.name === colMap.target" x-text="f.name + ' (' + f.type + ')'"></option>
                                                    </template>
                                                </select>
                                                <!-- FK / Struct badges -->
                                                <template x-if="colMap.target">
                                                    <div class="flex flex-wrap gap-1">
                                                        <template x-if="getTargetField(tableMap.target_model, colMap.target)?.is_fk">
                                                            <span class="text-[10px] font-medium px-1.5 py-0.5 bg-blue-100 text-blue-700 dark:bg-blue-900/30 dark:text-blue-400 rounded cursor-default"
                                                                  :title="'FK → ' + (getTargetField(tableMap.target_model, colMap.target)?.fk_target || '')"
                                                                  x-text="'FK → ' + (getTargetField(tableMap.target_model, colMap.target)?.fk_target || '').split('.')[0]"></span>
                                                        </template>
                                                        <template x-if="getTargetField(tableMap.target_model, colMap.target)?.is_struct">
                                                            <button @click.stop="colMap._structOpen = !colMap._structOpen"
                                                                    class="text-[10px] font-medium px-1.5 py-0.5 bg-violet-100 text-violet-700 dark:bg-violet-900/30 dark:text-violet-400 rounded hover:bg-violet-200 dark:hover:bg-violet-900/50 transition-colors">
                                                                ⬡ Struct <span x-text="colMap._structOpen ? '▲' : '▼'"></span>
                                                            </button>
                                                        </template>
                                                    </div>
                                                </template>
                                            </div>
                                        </div>

                                        <!-- Transform -->
                                        <div class="col-span-3">
                                            <div class="space-y-1">
                                                <select @change="colMap.transform = $event.target.value"
                                                        :disabled="!colMap.target || !tableMap.target_model"
                                                        class="w-full text-xs border border-gray-200 dark:border-gray-600 rounded-lg px-2 py-1.5 bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100 disabled:opacity-40">
                                                    <template x-for="t in availableTransforms" :key="t.id">
                                                        <option :value="t.id" :selected="t.id === colMap.transform" x-text="t.label"></option>
                                                    </template>
                                                </select>
                                                <!-- Datetime config gear button -->
                                                <template x-if="colMap.transform === 'to_datetime'">
                                                    <button @click.stop="colMap._datetimeOpen = !colMap._datetimeOpen"
                                                            class="flex items-center gap-1 text-[10px] text-amber-600 dark:text-amber-400 hover:underline">
                                                        <svg class="w-3 h-3" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="3"/><path d="M19.07 4.93a10 10 0 0 1 0 14.14M4.93 4.93a10 10 0 0 0 0 14.14"/></svg>
                                                        <span x-text="colMap._datetimeOpen ? 'Fechar config' : 'Config timezone/formato'"></span>
                                                    </button>
                                                </template>
                                            </div>
                                        </div>

                                        <!-- Default value setter (smart by target field type) -->
                                        <div class="col-span-2">
                                            <template x-if="colMap.target && getTargetField(tableMap.target_model, colMap.target)">
                                                <div class="space-y-1">
                                                    <!-- auto_now: cannot set default -->
                                                    <template x-if="getTargetField(tableMap.target_model, colMap.target)?.auto_now">
                                                        <span class="inline-flex items-center text-[10px] font-medium px-1.5 py-0.5 bg-orange-100 text-orange-700 dark:bg-orange-900/30 dark:text-orange-400 rounded">auto_now</span>
                                                    </template>

                                                    <!-- Choices dropdown -->
                                                    <template x-if="!getTargetField(tableMap.target_model, colMap.target)?.auto_now && getDefaultInputType(tableMap.target_model, colMap.target) === 'choices'">
                                                        <div>
                                                            <select @change="colMap.default = $event.target.value === '' ? null : $event.target.value"
                                                                    class="w-full text-xs border border-gray-200 dark:border-gray-600 rounded-lg px-2 py-1 bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100">
                                                                <option value="" :selected="colMap.default === null || colMap.default === ''">— da fonte —</option>
                                                                <template x-for="c in (getTargetField(tableMap.target_model, colMap.target)?.choices || [])" :key="c.value">
                                                                    <option :value="c.value" :selected="String(c.value) === String(colMap.default)" x-text="c.value + (c.label && c.label !== c.value ? ' — ' + c.label : '')"></option>
                                                                </template>
                                                            </select>
                                                        </div>
                                                    </template>

                                                    <!-- Bool select -->
                                                    <template x-if="!getTargetField(tableMap.target_model, colMap.target)?.auto_now && getDefaultInputType(tableMap.target_model, colMap.target) === 'bool'">
                                                        <select @change="colMap.default = $event.target.value === '' ? null : $event.target.value === 'true'"
                                                                class="w-full text-xs border border-gray-200 dark:border-gray-600 rounded-lg px-2 py-1 bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100">
                                                            <option value="" :selected="colMap.default === null || colMap.default === ''">— da fonte —</option>
                                                            <option value="true" :selected="colMap.default === true">true</option>
                                                            <option value="false" :selected="colMap.default === false">false</option>
                                                        </select>
                                                    </template>

                                                    <!-- Int input -->
                                                    <template x-if="!getTargetField(tableMap.target_model, colMap.target)?.auto_now && getDefaultInputType(tableMap.target_model, colMap.target) === 'int'">
                                                        <input type="number" step="1"
                                                               :value="colMap.default ?? ''"
                                                               @change="colMap.default = $event.target.value !== '' ? parseInt($event.target.value) : null"
                                                               placeholder="null (da fonte)"
                                                               class="w-full text-xs border border-gray-200 dark:border-gray-600 rounded-lg px-2 py-1 bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100 placeholder-gray-400">
                                                    </template>

                                                    <!-- Float input -->
                                                    <template x-if="!getTargetField(tableMap.target_model, colMap.target)?.auto_now && getDefaultInputType(tableMap.target_model, colMap.target) === 'float'">
                                                        <input type="number" step="any"
                                                               :value="colMap.default ?? ''"
                                                               @change="colMap.default = $event.target.value !== '' ? parseFloat($event.target.value) : null"
                                                               placeholder="null (da fonte)"
                                                               class="w-full text-xs border border-gray-200 dark:border-gray-600 rounded-lg px-2 py-1 bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100 placeholder-gray-400">
                                                    </template>

                                                    <!-- Datetime input -->
                                                    <template x-if="!getTargetField(tableMap.target_model, colMap.target)?.auto_now && getDefaultInputType(tableMap.target_model, colMap.target) === 'datetime'">
                                                        <input type="text"
                                                               :value="colMap.default ?? ''"
                                                               @input="colMap.default = $event.target.value || null"
                                                               placeholder="2024-01-01 00:00:00"
                                                               class="w-full text-xs border border-gray-200 dark:border-gray-600 rounded-lg px-2 py-1 bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100 font-mono placeholder-gray-400">
                                                    </template>

                                                    <!-- Text / varchar / uuid / default -->
                                                    <template x-if="!getTargetField(tableMap.target_model, colMap.target)?.auto_now && getDefaultInputType(tableMap.target_model, colMap.target) === 'text'">
                                                        <input type="text"
                                                               :value="colMap.default ?? ''"
                                                               @input="colMap.default = $event.target.value || null"
                                                               placeholder="— da fonte —"
                                                               class="w-full text-xs border border-gray-200 dark:border-gray-600 rounded-lg px-2 py-1 bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100 placeholder-gray-400">
                                                    </template>

                                                    <!-- Model default hint -->
                                                    <template x-if="getTargetField(tableMap.target_model, colMap.target)?.default !== null && getTargetField(tableMap.target_model, colMap.target)?.default !== undefined">
                                                        <div class="text-[10px] text-gray-400 dark:text-gray-500 truncate"
                                                             :title="'Padrão do model: ' + String(getTargetField(tableMap.target_model, colMap.target)?.default)">
                                                            model: <span class="font-mono" x-text="formatDefault(getTargetField(tableMap.target_model, colMap.target)?.default)"></span>
                                                        </div>
                                                    </template>
                                                </div>
                                            </template>
                                            <template x-if="!colMap.target">
                                                <span class="text-[10px] text-gray-300 dark:text-gray-600">—</span>
                                            </template>
                                        </div>

                                        <!-- Skip toggle -->
                                        <div class="col-span-1 flex justify-center">
                                            <button @click="colMap.target = colMap.target === null ? colMap.source : null"
                                                    class="w-5 h-5 rounded border-2 flex items-center justify-center transition-all"
                                                    :class="colMap.target === null ? 'border-red-400 bg-red-50 dark:bg-red-900/20' : 'border-gray-300 dark:border-gray-600 hover:border-red-400'">
                                                <template x-if="colMap.target === null">
                                                    <svg class="w-3 h-3 text-red-500" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3"><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></svg>
                                                </template>
                                            </button>
                                        </div>
                                    </div>

                                    <!-- Struct Mapper Sub-panel -->
                                    <template x-if="colMap._structOpen && colMap.transform === 'struct_map' && getTargetField(tableMap.target_model, colMap.target)?.is_struct">
                                        <div class="mx-4 mb-3 rounded-lg border border-violet-200 dark:border-violet-700 bg-violet-50/50 dark:bg-violet-900/10 overflow-hidden">
                                            <div class="px-3 py-2 bg-violet-100/60 dark:bg-violet-900/20 border-b border-violet-200 dark:border-violet-700 flex items-center justify-between">
                                                <span class="text-xs font-semibold text-violet-700 dark:text-violet-300">
                                                    Mapeamento JSON → StructSchema: <span x-text="colMap.target"></span>
                                                </span>
                                                <label class="flex items-center gap-1.5 text-xs text-violet-600 dark:text-violet-400 cursor-pointer">
                                                    <input type="checkbox" x-model="colMap.struct_config.drop_unknown" class="rounded border-violet-300">
                                                    Descartar chaves desconhecidas
                                                </label>
                                            </div>
                                            <div class="p-3">
                                                <!-- Header -->
                                                <div class="grid grid-cols-5 gap-2 text-[10px] font-semibold text-violet-500 dark:text-violet-400 uppercase tracking-wider mb-2">
                                                    <div class="col-span-2">Chave JSON (origem)</div>
                                                    <div class="col-span-1 text-center">→</div>
                                                    <div class="col-span-2">Campo StructSchema (destino)</div>
                                                </div>
                                                <!-- Fields from struct schema -->
                                                <template x-for="sf in (getTargetField(tableMap.target_model, colMap.target)?.struct_fields || [])" :key="sf.name">
                                                    <div class="grid grid-cols-5 gap-2 items-center mb-1.5">
                                                        <!-- Source key input -->
                                                        <div class="col-span-2">
                                                            <input type="text"
                                                                   :placeholder="sf.name"
                                                                   :value="Object.entries(colMap.struct_config.field_map || {}).find(([k,v]) => v === sf.name)?.[0] || ''"
                                                                   @input="
                                                                       const prev = Object.entries(colMap.struct_config.field_map || {}).find(([k,v]) => v === sf.name);
                                                                       if (prev) delete colMap.struct_config.field_map[prev[0]];
                                                                       if ($event.target.value) colMap.struct_config.field_map[$event.target.value] = sf.name;
                                                                   "
                                                                   class="w-full text-xs border border-violet-200 dark:border-violet-600 rounded px-2 py-1 bg-white dark:bg-gray-800 text-gray-900 dark:text-gray-100 font-mono placeholder-gray-400">
                                                        </div>
                                                        <div class="col-span-1 text-center">
                                                            <svg class="w-4 h-4 text-violet-400 mx-auto" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M5 12h14M12 5l7 7-7 7"/></svg>
                                                        </div>
                                                        <!-- Struct field info -->
                                                        <div class="col-span-2 flex items-center gap-1.5">
                                                            <span class="text-xs font-mono text-violet-700 dark:text-violet-300" x-text="sf.name"></span>
                                                            <span class="text-[10px] text-violet-400 dark:text-violet-500" x-text="'(' + sf.type + ')'"></span>
                                                            <template x-if="sf.default !== null && sf.default !== undefined">
                                                                <span class="text-[10px] bg-violet-100 dark:bg-violet-900/30 text-violet-600 dark:text-violet-400 px-1 rounded font-mono"
                                                                      x-text="sf.default === '__auto__' ? 'auto' : String(sf.default)"></span>
                                                            </template>
                                                            <template x-if="sf.aliases && sf.aliases.length > 0">
                                                                <span class="text-[10px] italic text-violet-400"
                                                                      :title="'Aliases: ' + sf.aliases.join(', ')"
                                                                      x-text="'~' + sf.aliases[0]"></span>
                                                            </template>
                                                        </div>
                                                    </div>
                                                </template>
                                                <template x-if="!getTargetField(tableMap.target_model, colMap.target)?.struct_fields?.length">
                                                    <p class="text-xs text-violet-400 italic">Nenhum campo de StructSchema encontrado.</p>
                                                </template>
                                            </div>
                                        </div>
                                    </template>

                                    <!-- Datetime Config Sub-panel -->
                                    <template x-if="colMap._datetimeOpen && colMap.transform === 'to_datetime'">
                                        <div class="mx-4 mb-3 rounded-lg border border-amber-200 dark:border-amber-700 bg-amber-50/50 dark:bg-amber-900/10 p-3">
                                            <p class="text-xs font-semibold text-amber-700 dark:text-amber-300 mb-2">Configuração de Datetime</p>
                                            <div class="grid grid-cols-2 gap-3">
                                                <div>
                                                    <label class="block text-[10px] text-amber-600 dark:text-amber-400 font-medium mb-1">Formato origem (strftime)</label>
                                                    <input type="text"
                                                           x-model="colMap.datetime_config.source_format"
                                                           placeholder="Auto-detect (%Y-%m-%d %H:%M:%S)"
                                                           class="w-full text-xs border border-amber-200 dark:border-amber-600 rounded px-2 py-1 bg-white dark:bg-gray-800 text-gray-900 dark:text-gray-100 font-mono placeholder-gray-400">
                                                </div>
                                                <div>
                                                    <label class="block text-[10px] text-amber-600 dark:text-amber-400 font-medium mb-1">Timezone origem</label>
                                                    <input type="text"
                                                           x-model="colMap.datetime_config.source_tz"
                                                           placeholder="America/Sao_Paulo (vazio = UTC)"
                                                           class="w-full text-xs border border-amber-200 dark:border-amber-600 rounded px-2 py-1 bg-white dark:bg-gray-800 text-gray-900 dark:text-gray-100 font-mono placeholder-gray-400">
                                                </div>
                                                <div>
                                                    <label class="block text-[10px] text-amber-600 dark:text-amber-400 font-medium mb-1">Timezone destino</label>
                                                    <input type="text"
                                                           x-model="colMap.datetime_config.target_tz"
                                                           placeholder="UTC"
                                                           class="w-full text-xs border border-amber-200 dark:border-amber-600 rounded px-2 py-1 bg-white dark:bg-gray-800 text-gray-900 dark:text-gray-100 font-mono placeholder-gray-400">
                                                </div>
                                                <div class="flex items-center gap-2 pt-4">
                                                    <input type="checkbox"
                                                           x-model="colMap.datetime_config.assume_utc"
                                                           class="rounded border-amber-300">
                                                    <label class="text-xs text-amber-700 dark:text-amber-400">Assumir UTC quando sem timezone</label>
                                                </div>
                                            </div>
                                        </div>
                                    </template>
                                    </div>
                                </template>
                            </div>
                        </div>
                    </div>
                </template>
            </div>
        </div>
    </template>

    <!-- ================================================================
         STEP 4 — PREVIEW
    ================================================================ -->
    <template x-if="step === 4">
        <div>
            <div class="flex items-center justify-between mb-5">
                <div>
                    <h2 class="text-lg font-semibold text-gray-900 dark:text-white">Preview dos dados transformados</h2>
                    <p class="text-sm text-gray-500 dark:text-gray-400 mt-0.5">10 primeiras linhas de cada tabela após as transformações</p>
                </div>
                <div class="flex gap-2">
                    <button @click="goToMapping(4)" class="px-3 py-2 text-sm text-gray-600 dark:text-gray-300 border border-gray-200 dark:border-gray-600 rounded-xl hover:bg-gray-50 dark:hover:bg-gray-700 transition-colors">
                        ← Ajustar mapeamento
                    </button>
                    <button @click="step = 5; startExecution()"
                            class="px-4 py-2 text-sm bg-green-600 text-white font-medium rounded-xl hover:bg-green-700 transition-colors inline-flex items-center gap-2">
                        <svg class="w-4 h-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polygon points="5 3 19 12 5 21 5 3"/></svg>
                        Executar importação
                    </button>
                </div>
            </div>

            <template x-if="previewLoading">
                <div class="flex items-center justify-center py-20">
                    <div class="animate-spin rounded-full h-8 w-8 border-b-2 border-primary-500"></div>
                </div>
            </template>

            <template x-if="previewError">
                <div class="bg-amber-50 dark:bg-amber-900/20 border border-amber-200 dark:border-amber-700 rounded-xl p-5 flex items-start gap-3">
                    <svg class="w-5 h-5 text-amber-500 flex-shrink-0 mt-0.5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M10.29 3.86L1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z"/><line x1="12" y1="9" x2="12" y2="13"/><line x1="12" y1="17" x2="12.01" y2="17"/></svg>
                    <div class="flex-1">
                        <p class="text-sm font-medium text-amber-800 dark:text-amber-300" x-text="previewError"></p>
                        <button @click="goToMapping(4)"
                                class="mt-2 text-xs text-amber-700 dark:text-amber-400 underline hover:no-underline">
                            ← Voltar ao mapeamento
                        </button>
                    </div>
                </div>
            </template>

            <template x-if="!previewLoading && !previewError && Object.keys(previewData).length === 0">
                <div class="flex flex-col items-center justify-center py-16 text-center">
                    <div class="w-12 h-12 rounded-full bg-gray-100 dark:bg-gray-700 flex items-center justify-center mb-3">
                        <svg class="w-6 h-6 text-gray-400" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="3" y="3" width="18" height="18" rx="2"/><path d="M3 9h18M3 15h18M9 3v18"/></svg>
                    </div>
                    <p class="text-sm font-medium text-gray-500 dark:text-gray-400">Nenhuma tabela habilitada para preview</p>
                    <p class="text-xs text-gray-400 dark:text-gray-500 mt-1">Volte ao mapeamento, ative o toggle de pelo menos uma tabela e selecione o model de destino.</p>
                    <button @click="goToMapping(4)" class="mt-4 px-4 py-2 text-sm border border-gray-200 dark:border-gray-600 rounded-xl text-gray-600 dark:text-gray-300 hover:bg-gray-50 dark:hover:bg-gray-700 transition-colors">
                        ← Voltar ao mapeamento
                    </button>
                </div>
            </template>

            <template x-if="!previewLoading && !previewError && Object.keys(previewData).length > 0">
                <div class="space-y-6">
                    <template x-for="(tablePreview, tableName) in previewData" :key="tableName">
                        <div class="bg-white dark:bg-gray-800 rounded-xl border border-gray-200 dark:border-gray-700 overflow-hidden">
                            <div class="flex items-center justify-between px-4 py-3 border-b border-gray-100 dark:border-gray-700 bg-gray-50 dark:bg-gray-700/50">
                                <div class="flex items-center gap-2">
                                    <svg class="w-4 h-4 text-gray-400" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="3" y="3" width="18" height="18" rx="2"/><path d="M3 9h18M3 15h18M9 3v18"/></svg>
                                    <span class="font-semibold text-sm text-gray-900 dark:text-white" x-text="tableName"></span>
                                    <span class="text-xs text-gray-400">→</span>
                                    <span class="text-xs font-medium text-primary-600 dark:text-primary-400" x-text="getMappingTarget(tableName)"></span>
                                </div>
                                <span class="text-xs text-gray-500" x-text="tablePreview.rows.length + ' de ' + (uploadResult.row_counts[tableName] || 0).toLocaleString() + ' linhas'"></span>
                            </div>
                            <div class="overflow-x-auto">
                                <table class="w-full text-xs">
                                    <thead>
                                        <tr class="border-b border-gray-100 dark:border-gray-700">
                                            <template x-for="col in getPreviewColumns(tablePreview)" :key="col">
                                                <th class="px-3 py-2 text-left font-semibold text-gray-500 dark:text-gray-400 whitespace-nowrap" x-text="col"></th>
                                            </template>
                                            <th class="px-3 py-2 text-left font-semibold text-gray-500 dark:text-gray-400">Status</th>
                                        </tr>
                                    </thead>
                                    <tbody class="divide-y divide-gray-50 dark:divide-gray-700/50">
                                        <template x-for="(row, ridx) in tablePreview.rows" :key="ridx">
                                            <tr :class="row.errors.length > 0 ? 'bg-red-50 dark:bg-red-900/10' : ''">
                                                <template x-for="col in getPreviewColumns(tablePreview)" :key="col">
                                                    <td class="px-3 py-1.5 font-mono text-gray-700 dark:text-gray-300 max-w-[200px] truncate" x-text="formatCellValue(row.data[col])"></td>
                                                </template>
                                                <td class="px-3 py-1.5">
                                                    <template x-if="row.errors.length === 0">
                                                        <span class="text-green-600 dark:text-green-400 text-[10px] font-medium">OK</span>
                                                    </template>
                                                    <template x-if="row.errors.length > 0">
                                                        <span class="text-red-600 dark:text-red-400 text-[10px] font-medium" :title="row.errors.join('; ')">⚠ erro</span>
                                                    </template>
                                                </td>
                                            </tr>
                                        </template>
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </template>
                </div>
            </template>
        </div>
    </template>

    <!-- ================================================================
         STEP 5 — EXECUTE
    ================================================================ -->
    <template x-if="step === 5">
        <div>
            <div class="flex items-center justify-between mb-5">
                <div>
                    <h2 class="text-lg font-semibold text-gray-900 dark:text-white">Executando importação</h2>
                    <p class="text-sm text-gray-500 dark:text-gray-400 mt-0.5">Inserindo dados em batch via SSE streaming</p>
                </div>
                <div class="flex gap-2">
                    <template x-if="executionDone">
                        <div class="flex gap-2">
                            <button @click="goToMapping(5)" class="inline-flex items-center gap-2 px-3 py-2 text-sm border border-gray-200 dark:border-gray-600 rounded-xl text-gray-600 dark:text-gray-300 hover:bg-gray-50 dark:hover:bg-gray-700 transition-colors">
                                ← Ajustar mapeamento
                            </button>
                            <button @click="downloadReport()" class="inline-flex items-center gap-2 px-3 py-2 text-sm border border-gray-200 dark:border-gray-600 rounded-xl text-gray-600 dark:text-gray-300 hover:bg-gray-50 dark:hover:bg-gray-700 transition-colors">
                                <svg class="w-4 h-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/><polyline points="7 10 12 15 17 10"/><line x1="12" y1="15" x2="12" y2="3"/></svg>
                                Exportar relatório
                            </button>
                            <button @click="resetWizard()" class="px-4 py-2 text-sm bg-primary-600 text-white font-medium rounded-xl hover:bg-primary-700 transition-colors">
                                Nova importação
                            </button>
                        </div>
                    </template>
                    <template x-if="!executionDone">
                        <button @click="cancelExecution()"
                                class="px-3 py-2 text-sm text-red-600 dark:text-red-400 border border-red-200 dark:border-red-800 rounded-xl hover:bg-red-50 dark:hover:bg-red-900/20 transition-colors">
                            Cancelar
                        </button>
                    </template>
                </div>
            </div>

            <!-- Error banner — shown when all/most rows failed -->
            <template x-if="executionDone && dbErrorMessage">
                <div class="mb-5 bg-red-50 dark:bg-red-900/20 border border-red-200 dark:border-red-800 rounded-xl p-5">
                    <div class="flex items-start gap-3">
                        <div class="flex-shrink-0 w-8 h-8 rounded-lg bg-red-100 dark:bg-red-900/40 flex items-center justify-center mt-0.5">
                            <svg class="w-4 h-4 text-red-600 dark:text-red-400" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="10"/><line x1="12" y1="8" x2="12" y2="12"/><line x1="12" y1="16" x2="12.01" y2="16"/></svg>
                        </div>
                        <div class="flex-1">
                            <p class="text-sm font-semibold text-red-800 dark:text-red-300 mb-1">Erro de inserção detectado</p>
                            <p class="text-sm text-red-700 dark:text-red-400" x-text="dbErrorMessage"></p>
                            <div class="mt-3 flex gap-2 flex-wrap">
                                <button @click="goToMapping(5)"
                                        class="inline-flex items-center gap-2 px-4 py-2 text-sm font-medium bg-red-600 text-white rounded-lg hover:bg-red-700 transition-colors">
                                    <svg class="w-4 h-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="15 18 9 12 15 6"/></svg>
                                    Voltar ao Mapeamento
                                </button>
                                <button @click="step = 5; startExecution()"
                                        class="px-4 py-2 text-sm font-medium border border-red-300 dark:border-red-700 text-red-700 dark:text-red-400 rounded-lg hover:bg-red-50 dark:hover:bg-red-900/20 transition-colors">
                                    Tentar novamente
                                </button>
                                <button @click="reuploadKeepMappings()"
                                        class="px-4 py-2 text-sm font-medium border border-red-300 dark:border-red-700 text-red-700 dark:text-red-400 rounded-lg hover:bg-red-50 dark:hover:bg-red-900/20 transition-colors">
                                    Re-upload (sessão expirou)
                                </button>
                            </div>
                        </div>
                    </div>
                </div>
            </template>

            <!-- Overall progress -->
            <div class="bg-white dark:bg-gray-800 rounded-xl border border-gray-200 dark:border-gray-700 p-5 mb-4">
                <div class="flex items-center justify-between mb-2">
                    <span class="text-sm font-semibold text-gray-700 dark:text-gray-300">Progresso geral</span>
                    <span class="text-xs text-gray-400" x-text="completedTables + ' de ' + totalTables + ' tabelas · ' + overallProgress.toFixed(1) + '%'"></span>
                </div>
                <div class="w-full bg-gray-100 dark:bg-gray-700 rounded-full h-3 overflow-hidden">
                    <div class="h-full rounded-full transition-all duration-500"
                         :class="executionDone && totalErrors === 0 ? 'bg-green-500' : executionDone && totalErrors > 0 ? 'bg-amber-500' : 'bg-primary-500'"
                         :style="'width: ' + overallProgress + '%'"></div>
                </div>
                <div class="flex justify-between text-xs mt-2">
                    <div class="flex gap-4">
                        <span class="text-green-600 dark:text-green-400 font-medium flex items-center gap-1">
                            <svg class="w-3 h-3" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3"><polyline points="20 6 9 17 4 12"/></svg>
                            <span x-text="totalInserted.toLocaleString() + ' inseridos'"></span>
                        </span>
                        <span x-show="totalSkipped > 0" class="text-amber-500 font-medium flex items-center gap-1">
                            <svg class="w-3 h-3" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="10"/><line x1="12" y1="8" x2="12" y2="12"/></svg>
                            <span x-text="totalSkipped.toLocaleString() + ' ignorados'"></span>
                        </span>
                        <span x-show="totalErrors > 0" class="text-red-500 font-medium flex items-center gap-1">
                            <svg class="w-3 h-3" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3"><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></svg>
                            <span x-text="totalErrors.toLocaleString() + ' erros'"></span>
                        </span>
                    </div>
                </div>
            </div>

            <!-- Per-table progress -->
            <div class="space-y-2 mb-4">
                <template x-for="(tableStatus, tableName) in executionStatus" :key="tableName">
                    <div class="bg-white dark:bg-gray-800 rounded-xl border overflow-hidden transition-all"
                         :class="{
                            'border-green-200 dark:border-green-800/60': tableStatus.status === 'done' && tableStatus.errors === 0,
                            'border-amber-200 dark:border-amber-800/60': tableStatus.status === 'done' && tableStatus.errors > 0,
                            'border-primary-200 dark:border-primary-800/60': tableStatus.status === 'running',
                            'border-red-200 dark:border-red-800/60': tableStatus.status === 'error',
                            'border-gray-200 dark:border-gray-700': tableStatus.status === 'waiting',
                         }">
                        <!-- Top stripe: colored left border accent -->
                        <div class="flex items-center gap-3 px-4 py-3">
                            <!-- Status icon -->
                            <div class="flex-shrink-0 w-8 h-8 rounded-lg flex items-center justify-center"
                                 :class="{
                                    'bg-green-100 dark:bg-green-900/30': tableStatus.status === 'done' && tableStatus.errors === 0,
                                    'bg-amber-100 dark:bg-amber-900/30': tableStatus.status === 'done' && tableStatus.errors > 0,
                                    'bg-blue-100 dark:bg-blue-900/30': tableStatus.status === 'running',
                                    'bg-red-100 dark:bg-red-900/30': tableStatus.status === 'error',
                                    'bg-gray-100 dark:bg-gray-700': tableStatus.status === 'waiting',
                                 }">
                                <template x-if="tableStatus.status === 'waiting'">
                                    <svg class="w-4 h-4 text-gray-400" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="10"/><polyline points="12 6 12 12 16 14"/></svg>
                                </template>
                                <template x-if="tableStatus.status === 'running'">
                                    <div class="w-4 h-4 border-2 border-blue-500 border-t-transparent rounded-full animate-spin"></div>
                                </template>
                                <template x-if="tableStatus.status === 'done' && tableStatus.errors === 0">
                                    <svg class="w-4 h-4 text-green-600 dark:text-green-400" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><polyline points="20 6 9 17 4 12"/></svg>
                                </template>
                                <template x-if="tableStatus.status === 'done' && tableStatus.errors > 0">
                                    <svg class="w-4 h-4 text-amber-600 dark:text-amber-400" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M10.29 3.86L1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z"/><line x1="12" y1="9" x2="12" y2="13"/><line x1="12" y1="17" x2="12.01" y2="17"/></svg>
                                </template>
                                <template x-if="tableStatus.status === 'error'">
                                    <svg class="w-4 h-4 text-red-600 dark:text-red-400" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></svg>
                                </template>
                            </div>

                            <!-- Table name + target -->
                            <div class="flex-1 min-w-0">
                                <div class="flex items-center gap-2">
                                    <span class="text-sm font-semibold text-gray-900 dark:text-white" x-text="tableName"></span>
                                    <svg class="w-3 h-3 text-gray-400 flex-shrink-0" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M5 12h14M12 5l7 7-7 7"/></svg>
                                    <span class="text-xs text-gray-500 dark:text-gray-400 truncate" x-text="tableStatus.target || '?'"></span>
                                </div>
                                <!-- Progress bar -->
                                <div class="mt-1.5 w-full bg-gray-100 dark:bg-gray-700 rounded-full h-1.5 overflow-hidden">
                                    <div class="h-full rounded-full transition-all duration-300"
                                         :class="{
                                            'bg-green-500': tableStatus.status === 'done' && tableStatus.errors === 0,
                                            'bg-amber-500': tableStatus.status === 'done' && tableStatus.errors > 0,
                                            'bg-primary-500': tableStatus.status === 'running',
                                            'bg-red-500': tableStatus.status === 'error',
                                            'bg-gray-300 dark:bg-gray-600': tableStatus.status === 'waiting',
                                         }"
                                         :style="tableStatus.total > 0
                                            ? 'width: ' + Math.min(100, ((tableStatus.row || 0) / tableStatus.total) * 100) + '%'
                                            : (tableStatus.status === 'done' ? 'width: 100%' : 'width: 0%')">
                                    </div>
                                </div>
                            </div>

                            <!-- Stats -->
                            <div class="flex-shrink-0 text-right">
                                <div class="flex items-center justify-end gap-3 text-xs">
                                    <span class="font-medium"
                                          :class="tableStatus.status === 'done' && tableStatus.errors === 0 ? 'text-green-600 dark:text-green-400' : 'text-gray-600 dark:text-gray-400'"
                                          x-text="(tableStatus.inserted || 0).toLocaleString() + ' inseridos'"></span>
                                    <template x-if="(tableStatus.skipped || 0) > 0">
                                        <span class="text-amber-500 font-medium" x-text="(tableStatus.skipped || 0).toLocaleString() + ' ignorados'"></span>
                                    </template>
                                    <template x-if="(tableStatus.errors || 0) > 0">
                                        <span class="text-red-500 font-medium" x-text="(tableStatus.errors || 0).toLocaleString() + ' erros'"></span>
                                    </template>
                                </div>
                                <div class="text-[11px] text-gray-400 dark:text-gray-500 mt-0.5"
                                     x-text="tableStatus.total > 0
                                        ? (tableStatus.row || 0).toLocaleString() + ' / ' + tableStatus.total.toLocaleString() + ' linhas'
                                        : (tableStatus.status === 'waiting' ? 'aguardando...' : '')">
                                </div>
                            </div>
                        </div>
                    </div>
                </template>
            </div>

            <!-- Event log -->
            <div class="bg-gray-950 dark:bg-gray-900 rounded-xl border border-gray-800 dark:border-gray-700 overflow-hidden">
                <div class="flex items-center justify-between px-4 py-2.5 border-b border-gray-800 dark:border-gray-700">
                    <div class="flex items-center gap-2">
                        <div class="flex gap-1">
                            <div class="w-2.5 h-2.5 rounded-full bg-red-500/70"></div>
                            <div class="w-2.5 h-2.5 rounded-full bg-yellow-500/70"></div>
                            <div class="w-2.5 h-2.5 rounded-full bg-green-500/70"></div>
                        </div>
                        <span class="text-xs font-medium text-gray-500 ml-1">log de eventos</span>
                    </div>
                    <button @click="eventLog = []" class="text-xs text-gray-600 hover:text-gray-400 transition-colors">limpar</button>
                </div>
                <div class="max-h-52 overflow-y-auto p-4 space-y-0.5 font-mono text-xs" x-ref="logContainer">
                    <template x-for="(entry, idx) in eventLog" :key="idx">
                        <div class="flex items-start gap-2 leading-5"
                             :class="{
                                'text-green-400': entry.type === 'done' || entry.type === 'complete',
                                'text-blue-400': entry.type === 'start',
                                'text-gray-400': entry.type === 'progress',
                                'text-red-400': entry.type === 'error' || entry.type === 'fatal',
                                'text-gray-500': entry.type === 'info',
                             }">
                            <span class="text-gray-700 select-none flex-shrink-0" x-text="String(idx + 1).padStart(3, '0')"></span>
                            <span x-text="entry.text"></span>
                        </div>
                    </template>
                    <template x-if="eventLog.length === 0">
                        <div class="text-gray-700 italic">aguardando eventos...</div>
                    </template>
                    <div x-show="!executionDone" class="text-gray-600 animate-pulse select-none">▊</div>
                </div>
            </div>
        </div>
    </template>

</div>

<script>
function importerWizard() {
    return {
        // State
        step: 1,
        stepLabels: ['Upload', 'Schema', 'Mapeamento', 'Preview', 'Execução'],

        // Step 1
        selectedFile: null,
        uploading: false,
        uploadError: null,
        dragover: false,

        // Step 2
        uploadResult: null,

        // Step 3
        mappings: [],
        availableModels: [],
        availableTransforms: [],
        executeConfig: {
            batch_size: 500,
            on_conflict: 'skip',
            stop_on_error: false,
        },
        // FK dependency analysis
        depsOrder: [],
        depsWarnings: [],
        depsLoading: false,
        _pendingMappings: null,

        // Step 4
        previewData: {},
        previewLoading: false,
        previewError: null,

        // Step 5
        executionStatus: {},
        eventLog: [],
        totalInserted: 0,
        totalSkipped: 0,
        totalErrors: 0,
        overallProgress: 0,
        completedTables: 0,
        totalTables: 0,
        executionDone: false,
        dbErrorMessage: null,
        _eventSource: null,
        _report: null,

        // ----------------------------------------------------------------
        // Lifecycle
        // ----------------------------------------------------------------

        async init() {
            // Pre-load models and transforms for step 3
            await this.loadModelsAndTransforms();
        },

        async loadModelsAndTransforms() {
            try {
                const [modelsRes, transformsRes] = await Promise.all([
                    fetch('{{ admin_prefix }}/api/importer/models'),
                    fetch('{{ admin_prefix }}/api/importer/transforms'),
                ]);
                const modelsData = await modelsRes.json();
                const transformsData = await transformsRes.json();
                this.availableModels = modelsData.models || [];
                this.availableTransforms = transformsData.transforms || [];
            } catch (e) {
                console.error('Failed to load models/transforms', e);
            }
        },

        // ----------------------------------------------------------------
        // Step 1 — Upload
        // ----------------------------------------------------------------

        handleDrop(event) {
            this.dragover = false;
            const file = event.dataTransfer.files[0];
            if (file && file.name.endsWith('.sql')) {
                this.selectedFile = file;
            } else {
                this.uploadError = 'Apenas arquivos .sql são aceitos';
            }
        },

        handleFileSelect(event) {
            const file = event.target.files[0];
            if (file) {
                this.selectedFile = file;
                this.uploadError = null;
            }
        },

        async uploadFile() {
            if (!this.selectedFile) return;
            this.uploading = true;
            this.uploadError = null;

            const formData = new FormData();
            formData.append('file', this.selectedFile);

            try {
                const res = await fetch('{{ admin_prefix }}/api/importer/upload', {
                    method: 'POST',
                    body: formData,
                });
                const data = await res.json();

                if (!res.ok) {
                    this.uploadError = data.detail || 'Erro ao processar o arquivo';
                    return;
                }

                this.uploadResult = data;
                if (this._pendingMappings && this._pendingMappings.length > 0) {
                    // Re-upload after session expiry: restore previous mapping config
                    this.mappings = this._pendingMappings;
                    this._pendingMappings = null;
                    this.goToMapping(5); // go straight to mapping with accordions open
                } else {
                    this._buildMappings();
                    this.step = 2;
                }
            } catch (e) {
                this.uploadError = 'Erro de conexão: ' + e.message;
            } finally {
                this.uploading = false;
            }
        },

        // ----------------------------------------------------------------
        // Step 2 — Schema
        // ----------------------------------------------------------------

        goToMapping(fromStep = 2) {
            // When coming from step 4/5, restore opened accordions for configured tables
            if (fromStep > 3) {
                this.mappings.forEach(m => {
                    if (m.enabled && m.target_model) {
                        m._open = true;
                    }
                });
            }
            this.step = 3;
        },

        // Re-upload keeping all mapping config (for session expiry)
        reuploadKeepMappings() {
            // Preserve mapping config before going back to step 1
            const savedMappings = this.mappings;
            this.step = 1;
            this.uploadResult = null;
            this.selectedFile = null;
            this.uploadError = null;
            this.executionDone = false;
            this.dbErrorMessage = null;
            this._pendingMappings = savedMappings;
        },

        // ----------------------------------------------------------------
        // Step 3 — Mapping
        // ----------------------------------------------------------------

        _buildMappings() {
            this.mappings = Object.entries(this.uploadResult.tables).map(([tableName, schema]) => {
                const columns = schema.columns.map(col => ({
                    source: col.name,
                    target: col.name,
                    transform: this._guessTransform(col),
                    default: col.default,
                    struct_config: col.python_type === 'json' ? { field_map: {}, drop_unknown: false } : null,
                    datetime_config: (col.python_type === 'datetime' || col.python_type === 'date')
                        ? { source_format: null, source_tz: null, target_tz: 'UTC', assume_utc: true }
                        : null,
                    _schema: col,
                    _structOpen: false,
                    _datetimeOpen: false,
                }));
                return {
                    source_table: tableName,
                    target_model: '',
                    enabled: false,
                    _open: false,
                    columns,
                };
            });
        },

        _guessTransform(col) {
            switch (col.python_type) {
                case 'bool':     return 'to_bool';
                case 'int':      return 'to_int';
                case 'float':    return 'to_float';
                case 'datetime': return 'to_datetime';
                case 'date':     return 'to_datetime';
                case 'json':     return 'json_parse';
                case 'uuid':     return 'uuid_str';
                default:         return 'passthrough';
            }
        },

        onModelSelect(tableMap) {
            if (!tableMap.target_model) return;
            const model = this.availableModels.find(m => m.key === tableMap.target_model);
            if (!model) return;

            // Auto-match columns by name
            tableMap.columns.forEach(colMap => {
                const match = model.fields.find(f => f.name === colMap.source);
                if (match) {
                    colMap.target = match.name;
                    // Auto-select struct_map for struct fields
                    if (match.is_struct && colMap._schema && colMap._schema.python_type === 'json') {
                        colMap.transform = 'struct_map';
                        if (!colMap.struct_config) {
                            colMap.struct_config = { field_map: {}, drop_unknown: false };
                        }
                    }
                } else {
                    colMap.target = '';
                }
            });

            // Re-run dependency analysis whenever a model is selected
            this.analyzeDeps();
        },

        async analyzeDeps() {
            if (!this.uploadResult) return;
            const tableModelMap = {};
            this.mappings.forEach(m => {
                if (m.enabled && m.target_model) {
                    tableModelMap[m.source_table] = m.target_model;
                }
            });
            if (Object.keys(tableModelMap).length === 0) {
                this.depsOrder = [];
                this.depsWarnings = [];
                return;
            }
            this.depsLoading = true;
            try {
                const res = await fetch('{{ admin_prefix }}/api/importer/analyze-deps', {
                    method: 'POST',
                    headers: { 'Content-Type': 'application/json' },
                    body: JSON.stringify({
                        upload_id: this.uploadResult.upload_id,
                        table_model_map: tableModelMap,
                    }),
                });
                const data = await res.json();
                this.depsOrder = data.order || [];
                this.depsWarnings = data.warnings || [];
            } catch (e) {
                console.error('Deps analysis error', e);
            } finally {
                this.depsLoading = false;
            }
        },

        getModelFields(modelKey) {
            if (!modelKey) return [];
            const model = this.availableModels.find(m => m.key === modelKey);
            return model ? model.fields : [];
        },

        getTargetField(modelKey, fieldName) {
            const fields = this.getModelFields(modelKey);
            return fields.find(f => f.name === fieldName) || null;
        },

        getDefaultInputType(modelKey, fieldName) {
            const field = this.getTargetField(modelKey, fieldName);
            if (!field) return 'text';
            // Choices always win
            if (field.choices && field.choices.length > 0) return 'choices';
            const t = (field.type || '').toLowerCase();
            if (t === 'boolean') return 'bool';
            if (t === 'datetime' || t === 'timestamp' || t === 'date') return 'datetime';
            if (t === 'integer' || t === 'biginteger' || t === 'smallinteger') return 'int';
            if (t === 'float' || t === 'numeric' || t === 'decimal') return 'float';
            // text, varchar, uuid, string, char, json, struct → free text or leave
            return 'text';
        },

        formatDefault(val) {
            if (val === null || val === undefined) return null;
            if (val === '__auto__') return 'auto';
            if (typeof val === 'string') return val.length > 20 ? val.substring(0, 20) + '…' : val;
            return String(val);
        },

        // ----------------------------------------------------------------
        // Step 4 — Preview
        // ----------------------------------------------------------------

        async runPreview() {
            this.step = 4;
            this.previewLoading = true;
            this.previewData = {};
            this.previewError = null;

            const enabledTables = this.mappings.filter(m => m.enabled && m.target_model);

            if (enabledTables.length === 0) {
                this.previewLoading = false;
                this.previewError = 'Nenhuma tabela habilitada. Ative o toggle de pelo menos uma tabela e selecione o model de destino antes de fazer o preview.';
                return;
            }

            for (const tableMap of enabledTables) {
                try {
                    const res = await fetch('{{ admin_prefix }}/api/importer/preview', {
                        method: 'POST',
                        headers: { 'Content-Type': 'application/json' },
                        body: JSON.stringify({
                            upload_id: this.uploadResult.upload_id,
                            source_table: tableMap.source_table,
                            columns: tableMap.columns
                                .filter(c => c.target)
                                .map(c => ({
                                    source: c.source,
                                    target: c.target,
                                    transform: c.transform,
                                    default: c.default,
                                    struct_config: c.struct_config || null,
                                    datetime_config: c.datetime_config || null,
                                })),
                        }),
                    });
                    if (res.status === 404 || res.status === 410) {
                        const err = await res.json();
                        this.previewError = (err.detail || 'Sessão expirada') + ' — Faça o upload novamente.';
                        this.previewLoading = false;
                        return;
                    }
                    const data = await res.json();
                    if (data.detail) {
                        this.previewData[tableMap.source_table] = { error: data.detail, rows: [] };
                    } else {
                        this.previewData[tableMap.source_table] = data;
                    }
                } catch (e) {
                    this.previewData[tableMap.source_table] = { error: e.message, rows: [] };
                }
            }

            this.previewLoading = false;
        },

        getPreviewColumns(tablePreview) {
            if (!tablePreview.rows || tablePreview.rows.length === 0) return [];
            return Object.keys(tablePreview.rows[0].data || {});
        },

        getMappingTarget(tableName) {
            const m = this.mappings.find(m => m.source_table === tableName);
            return m ? m.target_model : '?';
        },

        formatCellValue(val) {
            if (val === null || val === undefined) return 'NULL';
            if (typeof val === 'object') return JSON.stringify(val).substring(0, 60) + '…';
            const s = String(val);
            return s.length > 60 ? s.substring(0, 60) + '…' : s;
        },

        // ----------------------------------------------------------------
        // Step 5 — Execute
        // ----------------------------------------------------------------

        startExecution() {
            const enabledMappings = this.mappings.filter(m => m.enabled && m.target_model);
            this.totalTables = enabledMappings.length;
            this.completedTables = 0;
            this.totalInserted = 0;
            this.totalSkipped = 0;
            this.totalErrors = 0;
            this.overallProgress = 0;
            this.executionDone = false;
            this.dbErrorMessage = null;
            this.eventLog = [];
            this._report = null;

            // Init status per table
            this.executionStatus = {};
            enabledMappings.forEach(m => {
                this.executionStatus[m.source_table] = {
                    status: 'waiting',
                    target: m.target_model,
                    inserted: 0,
                    skipped: 0,
                    errors: 0,
                    row: 0,
                    total: this.uploadResult.row_counts[m.source_table] || 0,
                };
            });

            this._doExecute(enabledMappings);
        },

        async _doExecute(enabledMappings) {
            const body = {
                upload_id: this.uploadResult.upload_id,
                batch_size: this.executeConfig.batch_size,
                on_conflict: this.executeConfig.on_conflict,
                stop_on_error: this.executeConfig.stop_on_error,
                tables: enabledMappings.map(m => ({
                    source_table: m.source_table,
                    target_model: m.target_model,
                    enabled: true,
                    columns: m.columns
                        .filter(c => c.target)
                        .map(c => ({
                            source: c.source,
                            target: c.target,
                            transform: c.transform,
                            default: c.default,
                            struct_config: c.struct_config || null,
                            datetime_config: c.datetime_config || null,
                        })),
                })),
            };

            try {
                const res = await fetch('{{ admin_prefix }}/api/importer/execute', {
                    method: 'POST',
                    headers: { 'Content-Type': 'application/json' },
                    body: JSON.stringify(body),
                });

                if (!res.ok) {
                    const data = await res.json().catch(() => ({}));
                    const detail = data.detail || 'Erro fatal';
                    this._logEvent({ type: 'fatal', text: '✗ ' + detail });
                    // Session expired / not found → offer re-upload
                    if (res.status === 404 || res.status === 410 ||
                        detail.toLowerCase().includes('session') || detail.toLowerCase().includes('sessão')) {
                        this.dbErrorMessage = detail + ' O servidor pode ter reiniciado. Faça o upload do arquivo novamente — suas configurações de mapeamento serão preservadas.';
                    }
                    this.executionDone = true;
                    return;
                }

                const reader = res.body.getReader();
                const decoder = new TextDecoder();
                let buffer = '';

                while (true) {
                    const { done, value } = await reader.read();
                    if (done) break;

                    buffer += decoder.decode(value, { stream: true });
                    const lines = buffer.split('\n');
                    buffer = lines.pop();

                    for (const line of lines) {
                        if (line.startsWith('data: ')) {
                            try {
                                const event = JSON.parse(line.slice(6));
                                this._handleSSEEvent(event);
                            } catch (e) {
                                // ignore parse error
                            }
                        }
                    }
                }
            } catch (e) {
                this._logEvent({ type: 'fatal', text: '✗ Conexão perdida: ' + e.message });
                this.executionDone = true;
            }
        },

        _handleSSEEvent(event) {
            const table = event.table;
            const status = this.executionStatus;

            switch (event.type) {
                case 'start':
                    if (status[table]) {
                        status[table].status = 'running';
                        status[table].total = event.total || status[table].total;
                        status[table].target = event.target || status[table].target;
                    }
                    this._logEvent({
                        type: 'start',
                        text: `▶ ${table} → ${event.target} (${(event.total || 0).toLocaleString()} rows)`,
                    });
                    break;

                case 'progress':
                    if (status[table]) {
                        status[table].inserted = event.inserted || 0;
                        status[table].skipped = event.skipped || 0;
                        status[table].errors = event.errors || 0;
                        // SSE sends 'batch' not 'row'; derive processed count from totals
                        status[table].row = (event.inserted || 0) + (event.skipped || 0) + (event.errors || 0);
                    }
                    this._updateTotals();
                    break;

                case 'done':
                    if (status[table]) {
                        status[table].status = 'done';
                        status[table].inserted = event.inserted || 0;
                        status[table].skipped = event.skipped || 0;
                        status[table].errors = event.errors || 0;
                        // Fill bar to 100% on completion
                        status[table].row = status[table].total || (event.inserted || 0) + (event.skipped || 0) + (event.errors || 0);
                    }
                    this.completedTables++;
                    this._updateTotals();
                    // Se todos os registros falharam e ainda não temos msg de erro,
                    // sinaliza que algo está errado com o mapeamento/tipos
                    if ((event.errors || 0) > 0 && (event.inserted || 0) === 0 && !this.dbErrorMessage) {
                        this.dbErrorMessage = `Todos os ${event.errors} registros da tabela '${table}' falharam na inserção. Verifique as transformações dos campos, especialmente campos BOOLEAN, DATETIME e UUID.`;
                    }
                    this._logEvent({
                        type: 'done',
                        text: `✔ ${table}: ${(event.inserted || 0).toLocaleString()} inseridos, ${event.skipped || 0} ignorados, ${event.errors || 0} erros`,
                    });
                    break;

                case 'db_error':
                    if (!this.dbErrorMessage) {
                        this.dbErrorMessage = event.message;
                    }
                    this._logEvent({
                        type: 'error',
                        text: `✗ DB [${table}] batch ${event.batch || '?'} (${event.count} erros): ${event.message}`,
                    });
                    break;

                case 'error':
                    if (status[table]) {
                        status[table].status = 'error';
                        status[table].errors = (status[table].errors || 0) + 1;
                    }
                    this._logEvent({
                        type: 'error',
                        text: `✗ [${table}] row ${event.row || '?'}: ${event.message}`,
                    });
                    break;

                case 'fatal':
                    if (table && status[table]) {
                        status[table].status = 'error';
                    }
                    this._logEvent({
                        type: 'fatal',
                        text: `✗✗ FATAL ${table || ''}: ${event.message}`,
                    });
                    break;

                case 'complete':
                    this.totalInserted = event.total_inserted || 0;
                    this.totalSkipped = event.total_skipped || 0;
                    this.totalErrors = event.total_errors || 0;
                    this.overallProgress = 100;
                    this.executionDone = true;
                    this._report = event;
                    this._logEvent({
                        type: 'complete',
                        text: `✔✔ COMPLETO: ${(event.total_inserted || 0).toLocaleString()} inseridos, ${event.total_skipped || 0} ignorados, ${event.total_errors || 0} erros`,
                    });
                    window.dispatchEvent(new CustomEvent('toast', {
                        detail: {
                            type: event.total_errors > 0 ? 'warning' : 'success',
                            title: 'Importação concluída',
                            message: `${(event.total_inserted || 0).toLocaleString()} registros importados`,
                        }
                    }));
                    break;
            }

            // Scroll log to bottom
            this.$nextTick(() => {
                const logEl = this.$refs.logContainer;
                if (logEl) logEl.scrollTop = logEl.scrollHeight;
            });
        },

        _updateTotals() {
            let ins = 0, skip = 0, errs = 0, totalProgress = 0, totalRows = 0;
            Object.values(this.executionStatus).forEach(s => {
                ins += s.inserted || 0;
                skip += s.skipped || 0;
                errs += s.errors || 0;
                if (s.total > 0) {
                    totalProgress += Math.min(s.row || 0, s.total);
                    totalRows += s.total;
                }
            });
            this.totalInserted = ins;
            this.totalSkipped = skip;
            this.totalErrors = errs;
            this.overallProgress = totalRows > 0 ? (totalProgress / totalRows) * 100 : 0;
        },

        _logEvent(entry) {
            this.eventLog.push(entry);
            if (this.eventLog.length > 500) {
                this.eventLog = this.eventLog.slice(-400);
            }
        },

        cancelExecution() {
            if (this._eventSource) {
                this._eventSource.close();
                this._eventSource = null;
            }
            this.executionDone = true;
            this._logEvent({ type: 'info', text: '⊘ Cancelado pelo usuário' });
        },

        downloadReport() {
            if (!this._report) return;
            const data = {
                filename: this.uploadResult.filename,
                executed_at: new Date().toISOString(),
                summary: this._report.summary,
                total_inserted: this._report.total_inserted,
                total_skipped: this._report.total_skipped,
                total_errors: this._report.total_errors,
            };
            const blob = new Blob([JSON.stringify(data, null, 2)], { type: 'application/json' });
            const url = URL.createObjectURL(blob);
            const a = document.createElement('a');
            a.href = url;
            a.download = 'import-report-' + Date.now() + '.json';
            a.click();
            URL.revokeObjectURL(url);
        },

        // ----------------------------------------------------------------
        // Reset
        // ----------------------------------------------------------------

        async resetWizard() {
            if (this.uploadResult && this.uploadResult.upload_id) {
                try {
                    await fetch(
                        '{{ admin_prefix }}/api/importer/cancel/' + this.uploadResult.upload_id,
                        { method: 'DELETE' }
                    );
                } catch (e) {}
            }
            this.step = 1;
            this.selectedFile = null;
            this.uploading = false;
            this.uploadError = null;
            this.uploadResult = null;
            this.mappings = [];
            this.previewData = {};
            this.executionStatus = {};
            this.eventLog = [];
            this.executionDone = false;
            this.totalInserted = 0;
            this.totalSkipped = 0;
            this.totalErrors = 0;
            this.overallProgress = 0;
            this.completedTables = 0;
            this._report = null;
        },

        // ----------------------------------------------------------------
        // Utilities
        // ----------------------------------------------------------------

        formatBytes(bytes) {
            if (!bytes) return '0 B';
            if (bytes < 1024) return bytes + ' B';
            if (bytes < 1024 * 1024) return (bytes / 1024).toFixed(1) + ' KB';
            return (bytes / (1024 * 1024)).toFixed(2) + ' MB';
        },
    };
}
</script>
{% endblock %}