<ng-container *transloco="let t; prefix: 'statsUser.ratingTaste'">
<div class="rating-taste-container">
  <div class="chart-header">
    <div class="chart-title">
      <h3>
        <i class="pi pi-chart-scatter rating-taste-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>
    @if (totalRatedBooks > 0) {
      <div class="stats-badge">
        <span class="badge-value">{{ totalRatedBooks }}</span>
        <span class="badge-label">{{ t('booksAnalyzed') }}</span>
      </div>
    }
  </div>

  <div class="chart-wrapper">
    <canvas baseChart
            [data]="(chartData$ | async) ?? {datasets: []}"
            [options]="chartOptions"
            [type]="chartType">
    </canvas>
    <div class="quadrant-labels">
      <div class="quadrant-label top-left">{{ t('quadrantHiddenGems') }} 💎</div>
      <div class="quadrant-label top-right">{{ t('quadrantPopularFavorites') }} ⭐</div>
      <div class="quadrant-label bottom-left">{{ t('quadrantAgreedMisses') }} 👎</div>
      <div class="quadrant-label bottom-right">{{ t('quadrantOverrated') }} 📉</div>
    </div>
  </div>

  @if (quadrants.length > 0) {
    <div class="taste-insights">
      <div class="insights-header">
        <h4>{{ t('tasteProfile') }}</h4>
        @if (averageDeviation > 0) {
          <div class="deviation-badge" [class.unique]="averageDeviation > 1" [class.mainstream]="averageDeviation <= 0.5">
            <span class="deviation-label">{{ t('avgDeviation') }}</span>
            <span class="deviation-value">{{ averageDeviation.toFixed(2) }} ★</span>
            <span class="deviation-desc">
              @if (averageDeviation > 1) {
                ({{ t('uniqueTaste') }})
              } @else if (averageDeviation <= 0.5) {
                ({{ t('mainstream') }})
              } @else {
                ({{ t('balanced') }})
              }
            </span>
          </div>
        }
      </div>
      <div class="quadrants-grid">
        @for (quadrant of quadrants; track quadrant.name) {
          <div class="quadrant-card" [style.border-left-color]="quadrant.color">
            <div class="quadrant-header">
              <span class="quadrant-icon">{{ quadrant.icon }}</span>
              <span class="quadrant-name">{{ quadrant.name }}</span>
              <span class="quadrant-count" [style.background-color]="quadrant.color">{{ quadrant.count }}</span>
            </div>
            <p class="quadrant-description">{{ quadrant.description }}</p>
            <div class="quadrant-bar">
              <div class="bar-fill"
                   [style.width.%]="(quadrant.count / totalRatedBooks) * 100"
                   [style.background-color]="quadrant.color">
              </div>
            </div>
            <span class="quadrant-percentage">{{ ((quadrant.count / totalRatedBooks) * 100).toFixed(0) }}%</span>
          </div>
        }
      </div>
    </div>
  }
</div>
</ng-container>
