<!-- 
  📊 CSV Importer Template - Design Aprimorado
  Baseado no padrão visual dos modais existentes (especialmente agrupamento)
-->

<!-- 🪟 Cabeçalho Modal Aprimorado -->
<div *ngIf="isModal" class="enhanced-modal-header">
  <div class="header-accent"></div>
  <div class="header-content">
    <div class="header-left">
      <div class="header-icon">
        <i class="fas fa-file-csv"></i>
      </div>
      <div class="header-text">
        <h3 class="modal-title">{{ modalTitle }}</h3>
        <p class="modal-subtitle">Importar dados via arquivo CSV</p>
      </div>
    </div>
    <button class="enhanced-close-button" (click)="closeModal()">
      <i class="fas fa-times"></i>
    </button>
  </div>
</div>

<!-- 📋 Container Principal Aprimorado -->
<div class="enhanced-csv-container" [class.modal-mode]="isModal">
  
  <!-- 📁 Área de Upload Aprimorada -->
  <div class="upload-section">
    <div class="section-header">
      <i class="fas fa-upload"></i>
      <span>Selecionar Arquivo</span>
    </div>
    
    <div class="enhanced-drop-zone" 
         [class.drag-over]="isDragOver"
         [class.has-file]="selectedFile"
         [class.processing]="isProcessing"
         (dragover)="onDragOver($event)"
         (dragleave)="onDragLeave($event)"
         (drop)="onDrop($event)"
         (click)="fileInput.click()">
      
      <!-- Estado: Nenhum arquivo -->
      <div *ngIf="!selectedFile" class="drop-zone-content">
        <div class="upload-icon">
          <i class="fas fa-cloud-upload-alt"></i>
        </div>
        <h4 class="upload-title">{{ acceptMessage }}</h4>
        <p class="upload-description">
          Arraste e solte seu arquivo aqui ou <strong>clique para selecionar</strong>
        </p>
        <div class="upload-specs">
          <span class="spec-item">
            <i class="fas fa-file-csv"></i>
            Formato CSV
          </span>
          <span class="spec-item">
            <i class="fas fa-weight-hanging"></i>
            Máx. {{ maxSizeMb }}MB
          </span>
        </div>
      </div>

      <!-- Estado: Arquivo selecionado -->
      <div *ngIf="selectedFile" class="selected-file">
        <div class="file-card">
          <div class="file-header">
            <div class="file-icon-large">
              <i class="fas fa-file-csv"></i>
            </div>
            <div class="file-info">
              <h4 class="file-name">{{ selectedFile.fileName }}</h4>
              <p class="file-details">
                {{ formatFileSize(selectedFile.size) }} • 
                <span class="status-badge" [class]="getStatusClass(selectedFile.status)">
                  <i class="fas" [class]="getStatusIcon(selectedFile.status)"></i>
                  {{ getStatusLabel(selectedFile.status) }}
                </span>
              </p>
            </div>
            <button *ngIf="canRemove()" 
                    class="remove-file-btn" 
                    (click)="removeFile(); $event.stopPropagation()"
                    title="Remover arquivo">
              <i class="fas fa-times"></i>
            </button>
          </div>
        </div>
      </div>

      <!-- Input oculto -->
      <input #fileInput
             type="file"
             accept=".csv"
             (change)="onFileSelected($event)"
             style="display: none;">
    </div>
  </div>

  <!-- 📊 Seção de Validação -->
  <div *ngIf="selectedFile?.validationResult && showPreview" class="validation-section">
    <div class="section-header">
      <i class="fas fa-check-circle"></i>
      <span>Resultado da Validação</span>
    </div>

    <div class="validation-card">
      <!-- Status geral -->
      <div class="validation-status" [class.valid]="validationResult?.valid" [class.invalid]="!validationResult?.valid">
        <div class="status-icon">
          <i class="fas" [class]="validationResult?.valid ? 'fa-check-circle' : 'fa-exclamation-triangle'"></i>
        </div>
        <div class="status-text">
          <h4>{{ validationResult?.valid ? 'Arquivo válido para importação' : 'Problemas encontrados no arquivo' }}</h4>
          <p>{{ validationResult?.valid ? 'O arquivo passou em todas as validações.' : 'Verifique os erros e avisos abaixo.' }}</p>
        </div>
      </div>

      <!-- Estatísticas -->
      <div *ngIf="validationSummary" class="stats-grid">
        <div class="stat-card total">
          <div class="stat-number">{{ validationSummary.totalRecords }}</div>
          <div class="stat-label">Total de registros</div>
        </div>
        <div class="stat-card valid">
          <div class="stat-number">{{ validationSummary.validRecords }}</div>
          <div class="stat-label">Registros válidos</div>
        </div>
        <div *ngIf="validationSummary.invalidRecords && validationSummary.invalidRecords > 0" class="stat-card invalid">
          <div class="stat-number">{{ validationSummary.invalidRecords }}</div>
          <div class="stat-label">Registros inválidos</div>
        </div>
      </div>

      <!-- Erros e Avisos -->
      <div class="issues-container">
        <div *ngIf="validationErrors.length" class="issues-section errors">
          <h5><i class="fas fa-times-circle"></i> Erros Encontrados</h5>
          <ul class="issues-list">
            <li *ngFor="let error of validationErrors" class="issue-item">
              <i class="fas fa-exclamation-circle"></i>
              {{ error }}
            </li>
          </ul>
        </div>

        <div *ngIf="validationWarnings.length" class="issues-section warnings">
          <h5><i class="fas fa-exclamation-triangle"></i> Avisos</h5>
          <ul class="issues-list">
            <li *ngFor="let warning of validationWarnings" class="issue-item">
              <i class="fas fa-info-circle"></i>
              {{ warning }}
            </li>
          </ul>
        </div>
      </div>

      <!-- Preview dos dados -->
      <div *ngIf="validationPreview" class="data-preview-section">
        <h5><i class="fas fa-table"></i> Preview dos Dados</h5>
        <div class="preview-container">
          <table class="data-table">
            <thead>
              <tr>
                <th *ngFor="let header of validationPreview.headers">{{ header }}</th>
              </tr>
            </thead>
            <tbody>
              <tr *ngFor="let row of validationPreview.rows">
                <td *ngFor="let cell of row">{{ cell }}</td>
              </tr>
            </tbody>
          </table>
        </div>
        <p class="preview-note">
          Mostrando {{ validationPreview.previewRows }} de {{ validationPreview.totalRows }} registros
        </p>
        <div class="scroll-hint">
          <i class="fas fa-arrows-alt-h"></i>
          <span>Deslize horizontalmente para ver todas as colunas</span>
        </div>
      </div>
    </div>
  </div>

  <!-- 🎮 Seção de Ações -->
  <div *ngIf="selectedFile" class="actions-section">
    <div class="section-header">
      <i class="fas fa-cogs"></i>
      <span>Ações Disponíveis</span>
    </div>

    <div class="enhanced-actions">
      <button *ngIf="canValidate()" 
              class="action-btn primary" 
              (click)="validateFile()"
              [disabled]="isProcessing">
        <i class="fas fa-search"></i>
        <span>Validar Arquivo</span>
      </button>

      <button *ngIf="canUpload()" 
              class="action-btn success" 
              (click)="uploadFile()"
              [disabled]="isProcessing">
        <i class="fas fa-cloud-upload-alt"></i>
        <span>Enviar para Servidor</span>
      </button>

      <button *ngIf="canImport()" 
              class="action-btn warning" 
              (click)="importFile()"
              [disabled]="isProcessing">
        <i class="fas fa-download"></i>
        <span>Importar Dados</span>
      </button>

      <button *ngIf="canRemove()" 
              class="action-btn secondary" 
              (click)="removeFile()"
              [disabled]="isProcessing">
        <i class="fas fa-trash-alt"></i>
        <span>Remover Arquivo</span>
      </button>
    </div>
  </div>

  <!-- 📊 Indicador de Processamento Aprimorado -->
  <div *ngIf="isProcessing" class="enhanced-processing">
    <div class="processing-content">
      <div class="spinner-container">
        <div class="processing-spinner"></div>
      </div>
      <h4>Processando arquivo...</h4>
      <p>Aguarde enquanto processamos sua solicitação</p>
    </div>
  </div>

</div>

<!-- 🪟 Rodapé Modal Aprimorado -->
<div *ngIf="isModal" class="enhanced-modal-footer">
  <div class="footer-info">
    <i class="fas fa-info-circle"></i>
    <span>Os dados serão validados antes da importação</span>
  </div>
  <div class="footer-actions">
    <button class="footer-btn secondary" (click)="closeModal()">
      Cancelar
    </button>
    <button *ngIf="selectedFile && validationResult?.valid" 
            class="footer-btn primary" 
            (click)="importFile()"
            [disabled]="isProcessing">
      <i class="fas fa-check"></i>
      Confirmar Importação
    </button>
  </div>
</div> 