<div class="flex">
  <mat-card class="my-single-card">
    <mat-card-header class="card-header">
      <h2 class="icon-title">
        <span class="material-symbols-outlined">call</span>
        Chiamata audio
      </h2>
    </mat-card-header>
    <mat-card-content>
      <div class="div-center" style="flex-direction: column">
        <div *ngIf="callEngagement(); else callSession">
          <mat-form-field appearance="fill" class="w-full">
            <mat-label>Servizio</mat-label>
            <mat-select [formControl]="selectedService">
              @for (service of callServices(); track service) {
              <mat-option [value]="service">{{
                service.description
              }}</mat-option>
              }
            </mat-select>
          </mat-form-field>
          <form
            [formGroup]="dynamicForm"
            (ngSubmit)="openCallSession()"
            *ngIf="dynamicForm"
          >
            <mat-form-field
              *ngFor="let field of fields()"
              appearance="fill"
              class="w-full"
            >
              <mat-label>{{ field.label }}</mat-label>
              <input
                matInput
                [formControlName]="field.key"
                [type]="field.elementType === 'TEXT' ? 'text' : 'text'"
                [required]="field.required === 'TRUE'"
              />
              <mat-error
                *ngIf="dynamicForm.get(field.key)?.errors?.['required']"
              >
                {{ field.label }} è obbligatorio
              </mat-error>
              <mat-error
                *ngIf="dynamicForm.get(field.key)?.errors?.['pattern']"
              >
                {{ field.label }} non è valido
              </mat-error>
            </mat-form-field>
          </form>

          <mat-form-field appearance="fill" class="w-full">
            <mat-label>Digita il messaggio</mat-label>
            <textarea
              matInput
              [formControl]="bodyMessage"
              rows="6"
              required
            ></textarea>
            <mat-error
              *ngIf="dynamicForm.get('bodyMessage')?.errors?.['required']"
            >
              Il messaggio è obbligatorio
            </mat-error>
          </mat-form-field>

          <div style="display: flex; justify-content: flex-end">
            <button mat-flat-button type="submit" (click)="openCallSession()" class="form-button">
              Invia
            </button>
          </div>
        </div>
        <ng-template #callSession>
          <div [ngSwitch]="sessionState()" style="padding: 20px 0; display: flex; flex-direction: column; align-items: center; justify-content: center;">
            <!-- Chiamata in corso -->
            <div *ngSwitchCase="'CONNECTED'" style="text-align: center;">
              <p style="padding: 10px 0;">Chiamata in corso...</p>
              <button mat-flat-button color="warn" (click)="closeCallSession()">
                <span class="material-symbols-outlined">call_end</span>
              </button>
            </div>

            <!-- Chiamata chiusa -->
            <div *ngSwitchCase="'CLOSED'" style="text-align: center;">
              <p>La chiamata è terminata.</p>
            </div>

            <!-- Stato sconosciuto (fallback) -->
            <div *ngSwitchDefault>
              <p>In attesa di aggiornamenti sulla chiamata...</p>
            </div>
          </div>
        </ng-template>
      </div>
    </mat-card-content>
  </mat-card>
</div>
