<!--
  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="wf-content" [fullscreen]="true">
  <ion-refresher slot="fixed" (ionRefresh)="load($event)">
    <ion-refresher-content pullingIcon="chevron-down-outline" refreshingSpinner="crescent"></ion-refresher-content>
  </ion-refresher>

  <div class="wf-toolbar">
    <ion-segment [(ngModel)]="segment" (ionChange)="segmentChanged()" mode="md" scrollable>
      <ion-segment-button value="inizia">
        <ion-label>Iniziare@if (startables.length) {
          <span class="wf-tab-badge">{{ startables.length }}</span>
        }</ion-label>
      </ion-segment-button>
      <ion-segment-button value="storico">
        <ion-label>Storico@if (instances.length) {
          <span class="wf-tab-badge">{{ instances.length }}</span>
        }</ion-label>
      </ion-segment-button>
      <ion-segment-button value="attivita">
        <ion-label>Attività@if (jobs.length) {
          <span class="wf-tab-badge">{{ jobs.length }}</span>
        }</ion-label>
      </ion-segment-button>
    </ion-segment>

    @if (segment !== 'inizia') {
      <div class="search-bar">
        <ion-icon name="search-outline" class="search-ic"></ion-icon>
        <input
          type="text"
          placeholder="Cerca…"
          [(ngModel)]="search"
          (input)="onSearch()"
          autocomplete="off"
          spellcheck="false" />
          @if (search) {
            <button class="search-clear" (click)="search = ''; load()" aria-label="Pulisci ricerca">
              <ion-icon name="close-circle"></ion-icon>
            </button>
          }
        </div>
      }
    </div>

    <!-- TAB 1 — DA INIZIARE ─────────────────────────────────────── -->
    @if (segment === 'inizia') {
      <div>
        @if (!loading && startables.length === 0) {
          <div class="wf-empty">
            <ion-icon name="add-circle-outline"></ion-icon>
            <p>Nessun workflow che puoi avviare</p>
          </div>
        }
        @for (a of startables; track a) {
          <div class="wf-card" (click)="startActivity(a)">
            <div class="wf-card-ic"><ion-icon name="play-circle-outline"></ion-icon></div>
            <div class="wf-card-body">
              <h3>{{ a.wf_name }}</h3>
              <p>Avvia un nuovo flusso</p>
            </div>
            <ion-icon class="wf-chevron" name="chevron-forward-outline"></ion-icon>
          </div>
        }
      </div>
    }

    <!-- TAB 2 — STORICO ─────────────────────────────────────────── -->
    @if (segment === 'storico') {
      <div>
        @if (!loading && instances.length === 0) {
          <div class="wf-empty">
            <ion-icon name="time-outline"></ion-icon>
            <p>Nessuna istanza nello storico</p>
          </div>
        }
        @for (i of instances; track i) {
          <div class="wf-card" (click)="openInstance(i)">
            <div class="wf-card-ic"><ion-icon name="git-branch-outline"></ion-icon></div>
            <div class="wf-card-body">
              <h3>{{ instanceTitle(i) }}</h3>
              @if (i.wfj_description) {
                <p>{{ i.wfj_description }}</p>
              }
              @if (i.wfin_dateins) {
                <span class="wf-date">{{ i.wfin_dateins | date: 'dd/MM/yyyy HH:mm' }}</span>
              }
            </div>
            <ion-icon class="wf-chevron" name="chevron-forward-outline"></ion-icon>
          </div>
        }
      </div>
    }

    <!-- TAB 3 — LE MIE ATTIVITÀ ──────────────────────────────────── -->
    @if (segment === 'attivita') {
      <div>
        @if (!loading && jobs.length === 0) {
          <div class="wf-empty">
            <ion-icon name="checkmark-done-circle-outline"></ion-icon>
            <p>Nessuna attività da eseguire</p>
          </div>
        }
        @for (j of jobs; track j) {
          <div class="wf-card" (click)="openJob(j)">
            <div class="wf-card-ic"><ion-icon name="create-outline"></ion-icon></div>
            <div class="wf-card-body">
              <h3>{{ jobLabel(j) }}</h3>
              @if (j.wfj_description) {
                <p>{{ j.wfj_description }}</p>
              }
              @if (j.wfj_dateins) {
                <span class="wf-date">{{ j.wfj_dateins | date: 'dd/MM/yyyy HH:mm' }}</span>
              }
            </div>
            <ion-icon class="wf-chevron" name="chevron-forward-outline"></ion-icon>
          </div>
        }
      </div>
    }

    @if (loading) {
      <div class="wf-loading">
        <ion-spinner name="crescent"></ion-spinner>
      </div>
    }
  </ion-content>
