<div class="integration-container">
  <!-- Filtros -->
  <div class="filters-section">
    <!-- Campo de busca customizado -->
    <div class="custom-field">
      <input
        type="text"
        id="search-input"
        placeholder=" "
        [(ngModel)]="searchTerm"
        (input)="onSearchChange()"
      />
      <label for="search-input">Buscar integrações...</label>
      <i class="material-icons field-icon">search</i>
    </div>

    <!-- Select de status minimalista -->
    <div class="custom-field">
      <select
        id="status-select"
        [(ngModel)]="statusFilter"
        (change)="onStatusChange()"
        class="status-select"
      >
        <option value="">Todos os Status ({{ getTotalCount() }})</option>
        <option value="connected">Conectadas ({{ getConnectedCount() }})</option>
        <option value="error">Com Erro ({{ getErrorCount() }})</option>
        <option value="disconnected">Reconectar ({{ getDisconnectedCount() }})</option>
      </select>
      <label for="status-select">Status</label>
      <i class="material-icons field-icon">expand_more</i>
    </div>
  </div>

  <!-- Filtros por categoria -->
  <div class="category-filters">
    <div class="category-chips">
      <button 
        *ngFor="let category of categories"
        class="category-chip"
        [class.active]="currentFilter.category === category.value"
        (click)="onCategoryFilter(category.value)">
        {{ category.label }} 
        <span class="count">{{ category.count }}</span>
      </button>
    </div>
  </div>

  <!-- Grid de cards -->
  <div class="cards-grid" *ngIf="!isLoading">
    <app-generic-card
      *ngFor="let card of filteredCards"
      [card]="card"
      (actionClick)="onCardAction($event)">
    </app-generic-card>
  </div>

  <!-- Loading state -->
  <div class="loading-container" *ngIf="isLoading">
    <mat-icon class="loading-icon">sync</mat-icon>
    <p>Carregando integrações...</p>
  </div>

  <!-- Empty state -->
  <div class="empty-state" *ngIf="!isLoading && filteredCards.length === 0">
    <mat-icon class="empty-icon">integration_instructions</mat-icon>
    <h3>Nenhuma integração encontrada</h3>
    <p>Tente ajustar os filtros ou buscar por outro termo.</p>
  </div>
</div>
