<!-- 🎯 Container principal seguindo padrão PraFrota -->
<div class="remote-select-wrapper" [class.disabled]="disabled" [class.has-value]="hasValue">
  
  <!-- 🔍 Campo de busca principal - Padrão CustomInput -->
  <div class="remote-select-input-container">
    
    <!-- Input de busca -->
    <input
      #searchInput
      type="text"
      [id]="config.valueField || 'remote-select'"
      [placeholder]="placeholder || ' '"
      [value]="state.searchTerm"
      [disabled]="disabled"
      [required]="required"
      (input)="onSearchInput($event)"
      (focus)="onFocus()"
      (blur)="onBlur()"
      (keydown)="onKeyDown($event)"
      autocomplete="off"
      role="combobox"
      [attr.aria-expanded]="state.dropdownOpen"
      [attr.aria-describedby]="hasError ? 'error-message' : null"
    />
    
    <!-- 🏷️ Label flutuante (igual ao custom-input) -->
    <label 
      *ngIf="placeholder" 
      [for]="config.valueField || 'remote-select'"
      class="floating-label"
    >
      {{ placeholder }}
      <span *ngIf="required" class="required-indicator">*</span>
    </label>
    
    <!-- Ícones de ação -->
    <div class="input-actions">
      <!-- Spinner de loading -->
      <div 
        *ngIf="isLoading" 
        class="loading-spinner"
        title="Carregando..."
      >
        <i class="fas fa-spinner fa-spin"></i>
      </div>
      
      <!-- Botão limpar -->
      <button
        *ngIf="canClear && !isLoading"
        type="button"
        class="action-button clear-button"
        (click)="clearSelection()"
        [attr.aria-label]="'Limpar seleção'"
        title="Limpar seleção"
      >
        <i class="fas fa-times"></i>
      </button>
      
      <!-- Botão F2 (desktop only) -->
      <button
        type="button"
        class="action-button f2-button desktop-only"
        (click)="openModal()"
        [disabled]="disabled"
        title="Pressione F2 para abrir lista completa"
        [attr.aria-label]="'Abrir lista completa'"
      >
        <i class="fas fa-list"></i>
      </button>
      
      <!-- Seta dropdown -->
      <div class="dropdown-arrow" [class.open]="state.dropdownOpen">
        <i class="fas fa-chevron-down"></i>
      </div>
    </div>
    
    <!-- 📋 Dropdown de resultados -->
    <div 
      #dropdown
      *ngIf="state.dropdownOpen" 
      class="remote-select-dropdown"
      role="listbox"
      [attr.aria-label]="'Resultados da busca'"
    >
      
      <!-- Lista de itens -->
      <div 
        *ngFor="let item of state.items; let i = index; trackBy: trackByFn"
        class="dropdown-item"
        [class.selected]="isItemSelected(i)"
        [class.highlighted]="isItemActuallySelected(item)"
        [class.multiple-selected]="mergedConfig.multiple && isItemActuallySelected(item)"
        (click)="selectItem(item)"
        (mouseenter)="selectedIndex = i"
        role="option"
        [attr.aria-selected]="isItemActuallySelected(item)"
        [attr.id]="'option-' + i"
      >
        <div class="item-content">
          <span class="item-label">{{ item.label }}</span>
          <small class="item-id" *ngIf="item.id !== item.label">ID: {{ item.id }}</small>
        </div>
        
        <!-- Indicador de seleção -->
        <i 
          *ngIf="isItemActuallySelected(item)" 
          class="fas fa-check selection-indicator"
        ></i>
      </div>
      
      <!-- Estado: Nenhum resultado -->
      <div 
        *ngIf="state.items.length === 0 && !isLoading && state.searchTerm.length >= (mergedConfig.minLength || 3)"
        class="dropdown-empty"
      >
        <i class="fas fa-search"></i>
        <span>Nenhum resultado encontrado</span>
      </div>
      
      <!-- Estado: Digite mais caracteres -->
      <div 
        *ngIf="state.searchTerm.length > 0 && state.searchTerm.length < (mergedConfig.minLength || 3)"
        class="dropdown-hint"
      >
        <i class="fas fa-keyboard"></i>
        <span>Digite pelo menos {{ mergedConfig.minLength || 3 }} caracteres</span>
      </div>
    </div>
  </div>
  
  <!-- Mensagem de erro -->
  <div 
    *ngIf="hasError" 
    class="error-message"
    id="error-message"
  >
    <i class="fas fa-exclamation-triangle"></i>
    {{ errorMessage }}
  </div>
  
  <!-- 🎯 Chips de seleção (para modo múltiplo - futuro) -->
  <div 
    *ngIf="mergedConfig.multiple && state.selectedItems.length > 0" 
    class="selection-chips"
  >
    <div 
      *ngFor="let item of state.selectedItems"
      class="selection-chip"
    >
      <span class="chip-label">{{ item.label }}</span>
      <button
        *ngIf="!disabled"
        type="button"
        class="chip-remove"
        (click)="removeSelection(item)"
        [attr.aria-label]="'Remover ' + item.label"
      >
        <i class="fas fa-times"></i>
      </button>
    </div>
  </div>
  
  <!-- 🔧 Debug info (apenas em desenvolvimento) -->
  <div *ngIf="false" class="debug-info">
    <small>
      Debug: {{ state.searchTerm }} | Items: {{ state.items.length }} | Loading: {{ isLoading }}
    </small>
  </div>
</div>

<!-- 🎨 Modal de seleção (placeholder para implementação futura) -->
<div 
  *ngIf="state.modalOpen" 
  class="remote-select-modal-backdrop"
  (click)="closeModal()"
>
  <div class="remote-select-modal" (click)="$event.stopPropagation()">
    <div class="modal-header">
      <h3>{{ mergedConfig.modalTitle || 'Selecionar Item' }}</h3>
      <button type="button" class="modal-close" (click)="closeModal()">
        <i class="fas fa-times"></i>
      </button>
    </div>
    
    <div class="modal-content">
      <div class="coming-soon">
        <i class="fas fa-cog fa-spin"></i>
        <p>🚧 Modal de seleção em desenvolvimento...</p>
        <p>Integração futura com DataTable para listagem completa.</p>
      </div>
    </div>
    
    <div class="modal-actions">
      <button type="button" class="btn-cancel" (click)="closeModal()">Cancelar</button>
      <button type="button" class="btn-confirm" (click)="closeModal()">Confirmar</button>
    </div>
  </div>
</div>