<div class="book-filter-container">

  <div class="filter-header">
    <span class="filter-title">Filters</span>
    <p-selectButton
      [options]="filterModeOptions"
      [(ngModel)]="selectedFilterMode"
      optionLabel="label"
      optionValue="value"
      class="filter-mode-select"
      allowEmpty="false"
      styleClass="h-8"
      pTooltip="Filter selection mode: AND / OR / Single">></p-selectButton>
  </div>

  <div class="filter-content">
    <p-accordion [value]="expandedPanels">
      @for (filterType of filterTypes; track trackByFilterType(i, filterType); let i = $index) {
        <p-accordion-panel [value]="i">
          <p-accordion-header>
            <span class="filter-type-label">
              {{ filterLabels[filterType] || (filterType | titlecase) }}
              @if (activeFilters[filterType]?.length) {
                <span class="active-filter-count">
                  ({{ activeFilters[filterType].length }})
                </span>
              }
            </span>
          </p-accordion-header>

          <p-accordion-content>
            @if (filterStreams[filterType] | async; as filters) {
              <div class="filter-list">
                @for (filter of filters; track trackByFilter(j, filter); let j = $index) {
                  <div
                    class="filter-row"
                    [ngClass]="{
                      'active': activeFilters[filterType]?.includes(filter.value?.id || filter.value)
                    }"
                    (click)="handleFilterClick(filterType, filter.value?.id || filter.value)">
                    {{ filter.value.name || filter.value }}
                    <p-badge class="filter-value-badge" [value]="filter.bookCount"></p-badge>
                  </div>
                }
                @if (truncatedFilters[filterType]) {
                  <div class="truncation-notice">
                    Showing first 250 items
                  </div>
                }
              </div>
            }
          </p-accordion-content>
        </p-accordion-panel>
      }
    </p-accordion>

    <div class="footer-notice">
      Note: Top 500 items are displayed per filter category
    </div>
  </div>
</div>
