<ng-container *transloco="let t; prefix: 'statsUser.bookFlow'">
<div class="book-flow-container">
  <div class="chart-header">
    <div class="chart-title">
      <h3>
        <i class="pi pi-arrows-h book-flow-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>

  @if (hasData) {
    <div class="stats-row">
      <div class="stat-card total">
        <span class="stat-value">{{ totalBooks }}</span>
        <span class="stat-label">{{ t('totalBooks') }}</span>
      </div>
      <div class="stat-card quarter">
        <span class="stat-value">{{ topQuarter }}</span>
        <span class="stat-label">{{ t('busiestQuarter') }}</span>
      </div>
      <div class="stat-card status">
        <span class="stat-value">{{ topStatus }}</span>
        <span class="stat-label">{{ t('topStatus') }}</span>
      </div>
<div class="stat-card completion">
        <span class="stat-value">{{ completionRate }}</span>
        <span class="stat-label">{{ t('completionRate') }}</span>
      </div>
    </div>
    <div class="canvas-wrapper">
      <canvas #flowCanvas></canvas>
    </div>
  } @else {
    <div class="no-data-message">
      <i class="pi pi-info-circle"></i>
      <p>{{ t('noData') }}</p>
      <small>{{ t('noDataHint') }}</small>
    </div>
  }
</div>
</ng-container>
