<div class="dialog-container">

  <div class="dialog-header">
    <div class="header-content">
      <div class="title-section">
        <mat-icon style="margin-top: 20px;" class="title-icon">{{ fileType === 'excel' ? 'table_chart' : 'archive' }}</mat-icon>
        <h2 mat-dialog-title class="dialog-title">Vista previa: {{ fileName }}</h2>
      </div>
    </div>
  </div>


  <mat-dialog-content class="dialog-content">

    <div *ngIf="fileType === 'zip'" class="zip-container">
      

  

      <div class="search-stats-container">
        <div class="search-section">
          <mat-form-field appearance="outline" class="search-field">
            <mat-label>Buscar archivos</mat-label>
            <input matInput [(ngModel)]="searchTerm" (input)="applyZipFilter()" 
                   placeholder="Nombre del archivo...">
            <mat-icon matSuffix>search</mat-icon>
          </mat-form-field>
        </div>
        
        <div class="stats-section">
          <div class="stat-item">
            <mat-icon class="stat-icon">folder</mat-icon>
            <span class="stat-text">{{ totalFiles }} archivos</span>
          </div>
          <div class="stat-item">
            <mat-icon class="stat-icon">storage</mat-icon>
            <span class="stat-text">{{ totalSize }}</span>
          </div>
        </div>
      </div>


             <div class="table-container" *ngIf="hasZipData">
        <div class="table-wrapper">
          <table mat-table [dataSource]="zipDataSource" class="zip-table">
            
            <ng-container matColumnDef="icon">
              <th mat-header-cell *matHeaderCellDef class="icon-column">Tipo</th>
              <td mat-cell *matCellDef="let element" class="icon-column">
                <mat-icon [class.folder-icon]="element.isDirectory" 
                         [class.file-icon]="!element.isDirectory"
                         [class.expanded]="element.isDirectory && isFolderExpanded(element.fullPath)">
                  {{ element.icon }}
                </mat-icon>
              </td>
            </ng-container>


            <ng-container matColumnDef="name">
              <th mat-header-cell *matHeaderCellDef>Nombre</th>
              <td mat-cell *matCellDef="let element" class="name-column" [ngClass]="getFileStatusClass(element)">
                <div [style]="getIndentStyle(element.level)" class="file-name-container">
                  <button *ngIf="element.isDirectory"
                          mat-icon-button
                          class="expand-button"
                          (click)="toggleFolder(element.fullPath)">
                    <mat-icon class="expand-icon mr-5" style="margin-bottom: 4px;">
                      {{ isFolderExpanded(element.fullPath) ? 'expand_less' : 'expand_more' }}
                    </mat-icon>
                  </button>
                  <span class="file-name" [class.folder-name]="element.isDirectory">
                    {{ element.displayName }}
                  </span>
                </div>
              </td>
            </ng-container>


            <ng-container matColumnDef="size">
              <th mat-header-cell *matHeaderCellDef class="size-column">Tamaño</th>
              <td mat-cell *matCellDef="let element" class="size-column">
                <span class="size-text">{{ element.size }}</span>
              </td>
            </ng-container>


            <ng-container matColumnDef="type">
              <th mat-header-cell *matHeaderCellDef class="type-column">Tipo de archivo</th>
              <td mat-cell *matCellDef="let element" class="type-column">
                <span class="type-text">{{ element.type }}</span>
              </td>
            </ng-container>


            <ng-container matColumnDef="status">
              <th mat-header-cell *matHeaderCellDef class="status-column">Estado</th>
              <td mat-cell *matCellDef="let element" class="status-column">
                <mat-icon *ngIf="getFileStatusIcon(element)" 
                         [class.status-valid]="element.isValidated"
                         [class.status-invalid]="!element.isValidated && validationResult"
                         class="status-icon">
                  {{ getFileStatusIcon(element) }}
                </mat-icon>
              </td>
            </ng-container>

            <tr mat-header-row *matHeaderRowDef="zipDisplayedColumns; sticky: true" class="header-row"></tr>
            <tr mat-row *matRowDef="let row; columns: zipDisplayedColumns;" 
                class="zip-row" 
                [class.folder-row]="row.isDirectory"
                [class.file-row]="!row.isDirectory"
                [class.validated-row]="row.isValidated"></tr>
          </table>
        </div>
      </div>


      <div class="no-data" *ngIf="!hasZipData">
        <div class="no-data-content">
          <mat-icon class="no-data-icon">archive</mat-icon>
          <h3 class="no-data-title">Archivo ZIP vacío</h3>
          <p class="no-data-text">El archivo ZIP no contiene archivos para mostrar.</p>
        </div>
      </div>
    </div>


  </mat-dialog-content>
    <div *ngIf="showValidationSummary">
        <mat-card >
          <mat-card-header>
          </mat-card-header>
          <mat-card-content>
            <div class="validation-info">
              <div class="validation-stats">
                <div class="stat-item">
                  <mat-icon class="stat-icon">description</mat-icon>
                  <span class="stat-text">{{ validationSummary }}</span>
                </div>
              </div>

              <div class="validation-actions">
           
                <button *ngIf="validationResult && !validationResult.isValid" 
                        mat-raised-button 
                        color="warn" 
                        (click)="validateDocuments()"
                        [disabled]="isValidating">
                  <mat-icon>refresh</mat-icon>
                  <span>Re-validar</span>
                </button>

              </div>
            </div>

            <div *ngIf="validationResult && validationResult.missingFiles.length > 0" class="missing-files-section">
              <h4 class="missing-files-title">
                <mat-icon>warning</mat-icon>
                Documentos faltantes:
              </h4>
              <div class="missing-files-list">
                <mat-chip-listbox>
                  <mat-chip-option *ngFor="let file of validationResult.missingFiles.slice(0, 5)" 
                                   color="warn" 
                                   selected>
                    {{ file }}
                  </mat-chip-option>
                  <mat-chip-option *ngIf="validationResult.missingFiles.length > 5" 
                                   color="warn" 
                                   selected>
                    +{{ validationResult.missingFiles.length - 5 }} más...
                  </mat-chip-option>
                </mat-chip-listbox>
              </div>
            </div>
          </mat-card-content>
        </mat-card>
      </div>

  <mat-dialog-actions class="dialog-actions">
    <div class="actions-container">
      <button mat-button color="primary" (click)="close()">
        <mat-icon>close</mat-icon>
        <span>Cerrar</span>
      </button>

      <button *ngIf="validationResult && validationResult.isValid" 
              mat-raised-button 
              color="primary" 
              class="raised-button-background"
              (click)="processValidatedDocuments()">
        <mat-icon>check</mat-icon>
        <span>Procesar Documentos ({{ validationResult.foundFiles.length }})</span>
      </button>
      

      <button *ngIf="canValidate && !validationResult" 
              mat-raised-button 
              color="primary" 
              class="raised-button-background"
              (click)="validateDocuments()"
              [disabled]="isValidating">
        <mat-icon *ngIf="!isValidating">fact_check</mat-icon>
        <mat-spinner *ngIf="isValidating" diameter="20"></mat-spinner>
        <span>{{ isValidating ? 'Validando...' : 'Validar ZIP' }}</span>
      </button>

      <button *ngIf="!canValidate" 
              mat-button 
              color="primary" 
              class="raised-button-background"
              disabled>
        <mat-icon>info</mat-icon>
        <span>Sin datos de Excel para validar</span>
      </button>
    </div>
  </mat-dialog-actions>
</div>