<ng-container *transloco="let t; prefix: 'authorBrowser'">
  @if (loading) {
    <div class="loading-state">
      <p-progressSpinner
        [style]="{'width': '60px', 'height': '60px'}"
        strokeWidth="3"
        fill="transparent"
        animationDuration="1.5s">
      </p-progressSpinner>
    </div>
  }

  @if (!loading) {
    <div class="browse-header">
      <h2 class="browse-title">{{ t('browseAllAuthors') }}</h2>

      <div class="browse-controls">
        <div class="search-wrapper">
          <i class="pi pi-search search-icon"></i>
          <input
            pInputText
            type="text"
            [placeholder]="t('searchPlaceholder')"
            [ngModel]="searchTerm$ | async"
            (ngModelChange)="onSearchChange($event)"
            class="search-input"/>
        </div>

        <div class="filter-sort-wrapper">
          <p-select
            [options]="sortOptions"
            [ngModel]="sortBy$ | async"
            (ngModelChange)="onSortChange($event)"
            optionLabel="label"
            optionValue="value"
            class="sort-dropdown">
          </p-select>

          <button class="sort-direction-btn" (click)="toggleSortDirection()">
            <i class="pi" [class.pi-arrow-up]="(sortDirection$ | async) === 'asc'" [class.pi-arrow-down]="(sortDirection$ | async) === 'desc'"></i>
          </button>

          <button class="filter-btn" (click)="filterPopover.toggle($event)">
            <i class="pi pi-filter"></i>
            @if (activeFilterCount > 0) {
              <span class="filter-badge"></span>
            }
          </button>

          @if (!isMobile) {
            <button class="display-settings-btn" (click)="displaySettingsPopover.toggle($event)">
              <i class="pi pi-sliders-h"></i>
            </button>
            <p-popover #displaySettingsPopover>
              <div class="display-settings-content">
                <label class="display-settings-label">{{ t('cardSize') }}</label>
                <p-slider
                  [(ngModel)]="authorScaleService.scaleFactor"
                  [min]="0.7"
                  [max]="1.3"
                  [step]="0.01"
                  [style]="{ width: '100%' }"
                  (onChange)="updateScale()">
                </p-slider>
                <div class="scale-value-display">
                  {{ authorScaleService.scaleFactor.toFixed(2) }}x
                </div>
              </div>
            </p-popover>
          }

          <p-popover #filterPopover>
            <div class="filter-popover-content">
              <div class="filter-group">
                <label class="filter-label">{{ t('filters.matchStatus') }}</label>
                <p-select
                  [options]="[
                    {label: t('filters.all'), value: 'all'},
                    {label: t('filters.matched'), value: 'matched'},
                    {label: t('filters.unmatched'), value: 'unmatched'}
                  ]"
                  [ngModel]="(filters$ | async)?.matchStatus"
                  (ngModelChange)="onFilterChange('matchStatus', $event)"
                  optionLabel="label"
                  optionValue="value"
                  class="filter-dropdown">
                </p-select>
              </div>

              <div class="filter-group">
                <label class="filter-label">{{ t('filters.photoStatus') }}</label>
                <p-select
                  [options]="[
                    {label: t('filters.all'), value: 'all'},
                    {label: t('filters.hasPhoto'), value: 'has-photo'},
                    {label: t('filters.noPhoto'), value: 'no-photo'}
                  ]"
                  [ngModel]="(filters$ | async)?.photoStatus"
                  (ngModelChange)="onFilterChange('photoStatus', $event)"
                  optionLabel="label"
                  optionValue="value"
                  class="filter-dropdown">
                </p-select>
              </div>

              <div class="filter-group">
                <label class="filter-label">{{ t('filters.readStatus') }}</label>
                <p-select
                  [options]="[
                    {label: t('filters.all'), value: 'all'},
                    {label: t('filters.allRead'), value: 'all-read'},
                    {label: t('filters.someRead'), value: 'some-read'},
                    {label: t('filters.inProgress'), value: 'in-progress'},
                    {label: t('filters.unread'), value: 'unread'}
                  ]"
                  [ngModel]="(filters$ | async)?.readStatus"
                  (ngModelChange)="onFilterChange('readStatus', $event)"
                  optionLabel="label"
                  optionValue="value"
                  class="filter-dropdown">
                </p-select>
              </div>

              <div class="filter-group">
                <label class="filter-label">{{ t('filters.bookCount') }}</label>
                <p-select
                  [options]="[
                    {label: t('filters.all'), value: 'all'},
                    {label: '0', value: '0'},
                    {label: '1', value: '1'},
                    {label: '2', value: '2'},
                    {label: '3', value: '3'},
                    {label: '4', value: '4'},
                    {label: '5', value: '5'},
                    {label: '6-10', value: '6-10'},
                    {label: '11-20', value: '11-20'},
                    {label: '21-35', value: '21-35'},
                    {label: '36+', value: '36+'}
                  ]"
                  [ngModel]="(filters$ | async)?.bookCount"
                  (ngModelChange)="onFilterChange('bookCount', $event)"
                  optionLabel="label"
                  optionValue="value"
                  class="filter-dropdown">
                </p-select>
              </div>

              <div class="filter-group">
                <label class="filter-label">{{ t('filters.library') }}</label>
                <p-select
                  [options]="libraryOptions"
                  [ngModel]="(filters$ | async)?.library"
                  (ngModelChange)="onFilterChange('library', $event)"
                  optionLabel="label"
                  optionValue="value"
                  class="filter-dropdown">
                </p-select>
              </div>

              <div class="filter-group">
                <label class="filter-label">{{ t('filters.genre') }}</label>
                <p-select
                  [options]="genreOptions"
                  [ngModel]="(filters$ | async)?.genre"
                  (ngModelChange)="onFilterChange('genre', $event)"
                  optionLabel="label"
                  optionValue="value"
                  class="filter-dropdown">
                </p-select>
              </div>

              @if (activeFilterCount > 0) {
                <p-button
                  [label]="t('filters.reset')"
                  icon="pi pi-filter-slash"
                  severity="secondary"
                  [outlined]="true"
                  size="small"
                  (onClick)="resetFilters()"
                  class="filter-reset-btn">
                </p-button>
              }
            </div>
          </p-popover>
        </div>
      </div>
    </div>

    @if (filteredAuthors$ | async; as authorList) {
      @if (authorList.length === 0) {
        <div class="empty-state">
          <i class="pi pi-users empty-icon"></i>
          <p>{{ t('noAuthorsFound') }}</p>
        </div>
      } @else {
        <virtual-scroller
          #scroll
          [items]="authorList"
          class="virtual-scroller">
          <div class="author-grid"
            #container
            [ngStyle]="{'grid-template-columns': 'repeat(auto-fill, minmax(' + gridColumnMinWidth + ', 1fr))'}">
            @for (author of scroll.viewPortItems; track author.id; let i = $index) {
              <div class="virtual-scroller-item"
                [ngStyle]="{width: cardWidth + 'px', height: cardHeight + 'px'}"
                [style.--card-scale]="authorScaleService.scaleFactor">
                <app-author-card
                  [author]="author"
                  [index]="authorList.indexOf(author)"
                  [cacheBuster]="thumbnailCacheBusters.get(author.id) || 0"
                  [canQuickMatch]="canEditMetadata"
                  [canDelete]="canDeleteBook"
                  [isCheckboxEnabled]="canEditMetadata || canDeleteBook"
                  [isSelected]="isAuthorSelected(author.id)"
                  (cardClick)="navigateToAuthor($event)"
                  (viewAuthor)="navigateToAuthor($event)"
                  (editAuthor)="navigateToAuthorEdit($event)"
                  (deleteAuthor)="deleteAuthor($event)"
                  (quickMatched)="onAuthorQuickMatched($event)"
                  (checkboxClick)="onCheckboxClicked($event)">
                </app-author-card>
              </div>
            }
          </div>
        </virtual-scroller>
      }
    }

    @if (userService.userState$ | async; as userState) {
      <div class="author-browser-footer" [class.footer-hidden]="selectedCount === 0">
        <div class="footer-content">
          <div class="selected-count-badge">
            <i class="pi pi-check-circle"></i>
            <span class="selected-count">{{ selectedCount }}</span>
            <span class="selected-label">{{ t('footer.selected') }}</span>
          </div>
          @if (canEditMetadata || canDeleteBook) {
            <p-divider layout="vertical"></p-divider>
            <div class="action-buttons-group">
              @if (canEditMetadata) {
                <p-button
                  icon="pi pi-bolt"
                  outlined="true"
                  severity="info"
                  (onClick)="autoMatchSelected()"
                  [pTooltip]="t('footer.autoMatch')"
                  tooltipPosition="top">
                </p-button>
              }
              @if (canDeleteBook) {
                <p-button
                  icon="pi pi-trash"
                  outlined="true"
                  severity="danger"
                  (onClick)="deleteSelected()"
                  [pTooltip]="t('footer.deleteSelected')"
                  tooltipPosition="top">
                </p-button>
              }
            </div>
          }
          <p-divider layout="vertical"></p-divider>
          <div class="action-buttons-group">
            <p-button
              outlined="true"
              icon="pi pi-check-square"
              severity="success"
              (click)="selectAllAuthors()"
              [pTooltip]="t('footer.selectAll')"
              tooltipPosition="top">
            </p-button>
            <p-button
              outlined="true"
              icon="pi pi-times"
              severity="warn"
              (click)="deselectAllAuthors()"
              [pTooltip]="t('footer.deselectAll')"
              tooltipPosition="top">
            </p-button>
          </div>
        </div>
      </div>
    }
  }
</ng-container>
