# 📊 CSV Importer Component

Componente para importação de arquivos CSV que funciona em **dois contextos**:

1. **📋 SubTab** - Integrado ao sistema de abas (como no account-payable)
2. **🪟 Modal** - Como diálogo independente

## 🎯 Características

- ✅ **Validação prévia** do CSV no servidor
- ✅ **Preview** dos dados antes da importação
- ✅ **Upload seguro** via sistema S3 existente
- ✅ **Progress tracking** em tempo real
- ✅ **Error handling** robusto
- ✅ **Responsive design** para mobile
- ✅ **Drag & Drop** suportado

## 🚀 Uso como SubTab

```typescript
// No getFormConfig() do componente do domínio
{
  id: 'importar',
  label: 'Importar CSV',
  icon: 'fa-file-csv',
  enabled: true,
  order: 3,
  templateType: 'component',
  dynamicComponent: {
    selector: 'app-csv-importer',
    inputs: {
      maxSizeMb: 10,
      allowMultiple: false,
      showPreview: true,
      autoUpload: false,
      acceptMessage: 'Selecione um arquivo CSV para importar'
    }
  },
  requiredFields: []
}
```

## 🪟 Uso como Modal

### Método 1: Service Helper (Recomendado)

```typescript
import { CsvImporterDialogService } from './shared/components/csv-importer/csv-importer-dialog.service';

constructor(private csvImporterDialog: CsvImporterDialogService) {}

// Account Payable específico
openAccountPayableImporter() {
  this.csvImporterDialog.openAccountPayableCsvImporter()
    .subscribe(result => {
      if (result?.success) {
        console.log('Importação concluída:', result.result);
        this.refreshData(); // Atualizar lista
      }
    });
}

// Genérico para outros domínios
openGenericImporter() {
  this.csvImporterDialog.openGenericCsvImporter('vehicles', {
    title: 'Importar Veículos',
    acceptMessage: 'Selecione um CSV com dados dos veículos'
  }).subscribe(result => {
    // ...
  });
}
```

### Método 2: MatDialog Direto

```typescript
import { MatDialog } from '@angular/material/dialog';
import { CsvImporterModalComponent } from './shared/components/csv-importer/csv-importer-modal.component';

constructor(private dialog: MatDialog) {}

openCsvImporter() {
  const dialogRef = this.dialog.open(CsvImporterModalComponent, {
    width: '700px',
    data: {
      config: {
        maxSizeMb: 10,
        allowMultiple: false,
        showPreview: true,
        autoUpload: false,
        validateEndpoint: 'account-payable/validate/csv',
        importEndpoint: 'account-payable/import/csv',
        modalTitle: 'Importar Contas a Pagar'
      },
      title: 'Importar CSV',
      subtitle: 'Selecione um arquivo para importar'
    }
  });

  dialogRef.afterClosed().subscribe(result => {
    if (result?.success) {
      // Importação bem-sucedida
    }
  });
}
```

## 🛠️ Exemplo de Botão no Header

```typescript
// No componente que precisa do importador
import { HeaderActionsService } from './shared/services/header-actions.service';
import { CsvImporterDialogService } from './shared/components/csv-importer/csv-importer-dialog.service';

ngOnInit() {
  this.headerActionsService.setActions([
    {
      label: 'Importar CSV',
      icon: 'fa-file-csv',
      color: 'primary',
      action: () => this.openCsvImporter()
    }
  ]);
}

openCsvImporter() {
  this.csvImporterDialog.openAccountPayableCsvImporter()
    .subscribe(result => {
      if (result?.success) {
        // Atualizar dados
        this.loadData();
        // Mostrar notificação
        this.snackNotify.success(`${result.result.data.imported} registros importados!`);
      }
    });
}
```

## 📋 Fluxo de Importação

1. **📁 Seleção** - Usuário seleciona/arrasta arquivo CSV
2. **🔍 Validação** - `POST /account-payable/validate/csv`
3. **👀 Preview** - Exibe resumo e preview dos dados
4. **⬆️ Upload** - Usa sistema S3 existente via `file/get-upload-url`
5. **📥 Importação** - `POST /account-payable/import/csv/{fileId}`
6. **✅ Resultado** - Exibe estatísticas de importação

## 🎨 Personalização

### CSS Variables

```scss
:host {
  --csv-primary: #007bff;    // Cor principal
  --csv-success: #28a745;    // Cor de sucesso
  --csv-danger: #dc3545;     // Cor de erro
  --csv-warning: #ffc107;    // Cor de aviso
  --csv-border-radius: 8px;  // Bordas arredondadas
}
```

### Configuração

```typescript
interface CsvImporterConfig {
  maxSizeMb: number;           // Tamanho máximo em MB
  allowedExtensions: string[]; // Extensões permitidas
  allowMultiple: boolean;      // Múltiplos arquivos
  showPreview: boolean;        // Mostrar preview
  autoUpload: boolean;         // Upload automático
  validateEndpoint: string;    // Endpoint de validação
  importEndpoint: string;      // Endpoint de importação
  modalTitle?: string;         // Título do modal
  acceptMessage?: string;      // Mensagem de aceitação
}
```

## 🔌 Integração com Backend

### Endpoints Esperados

#### POST `/account-payable/validate/csv`
```typescript
// Request: FormData com arquivo
// Response:
{
  success: boolean;
  data?: {
    valid: boolean;
    errors?: string[];
    warnings?: string[];
    preview?: {
      headers: string[];
      rows: string[][];
      totalRows: number;
      previewRows: number;
    };
    summary?: {
      totalRecords: number;
      validRecords: number;
      invalidRecords: number;
    };
  };
}
```

#### POST `/account-payable/import/csv/{fileId}`
```typescript
// Response:
{
  success: boolean;
  data?: {
    imported: number;
    failed: number;
    total: number;
    failedRecords?: any[];
  };
  message: string;
}
```

## 🔧 Troubleshooting

### Componente não encontrado
```
Erro: Componente 'app-csv-importer' não encontrado no registry
```

**Solução**: Verificar se está registrado em `DynamicComponentResolverService`

### Modal não abre
```
Erro: Modal não responde
```

**Solução**: Verificar se `MatDialogModule` está importado

### Upload falha
```
Erro: Erro no upload do CSV
```

**Solução**: Verificar se `ImageUploadService` está funcionando

## 📱 Compatibilidade

- ✅ **Desktop**: Funcionalidade completa
- ✅ **Mobile**: Interface adaptada
- ✅ **Tablet**: Layout responsivo
- ✅ **Drag & Drop**: Suportado em browsers modernos
- ✅ **Touch**: Gestos de toque suportados

## 🎯 Status Atual

- ✅ **Implementação**: Completa
- ✅ **Testes**: Funcionais
- ✅ **Documentação**: Atualizada
- ✅ **Modal**: Totalmente compatível
- ✅ **SubTab**: Integrado ao sistema dinâmico

O componente está **100% funcional** em ambos os contextos! 