<!--
  Questo file fa parte di MyTown.
  MyTown è software libero: puoi ridistribuirlo e/o modificarlo secondo
  i termini della GNU Affero General Public License come pubblicata dalla
  Free Software Foundation, versione 3.
  Distribuito senza ALCUNA GARANZIA; vedi la GNU AGPL v3 per i dettagli.
  Copyright (C) Kondor Consulting & Services S.r.l.
  SPDX-License-Identifier: AGPL-3.0-or-later
-->
<ion-content class="cu-content">
  <ion-refresher slot="fixed" (ionRefresh)="load($event)">
    <ion-refresher-content></ion-refresher-content>
  </ion-refresher>

  <!-- Hero -->
  <div class="cu-hero">
    <div>
      <h1>Unità Immobiliari</h1>
      <p>{{ isCondomino ? 'Le tue unità nel condominio' : filtered.length + ' unità del condominio' }}</p>
    </div>
    @if (!isCondomino) {
      <div class="cu-mill" [class.ok]="millesimiOk">
        <span class="n">{{ millesimiTotali }}<small>/{{ MILLESIMI_TOTALI }}</small></span>
        <span class="l">millesimi</span>
      </div>
    }
  </div>

  <!-- Search (admin) -->
  @if (!isCondomino) {
    <div class="cu-search">
      <ion-icon name="search-outline"></ion-icon>
      <input type="text" placeholder="Cerca unità, condòmino…" [(ngModel)]="search" (input)="onSearch()" />
      @if (search) {
        <ion-icon name="close-circle" (click)="search = ''; onSearch()"></ion-icon>
      }
    </div>
  }

  <!-- Loading -->
  @if (loading) {
    <div class="cu-skel">
      @for (i of [1,2,3]; track i) {
        <div class="cu-skel-card"></div>
      }
    </div>
  }

  <!-- List -->
  @if (!loading) {
    <div class="cu-list">
      @for (u of filtered; track u) {
        <div class="cu-card">
          <div class="cu-card-head" [class.cu-editable]="canManage" (click)="modificaUnita(u)">
            <div class="cu-ic"><ion-icon [name]="typeIcon(u.unit_type)"></ion-icon></div>
            <div class="cu-titles">
              <h2>{{ typeLabel(u.unit_type) }}@if (u.unit_interno) {
                <span class="cu-int"> · int. {{ u.unit_interno }}</span>
              }</h2>
              <p class="cu-sub">
                @if (u.unit_scala) {
                  <span>Scala {{ u.unit_scala }}</span>
                }
                @if (u.unit_piano) {
                  <span>Piano {{ u.unit_piano }}</span>
                }
                @if (u.unit_descrizione) {
                  <span>{{ u.unit_descrizione }}</span>
                }
              </p>
            </div>
            <div class="cu-badge"><span class="n">{{ u.unit_millesimi || 0 }}</span><span class="l">‰</span></div>
          </div>
          @if (u.members_display) {
            <div class="cu-members">
              <ion-icon name="people-outline"></ion-icon>
              <span>{{ u.members_display }}</span>
            </div>
          }
          <div class="cu-ref">
            <label><ion-icon name="ribbon-outline"></ion-icon> Referente</label>
            <ion-select [(ngModel)]="u.referente_id" (ionChange)="cambiaReferente(u)" interface="popover" placeholder="Seleziona referente">
              @for (m of membersByUnit[u.unit_id] || []; track m) {
                <ion-select-option [value]="m.value">{{ m.label }}</ion-select-option>
              }
            </ion-select>
          </div>
        </div>
      }
      <!-- Empty -->
      @if (filtered.length === 0) {
        <div class="cu-empty">
          <ion-icon name="home-outline"></ion-icon>
          <h3>Nessuna unità</h3>
          <p>{{ isCondomino ? 'Non risultano unità a te associate.' : 'Nessuna unità immobiliare registrata.' }}</p>
        </div>
      }
    </div>
  }

  <!-- FAB nuova unità (solo gestione: funzione 'unita_immobiliari_gestione') -->
  @if (canManage) {
    <ion-fab slot="fixed" vertical="bottom" horizontal="end">
      <ion-fab-button (click)="nuovaUnita()">
        <ion-icon name="add"></ion-icon>
      </ion-fab-button>
    </ion-fab>
  }
</ion-content>

<!-- Modale crea/modifica unità -->
<ion-modal [isOpen]="showForm" (didDismiss)="showForm = false">
  <ng-template>
    <ion-header class="uf-header">
      <ion-toolbar>
        <ion-title>{{ unit.unit_id > 0 ? 'Modifica unità' : 'Nuova unità' }}</ion-title>
        <ion-buttons slot="end">
          <ion-button (click)="chiudiForm()"><ion-icon slot="icon-only" name="close"></ion-icon></ion-button>
        </ion-buttons>
      </ion-toolbar>
    </ion-header>
    <ion-content class="uf-content">
      <div class="uf-wrap">
        <div class="uf-field">
          <label>Tipo</label>
          <ion-select [(ngModel)]="unit.unit_type" interface="popover" class="uf-select">
            @for (t of tipoOptions; track t) {
              <ion-select-option [value]="t.value">{{ t.label }}</ion-select-option>
            }
          </ion-select>
        </div>
        <div class="uf-row">
          <div class="uf-field"><label>Scala</label><input class="uf-input" [(ngModel)]="unit.unit_scala" [ngModelOptions]="{ standalone: true }" /></div>
          <div class="uf-field"><label>Piano</label><input class="uf-input" [(ngModel)]="unit.unit_piano" [ngModelOptions]="{ standalone: true }" /></div>
          <div class="uf-field"><label>Interno</label><input class="uf-input" [(ngModel)]="unit.unit_interno" [ngModelOptions]="{ standalone: true }" /></div>
        </div>
        <div class="uf-field">
          <label>Descrizione</label>
          <input class="uf-input" [(ngModel)]="unit.unit_descrizione" [ngModelOptions]="{ standalone: true }" placeholder="Es. Primo appartamento" />
        </div>
        <div class="uf-field">
          <label>Millesimi</label>
          <input class="uf-input" type="number" [(ngModel)]="unit.unit_millesimi" [ngModelOptions]="{ standalone: true }" placeholder="0" />
        </div>
        <div class="uf-field">
          <label>Condòmini</label>
          <ion-select [(ngModel)]="unit.cst_ids" [multiple]="true" (ionChange)="onMembersChange()" interface="alert" placeholder="Seleziona condòmini" class="uf-select">
            @for (c of condomini; track c) {
              <ion-select-option [value]="c.value">{{ c.label }}</ion-select-option>
            }
          </ion-select>
        </div>
        <div class="uf-field">
          <label>Referente</label>
          <ion-select [(ngModel)]="unit.referente_id" interface="popover" placeholder="Seleziona referente" class="uf-select" [disabled]="!(unit.cst_ids && unit.cst_ids.length)">
            @for (c of referenteOptions; track c) {
              <ion-select-option [value]="c.value">{{ c.label }}</ion-select-option>
            }
          </ion-select>
        </div>
      </div>
    </ion-content>
    <ion-footer class="uf-footer">
      <div class="uf-actions">
        <ion-button fill="outline" color="medium" (click)="chiudiForm()">Annulla</ion-button>
        <ion-button color="primary" [disabled]="saving" (click)="salvaUnita()">
          <ion-icon slot="start" name="save-outline"></ion-icon> {{ saving ? 'Salvataggio…' : 'Salva' }}
        </ion-button>
      </div>
    </ion-footer>
  </ng-template>
</ion-modal>
