<!--
  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-header>
  <ion-toolbar>
    <ion-buttons slot="start">
      <ion-back-button defaultHref="/servizi"></ion-back-button>
    </ion-buttons>
    <ion-title>Appuntamenti</ion-title>
    <ion-buttons slot="end">
      <ion-button id="filter-trigger">
        <ion-icon name="filter-outline" slot="icon-only"></ion-icon>
      </ion-button>
      @if (isGestore) {
        <ion-button id="settings-trigger">
          <ion-icon name="settings-outline" slot="icon-only"></ion-icon>
        </ion-button>
      }
    </ion-buttons>
  </ion-toolbar>
  <ion-toolbar class="search-toolbar">
    <ion-searchbar
      [(ngModel)]="cerca"
      placeholder="Cerca appuntamenti..."
      [debounce]="400"
      (ionInput)="onSearch()"
      class="custom-searchbar">
    </ion-searchbar>
  </ion-toolbar>
</ion-header>

<!-- Popover Filtri -->
<ion-popover trigger="filter-trigger" [dismissOnSelect]="false">
  <ng-template>
    <ion-content class="ion-padding">
      <ion-list lines="none">
        <ion-item>
          <ion-select label="Stato" [(ngModel)]="filters.status" placeholder="Tutti" interface="popover">
            @for (s of statusOptions; track s) {
              <ion-select-option [value]="s.value">{{ s.label }}</ion-select-option>
            }
          </ion-select>
        </ion-item>
        <ion-item>
          <ion-select label="Tipo Servizio" [(ngModel)]="filters.service_type_id" placeholder="Tutti" interface="popover">
            <ion-select-option [value]="undefined">Tutti</ion-select-option>
            @for (st of serviceTypes; track st) {
              <ion-select-option [value]="st.st_id">{{ st.st_name }}</ion-select-option>
            }
          </ion-select>
        </ion-item>
        @if (isGestore) {
          <ion-item>
            <ion-select label="Operatore" [(ngModel)]="filters.operator_em_id" placeholder="Tutti" interface="popover">
              <ion-select-option [value]="undefined">Tutti</ion-select-option>
              @for (op of operators; track op) {
                <ion-select-option [value]="op.em_id">{{ op.em_firstname }} {{ op.em_lastname }}</ion-select-option>
              }
            </ion-select>
          </ion-item>
        }
      </ion-list>
      <div class="popover-actions">
        <ion-button size="small" fill="outline" color="medium" (click)="clearFilters()">Ripulisci</ion-button>
        <ion-button size="small" fill="outline" (click)="applyFilters()">Cerca</ion-button>
      </div>
    </ion-content>
  </ng-template>
</ion-popover>

<!-- Popover Impostazioni (solo gestore) -->
@if (isGestore) {
  <ion-popover trigger="settings-trigger" [dismissOnSelect]="true">
    <ng-template>
      <ion-content>
        <ion-list lines="none">
          <ion-item button (click)="goToServiceTypes()">
            <ion-icon name="pricetags-outline" slot="start"></ion-icon>
            <ion-label>Tipi Servizio</ion-label>
          </ion-item>
          <ion-item button (click)="goToAvailability()">
            <ion-icon name="calendar-outline" slot="start"></ion-icon>
            <ion-label>Disponibilità</ion-label>
          </ion-item>
        </ion-list>
      </ion-content>
    </ng-template>
  </ion-popover>
}

<ion-content>
  <ion-refresher slot="fixed" (ionRefresh)="doRefresh($event)">
    <ion-refresher-content></ion-refresher-content>
  </ion-refresher>

  <!-- Skeleton loading -->
  @if (loading && list.length === 0) {
    <div class="apt-list">
      <div class="skeleton-group-header"></div>
      @for (n of [1,2,3]; track n) {
        <div class="skeleton-card">
          <div class="sk-accent"></div>
          <div class="sk-body">
            <div class="sk-line sk-title"></div>
            <div class="sk-line sk-sub"></div>
            <div class="sk-line sk-meta"></div>
          </div>
        </div>
      }
    </div>
  }

  <!-- Stato vuoto -->
  @if (!loading && list.length === 0) {
    <div class="empty-wrap">
      <div class="empty-icon-box">
        <ion-icon name="calendar-clear-outline"></ion-icon>
      </div>
      <h3 class="empty-title">Nessun appuntamento</h3>
      <p class="empty-sub">Non ci sono appuntamenti con i filtri selezionati</p>
      @if (cerca || filters.status) {
        <ion-button fill="outline" size="small" (click)="clearFilters()">
          <ion-icon name="close-outline" slot="start"></ion-icon>
          Rimuovi filtri
        </ion-button>
      }
    </div>
  }

  <!-- Timeline lista -->
  @if (list.length > 0) {
    <div class="apt-list">
      @for (apt of list; track apt; let i = $index) {
        <!-- Data group header -->
        @if (shouldShowDateHeader(apt, i)) {
          <div
            class="date-group-header"
            [class.is-today]="getDateGroup(apt) === 'today'">
            <span class="dgr-label">{{ getDateGroupLabel(apt) }}</span>
            <div class="dgr-line"></div>
          </div>
        }
        <!-- Appointment card -->
        <div class="apt-item" (click)="goToDetail(apt)">
          <div class="apt-accent" [style.background-color]="apt.service_type_color || getStatusColor(apt.apt_status)"></div>
          <div class="apt-body">
            <!-- Title row -->
            <div class="apt-title-row">
              @if (!isGestore) {
                <span class="apt-title">{{ apt.service_type_name }}</span>
              }
              @if (isGestore) {
                <span class="apt-title">{{ getClientName(apt) }}</span>
              }
              <span class="apt-badge" [style.background-color]="getStatusColor(apt.apt_status)">
                {{ getStatusLabel(apt.apt_status) }}
              </span>
            </div>
            <!-- Subtitle (gestore only) -->
            @if (isGestore) {
              <div class="apt-subtitle">
                <ion-icon name="pricetag-outline"></ion-icon>
                {{ apt.service_type_name }}
              </div>
            }
            <!-- Meta row -->
            <div class="apt-meta-row">
              <span class="apt-meta-chip">
                <ion-icon name="time-outline"></ion-icon>
                {{ getAppointmentDate(apt) }}
              </span>
              @if (apt.apt_duration_minutes) {
                <span class="apt-meta-chip">
                  <ion-icon name="hourglass-outline"></ion-icon>
                  {{ apt.apt_duration_minutes }} min
                </span>
              }
            </div>
          </div>
          <!-- End: unread + arrow -->
          <div class="apt-end">
            @if (apt.unread_message_count) {
              <span class="apt-unread">
                <ion-icon name="chatbubble-outline"></ion-icon>
                {{ apt.unread_message_count }}
              </span>
            }
            <ion-icon name="chevron-forward" class="apt-arrow"></ion-icon>
          </div>
        </div>
      }
    </div>
  }

  <ion-infinite-scroll (ionInfinite)="loadMore($event)" threshold="100px">
    <ion-infinite-scroll-content loadingSpinner="bubbles" loadingText="Caricamento..."></ion-infinite-scroll-content>
  </ion-infinite-scroll>

  <!-- FAB Nuova richiesta -->
  <ion-fab vertical="bottom" horizontal="end" slot="fixed">
    <ion-fab-button (click)="goToRequest()" class="custom-fab">
      <ion-icon name="add"></ion-icon>
    </ion-fab-button>
  </ion-fab>
</ion-content>
