<h1 mat-dialog-title class="prevent-select" style="text-align: center; margin-top: 15px; margin-bottom: 10px;">
  {{ isBlocked ? 'Usuario Bloqueado' : 'Bloquear Usuario' }}
</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;">
      {{ isBlocked && canUnblock ? 'Procesando desbloqueo...' : 'Procesando bloqueo...' }}
    </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;">error</mat-icon>
    <h3 style="font-weight: bold; font-style: italic;">{{ errorMessage }}</h3>
  </div>

  <div class="blocked-state animated fadeIn fast" *ngIf="isBlocked && !isLoading && !hasError" style="text-align: center; padding: 20px;">

    
    <div style=" padding: 16px;  margin-bottom: 16px;">
      <p><strong>Usuario:</strong> {{ userToBlock.nombre_completo }}</p>
      <p><strong>Inicio:</strong> {{ formatDateTime(fechaInicio!, horaInicio) }}</p>
      <p><strong>Fin:</strong> {{ formatDateTime(fechaFin!, horaFin) }}</p>
    </div>

    <div *ngIf="canUnblock" style=" padding: 16px; margin-bottom: 16px;">
      <mat-icon class="red_primary_font" style=" margin-right: 8px;">access_time</mat-icon>
      <span class="red_primary_font">
        <strong>Tiempo restante para cancelar: {{ getTimeRemainingFormatted() }}</strong>
      </span>
      <p style="margin-top: 8px; color: #000000; font-size: 14px;">
        Puedes cancelar el bloqueo durante este tiempo límite.
      </p>
    </div>

    <div *ngIf="!canUnblock && isBlocked" style="padding: 16px; border-radius: 8px; margin-bottom: 16px;">
      <mat-icon style=" margin-right: 8px;">info</mat-icon>
      <span >
        <strong>El tiempo para cancelar el bloqueo ha expirado</strong>
      </span>
      <p style="margin-top: 8px; color: #000000; font-size: 14px;">
        El bloqueo permanecerá activo hasta la fecha y hora programada.
      </p>
    </div>
  </div>

  <div class="form-container mt-10" *ngIf="!isBlocked && !isLoading && !hasError">
    
    <mat-form-field appearance="outline" style="width: 100%;">
      <mat-label>Usuario a bloquear</mat-label>
      <input matInput [value]="userToBlock.nombre_completo" readonly>
      <mat-icon matSuffix>person</mat-icon>
    </mat-form-field>

    <div>
      <h4 style="margin-bottom: 10px; color: #666;">Inicio del bloqueo</h4>
      
      <div style="display: flex; gap: 16px; align-items: flex-start;">
        <mat-form-field appearance="outline" style="flex: 1;">
          <mat-label>Fecha de inicio</mat-label>
          <input matInput 
                 [matDatepicker]="pickerstart" 
                 [(ngModel)]="fechaInicio"
                 [min]="minDate"
                 (dateChange)="onFechaInicioChange()"
                 required>
          <mat-hint>DD-MM-YYYY</mat-hint>
          <mat-datepicker-toggle matIconSuffix [for]="pickerstart"></mat-datepicker-toggle>
          <mat-datepicker #pickerstart></mat-datepicker>
        </mat-form-field>

        <mat-form-field appearance="outline" style="flex: 1;">
          <mat-label>Hora de inicio</mat-label>
          <input matInput 
                 type="time" 
                 [(ngModel)]="horaInicio"
                 (change)="onHoraChange()"
                 required>
          <mat-icon matSuffix>access_time</mat-icon>
        </mat-form-field>
      </div>
    </div>

    <div style="margin-bottom: 20px;">
      <h4 style="margin-bottom: 10px; color: #666;">Fin del bloqueo</h4>
      
      <div style="display: flex; gap: 16px; align-items: flex-start;">
        <mat-form-field appearance="outline" style="flex: 1;">
          <mat-label>Fecha de fin</mat-label>
          <input matInput 
                 [matDatepicker]="pickerend" 
                 [(ngModel)]="fechaFin"
                 [min]="minEndDate"
                 (dateChange)="onFechaFinChange()"
                 required>
          <mat-hint>DD-MM-YYYY</mat-hint>
          <mat-datepicker-toggle matIconSuffix [for]="pickerend"></mat-datepicker-toggle>
          <mat-datepicker #pickerend></mat-datepicker>
        </mat-form-field>

        <mat-form-field appearance="outline" style="flex: 1;">
          <mat-label>Hora de fin</mat-label>
          <input matInput 
                 type="time" 
                 [(ngModel)]="horaFin"
                 (change)="onHoraChange()"
                 required>
          <mat-icon matSuffix>access_time</mat-icon>
        </mat-form-field>
      </div>
    </div>

    <div style="margin-top: 20px; margin-left: 15px;">
      <mat-hint style="margin-bottom: 16px;">
        • El usuario será bloqueado desde la fecha y hora de inicio hasta la fecha y hora de fin especificadas.
      </mat-hint>
      <br>
      <mat-hint style="margin-top: 10px;">
        • Puedes revertir el bloqueo durante los primeros {{ tiempoLimite }} minutos después de realizarlo
      </mat-hint>
      <br><br>
      <mat-hint *ngIf="fechaInicio && fechaFin && horaInicio && horaFin" 
                style="color: #1976d2; font-weight: 500; margin-left: 125px; ">
        Duración actual: {{ formatDateTime(fechaInicio, horaInicio) }} - {{ formatDateTime(fechaFin, horaFin) }}
      </mat-hint>
    </div>
  </div>
</div>

<mat-dialog-actions align="end" style="padding: 16px;">

  <ng-container *ngIf="!isBlocked">
    <button mat-button 
            style="margin-right: 8px;" 
            [disabled]="isLoading" 
            (click)="cancelar()">
      <mat-icon>close</mat-icon>
      Cancelar
    </button>

    <button mat-button 
            color="warn"
            [disabled]="isLoading || !fechaInicio || !fechaFin"
            (click)="blockUser()">
      <mat-icon>block</mat-icon>
      <span *ngIf="!isLoading">Bloquear Usuario</span>
      <span *ngIf="isLoading">Bloqueando...</span>
    </button>
  </ng-container>

  <ng-container *ngIf="isBlocked">
    <button mat-button 
            style="margin-right: 8px;" 
            [disabled]="isLoading" 
            (click)="cancelar()">
      <mat-icon>close</mat-icon>
      Cerrar
    </button>

  <button mat-button 
  *ngIf="canUnblock"
  [disabled]="isLoading"
  (click)="unlockUser()"
  class="">
  <mat-icon>lock_open</mat-icon>
  <span *ngIf="!isLoading">Cancelar Bloqueo</span>
  <span *ngIf="isLoading">Cancelando...</span>
  </button>

  </ng-container>
</mat-dialog-actions>