<section class="search-bar card" [class.mobile-overlay-open]="mobileOverlayOpen()" [attr.aria-label]="'search.searchBarAria' | translate">
  @if (mobileOverlayOpen()) {
    <div class="mobile-overlay-backdrop" (click)="closeOverlay()" aria-hidden="true"></div>
  }

  <div class="search-shell" [class.mobile-overlay]="mobileOverlayOpen()">
    <form class="search-form" (submit)="onSubmit($event)">
      <input
        type="search"
        [ngModel]="query"
        (ngModelChange)="onQueryInput($event)"
        (keydown)="onKeydown($event)"
        (focus)="onFocus()"
        (blur)="onBlur()"
        name="query"
        [placeholder]="'catalog.searchPlaceholder' | translate"
        role="combobox"
        aria-autocomplete="list"
        [attr.aria-expanded]="suggestions.length > 0"
        [attr.aria-controls]="suggestions.length > 0 ? 'search-suggestions-listbox' : null"
        [attr.aria-activedescendant]="activeSuggestionIndex() >= 0 ? 'search-suggestion-' + activeSuggestionIndex() : null"
        [attr.aria-label]="'catalog.searchPlaceholder' | translate"
        autocomplete="off" />

      @if (loading) {
        <span class="loading-dot" [attr.aria-label]="'search.searching' | translate"></span>
      }

      <button type="button" class="search-clear-btn" [disabled]="!query" (click)="clearQuery()" [attr.aria-label]="'catalog.clearSearch' | translate">
        <app-icon name="x" [size]="16" />
      </button>
      <button type="submit" [disabled]="loading">{{ 'catalog.searchSubmit' | translate }}</button>
    </form>

    @if (suggestions.length > 0) {
      <div class="suggestions" id="search-suggestions-listbox" role="listbox" [attr.aria-label]="'catalog.suggestionsTitle' | translate">
        <strong>{{ 'catalog.suggestionsTitle' | translate }}</strong>
        <div class="suggestion-list">
          @for (item of suggestions; track item.id) {
            <button
              type="button"
              [id]="'search-suggestion-' + $index"
              class="suggestion-item"
              role="option"
              [class.active]="$index === activeSuggestionIndex()"
              [attr.aria-selected]="$index === activeSuggestionIndex()"
              [attr.aria-label]="suggestionLabel(item)"
              (click)="selectSuggestion(item)">
              <span class="suggestion-icon" aria-hidden="true"><app-icon [name]="item.icon" [size]="16" /></span>
              <span class="suggestion-copy">
                <span class="suggestion-title">{{ item.title }}</span>
                @if (item.subtitle) {
                  <small>{{ item.subtitle | translate }}</small>
                }
              </span>
              <span class="suggestion-type">{{ ('search.suggestionType.' + item.type) | translate }}</span>
            </button>
          }
        </div>
      </div>
    }

    @if (popularSearches.length > 0) {
      <app-trending-searches
        [title]="'catalog.popularSearchesTitle' | translate"
        [items]="popularSearches"
        (selected)="onRecentSelected($event)" />
    }

    @if (recentSearches.length > 0) {
      <app-trending-searches
        [title]="'catalog.recentSearchesTitle' | translate"
        [items]="recentSearches"
        (selected)="onRecentSelected($event)" />
    }

    @if (searchHistory.length > 0) {
      <div class="history">
        <div class="history-head">
          <strong>{{ 'catalog.searchHistoryTitle' | translate }}</strong>
          <button type="button" (click)="historyCleared.emit()">{{ 'catalog.clearHistory' | translate }}</button>
        </div>
        <div class="chip-list">
          @for (item of searchHistory; track $index) {
            <button type="button" class="chip" (click)="onRecentSelected(item)">{{ item }}</button>
          }
        </div>
      </div>
    }

    @if (noResults && !loading) {
      <p class="no-results">{{ 'catalog.searchNoResultsHint' | translate }}</p>
    }
  </div>
</section>
