<ng-container *transloco="let t; prefix: 'statsUser.pageTurner'">
<div class="page-turner-container">
  <div class="chart-header">
    <div class="chart-title">
      <h3>
        <i class="pi pi-bolt page-turner-icon"></i>
        {{ t('title') }}
        <i class="pi pi-question-circle chart-info-icon"
           [pTooltip]="t('tooltip')"
           tooltipPosition="bottom"
           tooltipStyleClass="chart-info-tooltip"
           [appendTo]="'body'"></i>
      </h3>
      <p class="chart-description">{{ t('description') }}</p>
    </div>
  </div>

  <div class="stats-row">
    <div class="stat-item">
      <span class="stat-value" [title]="stats.mostGripping">{{ stats.mostGripping | slice:0:18 }}</span>
      <span class="stat-label">{{ t('mostGripping') }}</span>
    </div>
    <div class="stat-item">
      <span class="stat-value">{{ stats.avgGripScore }}</span>
      <span class="stat-label">{{ t('avgGripScore') }}</span>
    </div>
    <div class="stat-item">
      <span class="stat-value" [title]="stats.guiltyPleasure">{{ stats.guiltyPleasure | slice:0:18 }}</span>
      <span class="stat-label">{{ t('guiltyPleasure') }}</span>
    </div>
  </div>

  @if (topBooks.length > 0) {
    <div class="top-books">
      @for (book of topBooks; track book.bookId; let i = $index) {
        <div class="top-book-card">
          <div class="book-rank">#{{ i + 1 }}</div>
          <div class="book-info">
            <span class="book-name">{{ book.bookTitle | slice:0:30 }}</span>
            <div class="book-indicators">
              <span class="indicator" [title]="t('sessionDurationTrend')">
                <i class="pi pi-clock"></i> {{ getAccelerationLabel(book.sessionAcceleration) }}
              </span>
              <span class="indicator" [title]="t('gapBetweenSessionsTrend')">
                <i class="pi pi-calendar"></i> {{ getGapLabel(book.gapReduction) }}
              </span>
              @if (book.finishBurst) {
                <span class="indicator burst">
                  <i class="pi pi-forward"></i> {{ t('finishBurst') }}
                </span>
              }
            </div>
          </div>
          <div class="book-score">{{ book.gripScore }}</div>
        </div>
      }
    </div>
  }

  <div class="chart-wrapper">
    <canvas baseChart
            [data]="(chartData$ | async) ?? {labels: [], datasets: []}"
            [options]="chartOptions"
            [type]="chartType">
    </canvas>
  </div>
</div>
</ng-container>
