<div class="flex">
  <mat-card class="my-single-card">
    <mat-card-header class="card-header">
      <h2 class="icon-title">
        <span class="material-symbols-outlined">chat</span>
        Chat
      </h2>
    </mat-card-header>
    <mat-card-content>
      <div class="div-center" style="flex-direction: column">
        <!-- CHAT ENGAGEMENT -->
        <div *ngIf="chatEngagement(); else chatSession">
          <mat-form-field appearance="fill" class="w-full">
            <mat-label>Servizio</mat-label>
            <mat-select [formControl]="selectedService">
              @for (service of chatServices(); track service) {
              <mat-option [value]="service">{{
                service.description
              }}</mat-option>
              }
            </mat-select>
          </mat-form-field>

          <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="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)="openChatSession()">
              Avvia
            </button>
          </div>
        </div>

        <!-- CHAT SESSION -->
        <ng-template #chatSession>
          <div class="chat-window">
            <div class="chat-header">
              <button mat-icon-button (click)="closeChatSession()">
                <mat-icon>close</mat-icon>
              </button>
            </div>
            <!-- Messaggio di connessione -->
            <div class="message system" *ngIf="connectingToOperator()">
              <span class="message-content"
                >Ti stiamo connettendo ad un operatore...</span
              >
            </div>

            <!-- Messaggi -->
            <div
              *ngFor="let msg of messages()"
              class="message"
              [ngClass]="msg.type === 'INBOUND' ? 'incoming' : 'outgoing'"
            >
              <!-- Messaggi in entrata -->
              <ng-container *ngIf="msg.type === 'INBOUND'">
                <span class="message-author">{{
                  msg.author || "Operatore"
                }}</span>
                <div class="message-content">{{ msg.text }}</div>
              </ng-container>

              <!-- Messaggi in uscita -->
              <ng-container *ngIf="msg.type === 'OUTBOUND'">
                <div class="message-content outgoing">{{ msg.text }}</div>
              </ng-container>
            </div>

            <!-- Messaggio in entrata: Sta scrivendo... -->
            <div class="message incoming" *ngIf="composingInbound()">
              <span class="message-content">Sta scrivendo...</span>
            </div>

            <!-- Messaggio di chiusura -->
            <div *ngIf="isChatClosed()" class="message system">
              <span class="message-content">Sessione chiusa. Arrivederci!</span>
            </div>

            <!-- Barra per inviare un messaggio -->
            <div class="message-input-bar" *ngIf="!isChatClosed()">
              <mat-form-field class="message-input" appearance="fill">
                <mat-label>Scrivi un messaggio...</mat-label>
                <input
                  matInput
                  [formControl]="outboundMessage"
                  (keyup.enter)="sendMessage()"
                />
              </mat-form-field>
              <button mat-icon-button color="primary" (click)="sendMessage()">
                <mat-icon>send</mat-icon>
              </button>
            </div>
          </div>
        </ng-template>
      </div>
    </mat-card-content>
  </mat-card>
</div>
