<div class="preview-excel-container">

  <div class="preview-header" style="padding: 16px; border-bottom: 1px solid #e0e0e0; position: sticky; top: 0; background: white; z-index: 100;">
    <div class="header-top" style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; width: 50%;">

      <div class="changes-indicator" *ngIf="hasUnsavedChanges" 
           style="display: flex; align-items: center; gap: 6px; padding: 6px 12px; background: #fff3cd; border-radius: 20px; font-size: 12px; color: #856404; border: 1px solid #ffeaa7;">
        <mat-icon style="font-size: 14px;">edit</mat-icon>
        <span>Cambios sin guardar</span>
      </div>
    </div>

    <div class="header-controls" style="display: flex; gap: 16px; width: 100%; justify-content: end; align-items: center;">
      <div class="docu">
        <h2 mat-dialog-title style="margin: 0; font-size: 18px; display: flex; align-items: center; gap: 8px; color: #424242; margin-bottom: 13px;" >
          <mat-icon style="color: #3a8553;">table_chart</mat-icon>
          {{ fileName }}
        </h2>
      </div>

      <div class="sheet-selector" *ngIf="sheetNames.length > 1">
        <mat-form-field appearance="outline" style="width: 200px;">
          <mat-label>Hoja</mat-label>
          <mat-select [(value)]="selectedSheet" (selectionChange)="onSheetChange($event.value)">
            <mat-option *ngFor="let sheet of sheetNames" [value]="sheet">
              {{ sheet }}
            </mat-option>
          </mat-select>
        </mat-form-field>
      </div>
      
      <div class="edit-controls" style="display: flex; align-items: center; gap: 8px;">

        <ng-container *ngIf="editMode">
          <button mat-icon-button 
                  (click)="addRow()" 
                  matTooltip="Agregar fila"
                  color="primary"
                  style="border-radius: 8px;">
            <mat-icon>table_rows</mat-icon>
          </button>
          
          <button mat-icon-button 
                  (click)="addColumn()" 
                  matTooltip="Agregar columna"
                  color="primary"
                  style="border-radius: 8px;">
            <mat-icon>view_column</mat-icon>
          </button>
        </ng-container>
        
        <ng-container *ngIf="hasUnsavedChanges">
          <button mat-raised-button 
                  (click)="saveChanges()" 
                  color="primary"
                  style="margin-left: 8px; border-radius: 8px;">
            <mat-icon>save</mat-icon>
            Guardar
          </button>
          
          <button mat-stroked-button 
                  (click)="discardChanges()" 
                  color="warn"
                  style="border-radius: 8px;">
            <mat-icon>undo</mat-icon>
            Descartar
          </button>
        </ng-container>
      </div>
    </div>
  </div>

  <div class="table-container" style="overflow: auto; background: #fafafa; position: relative;">
    
    <table class="excel-table" 
           *ngIf="currentSheetData.length > 0" 
           style="width: 100%; border-collapse: separate; border-spacing: 0; font-size: 13px; background: white; margin: 16px; border-radius: 10px; box-shadow: 0 2px 8px rgba(0,0,0,0.1);">
      
      <thead>
        <tr style="background: linear-gradient(to bottom, #f8f9fa, #e9ecef); border-radius: 8px 8px 0 0;">
          <th class="row-header" 
              style="width: 60px; padding: 12px 8px; border-right: 1px solid #dee2e6; text-align: center; font-weight: 600; color: #495057; font-size: 12px; border-radius: 8px 0 0 0;">
            #
          </th>
          
          <th *ngFor="let header of getTableHeaders(); let colIndex = index; let isLast = last; trackBy: trackByIndex" 
              class="column-header" 
              [style.border-radius]="isLast ? '0 8px 0 0' : '0'"
              style="min-width: 140px; padding: 12px 16px; border-right: 1px solid #dee2e6; text-align: left; font-weight: 600; color: #495057; font-size: 12px; position: relative;">
            <div style="display: flex; align-items: center; justify-content: space-between;">
              <span>{{ header }}</span>
              <button *ngIf="editMode && getTableHeaders().length > 1" 
                      mat-icon-button 
                      (click)="deleteColumn(colIndex)"
                      style="width: 24px; height: 24px; color: #dc3545; opacity: 0.7;"
                      matTooltip="Eliminar columna">
                <mat-icon style="font-size: 16px;">close</mat-icon>
              </button>
            </div>
          </th>
        </tr>
      </thead>
      
      <tbody>
        <tr *ngFor="let row of currentSheetData; let rowIndex = index; let isLast = last; trackBy: trackByIndex"
            [style.background]="rowIndex % 2 === 0 ? '#ffffff' : '#f8f9fa'"
            [style.border-radius]="isLast ? '0 0 8px 8px' : '0'"
            style="transition: all 0.2s ease; border-bottom: 1px solid #e9ecef;">
          
          <td class="row-number" 
              [style.border-radius]="isLast ? '0 0 0 8px' : '0'"
              style="width: 60px; padding: 12px 8px; border-right: 1px solid #dee2e6; text-align: center; font-weight: 500; color: #6c757d; font-size: 12px; background: #f8f9fa !important;">
            <div style="display: flex; align-items: center; justify-content: center; gap: 4px;">
              <span>{{ getRowNumber(rowIndex) }}</span>
              <button *ngIf="editMode && currentSheetData.length > 1" 
                      mat-icon-button 
                      (click)="deleteRow(rowIndex)"
                      style="width: 20px; height: 20px; color: #dc3545;"
                      matTooltip="Eliminar fila">
                <mat-icon style="font-size: 14px;">close</mat-icon>
              </button>
            </div>
          </td>
          

          <td *ngFor="let cell of row; let colIndex = index; let isLastCol = last; trackBy: trackByIndex" 
              class="data-cell" 
              [style.border-radius]="isLast && isLastCol ? '0 0 8px 0' : '0'"
              style="min-width: 140px; max-width: 250px; padding: 12px 16px; border-right: 1px solid #dee2e6; vertical-align: top; position: relative;">
            

            <div *ngIf="!editMode" 
                 class="cell-content"
                 style="min-height: 20px; white-space: pre-wrap; word-wrap: break-word; font-family: 'Roboto', sans-serif; color: #424242; line-height: 1.4;">
              {{ getCellValue(row, colIndex) }}
            </div>


            <input *ngIf="editMode"
                   type="text"
                   class="cell-input"
                   [value]="getCellValue(row, colIndex)"
                   (input)="onCellInput(rowIndex, colIndex, $event)"
                   (blur)="onCellBlur(rowIndex, colIndex, $event)"
                   [attr.data-row]="rowIndex"
                   [attr.data-col]="colIndex"
                   style="width: 100%; border: 1px solid #ced4da; border-radius: 4px; padding: 8px; font-size: 13px; font-family: 'Roboto', sans-serif; background: white; transition: border-color 0.2s ease; outline: none;"
                   onfocus="this.style.borderColor='#007bff'; this.style.boxShadow='0 0 0 2px rgba(0, 123, 255, 0.25)'"
                   onblur="this.style.borderColor='#ced4da'; this.style.boxShadow='none'">
          </td>
        </tr>
      </tbody>
    </table>
    
    <div *ngIf="currentSheetData.length === 0" 
         class="no-data-message"
         style="padding: 60px 20px; text-align: center; color: #6c757d; background: white; margin: 16px; border-radius: 8px; box-shadow: 0 2px 8px rgba(0,0,0,0.1);">
      <mat-icon style="font-size: 64px; color: #dee2e6; margin-bottom: 16px;">table_chart</mat-icon>
      <p style="margin: 0 0 16px 0; font-size: 16px;">No hay datos disponibles en la hoja "{{ selectedSheet }}"</p>
      <button *ngIf="editMode" 
              mat-raised-button 
              color="primary" 
              (click)="addRow()"
              style="border-radius: 8px;">
        <mat-icon>add</mat-icon>
        Agregar primera fila
      </button>
    </div>
  </div>

  <div class="table-summary">
    <div class="summary-info" style="display: flex; gap: 24px;">
      <div style="display: flex; align-items: center; gap: 6px;">
        <mat-hint style="color: #1976d2;">INFORMACIÓN:</mat-hint>
        <mat-icon style="font-size: 16px;">layers</mat-icon>
        <span>{{ sheetNames.length }} {{ sheetNames.length === 1 ? 'hoja' : 'hojas' }}</span>
      </div>
      <div style="display: flex; align-items: center; gap: 6px;">
        <mat-icon style="font-size: 16px;">table_rows</mat-icon>
        <span>{{ currentSheetData.length }} filas</span>
      </div>
      <div style="display: flex; align-items: center; gap: 6px;">
        <mat-icon style="font-size: 16px;">view_column</mat-icon>
        <span>{{ getTableHeaders().length }} columnas</span>
      </div>
    </div>
    
    <div class="summary-actions">
      <div *ngIf="editMode" style="display: flex; align-items: center; gap: 6px; color: #28a745;">
        <mat-icon style="font-size: 16px;">edit</mat-icon>
        <span>Edición habilitada</span>
      </div>
      <div *ngIf="!editMode" style="display: flex; align-items: center; gap: 6px; color: #6c757d;">
        <mat-icon style="font-size: 16px;">visibility</mat-icon>
        <span>Solo lectura</span>
      </div>
    </div>
  </div>

  <mat-dialog-actions align="end" 
                      class="dialog-actions"
                      style="padding: 16px; border-top: 1px solid #e0e0e0; background: white; gap: 12px;">

    <div class="status-info" style="margin-right: auto; display: flex; align-items: center; gap: 8px; font-size: 13px; color: #6c757d;">
      <mat-icon style="font-size: 16px; color: #1976d2;">info</mat-icon>
      <span>{{ selectedSheet }} • {{ editMode ? 'Modo edición' : 'Solo lectura' }}</span>
    </div>
    
    <div class="action-buttons" style="display: flex; gap: 12px;">
      <button mat-button
              (click)="closeDialog()">
        <mat-icon>close</mat-icon>
        Cerrar
      </button>
     
    </div>
  </mat-dialog-actions>
</div>
