<ng-container *transloco="let t; prefix: 'statsLibrary'">
<div class="library-stats-container">
  <div class="header-card">
    <div class="filter-section">
      <div class="library-filter">
        <div class="select-row">
          <label for="library-dropdown">{{ t('main.title') }}</label>
          <div class="dropdown-row">
            <p-select
              fluid
              id="library-dropdown"
              [options]="libraryOptions"
              [(ngModel)]="selectedLibrary"
              optionLabel="name"
              size="small"
              [placeholder]="t('main.selectLibrary')"
              (onChange)="onLibraryChange()"
              appendTo="body"
              [style]="{'min-width': '200px'}"
              class="library-dropdown">
            </p-select>

            <p-button
              outlined
              size="small"
              (onClick)="toggleConfigPanel()"
              icon="pi pi-cog">
            </p-button>
          </div>
        </div>

        <div class="library-totals" role="status" aria-live="polite">
          <div class="total-item total-books" [title]="t('main.totalBooks')">
            <i class="pi pi-book"></i>
            <span class="total-label">{{ t('main.books') }}</span>
            <span class="total-value">{{ totalBooks$ | async }}</span>
          </div>

          <div class="total-item total-authors" [title]="t('main.totalAuthors')">
            <i class="pi pi-users"></i>
            <span class="total-label">{{ t('main.authors') }}</span>
            <span class="total-value">{{ totalAuthors$ | async }}</span>
          </div>

          <div class="total-item total-series" [title]="t('main.totalSeries')">
            <i class="pi pi-bookmark"></i>
            <span class="total-label">{{ t('main.series') }}</span>
            <span class="total-value">{{ totalSeries$ | async }}</span>
          </div>

          <div class="total-item total-publishers" [title]="t('main.totalPublishers')">
            <i class="pi pi-building"></i>
            <span class="total-label">{{ t('main.publishers') }}</span>
            <span class="total-value">{{ totalPublishers$ | async }}</span>
          </div>

          <div class="total-item total-size" [title]="t('main.totalSize')">
            <i class="pi pi-file"></i>
            <span class="total-label">{{ t('main.librarySize') }}</span>
            <span class="total-value">{{ totalSize$ | async }}</span>
          </div>
        </div>
      </div>
    </div>
  </div>

  @if (showConfigPanel) {
    <div class="config-modal-overlay" (click)="closeConfigPanel()">
      <div class="config-modal" (click)="$event.stopPropagation()">
        <div class="config-modal-header">
          <h3><i class="pi pi-cog"></i> {{ t('config.title') }}</h3>
          <button type="button" class="close-btn" (click)="closeConfigPanel()" [title]="t('config.close')">
            <i class="pi pi-times"></i>
          </button>
        </div>

        <div class="config-modal-actions">
          <button type="button" class="config-action-btn enable-all" (click)="enableAllCharts()">
            <i class="pi pi-check"></i> {{ t('config.enableAll') }}
          </button>
          <button type="button" class="config-action-btn disable-all" (click)="disableAllCharts()">
            <i class="pi pi-times"></i> {{ t('config.disableAll') }}
          </button>
          <button type="button" class="config-action-btn reset-order" (click)="resetChartOrder()">
            <i class="pi pi-refresh"></i> {{ t('config.resetOrder') }}
          </button>
        </div>

        <div class="config-modal-content">
          <div class="config-categories">
            <div class="config-category">
              <h4>{{ t('config.smallCharts') }}</h4>
              <div class="chart-toggles">
                @for (chart of getChartsByCategory('small'); track chart.id) {
                  <div class="chart-toggle">
                    <input
                      type="checkbox"
                      [id]="'chart-' + chart.id"
                      [checked]="chart.enabled"
                      (change)="toggleChart(chart.id)">
                    <label [for]="'chart-' + chart.id">{{ chart.name }}</label>
                  </div>
                }
              </div>
            </div>

            <div class="config-category">
              <h4>{{ t('config.largeCharts') }}</h4>
              <div class="chart-toggles">
                @for (chart of getChartsByCategory('large'); track chart.id) {
                  <div class="chart-toggle">
                    <input
                      type="checkbox"
                      [id]="'chart-' + chart.id"
                      [checked]="chart.enabled"
                      (change)="toggleChart(chart.id)">
                    <label [for]="'chart-' + chart.id">{{ chart.name }}</label>
                  </div>
                }
              </div>
            </div>

            <div class="config-category">
              <h4>{{ t('config.xlargeCharts') }}</h4>
              <div class="chart-toggles">
                @for (chart of getChartsByCategory('xlarge'); track chart.id) {
                  <div class="chart-toggle">
                    <input
                      type="checkbox"
                      [id]="'chart-' + chart.id"
                      [checked]="chart.enabled"
                      (change)="toggleChart(chart.id)">
                    <label [for]="'chart-' + chart.id">{{ chart.name }}</label>
                  </div>
                }
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  }

  @if (!isLoading && hasData) {
    <div class="charts-grid"
         cdkDropList
         (cdkDropListDropped)="onChartReorder($event)"
         [cdkDropListData]="getEnabledChartsSorted()">

      @for (chartConfig of getEnabledChartsSorted(); track chartConfig.id) {
        <div class="chart-container"
             cdkDrag
             [cdkDragData]="chartConfig"
             [class]="'chart-section ' + chartConfig.category">

          <div class="drag-handle" cdkDragHandle [title]="t('main.dragToReorder')">
            <i class="pi pi-bars"></i>
          </div>

          @switch (chartConfig.id) {
            @case ('bookFormats') {
              <app-book-formats-chart></app-book-formats-chart>
            }
            @case ('languageDistribution') {
              <app-language-chart></app-language-chart>
            }
            @case ('metadataScore') {
              <app-metadata-score-chart></app-metadata-score-chart>
            }
            @case ('pageCountDistribution') {
              <app-page-count-chart></app-page-count-chart>
            }
            @case ('publicationTimeline') {
              <app-publication-timeline-chart></app-publication-timeline-chart>
            }
            @case ('publicationTrend') {
              <app-publication-trend-chart></app-publication-trend-chart>
            }
            @case ('readingJourney') {
              <app-reading-journey-chart></app-reading-journey-chart>
            }
            @case ('topItems') {
              <app-top-items-chart></app-top-items-chart>
            }
            @case ('authorUniverse') {
              <app-author-universe-chart></app-author-universe-chart>
            }
          }
        </div>
      }
    </div>
  }

  @if (isLoading) {
    <div class="loading-message">
      {{ t('main.loading') }}
    </div>
  }

  @if (!isLoading && !hasData) {
    <div class="no-data-message">
      {{ t('main.noData') }}
      <small>{{ t('main.noDataHint') }}</small>
    </div>
  }
</div>
</ng-container>
