<ng-container *transloco="let t; prefix: 'statsLibrary.publicationTrend'">
<div class="publication-trend-container">
  <div class="chart-header">
    <div class="chart-title">
      <h3>
        <i class="pi pi-chart-line trend-title-icon"></i>
        {{ t('title') }}
      </h3>
      <p class="chart-description">{{ t('description') }}</p>
    </div>
    @if (totalBooks > 0 && yearRange) {
      <div class="year-range-badge">
        {{ yearRange }}
      </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">
          <div class="insight-item peak">
            <span class="insight-label">{{ t('insightPeakYear') }}</span>
            <span class="insight-value">{{ insights.peakYear }}</span>
            <span class="insight-detail">{{ t('insightPeakYearBooks', { count: insights.peakYearCount }) }}</span>
          </div>

          <div class="insight-item recent">
            <span class="insight-label">{{ t('insightLast10Years') }}</span>
            <span class="insight-value">{{ insights.booksLast10YearsPercent }}%</span>
            <span class="insight-detail">{{ t('insightLast10YearsBooks', { count: insights.booksLast10Years }) }}</span>
          </div>

          <div class="insight-item average">
            <span class="insight-label">{{ t('insightAvgPerYear') }}</span>
            <span class="insight-value">{{ insights.averageBooksPerYear }}</span>
            <span class="insight-detail">{{ t('insightBooksPerYear') }}</span>
          </div>

          <div class="insight-item productive">
            <span class="insight-label">{{ t('insightBest5YearSpan') }}</span>
            <span class="insight-value">{{ insights.mostProductiveSpan }}</span>
            <span class="insight-detail">{{ t('insightMostBooksPublished') }}</span>
          </div>

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

          <div class="insight-item century21">
            <span class="insight-label">{{ t('insightCentury21') }}</span>
            <span class="insight-value">{{ insights.century21Percent }}%</span>
            <span class="insight-detail">{{ t('insightCentury21Books', { count: insights.century21Books }) }}</span>
          </div>

          <div class="insight-item classics">
            <span class="insight-label">{{ t('insightClassics') }}</span>
            <span class="insight-value">{{ insights.classicBooksPercent }}%</span>
            <span class="insight-detail">{{ t('insightClassicsPre1970', { count: insights.classicBooks }) }}</span>
          </div>

          <div class="insight-item unique">
            <span class="insight-label">{{ t('insightUniqueYears') }}</span>
            <span class="insight-value">{{ insights.uniqueYears }}</span>
            <span class="insight-detail">{{ insights.oldestDecade }} - {{ insights.newestDecade }}</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>
