@php
    use App\Models\TerritorioMappa;

    $stato = $mappa?->stato();
    $motivo = $mappa?->motivoNonPubblicabile();
    $tagStato = [
        TerritorioMappa::STATO_BOZZA => 'tm-tag-attesa',
        TerritorioMappa::STATO_MODIFICATA => 'tm-tag-attesa',
        TerritorioMappa::STATO_PUBBLICATA => 'tm-tag-ok',
    ];
@endphp
{{--
    Editor a tre zone: elenco (a sinistra), mappa, pannello della piantina (a
    destra; sotto i 720px sale dal basso). Elenco e mappa li disegna
    resources/js/piantine.js e stanno in wire:ignore: Livewire ridisegna solo
    testata e pannello. Elenco e pannello si aprono e chiudono in Alpine, senza
    giri sul server.
--}}
<div class="tm-editor"
     x-data="{ elenco: window.matchMedia('(min-width: 1100px)').matches, pannello: true }"
     @piantina-selezionata.window="if ($event.detail.mappaId) pannello = true">
    @vite('resources/js/piantine.js')

    {{-- ── Testata ───────────────────────────────────────────────────────── --}}
    <header class="tm-editor-barra">
        <a href="{{ route('piantine.index') }}" class="tm-editor-torna">
            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" aria-hidden="true"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7"/></svg>
            <span>Piantine</span>
        </a>

        <span class="tm-editor-sep" aria-hidden="true"></span>

        <x-btn variante="ghost" dimensione="sm" icona @click="elenco = ! elenco" ::aria-pressed="elenco"
               aria-label="Mostra o nascondi l'elenco delle piantine" title="Elenco delle piantine">
            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" aria-hidden="true"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16"/></svg>
        </x-btn>

        <div class="tm-editor-titolo">
            <h1>{{ $mappa?->etichetta() ?? 'Editor delle piantine' }}</h1>
            @if($mappa)
                <span class="tm-tag {{ $tagStato[$stato] }}">{{ $mappa->statoEtichetta() }}</span>
                <span class="tm-editor-salvato" aria-live="polite">
                    <span wire:loading.delay.shortest>Salvataggio…</span>
                    <span wire:loading.remove>
                        @if($salvatoAlle) Salvato alle {{ $salvatoAlle }} @endif
                    </span>
                </span>
            @endif
        </div>

        <div class="tm-editor-azioni">
            <x-btn variante="secondary" dimensione="sm" wire:click="nuova">
                <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" aria-hidden="true"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4"/></svg>
                <span>Nuova piantina</span>
            </x-btn>

            @if($mappa)
                <x-btn variante="ghost" dimensione="sm" class="tm-solo-stretto" @click="pannello = ! pannello">
                    Scheda
                </x-btn>

                <x-btn variante="primary" dimensione="sm" wire:click="pubblica"
                       :disabled="$motivo !== null || $stato === TerritorioMappa::STATO_PUBBLICATA"
                       :title="$motivo ?? ($stato === TerritorioMappa::STATO_PUBBLICATA ? 'Il PDF del territorio corrisponde già a questa piantina.' : 'Anteprima del PDF e pubblicazione')">
                    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" aria-hidden="true"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-8l-4-4m0 0L8 8m4-4v12"/></svg>
                    <span>Pubblica</span>
                </x-btn>
            @endif
        </div>
    </header>

    <div class="tm-editor-corpo" :class="{ 'con-elenco': elenco, 'con-pannello': pannello }">
        {{-- ── Elenco ────────────────────────────────────────────────────── --}}
        <aside class="tm-editor-elenco" x-show="elenco" x-cloak aria-label="Elenco delle piantine" wire:ignore>
            <div class="tm-editor-elenco-cerca">
                <input type="search" id="piantine-cerca" placeholder="Cerca per numero o nome" autocomplete="off"
                       aria-label="Cerca una piantina">
            </div>
            <ul id="piantine-elenco" class="tm-editor-elenco-righe"></ul>
        </aside>

        {{-- ── Mappa ─────────────────────────────────────────────────────── --}}
        <div class="tm-editor-mappa">
            <div wire:ignore id="piantine-map" class="tm-mappa"></div>
            <div wire:ignore id="piantine-strumenti" class="tm-strumenti" role="toolbar" aria-label="Strumenti di disegno"></div>

            @unless($areaCaricata)
                <p class="tm-editor-nota">
                    Nessuna area città caricata: la mappa parte senza perimetro di riferimento.
                    Il KML si carica dalla <a href="{{ route('piantine.index') }}">pagina di gestione</a>.
                </p>
            @endunless
        </div>

        {{-- ── Pannello della piantina ───────────────────────────────────── --}}
        <aside class="tm-editor-pannello" x-show="pannello" x-cloak aria-label="La piantina aperta">
            <div class="tm-editor-pannello-testata">
                <h2>{{ $mappa ? 'La piantina' : 'Come si comincia' }}</h2>
                <button type="button" @click="pannello = false" class="tm-editor-chiudi" aria-label="Chiudi il pannello">&times;</button>
            </div>

            <div class="tm-editor-pannello-corpo">
                @if(! $mappa)
                    <ol class="tm-passi">
                        <li>Apri una piantina dall'elenco o cliccandola sulla mappa,</li>
                        <li>oppure premi <strong>Nuova piantina</strong> e traccia il confine punto per punto.</li>
                        <li>Collega la piantina a un territorio e controlla i dati.</li>
                        <li>Premi <strong>Pubblica</strong>: vedi il PDF e lo confermi.</li>
                    </ol>
                    <p class="tm-editor-aiuto">
                        Tutto quello che fai qui si salva da solo come bozza. Il PDF del territorio cambia
                        solo quando pubblichi.
                    </p>
                @else
                    {{-- ── Pubblicazione ─────────────────────────────────── --}}
                    <section class="tm-gruppo tm-stato-piantina">
                        @if($stato === TerritorioMappa::STATO_BOZZA)
                            <p>Mai pubblicata: il territorio non ha ancora il PDF di questa piantina.</p>
                        @elseif($stato === TerritorioMappa::STATO_MODIFICATA)
                            <p>
                                Il PDF in uso è quello pubblicato il {{ $mappa->pubblicata_at->format('d/m/Y') }}.
                                Le modifiche fatte da allora non sono ancora nel PDF.
                            </p>
                        @else
                            <p>Il PDF del territorio corrisponde a questa piantina, pubblicata il {{ $mappa->pubblicata_at->format('d/m/Y') }}.</p>
                        @endif

                        @if($motivo)
                            <p class="tm-campo-aiuto tm-campo-aiuto-attesa">Per pubblicare: {{ lcfirst($motivo) }}</p>
                        @endif

                        <div class="tm-azioni-riga">
                            @if($mappa->collegata() && $mappa->territorio->pdf_path)
                                <a href="{{ $mappa->territorio->pdfUrl() }}" target="_blank" rel="noopener" class="tm-collegamento">PDF in uso</a>
                            @endif
                            @if($mappa->bozzaScartabile())
                                <x-btn variante="ghost" dimensione="sm" wire:click="scartaModifiche"
                                       wire:confirm="Riportare il confine a quello pubblicato? Il disegno attuale va perso.">
                                    Ripristina il confine pubblicato
                                </x-btn>
                            @endif
                        </div>
                    </section>

                    {{-- ── Territorio ────────────────────────────────────── --}}
                    <fieldset class="tm-gruppo">
                        <legend>Territorio</legend>

                        <div class="tm-campo">
                            <label for="territorioScelto">Collegata a</label>
                            <select id="territorioScelto" wire:model.live="territorioScelto">
                                <option value="">— nessun territorio —</option>
                                <option value="nuovo">+ Crea un territorio nuovo</option>
                                @foreach($territori as $territorio)
                                    <option value="{{ $territorio->id }}">
                                        Territorio {{ $territorio->numero }}@if($territorio->trashed()) (nel cestino)@elseif(! $territorio->attivo) (disattivato)@endif
                                    </option>
                                @endforeach
                            </select>
                            @error('territorioScelto') <p class="tm-campo-errore">{{ $message }}</p> @enderror
                            @if($mappa->territorioNelCestino())
                                <p class="tm-campo-aiuto tm-campo-aiuto-attesa">
                                    Il territorio è nel cestino: il collegamento resta, ma per pubblicare va ripristinato.
                                </p>
                            @endif
                        </div>

                        @if($territorioScelto !== '')
                            @if($territorioScelto === 'nuovo')
                                <p class="tm-campo-aiuto">Compila i dati e premi <strong>Crea territorio</strong>.</p>
                            @else
                                <p class="tm-campo-aiuto">
                                    Questi sono i dati del territorio in tutto il gestionale: le modifiche valgono
                                    subito. Nel PDF entrano alla prossima pubblicazione.
                                </p>
                            @endif

                            @php($modello = $territorioScelto === 'nuovo' ? 'wire:model' : 'wire:model.blur')

                            <div class="tm-campo">
                                <label for="numero">Numero</label>
                                <input type="text" id="numero" {{ $modello }}="numero" autocomplete="off" maxlength="20" placeholder="Es. 42">
                                @error('numero') <p class="tm-campo-errore">{{ $message }}</p> @enderror
                            </div>

                            <div class="tm-campo" x-data="{ crea: false }">
                                <label for="zonaId">Zona <span class="tm-campo-nota">stampata come «Località»</span></label>
                                <select id="zonaId" {{ $territorioScelto === 'nuovo' ? 'wire:model' : 'wire:model.live' }}="zonaId">
                                    <option value="">— nessuna —</option>
                                    @foreach($zone as $zona)
                                        <option value="{{ $zona->id }}">{{ $zona->nome }}</option>
                                    @endforeach
                                </select>
                                @error('zonaId') <p class="tm-campo-errore">{{ $message }}</p> @enderror
                                <button type="button" class="tm-collegamento tm-collegamento-piccolo" @click="crea = ! crea" x-show="! crea">+ Zona che non c'è ancora</button>
                                <div class="tm-campo-riga tm-campo-crea" x-show="crea" x-cloak>
                                    <input type="text" wire:model="nuovaZona" autocomplete="off" placeholder="Nome della nuova zona"
                                           aria-label="Nome della nuova zona" wire:keydown.enter.prevent="creaZona">
                                    <x-btn variante="secondary" dimensione="sm" wire:click="creaZona">Crea</x-btn>
                                </div>
                                @error('nuovaZona') <p class="tm-campo-errore">{{ $message }}</p> @enderror
                            </div>

                            <div class="tm-campo" x-data="{ crea: false }">
                                <label for="tipologiaId">Tipologia</label>
                                <select id="tipologiaId" {{ $territorioScelto === 'nuovo' ? 'wire:model' : 'wire:model.live' }}="tipologiaId">
                                    <option value="">— nessuna —</option>
                                    @foreach($tipologie as $tipologia)
                                        <option value="{{ $tipologia->id }}">{{ $tipologia->nome }}</option>
                                    @endforeach
                                </select>
                                @error('tipologiaId') <p class="tm-campo-errore">{{ $message }}</p> @enderror
                                <button type="button" class="tm-collegamento tm-collegamento-piccolo" @click="crea = ! crea" x-show="! crea">+ Tipologia che non c'è ancora</button>
                                <div class="tm-campo-riga tm-campo-crea" x-show="crea" x-cloak>
                                    <input type="text" wire:model="nuovaTipologia" autocomplete="off" placeholder="Nome della nuova tipologia"
                                           aria-label="Nome della nuova tipologia" wire:keydown.enter.prevent="creaTipologia">
                                    <x-btn variante="secondary" dimensione="sm" wire:click="creaTipologia">Crea</x-btn>
                                </div>
                                @error('nuovaTipologia') <p class="tm-campo-errore">{{ $message }}</p> @enderror
                            </div>

                            <div class="tm-campo">
                                <label for="confini">Confini</label>
                                <textarea id="confini" {{ $modello }}="confini" rows="6"
                                          placeholder="Nord: …&#10;Est: …&#10;Sud: …&#10;Ovest: …"></textarea>
                                @error('confini') <p class="tm-campo-errore">{{ $message }}</p> @enderror
                                <p class="tm-campo-aiuto">Stampati sulla prima pagina del PDF; il testo si adatta da solo allo spazio.</p>
                            </div>

                            @if($territorioScelto === 'nuovo')
                                <x-btn variante="primary" dimensione="sm" wire:click="creaTerritorio"
                                       wire:loading.attr="disabled" wire:target="creaTerritorio">
                                    Crea territorio
                                </x-btn>
                            @endif
                        @endif
                    </fieldset>

                    {{-- ── Nome interno, solo finché è scollegata ───────── --}}
                    @if(! $mappa->territorio)
                        <fieldset class="tm-gruppo">
                            <legend>Nome interno</legend>
                            <div class="tm-campo">
                                <label for="nome" class="tm-solo-lettori">Nome interno</label>
                                <input type="text" id="nome" wire:model.blur="nome" autocomplete="off" maxlength="120"
                                       placeholder="Es. Zona porto — lato nord">
                                <p class="tm-campo-aiuto">Serve a ritrovarla in elenco finché non ha un territorio. Non viene stampato.</p>
                            </div>
                        </fieldset>
                    @endif

                    <div class="tm-editor-pannello-piede">
                        <x-btn variante="danger" tono="tenue" dimensione="sm" wire:click="elimina"
                               wire:confirm="Eliminare {{ $mappa->etichetta() }}? Il disegno va perso; il territorio e il suo PDF restano com'erano.">
                            Elimina piantina
                        </x-btn>
                    </div>
                @endif
            </div>
        </aside>
    </div>

    <livewire:piantine.pubblicazione />
</div>