<div class="space-y-6">
    <div>
        <h1 class="text-2xl font-bold text-gray-900">Import/Export XML</h1>
        <p class="text-sm text-gray-500 mt-1">Converti dump SQL legacy in XML, importa XML nell'app ed esporta i dati correnti in XML.</p>
    </div>

    <div class="bg-white rounded-xl shadow-sm border border-gray-200 p-6 space-y-4">
        <h2 class="text-lg font-semibold text-gray-900">Conversione dump SQL legacy</h2>
        <p class="text-xs text-gray-500">Carica il file SQL (es. dump-termanager-202604071526.sql) e genera un XML compatibile con l'import dell'app.</p>

        <div>
            <input wire:model="sqlDump" type="file" accept=".sql,.txt,.SQL,.TXT" class="block w-full text-sm text-gray-600 file:mr-3 file:py-2 file:px-4 file:rounded-lg file:border-0 file:text-sm file:font-medium file:bg-indigo-50 file:text-indigo-700 hover:file:bg-indigo-100">
            @error('sqlDump') <p class="text-red-500 text-xs mt-1">{{ $message }}</p> @enderror
        </div>

        <div class="flex gap-2">
            <button
                wire:click="convertLegacySqlToXml"
                type="button"
                class="px-4 py-2 text-sm font-medium text-white bg-indigo-600 rounded-lg hover:bg-indigo-700 transition border border-indigo-700"
                style="display:inline-flex;align-items:center;justify-content:center;min-height:40px;background:#4f46e5;color:#fff;border:1px solid #3730a3;border-radius:10px;padding:10px 14px;"
            >
                Converti in XML
            </button>
        </div>
    </div>

    <div class="bg-white rounded-xl shadow-sm border border-gray-200 p-6 space-y-4">
        <h2 class="text-lg font-semibold text-gray-900">Import XML nell'app</h2>
        <p class="text-xs text-gray-500">Importa un XML nel formato TerManager2. L'import sostituisce i dati gestionali (zone, tipologie, proclamatori, territori, anni, campagne, assegnazioni e impostazioni).</p>

        <div wire:loading wire:target="importXmlIntoApp" style="padding:10px 12px;border-radius:10px;background:#fffbeb;border:1px solid #f59e0b;color:#92400e;font-size:13px;">
            Importazione in corso... attendi il completamento.
        </div>

        <div>
            <input wire:model="xmlImport" type="file" accept=".xml,.txt,.XML,.TXT" class="block w-full text-sm text-gray-600 file:mr-3 file:py-2 file:px-4 file:rounded-lg file:border-0 file:text-sm file:font-medium file:bg-indigo-50 file:text-indigo-700 hover:file:bg-indigo-100">
            @error('xmlImport') <p class="text-red-500 text-xs mt-1">{{ $message }}</p> @enderror
        </div>

        <div class="flex gap-2">
            <button
                wire:click="importXmlIntoApp"
                type="button"
                onclick="if(!confirm('Confermi l\'import XML? I dati gestionali correnti verranno sostituiti.')) event.stopImmediatePropagation();"
                class="px-4 py-2 text-sm font-medium text-white bg-amber-600 rounded-lg hover:bg-amber-700 transition border border-amber-700"
                style="display:inline-flex;align-items:center;justify-content:center;min-height:40px;background:#d97706;color:#fff;border:1px solid #92400e;border-radius:10px;padding:10px 14px;"
            >
                Importa XML
            </button>
        </div>
    </div>

    @if(!empty($importStats))
        <div class="bg-white rounded-xl shadow-sm border border-gray-200 p-6 space-y-3">
            <h2 class="text-lg font-semibold text-gray-900">Log importazione</h2>
            <div class="text-sm text-gray-700" style="display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:8px;">
                <div>Zone importate: <strong>{{ $importStats['zone_importate'] ?? 0 }}</strong></div>
                <div>Tipologie importate: <strong>{{ $importStats['tipologie_importate'] ?? 0 }}</strong></div>
                <div>Proclamatori importati: <strong>{{ $importStats['proclamatori_importati'] ?? 0 }}</strong></div>
                <div>Territori importati: <strong>{{ $importStats['territori_importati'] ?? 0 }}</strong></div>
                <div>Anni importati: <strong>{{ $importStats['anni_importati'] ?? 0 }}</strong></div>
                <div>Campagne importate: <strong>{{ $importStats['campagne_importate'] ?? 0 }}</strong></div>
                <div>Assegnazioni importate: <strong>{{ $importStats['assegnazioni_importate'] ?? 0 }}</strong></div>
                <div>Territori duplicati saltati: <strong>{{ $importStats['duplicate_territori'] ?? 0 }}</strong></div>
                <div>Assegnazioni saltate: <strong>{{ $importStats['assegnazioni_saltate'] ?? 0 }}</strong></div>
            </div>

            <div class="mt-3">
                <button
                    wire:click="downloadImportLogPdf"
                    type="button"
                    style="display:inline-flex;align-items:center;gap:6px;background:#1d4ed8;color:#fff;border:1px solid #1e3a8a;border-radius:8px;padding:8px 14px;font-size:13px;cursor:pointer;"
                >
                    <svg style="width:15px;height:15px;" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 10v6m0 0l-3-3m3 3l3-3M3 17v3a1 1 0 001 1h16a1 1 0 001-1v-3"/></svg>
                    Scarica log PDF
                </button>
            </div>

            @if(!empty($importIssues))
                <div class="mt-2" style="max-height:260px;overflow:auto;border:1px solid #e5e7eb;border-radius:10px;">
                    <table style="width:100%;border-collapse:collapse;font-size:13px;">
                        <thead style="background:#f9fafb;position:sticky;top:0;">
                            <tr>
                                <th style="text-align:left;padding:8px;border-bottom:1px solid #e5e7eb;">Entità</th>
                                <th style="text-align:left;padding:8px;border-bottom:1px solid #e5e7eb;">Legacy ID</th>
                                <th style="text-align:left;padding:8px;border-bottom:1px solid #e5e7eb;">Motivo</th>
                            </tr>
                        </thead>
                        <tbody>
                            @foreach($importIssues as $issue)
                                <tr>
                                    <td style="padding:8px;border-bottom:1px solid #f3f4f6;">{{ $issue['entity'] }}</td>
                                    <td style="padding:8px;border-bottom:1px solid #f3f4f6;">{{ $issue['legacy_id'] }}</td>
                                    <td style="padding:8px;border-bottom:1px solid #f3f4f6;">{{ $issue['reason'] }}</td>
                                </tr>
                            @endforeach
                        </tbody>
                    </table>
                </div>
            @endif
        </div>
    @endif

    <div class="bg-white rounded-xl shadow-sm border border-gray-200 p-6 space-y-4">
        <h2 class="text-lg font-semibold text-gray-900">Export XML</h2>
        <p class="text-xs text-gray-500">Esporta i dati correnti dell'app in XML.</p>

        <div class="flex gap-2">
            <button
                wire:click="exportCurrentAsXml"
                type="button"
                class="px-4 py-2 text-sm font-medium text-white bg-emerald-600 rounded-lg hover:bg-emerald-700 transition border border-emerald-700"
                style="display:inline-flex;align-items:center;justify-content:center;min-height:40px;background:#059669;color:#fff;border:1px solid #065f46;border-radius:10px;padding:10px 14px;"
            >
                Esporta XML
            </button>
        </div>
    </div>

</div>
