@php
    $selectedLabel = data_get($stabiliOptions ?? [], data_get($preview, 'stabile_code', ''), data_get($preview, 'stabile_code', ''));
    $mesi = [1 => 'Gen', 2 => 'Feb', 3 => 'Mar', 4 => 'Apr', 5 => 'Mag', 6 => 'Giu', 7 => 'Lug', 8 => 'Ago', 9 => 'Set', 10 => 'Ott', 11 => 'Nov', 12 => 'Dic'];
    $selectedYears = array_values(array_filter(array_map('strval', (array) data_get($data ?? [], 'align_years_selected', []))));
    $selectedOpenYears = array_values(array_filter(array_map('strval', (array) data_get($data ?? [], 'align_open_years_selected', []))));
    $latestYear = $selectedYears[0] ?? data_get($data ?? [], 'anno', null);
@endphp

<div class="space-y-4">
    <div class="rounded-xl border border-emerald-200 bg-emerald-50 p-4 text-sm text-emerald-900">
        Se importi `unità`, `soggetti` o `diritti`, la pagina ora lancia anche il re-sync di anagrafiche, ruoli rubrica e bonifica recapiti/contatti collegati allo stabile selezionato.
    </div>

    <div class="rounded-xl border border-sky-200 bg-sky-50 p-4 text-sm text-sky-900">
        Flusso consigliato: 1) carica gli anni dal legacy, 2) lascia aperta la gestione piu recente, 3) seleziona solo le gestioni da importare andando a ritroso, 4) usa `Import + allineamento`. In questo modo limiti i danni quando il legacy ha spostato i `cod_cond` tra una gestione e l altra.
    </div>

    <div class="rounded-xl border border-slate-200 bg-white p-4">
        <div class="flex flex-wrap items-start justify-between gap-3 border-b pb-3 border-slate-200">
            <div>
                <div class="text-sm font-semibold text-slate-900">Azioni operative</div>
                <div class="mt-1 text-xs text-slate-600">Strumenti per la gestione e sincronizzazione dei dati dello stabile.</div>
            </div>
            <div class="text-xs text-slate-600">Stabile attuale: <span class="font-semibold text-slate-900 bg-slate-100 px-2 py-1 rounded">{{ $selectedLabel !== '' ? $selectedLabel : 'nessuno' }}</span></div>
        </div>

        <div class="mt-4 grid grid-cols-1 gap-4 md:grid-cols-4">
            <!-- Col 1: Preparazione -->
            <div class="space-y-2 rounded-xl border border-slate-100 bg-slate-50/50 p-3">
                <div class="text-xs font-bold uppercase tracking-wider text-slate-600">1. Preparazione</div>
                <div class="flex flex-col gap-2">
                    <x-filament::button type="button" size="xs" color="gray" icon="heroicon-m-arrow-path" wire:click="loadStabili" class="justify-start">Carica elenco stabili</x-filament::button>
                    <x-filament::button type="button" size="xs" color="gray" icon="heroicon-m-calendar" wire:click="caricaAnniDaGenerale" :disabled="empty($stabiliOptions) || blank(data_get($data ?? [], 'stabile_code'))" class="justify-start">Carica anni</x-filament::button>
                    <x-filament::button type="button" size="xs" color="gray" icon="heroicon-m-cog-6-tooth" wire:click="caricaSetupDaArchivio" :disabled="empty($stabiliOptions) || blank(data_get($data ?? [], 'stabile_code'))" class="justify-start">Carica setup inline</x-filament::button>
                    <x-filament::button type="button" size="xs" color="success" icon="heroicon-m-folder-plus" wire:click="creaStabileDaMdb" :disabled="empty($stabiliOptions) || blank(data_get($data ?? [], 'stabile_code'))" class="justify-start">Crea / apri stabile</x-filament::button>
                </div>
            </div>

            <!-- Col 2: Import Principale -->
            <div class="space-y-2 rounded-xl border border-primary-100 bg-primary-50/10 p-3 flex flex-col justify-between">
                <div>
                    <div class="text-xs font-bold uppercase tracking-wider text-primary-700">2. Flusso Consigliato</div>
                    <div class="text-[10px] text-slate-500 mt-1">Importa tutti i dati dello stabile ed esegue automaticamente la riconciliazione e la quadratura contabile.</div>
                </div>
                <x-filament::button type="button" size="md" color="primary" icon="heroicon-m-play-circle" wire:click="eseguiImportAllineamentoCompleto" :disabled="empty($stabiliOptions) || blank(data_get($data ?? [], 'stabile_code'))" class="w-full mt-2">
                    Import + allineamento completo
                </x-filament::button>
            </div>

            <!-- Col 3: Sincronizzazione & Utility -->
            <div class="space-y-2 rounded-xl border border-slate-100 bg-slate-50/50 p-3">
                <div class="text-xs font-bold uppercase tracking-wider text-slate-600">3. Utility & Sincronizzazioni</div>
                <div class="flex flex-col gap-2">
                    <x-filament::button type="button" size="xs" color="warning" icon="heroicon-m-arrow-path-rounded-square" wire:click="risincronizzaRelazioniImportate" :disabled="empty($stabiliOptions) || blank(data_get($data ?? [], 'stabile_code'))" class="justify-start">Risincronizza relazioni</x-filament::button>
                    <x-filament::button type="button" size="xs" color="info" icon="heroicon-m-users" wire:click="aggiornaAnagraficheDaCondomin" :disabled="empty($stabiliOptions) || blank(data_get($data ?? [], 'stabile_code'))" class="justify-start">Sync anagrafiche</x-filament::button>
                    <x-filament::button type="button" size="xs" color="info" icon="heroicon-m-user-group" wire:click="aggiornaFornitoriGescon" :disabled="blank(data_get($data ?? [], 'path_root'))" class="justify-start">Aggiorna fornitori</x-filament::button>
                    <x-filament::button type="button" size="xs" color="warning" icon="heroicon-m-tag" wire:click="refreshImportTagLegacyFornitoriGlobale" :disabled="blank(data_get($data ?? [], 'path_root'))" class="justify-start">Refresh TAG fornitori</x-filament::button>
                </div>
            </div>

            <!-- Col 4: Salvataggio inline -->
            <div class="space-y-2 rounded-xl border border-slate-100 bg-slate-50/50 p-3">
                <div class="text-xs font-bold uppercase tracking-wider text-slate-600">4. Salvataggio Setup</div>
                <div class="flex flex-col gap-2">
                    <x-filament::button type="button" size="xs" color="info" icon="heroicon-m-document-check" wire:click="salvaSetupStabileImportazione" :disabled="blank(data_get($data ?? [], 'stabile_code'))" class="justify-start">Salva stabile inline</x-filament::button>
                    <x-filament::button type="button" size="xs" color="warning" icon="heroicon-m-calendar-days" wire:click="salvaSetupGestioneImportazione" :disabled="blank(data_get($data ?? [], 'stabile_code'))" class="justify-start">Salva gestione inline</x-filament::button>
                </div>
            </div>
        </div>

        <div class="mt-4 grid gap-3 md:grid-cols-3">
            <div class="rounded-lg border border-slate-200 bg-slate-50 p-3">
                <div class="text-[11px] font-semibold uppercase tracking-wide text-slate-500">Ultima gestione di partenza</div>
                <div class="mt-1 text-sm font-semibold text-slate-900">{{ $latestYear ?: 'non selezionata' }}</div>
            </div>
            <div class="rounded-lg border border-slate-200 bg-slate-50 p-3">
                <div class="text-[11px] font-semibold uppercase tracking-wide text-slate-500">Gestioni da caricare</div>
                <div class="mt-1 text-sm text-slate-900">{{ $selectedYears !== [] ? implode(' -> ', $selectedYears) : 'nessuna selezione' }}</div>
            </div>
            <div class="rounded-lg border border-slate-200 bg-slate-50 p-3">
                <div class="text-[11px] font-semibold uppercase tracking-wide text-slate-500">Gestioni aperte</div>
                <div class="mt-1 text-sm text-slate-900">{{ $selectedOpenYears !== [] ? implode(', ', $selectedOpenYears) : 'nessuna' }}</div>
            </div>
        </div>
    </div>

    <div class="grid gap-4 xl:grid-cols-2">
        <div class="rounded-xl border border-slate-200 bg-white p-4">
            <div class="flex items-start justify-between gap-3">
                <div>
                    <div class="text-sm font-semibold text-slate-900">Stabile nella stessa blade</div>
                    <div class="mt-1 text-xs text-slate-600">Qui aggiorni o crei lo stabile senza aprire altre pagine e senza modal.</div>
                </div>
                <div class="text-xs text-slate-500">Codice: <span class="font-semibold text-slate-900">{{ data_get($data ?? [], 'stabile_code', '-') }}</span></div>
            </div>

            <div class="mt-4 grid gap-3 md:grid-cols-2">
                <label class="block">
                    <span class="text-xs font-medium text-slate-700">Denominazione</span>
                    <input type="text" wire:model.defer="data.stabile_denominazione" class="mt-1 w-full rounded-lg border-slate-300 text-sm shadow-sm focus:border-primary-500 focus:ring-primary-500">
                </label>
                <label class="block">
                    <span class="text-xs font-medium text-slate-700">Codice fiscale</span>
                    <input type="text" wire:model.defer="data.stabile_codice_fiscale" class="mt-1 w-full rounded-lg border-slate-300 text-sm shadow-sm focus:border-primary-500 focus:ring-primary-500">
                </label>
                <label class="block md:col-span-2">
                    <span class="text-xs font-medium text-slate-700">Indirizzo</span>
                    <input type="text" wire:model.defer="data.stabile_indirizzo" class="mt-1 w-full rounded-lg border-slate-300 text-sm shadow-sm focus:border-primary-500 focus:ring-primary-500">
                </label>
                <label class="block">
                    <span class="text-xs font-medium text-slate-700">CAP</span>
                    <input type="text" wire:model.defer="data.stabile_cap" class="mt-1 w-full rounded-lg border-slate-300 text-sm shadow-sm focus:border-primary-500 focus:ring-primary-500">
                </label>
                <label class="block">
                    <span class="text-xs font-medium text-slate-700">Città</span>
                    <input type="text" wire:model.defer="data.stabile_citta" class="mt-1 w-full rounded-lg border-slate-300 text-sm shadow-sm focus:border-primary-500 focus:ring-primary-500">
                </label>
                <label class="block">
                    <span class="text-xs font-medium text-slate-700">Provincia</span>
                    <input type="text" wire:model.defer="data.stabile_provincia" class="mt-1 w-full rounded-lg border-slate-300 text-sm shadow-sm focus:border-primary-500 focus:ring-primary-500">
                </label>
                <label class="block">
                    <span class="text-xs font-medium text-slate-700">Banca principale</span>
                    <input type="text" wire:model.defer="data.stabile_banca_principale" class="mt-1 w-full rounded-lg border-slate-300 text-sm shadow-sm focus:border-primary-500 focus:ring-primary-500">
                </label>
                <label class="block md:col-span-2">
                    <span class="text-xs font-medium text-slate-700">IBAN principale</span>
                    <input type="text" wire:model.defer="data.stabile_iban_principale" class="mt-1 w-full rounded-lg border-slate-300 text-sm shadow-sm focus:border-primary-500 focus:ring-primary-500">
                </label>
            </div>

            <div class="mt-3 rounded-lg bg-slate-50 p-3 text-xs text-slate-600">
                Al salvataggio la schermata mantiene una sola cassa `CON`, rimuove `CDL` e materializza il conto corrente principale in `dati_bancari` per i successivi import movimenti MPS.
            </div>
        </div>

        <div class="rounded-xl border border-slate-200 bg-white p-4">
            <div class="flex items-start justify-between gap-3">
                <div>
                    <div class="text-sm font-semibold text-slate-900">Prima gestione senza modal</div>
                    <div class="mt-1 text-xs text-slate-600">Valori coerenti con “Imposta mesi emissione rate” e replica sugli anni selezionati.</div>
                </div>
            </div>

            <div class="mt-4 grid gap-3 md:grid-cols-2">
                <label class="flex items-center gap-2 rounded-lg border border-slate-200 px-3 py-2 text-sm text-slate-700 md:col-span-2">
                    <input type="checkbox" wire:model.live="data.gestione_setup_enabled" class="rounded border-slate-300 text-primary-600 focus:ring-primary-500">
                    Applica il setup gestione dopo il salvataggio/import
                </label>
                <label class="block">
                    <span class="text-xs font-medium text-slate-700">Anno iniziale</span>
                    <input type="number" min="2000" max="2100" wire:model.defer="data.gestione_anno_iniziale" class="mt-1 w-full rounded-lg border-slate-300 text-sm shadow-sm focus:border-primary-500 focus:ring-primary-500">
                </label>
                <label class="flex items-center gap-2 rounded-lg border border-slate-200 px-3 py-2 text-sm text-slate-700">
                    <input type="checkbox" wire:model.live="data.gestione_replica_tutti_anni" class="rounded border-slate-300 text-primary-600 focus:ring-primary-500">
                    Replica sui medesimi anni gestiti
                </label>
                <label class="flex items-center gap-2 rounded-lg border border-slate-200 px-3 py-2 text-sm text-slate-700 md:col-span-2">
                    <input type="checkbox" wire:model.live="data.gestione_mostra_riscaldamento" class="rounded border-slate-300 text-primary-600 focus:ring-primary-500">
                    Gestire il riscaldamento per questo stabile
                </label>
            </div>

            <div class="mt-4 space-y-4">
                <div>
                    <div class="text-xs font-semibold uppercase tracking-wide text-slate-500">Mesi rate ordinaria</div>
                    <div class="mt-2 grid grid-cols-3 gap-2 md:grid-cols-4 xl:grid-cols-6">
                        @foreach ($mesi as $numero => $label)
                            <label class="flex items-center gap-2 rounded-lg border border-slate-200 px-3 py-2 text-sm text-slate-700">
                                <input type="checkbox" wire:model.live="data.gestione_mesi_ordinaria" value="{{ $numero }}" class="rounded border-slate-300 text-primary-600 focus:ring-primary-500">
                                {{ $label }}
                            </label>
                        @endforeach
                    </div>
                </div>

                @if (data_get($data ?? [], 'gestione_mostra_riscaldamento'))
                    <div>
                        <div class="text-xs font-semibold uppercase tracking-wide text-slate-500">Mesi rate riscaldamento</div>
                        <div class="mt-2 grid grid-cols-3 gap-2 md:grid-cols-4 xl:grid-cols-6">
                            @foreach ($mesi as $numero => $label)
                                <label class="flex items-center gap-2 rounded-lg border border-slate-200 px-3 py-2 text-sm text-slate-700">
                                    <input type="checkbox" wire:model.live="data.gestione_mesi_riscaldamento" value="{{ $numero }}" class="rounded border-slate-300 text-primary-600 focus:ring-primary-500">
                                    {{ $label }}
                                </label>
                            @endforeach
                        </div>
                    </div>
                @endif
            </div>
        </div>
    </div>

    <div class="grid gap-4 xl:grid-cols-3">
        <div class="rounded-xl border border-slate-200 bg-white p-4">
            <div class="text-sm font-semibold text-slate-900">1. Setup archivio</div>
            <div class="mt-2 text-xs text-slate-600">Carica elenco stabili, recupera gli anni dalla base generale e crea o riapri lo stabile locale prima dell'import vero e proprio.</div>
        </div>

        <div class="rounded-xl border border-slate-200 bg-white p-4">
            <div class="text-sm font-semibold text-slate-900">2. Import / aggiornamento</div>
            <div class="mt-2 text-xs text-slate-600">Usa Import + allineamento come flusso principale. Importa dati selezionati resta utile solo per slice mirate o recuperi puntuali.</div>
        </div>

        <div class="rounded-xl border border-slate-200 bg-white p-4">
            <div class="text-sm font-semibold text-slate-900">3. Re-sync relazioni</div>
            <div class="mt-2 text-xs text-slate-600">Serve quando i dati locali esistono già e vuoi riallineare rubrica, ruoli, recapiti e tag fornitori senza rilanciare l'intero import.</div>
        </div>
    </div>

    <div class="grid gap-4 xl:grid-cols-2">
        <div class="rounded-xl border border-slate-200 bg-white p-4">
            <div class="text-sm font-semibold text-slate-900">Comandi pronti</div>
            <div class="mt-3 space-y-3 text-xs text-slate-600">
                <div>
                    <div class="mb-1 font-semibold uppercase tracking-wide text-slate-500">Flusso principale</div>
                    <pre class="overflow-x-auto rounded-lg bg-slate-900 p-3 text-xs text-slate-100">{{ data_get($preview, 'commands.allineamento', 'Seleziona stabile e anni per generare il comando.') }}</pre>
                </div>
                <div>
                    <div class="mb-1 font-semibold uppercase tracking-wide text-slate-500">Fornitori</div>
                    <pre class="overflow-x-auto rounded-lg bg-slate-900 p-3 text-xs text-slate-100">{{ data_get($preview, 'commands.fornitori_sync', 'Seleziona amministratore e Fornitori.mdb per generare il comando.') }}</pre>
                </div>
            </div>
        </div>

        <div class="rounded-xl border border-slate-200 bg-white p-4">
            <div class="text-sm font-semibold text-slate-900">Relazioni e riallineamento</div>
            <div class="mt-3 space-y-3 text-xs text-slate-600">
                <div>
                    <div class="mb-1 font-semibold uppercase tracking-wide text-slate-500">Sync anagrafiche</div>
                    <pre class="overflow-x-auto rounded-lg bg-slate-900 p-3 text-xs text-slate-100">{{ data_get($preview, 'commands.anagrafiche_sync', 'Seleziona uno stabile per generare il comando.') }}</pre>
                </div>
                <div>
                    <div class="mb-1 font-semibold uppercase tracking-wide text-slate-500">Sync ruoli / repair contatti</div>
                    <pre class="overflow-x-auto rounded-lg bg-slate-900 p-3 text-xs text-slate-100">{{ data_get($preview, 'commands.ruoli_sync', 'Crea o apri prima lo stabile locale per ottenere lo stabile_id.') }}

{{ data_get($preview, 'commands.repair_contacts', 'Seleziona uno stabile per generare il comando.') }}</pre>
                </div>
            </div>
        </div>
    </div>

    <div class="rounded-xl border border-slate-200 bg-slate-50 p-4">
        <div class="text-sm font-semibold text-slate-900">Import modulare</div>
        <div class="mt-3 grid gap-3 xl:grid-cols-3">
            <pre class="overflow-x-auto rounded-lg bg-slate-900 p-3 text-xs text-slate-100">{{ data_get($preview, 'commands.unita', 'Serve stabile + anno legacy per generare il comando.') }}</pre>
            <pre class="overflow-x-auto rounded-lg bg-slate-900 p-3 text-xs text-slate-100">{{ data_get($preview, 'commands.soggetti', 'Serve stabile + anno legacy per generare il comando.') }}</pre>
            <pre class="overflow-x-auto rounded-lg bg-slate-900 p-3 text-xs text-slate-100">{{ data_get($preview, 'commands.diritti', 'Serve stabile + anno legacy per generare il comando.') }}</pre>
        </div>
    </div>
</div>