<h1 mat-dialog-title class="prevent-select" style="text-align: center; margin-top: 15px;">
  Modificar Organigrama
</h1>

<div mat-dialog-content class="prevent-select">
  <div class="is-loading animated fadeIn fast" *ngIf="isLoading" style="text-align: center; padding: 20px;">
    <mat-spinner></mat-spinner>
    <h3 style="margin-top: 10px;">Cargando datos...</h3>
  </div>

  <div class="has-error animated fadeIn fast" *ngIf="hasError" style="text-align: center; padding: 20px;">
    <mat-icon class="red_primary_font" style="font-size: 48px; margin-bottom: 10px;">error</mat-icon>
    <h3 style="font-weight: bold; font-style: italic;">{{ errorMessage }}</h3>
  </div>

  <div class="form-container mt-10" *ngIf="!isLoading && !hasError">
    
    <mat-form-field appearance="outline" style="width: 100%; margin-bottom: 16px;">
      <mat-label>Usuario a modificar</mat-label>
      <input matInput
             [value]="usuario.organigrama?.nombre_completo || usuario.nombre"
             readonly>
      <mat-icon matSuffix>person</mat-icon>
    </mat-form-field>

    <div style="width: 95%;">
      <div *ngFor="let supervisor of supervisores; let i = index; trackBy: trackBySupervisor" 
         style="position: relative; margin-bottom: 16px;">
      
      <mat-form-field appearance="outline" style="width: 100%;">
        <mat-label>
          Supervisor {{ supervisor.level }}
          <span *ngIf="supervisor.level === 1" style="color: red;">*</span>
          <span *ngIf="supervisor.level > 1">(Opcional)</span>
        </mat-label>

        <mat-select  [value]="supervisor.value"
                    (selectionChange)="onSupervisorChange(supervisor.id, $event.value)"
                    [required]="supervisor.level === 1">
          <mat-option value="No configurado">No configurado</mat-option>
          <mat-option *ngFor="let supervisorOption of getAvailableSupervisores(supervisor.id)" 
                      [value]="supervisorOption.value">
            {{ supervisorOption.display }}
          </mat-option>
        </mat-select>
        <mat-icon matSuffix>
          {{ supervisor.level === 1 ? 'supervisor_account' : 'manage_accounts' }}
        </mat-icon>
        <mat-hint *ngIf="supervisor.level === 1">
          Seleccione el supervisor principal (obligatorio)
        </mat-hint>
        <mat-hint *ngIf="supervisor.level > 1">
          Seleccione un supervisor adicional (opcional)
        </mat-hint>
      </mat-form-field>

      <button *ngIf="supervisores.length > 0 && supervisor.level > 0"
              mat-icon-button
              color="warn"
              (click)="eliminarSupervisor(supervisor.id)"
              style="position: absolute; right: -48px; top: 40%; transform: translateY(-50%); "
              matTooltip="Eliminar supervisor"
              disabled="">
        <mat-icon>delete</mat-icon>
      </button>
      <button *ngIf="supervisores.length > 1 && supervisor.level > 2"
              mat-icon-button
              color="warn"
              class="white_font red_primary_background"
              (click)="eliminarSupervisor(supervisor.id)"
              style="position: absolute; right: -48px; top: 40%; transform: translateY(-50%); border-radius: 10px;"
              matTooltip="Eliminar supervisor">
        <mat-icon >delete</mat-icon>
      </button>
    </div>
    </div>

    <div style="text-align: center; margin-left: 450px; margin-bottom: 16px;">
      <button mat-button 
              color="primary" 
              (click)="agregarSupervisor()"
              [disabled]="listaSupervisores.length === 0">
        <mat-icon>add</mat-icon>
        Agregar supervisor
      </button>
    </div>

    <div *ngIf="listaSupervisores.length === 0 && !isLoading" 
         style="padding: 16px; background-color: #fff3cd; border-radius: 4px; margin-bottom: 16px;">
      <mat-icon style="color: #856404; vertical-align: middle; margin-right: 8px;">warning</mat-icon>
      <span style="color: #856404;">
        No hay super usuarios disponibles para asignar como supervisores.
      </span>
    </div>

  </div>
</div>

<mat-dialog-actions align="end" style="padding: 16px;">
  <button mat-button
          (click)="cancelar()"
          style="margin-right: 8px;"
          [disabled]="isLoading">
    <mat-icon>close</mat-icon>
    Cancelar
  </button>

  <button mat-button
          color="primary"
          (click)="guardarCambios()"
          [disabled]="!supervisores[0]!.value || 
                     supervisores[0]!.value === 'No configurado' || 
                     isLoading ||
                     listaSupervisores.length === 0">
    <mat-icon>save</mat-icon>
    <span *ngIf="!isLoading">Guardar</span>
    <span *ngIf="isLoading">Guardando...</span>
  </button>
</mat-dialog-actions>