<ng-container *transloco="let t; prefix: 'statsLibrary.readingJourney'">
<div class="reading-journey-container">
  <div class="chart-header">
    <div class="chart-title">
      <h3>
        <i class="pi pi-directions journey-title-icon"></i>
        {{ t('title') }}
      </h3>
      <p class="chart-description">{{ t('description') }}</p>
    </div>
    @if (dateRange) {
      <div class="date-range-badge">
        {{ dateRange }}
      </div>
    }
  </div>

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

    <div class="insights-section">
      <div class="insights-row">
        <div class="insight-item backlog">
          <span class="insight-label">{{ t('insightCurrentBacklog') }}</span>
          <span class="insight-value">{{ insights.currentBacklog }}</span>
          <span class="insight-detail">{{ t('insightBacklogPercent', { percent: insights.backlogPercent }) }}</span>
        </div>

        <div class="insight-item time-to-read">
          <span class="insight-label">{{ t('insightAvgTimeToFinish') }}</span>
          <span class="insight-value">{{ insights.avgTimeToFinishDays }}</span>
          <span class="insight-detail">{{ t('insightDaysAfterAdding') }}</span>
        </div>

        <div class="insight-item productive">
          <span class="insight-label">{{ t('insightBestReadingMonth') }}</span>
          <span class="insight-value">{{ insights.mostProductiveCount }}</span>
          <span class="insight-detail">{{ insights.mostProductiveMonth }}</span>
        </div>

        <div class="insight-item acquisition">
          <span class="insight-label">{{ t('insightPeakAcquisition') }}</span>
          <span class="insight-value">{{ insights.busiestAcquisitionCount }}</span>
          <span class="insight-detail">{{ insights.busiestAcquisitionMonth }}</span>
        </div>

        <div class="insight-item finish-rate">
          <span class="insight-label">{{ t('insightFinishRate') }}</span>
          <span class="insight-value">{{ insights.finishRate }}</span>
          <span class="insight-detail">{{ t('insightBooksPerMonthAvg') }}</span>
        </div>

        <div class="insight-item streak">
          <span class="insight-label">{{ t('insightLongestStreak') }}</span>
          <span class="insight-value">{{ insights.longestStreak }}</span>
          <span class="insight-detail">{{ t('insightConsecutiveMonths') }}</span>
        </div>

        <div class="insight-item recent">
          <span class="insight-label">{{ t('insightLast3Months') }}</span>
          <span class="insight-value">{{ insights.recentActivity }}</span>
          <span class="insight-detail">{{ t('insightRecentlyFinished') }}</span>
        </div>

        <div class="insight-item total">
          <span class="insight-label">{{ t('insightCompletion') }}</span>
          <span class="insight-value">{{ insights.totalFinished }}/{{ insights.totalAdded }}</span>
          <span class="insight-detail">{{ t('insightBooksFinished') }}</span>
        </div>
      </div>
    </div>
  }

  @if (totalBooks === 0 || !insights) {
    <div class="no-data-message">
      <i class="pi pi-info-circle"></i>
      <p>{{ t('noData') }}</p>
      <small>{{ t('noDataHint') }}</small>
    </div>
  }
</div>
</ng-container>
