<div class="search-container">
  <div class="search-header">
    <h1>{{ 'search.title' | translate }}</h1>
    <div class="search-box">
      <input
        type="text"
        [(ngModel)]="searchQuery"
        (input)="onSearchInput(searchQuery)"
        [placeholder]="'search.placeholder' | translate"
        [attr.aria-label]="'search.title' | translate"
        class="search-input"
        autofocus
      />
      <app-icon name="search" [size]="20" class="search-icon" />
    </div>
  </div>

  @if (searchQuery && items().length > 0) {
    <div class="results-count">
      {{ 'search.resultsCount' | translate }} {{ items().length }}@if (totalResults() > items().length) { {{ 'search.of' | translate }} {{ totalResults() }} }
    </div>
  }

  @if (loading() && items().length === 0) {
    <div class="loading-initial" role="status" aria-live="polite">
      <div class="spinner"></div>
      <p>{{ 'search.searching' | translate }}</p>
    </div>
  }

  @if (error()) {
    <div class="error" role="alert">
      <p>{{ error() }}</p>
      <button type="button" (click)="performSearch(searchQuery)">{{ 'search.retry' | translate }}</button>
    </div>
  }

  @if (isQueryTooShort()) {
    <div class="empty-state">
      <div class="empty-state-icon">
        <app-icon name="search" [size]="40" />
      </div>
      <p>{{ 'search.minLength' | translate:{ count: minSearchLength } }}</p>
    </div>
  }

  @if (!loading() && searchQuery && !isQueryTooShort() && items().length === 0 && !error()) {
    <div class="no-results">
      <div class="no-results-icon">
        <app-icon name="search" [size]="32" />
      </div>
      <h2>{{ 'search.noResults' | translate }}</h2>
      <p>{{ 'search.noResultsFor' | translate:{ query: searchQuery } }}</p>
      <p class="hint">{{ 'search.noResultsHint' | translate }}</p>
    </div>
  }

  @if (items().length > 0) {
    <div class="items-grid">
      @for (item of items(); track trackByItemId($index, item)) {
        <app-product-card
          [item]="item"
          [title]="itemName(item)"
          [description]="itemDesc(item)"
          [showDescription]="true"
          [addToCartLabel]="'search.addToCart' | translate"
          (addToCart)="addToCart($event.itemID, $event.event)"
          (preview)="onItemHover($event)"
        />
      }
    </div>

      @if (loading() && items().length > 0) {
        @for (i of skeletonSlots; track i) {
          <div class="item-card skeleton-card" aria-hidden="true">
            <div class="item-link">
              <app-skeleton shape="rect" class="item-image" height="auto" />
              <div class="item-details">
                <app-skeleton shape="text" width="80%" height="16px" />
                <app-skeleton shape="text" width="50%" height="12px" />
                <app-skeleton shape="text" width="40%" height="18px" />
                <app-skeleton shape="text" width="60px" height="6px" />
              </div>
            </div>
            <app-skeleton shape="rect" class="skeleton-btn" height="42px" />
          </div>
        }
      }

    @if (!hasMore() && items().length > 0) {
      <div class="no-more">
        <p>{{ 'search.allLoaded' | translate }}</p>
      </div>
    }
  }

  @if (!searchQuery) {
    <div class="empty-state">
      <div class="empty-state-icon">
        <app-icon name="search" [size]="40" />
      </div>
      <p>{{ 'search.emptyState' | translate }}</p>
    </div>
  }
</div>
