<!--
  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></ion-back-button>
    </ion-buttons>
    <ion-title>Disponibilità</ion-title>
  </ion-toolbar>
</ion-header>

<ion-content class="ion-padding">
  <!-- Selettore operatore -->
  <ion-item>
    <ion-select label="Operatore" [(ngModel)]="selectedOperatorId" (ionChange)="onOperatorChange()" interface="popover">
      <ion-select-option [value]="0">Default Azienda</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>

  @if (usingDefault) {
    <div style="margin: 8px 0; padding: 8px 12px; background: var(--ion-color-warning-tint); border-radius: 8px; font-size: 13px">
      <ion-icon name="information-circle-outline" style="vertical-align: middle; margin-right: 4px"></ion-icon>
      Usa il template di default dell'azienda
    </div>
  }

  <!-- Template settimanale -->
  <h6 style="margin-top: 16px; font-weight: 600">Template Settimanale</h6>

  @if (templateLoading) {
    <div class="ion-text-center ion-padding">
      <ion-spinner name="bubbles"></ion-spinner>
    </div>
  }

  @if (!templateLoading) {
    <ion-accordion-group>
      @for (day of days; track day) {
        <ion-accordion [value]="day.dayOfWeek.toString()">
          <ion-item slot="header">
            <ion-toggle [(ngModel)]="day.active" (click)="$event.stopPropagation()" style="margin-right: 8px"></ion-toggle>
            <ion-label>
              <strong>{{ day.label }}</strong>
              @if (day.active) {
                <p>{{ day.startTime }} - {{ day.endTime }}</p>
              }
              @if (!day.active) {
                <p style="color: var(--ion-color-medium)">Non disponibile</p>
              }
            </ion-label>
          </ion-item>
          @if (day.active) {
            <div slot="content" class="ion-padding">
              <ion-list lines="none">
                <ion-item>
                  <ion-input label="Inizio" labelPlacement="stacked" type="time" [(ngModel)]="day.startTime"></ion-input>
                </ion-item>
                <ion-item>
                  <ion-input label="Fine" labelPlacement="stacked" type="time" [(ngModel)]="day.endTime"></ion-input>
                </ion-item>
                <ion-item>
                  <ion-input label="Inizio Pausa" labelPlacement="stacked" type="time" [(ngModel)]="day.breakStart"></ion-input>
                </ion-item>
                <ion-item>
                  <ion-input label="Fine Pausa" labelPlacement="stacked" type="time" [(ngModel)]="day.breakEnd"></ion-input>
                </ion-item>
              </ion-list>
            </div>
          }
        </ion-accordion>
      }
    </ion-accordion-group>
  }

  <div style="display: flex; gap: 8px; margin-top: 12px">
    <ion-button expand="block" color="primary" (click)="saveTemplates()" style="flex: 1">
      <ion-icon name="save-outline" slot="start"></ion-icon>
      Salva Template
    </ion-button>
    @if (hasCustom && selectedOperatorId > 0) {
      <ion-button expand="block" color="warning" fill="outline" (click)="resetToDefault()" style="flex: 0 0 auto">
        <ion-icon name="refresh-outline" slot="start"></ion-icon>
        Default
      </ion-button>
    }
  </div>

  <!-- Eccezioni -->
  @if (selectedOperatorId > 0) {
    <div style="margin-top: 24px">
      <div style="display: flex; justify-content: space-between; align-items: center">
        <h6 style="font-weight: 600; margin: 0">Eccezioni</h6>
        <ion-button size="small" fill="clear" (click)="openNewException()">
          <ion-icon name="add-circle-outline" slot="icon-only"></ion-icon>
        </ion-button>
      </div>
      @if (exceptionsLoading) {
        <div class="ion-text-center ion-padding">
          <ion-spinner name="bubbles"></ion-spinner>
        </div>
      }
      @if (!exceptionsLoading && exceptions.length === 0) {
        <div style="text-align: center; color: var(--ion-color-medium); padding: 12px; font-size: 13px">
          Nessuna eccezione configurata
        </div>
      }
      @if (exceptions.length > 0) {
        <ion-list>
          @for (exc of exceptions; track exc) {
            <ion-item-sliding>
              <ion-item>
                <ion-icon [name]="exc.ae_type === 'BLOCKED' ? 'ban-outline' : 'time-outline'" slot="start" [color]="exc.ae_type === 'BLOCKED' ? 'danger' : 'warning'"></ion-icon>
                <ion-label>
                  <h3>{{ formatDate(exc.ae_date) }}</h3>
                  <p>
                    {{ exc.ae_type === 'BLOCKED' ? 'Bloccato' : 'Personalizzato' }}
                    @if (exc.ae_start_time) {
                      <span> · {{ exc.ae_start_time }} - {{ exc.ae_end_time }}</span>
                    }
                  </p>
                  @if (exc.ae_reason) {
                    <p style="font-style: italic">{{ exc.ae_reason }}</p>
                  }
                </ion-label>
              </ion-item>
              <ion-item-options side="end">
                <ion-item-option color="danger" (click)="confirmDeleteException(exc)">
                  <ion-icon name="trash-outline" slot="icon-only"></ion-icon>
                </ion-item-option>
              </ion-item-options>
            </ion-item-sliding>
          }
        </ion-list>
      }
    </div>
  }
</ion-content>

<!-- Modal Nuova Eccezione -->
<ion-modal [isOpen]="showExceptionModal">
  <ng-template>
    <ion-header>
      <ion-toolbar>
        <ion-title>Nuova Eccezione</ion-title>
        <ion-buttons slot="end">
          <ion-button (click)="showExceptionModal = false">Chiudi</ion-button>
        </ion-buttons>
      </ion-toolbar>
    </ion-header>
    <ion-content class="ion-padding">
      <ion-list>
        <ion-item>
          <ion-label position="stacked">Data *</ion-label>
          <ion-datetime [(ngModel)]="newException.ae_date" presentation="date" [preferWheel]="false"></ion-datetime>
        </ion-item>
        <ion-item>
          <ion-select label="Tipo" labelPlacement="stacked" [(ngModel)]="newException.ae_type" interface="popover">
            <ion-select-option value="BLOCKED">Bloccato (giorno intero)</ion-select-option>
            <ion-select-option value="CUSTOM">Personalizzato (orari custom)</ion-select-option>
          </ion-select>
        </ion-item>
        @if (newException.ae_type === 'CUSTOM') {
          <ion-item>
            <ion-label position="stacked">Ora Inizio</ion-label>
            <ion-datetime [(ngModel)]="newException.ae_start_time" presentation="time" hourCycle="h23" [preferWheel]="true"></ion-datetime>
          </ion-item>
        }
        @if (newException.ae_type === 'CUSTOM') {
          <ion-item>
            <ion-label position="stacked">Ora Fine</ion-label>
            <ion-datetime [(ngModel)]="newException.ae_end_time" presentation="time" hourCycle="h23" [preferWheel]="true"></ion-datetime>
          </ion-item>
        }
        <ion-item>
          <ion-input label="Motivo" labelPlacement="stacked" [(ngModel)]="newException.ae_reason" placeholder="Motivo opzionale..."></ion-input>
        </ion-item>
      </ion-list>
      <ion-button expand="block" color="primary" (click)="saveException()" [disabled]="!newException.ae_date" style="margin-top: 16px">
        <ion-icon name="save-outline" slot="start"></ion-icon>
        Salva Eccezione
      </ion-button>
    </ion-content>
  </ng-template>
</ion-modal>
