<h1 mat-dialog-title class="prevent-select" style="text-align: center; margin-top: 15px;">
  Carga múltiple de documentos Excel
</h1>

<div class="uploader">
  <h2 mat-dialog-title class="prevent-select" style="font-size: 15px; display: flex; justify-content: center;">
    Seleccione uno o varios archivos Excel (.xlsx, .xls)
  </h2>
  
  <input 
     type="file"
     name="file"
     id="file"
     #file
     class="hidden"
     accept=".xlsx,.xls"
     multiple
     (change)="checkFile($event)">
  
  <div 
    class="drag-drop-area"
    [class.drag-over]="isDragOver"
    [class.has-file]="hasExcelFiles"
    (dragover)="onDragOver($event)"
    (dragleave)="onDragLeave($event)"
    (drop)="onDrop($event)"
    (click)="openFileUploader()"
    *ngIf="!isUploading">
    
    <div class="drag-drop-content">
      <mat-icon class="upload-icon">
        {{ hasExcelFiles ? 'add_circle' : 'table_chart' }}
      </mat-icon>
      
      <p class="drag-drop-text" *ngIf="!hasExcelFiles">
        <strong>Haga clic aquí o arrastre sus archivos Excel</strong><br>
        <span>Solo archivos .xlsx y .xls (máximo 10MB cada uno, hasta 20 archivos)</span>
      </p>
      
      <p class="drag-drop-text" *ngIf="hasExcelFiles">
        <strong>Agregue más archivos Excel</strong><br>
        <span>{{ fileCount }} archivo{{ fileCount > 1 ? 's' : '' }} cargado{{ fileCount > 1 ? 's' : '' }} ({{ totalSize }})</span>
      </p>
    </div>
  </div>
  
  <div *ngIf="isUploading" class="upload-progress drag-drop-area uploading">
    <mat-spinner diameter="30"></mat-spinner>
    <p style="margin-top: 10px;">Subiendo archivos Excel...</p>
  </div>
</div>

<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;">Procesando archivos Excel...</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 *ngIf="hasExcelFiles && !isLoading" class="files-container">
    <div style="display: flex; justify-content: space-between; align-items: center; margin: 20px 0;">
      <h3 style="margin: 0; display: flex; align-items: center;">
        <mat-icon style="margin-right: 8px; color: #2e7d32;">table_chart</mat-icon>
        Archivos Excel cargados ({{ fileCount }}):
      </h3>
      
      <button 
         mat-button
         color="warn"
         style="border-radius: 10px;"
         class="red_primary_background white_font"
         matTooltip="Eliminar todos los archivos"
         (click)="deleteAllTempFiles()"
         [disabled]="isLoading || isUploading">
        <mat-icon>delete_sweep</mat-icon>
        Eliminar todos
      </button>
    </div>
        
    <table mat-table matSort class="animated fadeIn" [dataSource]="dataSource">

      <ng-container matColumnDef="nombre_del_archivo">
        <th mat-header-cell *matHeaderCellDef mat-sort-header>
          <mat-icon>description</mat-icon>
          Nombre del archivo
        </th>
        <td mat-cell *matCellDef="let element">
          <div class="file-name-cell">
            <mat-icon color="primary">table_chart</mat-icon>
            <span>{{ element.nombre_del_archivo }}</span>
          </div>
        </td>
      </ng-container>

      <ng-container matColumnDef="tamano_del_archivo">
        <th mat-header-cell *matHeaderCellDef mat-sort-header>
          <mat-icon>storage</mat-icon>
          Tamaño
        </th>
        <td mat-cell *matCellDef="let element">
          {{ element.tamano_del_archivo }}
        </td>
      </ng-container>

      <ng-container matColumnDef="acciones">
        <th mat-header-cell *matHeaderCellDef>Acciones</th>
        <td mat-cell *matCellDef="let element">
          <div class="action-buttons">

            <button 
               mat-icon-button 
               color="primary"
               style="border-radius: 10px; margin-right: 5px;"
               class="pink_primary_background white_font"
               matTooltip="Previsualizar Excel"
               (click)="previewExcelFile(element.archivo_id!)"
               [disabled]="isLoading || isUploading">
              <mat-icon>visibility</mat-icon>
            </button>
            
            <button 
               mat-icon-button 
               color="warn"
               style="border-radius: 10px;"
               class="red_primary_background white_font"
               matTooltip="Eliminar archivo Excel"
               (click)="removeExcelFile(element.archivo_id!, element.nombre_del_archivo)"
               [disabled]="isLoading || isUploading">
              <mat-icon>delete</mat-icon>
            </button>
          </div>
        </td>
      </ng-container>

      <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
      <tr mat-row *matRowDef="let row; columns: displayedColumns"></tr>
    </table>
    

    <div style="margin-top: 16px; padding: 12px; background-color: #f5f5f5; border-radius: 8px;">
      <div style="display: flex; justify-content: space-between; align-items: center;">
        <span style="font-size: 14px; color: #666;">
          <strong>Resumen:</strong> {{ fileCount }} archivo{{ fileCount > 1 ? 's' : '' }} 
          ({{ totalSize }} total)
        </span>
        <div style="display: flex; align-items: center; font-size: 12px; color: #999;">
          <mat-icon style="font-size: 16px; width: 16px; height: 16px; margin-right: 4px;">info</mat-icon>
          {{ MAX_FILE_SIZE_MB }}MB cada uno
        </div>
      </div>
    </div>
  </div>

  <div *ngIf="!hasExcelFiles && !isLoading && !isUploading" class="no-files-message" style="height: 120px; text-align: center; padding: 20px;">
    <mat-icon style=" color: #9e9e9e; margin-bottom: 10px;">upload_file</mat-icon>
    <p style="color: #666; font-size: 14px; margin-bottom: 5px;">
      <strong>No hay archivos Excel cargados</strong>
    </p>
    <p style="color: #999; font-size: 12px;">
      Use el área de arriba para cargar sus archivos Excel (.xlsx o .xls)
    </p>
  </div>
</div>

<mat-dialog-actions align="end" style="padding: 16px;">
  <button 
     mat-button
    (click)="cancelar()"
    style="margin-right: 8px;"
    [disabled]="isLoading || isUploading">
    <mat-icon>close</mat-icon>
    Cancelar
  </button>
  
  <button 
     mat-raised-button
     color="primary"
     class="blue_send_background white_font"
     *ngIf="hasExcelFiles"
     (click)="saveFinalFiles()"
     [disabled]="isLoading || isUploading">
    <mat-icon>table_chart</mat-icon>
    Procesar {{ fileCount }} archivo{{ fileCount > 1 ? 's' : '' }} Excel
  </button>
</mat-dialog-actions>