<ng-container *transloco="let t; prefix: 'statsUser'">
<div class="user-stats-container">
  <div class="header-section">
    <div class="header-content">
      <div class="greeting">
        <i class="pi pi-chart-line"></i>
        <h2>{{ t('main.title', { name: userName }) }}</h2>
      </div>
      <button class="config-toggle-btn" (click)="toggleConfigPanel()">
        <i class="pi pi-cog"></i>
        <span>{{ t('main.customizeLayout') }}</span>
      </button>
    </div>
  </div>

  <p-dialog
    [(visible)]="showConfigPanel"
    [modal]="true"
    [draggable]="false"
    [resizable]="false"
    [style]="{width: '600px', maxWidth: '90vw'}"
    class="config-dialog"
    [header]="t('main.chartConfig')">

    <div class="config-dialog-content">
      <div class="config-list" cdkDropList (cdkDropListDropped)="drop($event)">
        @for (chart of charts; track chart.id) {
          <div class="config-item" cdkDrag>
            <div class="drag-handle" cdkDragHandle>
              <i class="pi pi-bars"></i>
            </div>
            <span class="chart-title">{{ chart.title }}</span>
            <button
              class="visibility-toggle"
              (click)="toggleChart(chart.id)"
              [class.disabled]="!chart.enabled">
              <i [class]="chart.enabled ? 'pi pi-eye' : 'pi pi-eye-slash'"></i>
            </button>
          </div>
        }
      </div>
    </div>

    <ng-template pTemplate="footer">
      <p-button class="reset-btn" (click)="resetLayout()" severity="danger">
        <i class="pi pi-refresh"></i>
        <span>{{ t('main.resetLayout') }}</span>
      </p-button>
      <p-button class="hide-all-btn" (click)="hideAllCharts()" severity="secondary">
        <i class="pi pi-eye-slash"></i>
        <span>{{ t('main.hideAll') }}</span>
      </p-button>
      <p-button class="show-all-btn" (click)="showAllCharts()" severity="secondary">
        <i class="pi pi-eye"></i>
        <span>{{ t('main.showAll') }}</span>
      </p-button>
      <p-button class="close-btn" (click)="toggleConfigPanel()" severity="secondary">
        <span>{{ t('main.close') }}</span>
      </p-button>
    </ng-template>
  </p-dialog>

  <!-- Charts Container -->
  <div class="charts-container" cdkDropList (cdkDropListDropped)="drop($event)">
    @for (chart of visibleCharts; track chart.id) {
      <div class="chart-card" [class]="chart.sizeClass" cdkDrag>
        <div class="chart-drag-handle" cdkDragHandle>
          <i class="pi pi-arrows-alt"></i>
        </div>

        @switch (chart.id) {
          @case ('heatmap') {
            <app-reading-session-heatmap [initialYear]="currentYear"></app-reading-session-heatmap>
          }
          @case ('timeline') {
            <app-reading-session-timeline [initialYear]="currentYear"></app-reading-session-timeline>
          }
          @case ('genre-stats') {
            <app-genre-stats-chart></app-genre-stats-chart>
          }
          @case ('completion-timeline') {
            <app-completion-timeline-chart [initialYear]="currentYear"></app-completion-timeline-chart>
          }
          @case ('favorite-days') {
            <app-favorite-days-chart></app-favorite-days-chart>
          }
          @case ('peak-hours') {
            <app-peak-hours-chart></app-peak-hours-chart>
          }
          @case ('reading-dna') {
            <app-reading-dna-chart></app-reading-dna-chart>
          }
          @case ('reading-habits') {
            <app-reading-habits-chart></app-reading-habits-chart>
          }
          @case ('reading-heatmap') {
            <app-reading-heatmap-chart></app-reading-heatmap-chart>
          }
          @case ('personal-rating') {
            <app-personal-rating-chart></app-personal-rating-chart>
          }
          @case ('reading-progress') {
            <app-reading-progress-chart></app-reading-progress-chart>
          }
          @case ('read-status') {
            <app-read-status-chart></app-read-status-chart>
          }
          @case ('rating-taste') {
            <app-rating-taste-chart></app-rating-taste-chart>
          }
          @case ('series-progress') {
            <app-series-progress-chart></app-series-progress-chart>
          }
          @case ('page-turner') {
            <app-page-turner-chart></app-page-turner-chart>
          }
          @case ('completion-race') {
            <app-completion-race-chart [initialYear]="currentYear"></app-completion-race-chart>
          }
          @case ('reading-survival') {
            <app-reading-survival-chart></app-reading-survival-chart>
          }
          @case ('reading-clock') {
            <app-reading-clock-chart></app-reading-clock-chart>
          }
          @case ('book-length') {
            <app-book-length-chart></app-book-length-chart>
          }
          @case ('book-flow') {
            <app-book-flow-chart></app-book-flow-chart>
          }
          @case ('reading-debt') {
            <app-reading-debt-chart></app-reading-debt-chart>
          }
          @case ('publication-era') {
            <app-publication-era-chart></app-publication-era-chart>
          }
          @case ('session-archetypes') {
            <app-session-archetypes-chart [initialYear]="currentYear"></app-session-archetypes-chart>
          }
        }
      </div>
    }
  </div>
</div>
</ng-container>
