<div class="domain-filter-overlay" *ngIf="visible" (click)="closeFilters()">
  <div class="domain-filter-panel" (click)="$event.stopPropagation()">
    
    <!-- Header -->
    <div class="filter-header">
      <h3>
        <i class="fas fa-filter"></i>
        Filtros Avançados
      </h3>
      <div class="filter-actions">
        <span *ngIf="hasActiveFilters()" class="active-filters-badge">
          {{ getActiveFiltersCount() }} filtros ativos
        </span>
        <button 
          mat-button 
          color="warn" 
          *ngIf="hasActiveFilters()"
          (click)="clearFilters()">
          <mat-icon>clear_all</mat-icon>
          Limpar
        </button>
        <button mat-icon-button (click)="closeFilters()">
          <mat-icon>close</mat-icon>
        </button>
      </div>
    </div>

    <!-- Content -->
    <div class="filter-content">
      
      <!-- Filtro de Empresa -->
      <div *ngIf="showCompanyFilter" class="filter-group">
        <app-multi-select
          [options]="companyOptions"
          [label]="'Empresa'"
          [placeholder]="'Selecione as empresas'"
          [(ngModel)]="filters['companyIds']">
        </app-multi-select>
      </div>

      <!-- ✨ NOVO: Filtro de Período (date_start/date_end) -->
      <div *ngIf="showDateRangeFilter" class="filter-group">
        <app-date-range-filter
          [label]="'Período'"
          [startPlaceholder]="'Data inicial'"
          [endPlaceholder]="'Data final'"
          [(ngModel)]="dateRange"
          (rangeChanged)="onDateRangeChange($event)">
        </app-date-range-filter>
      </div>

      <!-- ✨ NOVO: Filtro de Data de Vencimento 1 -->
      <div *ngIf="showDueDateOneFilter" class="filter-group">
        <app-date-range-filter
          [label]="dueDateOneLabel"
          [startPlaceholder]="'Vencimento inicial'"
          [endPlaceholder]="'Vencimento final'"
          [(ngModel)]="dueDateOneRange"
          (rangeChanged)="onDueDateOneChange($event)">
        </app-date-range-filter>
      </div>

      <!-- ✨ NOVO: Filtro de Data de Vencimento 2 -->
      <div *ngIf="showDueDateTwoFilter" class="filter-group">
        <app-date-range-filter
          [label]="dueDateTwoLabel"
          [startPlaceholder]="'Vencimento inicial'"
          [endPlaceholder]="'Vencimento final'"
          [(ngModel)]="dueDateTwoRange"
          (rangeChanged)="onDueDateTwoChange($event)">
        </app-date-range-filter>
      </div>

      <!-- Filtros das Colunas (search: true) -->
      <div *ngFor="let field of searchableFields" class="filter-group">
        
        <!-- Campo de texto simples -->
        <app-custom-input 
          *ngIf="!field.searchType || field.searchType === 'text'"
          [field]="{
            key: field.field,
            type: 'text',
            label: field.header,
            placeholder: 'Buscar por ' + field.header.toLowerCase()
          }"
          [(ngModel)]="filters[field.field]">
        </app-custom-input>

        <!-- Select com opções -->
        <app-multi-select
          *ngIf="field.searchType === 'select'"
          [options]="field.searchOptions || []"
          [label]="field.header"
          [placeholder]="'Selecione ' + field.header.toLowerCase()"
          [(ngModel)]="filters[field.field]">
        </app-multi-select>

        <!-- ✅ NOVO: Remote Select (sempre múltiplo para filtros) -->
        <div *ngIf="field.searchType === 'remote-select' && field.remoteConfig" class="remote-select-field">
          <!-- <label class="field-label">{{ (field.remoteConfig.label && field.remoteConfig.label.trim()) ? field.remoteConfig.label : field.header }}</label> -->
          <label class="field-label">{{ (field.remoteConfig.label && field.remoteConfig.label.trim()) ? field.remoteConfig.label : "" }}</label>
          <app-remote-select
            [config]="getRemoteSelectConfig(field)"
            [(ngModel)]="filters[field.filterField || field.searchField || field.field]">
          </app-remote-select>
        </div>

        <!-- Campo numérico -->
        <app-custom-input 
          *ngIf="field.searchType === 'number'"
          [field]="{
            key: field.field,
            type: 'number',
            label: field.header,
            placeholder: 'Buscar por ' + field.header.toLowerCase()
          }"
          [(ngModel)]="filters[field.field]">
        </app-custom-input>

        <!-- Campo de data -->
        <app-custom-input 
          *ngIf="field.searchType === 'date'"
          [field]="{
            key: field.field,
            type: 'date',
            label: field.header,
            placeholder: 'Selecione ' + field.header.toLowerCase()
          }"
          [(ngModel)]="filters[field.field]">
        </app-custom-input>
      </div>

      <!-- Filtros Especiais -->
      <div *ngFor="let filter of specialFilters" class="filter-group">
        
        <!-- Período de Datas -->
        <div *ngIf="filter.type === 'date-range'" class="filter-date-range">
          <div class="range-group-label">
            <i class="fas fa-calendar-alt"></i>
            {{ filter.label }}
          </div>
          <div class="date-range-inputs">
            <app-custom-input
              [field]="{
                key: filter.config.startField,
                type: 'date',
                label: 'Data inicial',
                placeholder: filter.config.placeholder?.start || 'Data inicial'
              }"
              [(ngModel)]="filters[filter.config.startField]">
            </app-custom-input>
            
            <span class="range-separator">até</span>
            
            <app-custom-input
              [field]="{
                key: filter.config.endField,
                type: 'date',
                label: 'Data final',
                placeholder: filter.config.placeholder?.end || 'Data final'
              }"
              [(ngModel)]="filters[filter.config.endField]">
            </app-custom-input>
          </div>
        </div>

        <!-- Faixa Numérica -->
        <div *ngIf="filter.type === 'number-range'" class="filter-number-range">
          <div class="range-group-label">
            <i class="fas fa-calculator"></i>
            {{ filter.label }}
          </div>
          <div class="number-range-inputs">
            <app-custom-input
              [field]="{
                key: filter.config.startField,
                type: 'number',
                label: 'Valor mínimo',
                placeholder: filter.config.placeholder?.start || 'Valor mínimo'
              }"
              [(ngModel)]="filters[filter.config.startField]">
            </app-custom-input>
            
            <span class="range-separator">até</span>
            
            <app-custom-input
              [field]="{
                key: filter.config.endField,
                type: 'number',
                label: 'Valor máximo',
                placeholder: filter.config.placeholder?.end || 'Valor máximo'
              }"
              [(ngModel)]="filters[filter.config.endField]">
            </app-custom-input>
          </div>
        </div>

      </div>

    </div>

    <!-- Footer -->
    <div class="filter-footer">
      <button mat-button (click)="closeFilters()">
        Cancelar
      </button>
      <button 
        mat-raised-button 
        color="primary" 
        (click)="applyFilters(); closeFilters()">
        <mat-icon>check</mat-icon>
        Aplicar Filtros
      </button>
    </div>

  </div>
</div> 