<ng-container *transloco="let t; prefix: 'statsUser.sessionHeatmap'">
<div class="reading-session-heatmap-container">
  <div class="chart-header">
    <div class="chart-title">
      <h3>
        <i class="pi pi-calendar heatmap-title-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 class="year-selector">
      <button type="button"
              class="year-nav-btn"
              (click)="changeYear(-1)"
              [title]="t('previousYear')">
        <i class="pi pi-chevron-left"></i>
      </button>
      <span class="current-year">{{ currentYear }}</span>
      <button type="button"
              class="year-nav-btn"
              (click)="changeYear(1)"
              [title]="t('nextYear')">
        <i class="pi pi-chevron-right"></i>
      </button>
    </div>
    <div class="header-spacer"></div>
  </div>

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

  @if (hasStreakData) {
    <div class="chart-footer">
      <div class="footer-pills left">
        <span class="pill current">
          <span class="pill-value">{{ currentStreak }}</span> {{ t('currentStreak') }}
        </span>
        <span class="pill longest">
          <span class="pill-value">{{ longestStreak }}</span> {{ t('longestStreak') }}
        </span>
        <span class="pill total">
          <span class="pill-value">{{ totalReadingDays }}</span> {{ t('totalDays') }}
        </span>
        <span class="pill consistency">
          <span class="pill-value">{{ consistencyPercent }}%</span> {{ t('consistency') }}
        </span>
      </div>
      @if (milestones.length > 0) {
        <div class="footer-pills right">
          @for (milestone of milestones; track milestone.label) {
            <span class="pill milestone" [class.unlocked]="milestone.unlocked" [class.locked]="!milestone.unlocked">
              <span class="pill-icon">{{ milestone.icon }}</span> {{ milestone.label }}
            </span>
          }
        </div>
      }
    </div>
  }
</div>
</ng-container>
