<ng-container *transloco="let t; prefix: 'statsLibrary.publicationTimeline'">
<div class="publication-timeline-container">
  <div class="chart-header">
    <div class="chart-title">
      <h3>
        <i class="pi pi-calendar timeline-title-icon"></i>
        {{ t('title') }}
      </h3>
      <p class="chart-description">{{ t('description') }}</p>
    </div>
    @if (totalBooks > 0) {
      <div class="books-count-badge">
        {{ t('booksWithDates', { count: totalBooks }) }}
      </div>
    }
  </div>

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

    @if (insights) {
      <div class="insights-section">
        <div class="insights-row">
          @if (insights.oldestBook) {
            <div class="insight-item oldest">
              <span class="insight-label">{{ t('insightOldest') }}</span>
              <span class="insight-value">{{ insights.oldestBook.year }}</span>
              <span class="insight-detail" [title]="insights.oldestBook.title">{{ insights.oldestBook.title }}</span>
            </div>
          }

          <div class="insight-item average">
            <span class="insight-label">{{ t('insightAverageYear') }}</span>
            <span class="insight-value">{{ insights.averageYear }}</span>
            <span class="insight-detail">{{ t('insightMedian', { year: insights.medianYear }) }}</span>
          </div>

          @if (insights.newestBook) {
            <div class="insight-item newest">
              <span class="insight-label">{{ t('insightNewest') }}</span>
              <span class="insight-value">{{ insights.newestBook.year }}</span>
              <span class="insight-detail" [title]="insights.newestBook.title">{{ insights.newestBook.title }}</span>
            </div>
          }

          <div class="insight-item common-year">
            <span class="insight-label">{{ t('insightMostCommonYear') }}</span>
            <span class="insight-value">{{ insights.mostCommonYear.year }}</span>
            <span class="insight-detail">{{ t('insightMostCommonYearBooks', { count: insights.mostCommonYear.count }) }}</span>
          </div>
        </div>

        <div class="insights-row">
          <div class="insight-item timespan">
            <span class="insight-label">{{ t('insightTimeSpan') }}</span>
            <span class="insight-value">{{ insights.timeSpan }}</span>
            <span class="insight-detail">{{ t('insightYearsOfLiterature') }}</span>
          </div>

          <div class="insight-item peak">
            <span class="insight-label">{{ t('insightPeakDecade') }}</span>
            <span class="insight-value">{{ insights.peakDecade }}</span>
            <span class="insight-detail">{{ t('insightPeakDecadeBooks', { count: insights.peakDecadeCount }) }}</span>
          </div>

          <div class="insight-item golden-era">
            <span class="insight-label">{{ t('insightGoldenEra') }}</span>
            <span class="insight-value">{{ insights.goldenEra.start }}-{{ insights.goldenEra.end }}</span>
            <span class="insight-detail">{{ t('insightGoldenEraRange', { count: insights.goldenEra.count }) }}</span>
          </div>

          <div class="insight-item rarity">
            <span class="insight-label">{{ t('insightRarityScore') }}</span>
            <span class="insight-value">{{ insights.rarityScore }}%</span>
            <span class="insight-detail">{{ t('insightRarePicks') }}</span>
          </div>
        </div>
      </div>
    }
  }

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