<ng-container *transloco="let t; prefix: 'statsUser.readingHabits'">
<div class="reading-habits-container">
  <div class="chart-header">
    <div class="chart-title">
      <h3>
        <i class="pi pi-chart-line reading-habits-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="chart-wrapper">
    <canvas baseChart
            [data]="(chartData$ | async) ?? {labels: [], datasets: []}"
            [options]="chartOptions"
            [type]="chartType">
    </canvas>
  </div>
  @if (habitInsights.length > 0) {
    <div class="habit-insights">
      <h4>{{ t('habitPatterns') }}</h4>
      <div class="insights-grid">
        @for (insight of habitInsights; track insight.habit) {
          <div class="insight-card">
            <div class="insight-header">
              <span class="insight-trait">{{ insight.habit }}</span>
              <span class="insight-score" [style.color]="insight.color">{{ insight.score.toFixed(0) }}%</span>
            </div>
            <div class="insight-progress">
              <div class="progress-bar" [style.width.%]="insight.score" [style.background-color]="insight.color"></div>
            </div>
            <p class="insight-description">{{ insight.description }}</p>
          </div>
        }
      </div>
    </div>
  }
</div>
</ng-container>
