<!--
  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">
  @if (loading) {
    <div class="wf-loading">
      <ion-spinner name="crescent"></ion-spinner>
    </div>
  }

  @if (!loading && activity) {
    <div class="wf-exec">
      <h2 class="wf-title">{{ activity.label || 'Attività' }}</h2>
      <!-- Snapshot read-only dei dati dell'entità linkata (popolato lato web) -->
      @if (snapshot) {
        <div class="wf-snapshot">
          @if (snapshot.title) {
            <h4>{{ snapshot.title }}</h4>
          }
          @for (f of snapshot.fields; track f) {
            <div class="wf-field">
              <span class="wf-field-label">{{ f.label }}</span>
              <span class="wf-field-value">{{ f.value }}</span>
            </div>
          }
          @for (file of snapshot.files; track file) {
            <button class="wf-file" (click)="openFile(file)">
              <icon [ngClass]="fileIcon(file)"></icon>
              <span>{{ file.filename || 'Apri file' }}</span>
              <ion-icon name="download-outline"></ion-icon>
            </button>
          }
        </div>
      }
      <!-- Dati dei passi precedenti (es. la Richiesta), read-only -->
      @for (p of previousSteps; track p) {
        <div class="wf-prev">
          <div class="wf-prev-head">
            <ion-icon name="time-outline"></ion-icon>
            <span>{{ p.label }}</span>
          </div>
          @for (f of p.fields; track f) {
            @if (f.isNote) {
              <div class="wf-note wf-note-collapsible" [class.open]="f.open">
                <button type="button" class="wf-note-toggle" (click)="f.open = !f.open">
                  <ion-icon name="information-circle-outline"></ion-icon>
                  <span class="wf-note-title">{{ f.label || 'Note' }}</span>
                  <ion-icon class="wf-note-caret" [name]="f.open ? 'chevron-up-outline' : 'chevron-down-outline'"></ion-icon>
                </button>
                @if (f.open) {
                  <span class="wf-note-text">{{ f.value }}</span>
                }
              </div>
            }
            @if (f.type === 8 && f.files.length) {
              <div class="wf-prev-field">
                <span class="wf-prev-label">{{ f.label }}</span>
                @for (file of f.files; track file) {
                  <button class="wf-file" (click)="openPrevFile(file)">
                    <icon [ngClass]="prevFileIcon(file)"></icon>
                    <span>{{ file.fileOrigName }}</span>
                    <ion-icon name="download-outline"></ion-icon>
                  </button>
                }
              </div>
            }
            @if (!f.isNote && f.type !== 8) {
              <div class="wf-prev-field">
                <span class="wf-prev-label">{{ f.label }}</span>
                <span class="wf-prev-value">{{ f.value }}</span>
              </div>
            }
          }
        </div>
      }
      <!-- Campi compilabili -->
      @for (c of inputComponents; track c) {
        <div class="wf-form">
          @if (c.cm_description) {
            <div class="wf-comp-title">{{ c.cm_description }}</div>
          }
          @for (f of visibleCampi(c); track f) {
            <div class="wf-input">
              <!-- type 9: nota / istruzioni (read-only, testo intero) -->
              @if (f.type === 9) {
                <div class="wf-note">
                  <ion-icon name="information-circle-outline"></ion-icon>
                  <span class="wf-note-text">{{ f.value }}</span>
                </div>
              }
              @if (f.type !== 9) {
                <label>{{ f.label }}@if (f.required) {
                  <span class="req">*</span>
                }</label>
                <!-- combo (type 3) -->
                @if (f.type === 3) {
                  <ion-select
                    [(ngModel)]="f.value"
                    [disabled]="!!f.disabled"
                    interface="action-sheet"
                    placeholder="Seleziona…">
                    @for (o of f.option; track o) {
                      <ion-select-option [value]="o.value">{{ o.text }}</ion-select-option>
                    }
                  </ion-select>
                }
                <!-- multiselect (type 7) -->
                @if (f.type === 7) {
                  <ion-select
                    [(ngModel)]="f.value_list"
                    [multiple]="true"
                    [disabled]="!!f.disabled"
                    interface="alert"
                    placeholder="Seleziona…">
                    @for (o of f.option; track o) {
                      <ion-select-option [value]="o.value">{{ o.text }}</ion-select-option>
                    }
                  </ion-select>
                }
                <!-- file upload (type 8) -->
                @if (f.type === 8) {
                  <div class="wf-upload">
                    <button type="button" class="wf-upload-btn" (click)="triggerFile(c, f)" [disabled]="!!f.disabled">
                      <ion-icon name="cloud-upload-outline"></ion-icon>
                      <span>Carica file</span>
                    </button>
                    <input
                      type="file"
                      [id]="fileInputId(c, f)"
                      (change)="onFileSelected($event, f)"
                      multiple
                      hidden />
                      @for (file of f.file; track file; let i = $index) {
                        <div class="wf-uploaded">
                          <ion-icon name="document-outline"></ion-icon>
                          <span class="wf-uploaded-name">{{ file.fileOrigName }}</span>
                          <ion-icon class="wf-uploaded-del" name="close-circle" (click)="removeUploaded(f, i)"></ion-icon>
                        </div>
                      }
                    </div>
                  }
                  <!-- textarea (testo multiline) -->
                  @if (f.type !== 3 && f.type !== 7 && f.type !== 8 && f.multiline) {
                    <textarea
                      rows="4"
                      [(ngModel)]="f.value"
                    [disabled]="!!f.disabled"></textarea>
                  }
                  <!-- input base per tipo (numero/email/tel/data/datetime/password/testo) -->
                  @if (f.type !== 3 && f.type !== 7 && f.type !== 8 && !f.multiline) {
                    <input
                      [type]="inputType(f)"
                      [(ngModel)]="f.value"
                      [disabled]="!!f.disabled"
                      autocomplete="off" />
                  }
                }
              </div>
            }
          </div>
        }
        <!-- Pulsanti d'azione -->
        <div class="wf-actions">
          @for (b of buttons; track b) {
            <ion-button
              expand="block"
              [disabled]="submitting"
              (click)="exec(b)">
              {{ buttonLabel(b) }}
            </ion-button>
          }
          @if (buttons.length === 0) {
            <div class="wf-noaction">
              <ion-icon name="information-circle-outline"></ion-icon>
              <span>Questo passo non prevede azioni eseguibili dall’app.</span>
            </div>
          }
        </div>
      </div>
    }

    @if (!loading && !activity) {
      <div class="wf-empty">
        <ion-icon name="alert-circle-outline"></ion-icon>
        <p>Attività non disponibile</p>
      </div>
    }
  </ion-content>
