<ng-container *transloco="let t; prefix: 'statsUser.sessionTimeline'">
<div class="timeline-container">
  <div class="timeline-header">
    <div class="header-title">
      <h3>
        <i class="pi pi-clock timeline-title-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="timeline-subtitle">{{ t('description') }}</p>
    </div>
    <div class="week-info">
      <button type="button"
              class="week-nav-btn"
              (click)="changeWeek(-1)"
              [title]="t('previousWeek')">
        <i class="pi pi-chevron-left"></i>
      </button>
      <div class="week-display">
        <span class="week-label">{{ t('week', { number: currentWeek }) }}</span>
        <span class="week-dates">{{ getWeekDateRange() }}</span>
      </div>
      <button type="button"
              class="week-nav-btn"
              (click)="changeWeek(1)"
              [title]="t('nextWeek')">
        <i class="pi pi-chevron-right"></i>
      </button>
    </div>
    <div class="filter-controls">
      <p-select
        [options]="yearOptions"
        [(ngModel)]="currentYear"
        (onChange)="onYearChange()"
        optionLabel="label"
        optionValue="value"
        [placeholder]="t('selectYear')"
        [style]="{'min-width': '120px'}">
      </p-select>
      <p-select
        [options]="weekOptions"
        [(ngModel)]="currentWeek"
        (onChange)="onWeekChange()"
        optionLabel="label"
        optionValue="value"
        [placeholder]="t('selectWeek')"
        [style]="{'min-width': '120px'}">
      </p-select>
    </div>
  </div>

  <div class="timeline-content">
    <div class="hour-markers">
      <div class="day-label-spacer"></div>
      <div class="hour-grid">
        @for (hour of hourLabels; track $index) {
          <div class="hour-marker" [class.major]="$index % 3 === 0">
            <span class="hour-label">{{ hour }}</span>
          </div>
        }
      </div>
    </div>

    <div class="timeline-rows">
      @for (dayData of timelineData; track dayData.dayOfWeek) {
        <div class="timeline-row">
          <div class="day-label">{{ dayData.day }}</div>
          <div class="timeline-track">
            <div class="grid-lines">
              @for (hour of hourLabels; track $index) {
                <div class="grid-line" [class.major]="$index % 6 === 0"></div>
              }
            </div>

            <div class="sessions">
              @for (session of dayData.sessions; track $index) {
                <div class="session-block"
                     [class]="'book-type-' + (session.bookType || 'default').toLowerCase()"
                     [style.left.%]="session.left"
                     [style.width.%]="session.width"
                     [style.top]="session.totalLevels > 1 ? 'calc(' + session.level + ' / ' + session.totalLevels + ' * 100% + ' + session.level * 2 + 'px)' : '0'"
                     [style.height]="session.totalLevels > 1 ? 'calc((1 / ' + session.totalLevels + ' * 100%) - ' + (session.totalLevels - 1) * 2 / session.totalLevels + 'px)' : '100%'"
                     [pTooltip]="session.tooltipContent"
                     [escape]="false"
                     tooltipPosition="top"
                     tooltipStyleClass="session-timeline-tooltip"
                     [appendTo]="'body'">
                  @if (isDurationGreaterThanOneHour(session.duration)) {
                    <div class="session-content">
                      <span class="session-time">
                        {{ formatTime(session.startHour, session.startMinute) }}
                      </span>
                      <span class="session-duration">
                        {{ formatDurationCompact(session.duration) }}
                      </span>
                    </div>
                  }
                </div>
              }
            </div>
          </div>
        </div>
      }
    </div>
  </div>
</div>
</ng-container>
