<ng-container *transloco="let t; prefix: 'metadata.tabs'">
<p-tabs lazy class="custom-p-tabs" [value]="defaultTabValue" scrollable (valueChange)="onTabChange($event)">
  <p-tablist>
    @if (bookInSeries.length > 1) {
      <p-tab value="series">
        <i class="pi pi-ethereum"></i> {{ t('moreInSeries') }}
      </p-tab>
    }
    <p-tab value="similar">
      <i class="pi pi-bookmark"></i> {{ t('similarBooks') }}
    </p-tab>
    @if (supportsDualCovers()) {
      <p-tab value="covers">
        <i class="pi pi-images"></i> {{ t('covers') }}
      </p-tab>
    }
    @if (hasAudiobookFormat()) {
      <p-tab value="chapters">
        <i class="pi pi-headphones"></i> {{ t('chapters') }}
      </p-tab>
    }
    <p-tab value="files">
      <i class="pi pi-folder-open"></i> {{ t('files') }}
    </p-tab>
    <p-tab value="notes">
      <i class="pi pi-pen-to-square"></i> {{ t('notes') }}
    </p-tab>
    <p-tab value="sessions">
      <i class="pi pi-clock"></i> {{ t('readingSessions') }}
    </p-tab>
    <p-tab value="reviews">
      <i class="pi pi-comments"></i> {{ t('reviews') }}
    </p-tab>
  </p-tablist>
  <p-tabpanels>
    <p-tabpanel value="series">
      <ng-template #content>
        <div class="tab-content">
          @if (bookInSeries.length > 1) {
            <div class="dashboard-scroller-infinite" infiniteScroll [infiniteScrollDistance]="2" [infiniteScrollThrottle]="50" [horizontal]="true">
              @for (bookInSeriesItem of bookInSeries; track bookInSeriesItem) {
                @if (bookInSeriesItem.id !== book.id) {
                  <div class="dashboard-scroller-card">
                    <app-book-card-lite-component [book]="bookInSeriesItem" [showSeriesNumber]="true" [isActive]="bookInSeriesItem.id === book.id"></app-book-card-lite-component>
                  </div>
                }
              }
            </div>
          }
        </div>
      </ng-template>
    </p-tabpanel>
    <p-tabpanel value="similar">
      <ng-template #content>
        <div class="tab-content">
          @if (recommendedBooks.length > 0) {
            <div class="dashboard-scroller-infinite" infiniteScroll [infiniteScrollDistance]="2" [infiniteScrollThrottle]="50" [horizontal]="true">
              @for (recBook of recommendedBooks; track recBook.book.id) {
                <div class="dashboard-scroller-card">
                  <app-book-card-lite-component [book]="recBook.book"></app-book-card-lite-component>
                </div>
              }
            </div>
          }
        </div>
      </ng-template>
    </p-tabpanel>
    <p-tabpanel value="covers">
      <ng-template #content>
        <div class="covers-tab-content">
          <div class="covers-grid">
            <div class="cover-item">
              <div class="cover-label">
                <i class="pi pi-book"></i> {{ t('ebookCover') }}
              </div>
              <p-image
                [src]="urlHelper.getCoverUrl(book.id, book.metadata?.coverUpdatedOn)"
                [alt]="t('ebookCover')"
                width="200"
                appendTo="body"
                [preview]="true">
              </p-image>
            </div>
            <div class="cover-item">
              <div class="cover-label audiobook">
                <i class="pi pi-headphones"></i> {{ t('audiobookCover') }}
              </div>
              <p-image
                [src]="urlHelper.getAudiobookCoverUrl(book.id, book.metadata?.audiobookCoverUpdatedOn)"
                [alt]="t('audiobookCover')"
                width="200"
                appendTo="body"
                [preview]="true"
                class="square-cover">
              </p-image>
            </div>
          </div>
        </div>
      </ng-template>
    </p-tabpanel>
    <p-tabpanel value="notes">
      <ng-template #content>
        <app-book-notes-component [bookId]="book.id"></app-book-notes-component>
      </ng-template>
    </p-tabpanel>
    <p-tabpanel value="sessions">
      <ng-template #content>
        <app-book-reading-sessions [bookId]="book.id"></app-book-reading-sessions>
      </ng-template>
    </p-tabpanel>
    <p-tabpanel value="reviews">
      <ng-template #content>
        <app-book-reviews [bookId]="book.id"></app-book-reviews>
      </ng-template>
    </p-tabpanel>
    <p-tabpanel value="chapters">
      <ng-template #content>
        <div class="chapters-tab-content">
          @if (chaptersLoading) {
            <div class="chapters-loading">
              <i class="pi pi-spin pi-spinner"></i>
            </div>
          } @else if (audiobookInfo) {
            <div class="chapters-tech-info">
              <span class="tech-info-item">
                <i class="pi pi-clock"></i> {{ formatDuration(audiobookInfo.durationMs) }}
              </span>
              @if (audiobookInfo.codec) {
                <span class="tech-info-item">{{ audiobookInfo.codec.toUpperCase() }}</span>
              }
              @if (audiobookInfo.bitrate) {
                <span class="tech-info-item">{{ audiobookInfo.bitrate }} kbps</span>
              }
              @if (audiobookInfo.sampleRate) {
                <span class="tech-info-item">{{ formatSampleRate(audiobookInfo.sampleRate) }}</span>
              }
              @if (audiobookInfo.channels) {
                <span class="tech-info-item">{{ getChannelLabel(audiobookInfo.channels) }}</span>
              }
            </div>
            @if (audiobookInfo.folderBased && audiobookInfo.tracks?.length) {
              <div class="chapters-table-wrapper">
                <table class="chapters-table">
                  <thead>
                    <tr>
                      <th class="chapter-num">#</th>
                      <th class="chapter-title">{{ t('chapterTitle') }}</th>
                      <th class="chapter-file">{{ t('fileName') }}</th>
                      <th class="chapter-time">{{ t('startTime') }}</th>
                      <th class="chapter-time">{{ t('duration') }}</th>
                    </tr>
                  </thead>
                  <tbody>
                    @for (track of audiobookInfo.tracks; track track.index) {
                      <tr>
                        <td class="chapter-num">{{ track.index + 1 }}</td>
                        <td class="chapter-title">{{ track.title }}</td>
                        <td class="chapter-file">{{ track.fileName }}</td>
                        <td class="chapter-time">{{ formatDuration(track.cumulativeStartMs) }}</td>
                        <td class="chapter-time">{{ formatDuration(track.durationMs) }}</td>
                      </tr>
                    }
                  </tbody>
                </table>
              </div>
            } @else if (audiobookInfo.chapters?.length) {
              <div class="chapters-table-wrapper">
                <table class="chapters-table">
                  <thead>
                    <tr>
                      <th class="chapter-num">#</th>
                      <th class="chapter-title">{{ t('chapterTitle') }}</th>
                      <th class="chapter-time">{{ t('startTime') }}</th>
                      <th class="chapter-time">{{ t('endTime') }}</th>
                      <th class="chapter-time">{{ t('duration') }}</th>
                    </tr>
                  </thead>
                  <tbody>
                    @for (chapter of audiobookInfo.chapters; track chapter.index) {
                      <tr>
                        <td class="chapter-num">{{ chapter.index + 1 }}</td>
                        <td class="chapter-title">{{ chapter.title }}</td>
                        <td class="chapter-time">{{ formatDuration(chapter.startTimeMs) }}</td>
                        <td class="chapter-time">{{ formatDuration(chapter.endTimeMs) }}</td>
                        <td class="chapter-time">{{ formatDuration(chapter.durationMs) }}</td>
                      </tr>
                    }
                  </tbody>
                </table>
              </div>
            } @else {
              <div class="chapters-empty">
                <i class="pi pi-info-circle"></i> {{ t('noChapters') }}
              </div>
            }
          }
        </div>
      </ng-template>
    </p-tabpanel>
    <p-tabpanel value="files">
      <ng-template #content>
        <div class="files-tab-content">
          @if (isPhysicalBook()) {
            <div class="empty-state">
              <i class="pi pi-book empty-state-icon"></i>
              <h4 class="empty-state-title">{{ t('physicalBookTitle') }}</h4>
              <p class="empty-state-message">{{ t('physicalBookMessage') }}</p>
              <p class="empty-state-hint">{{ t('physicalBookHint') }}</p>
            </div>
          } @else {
            @if (hasMultipleFiles(book)) {
              <div class="files-section download-all-section">
                <p-button
                  [label]="t('downloadAll', { count: getTotalFileCount(book) })"
                  icon="pi pi-download"
                  severity="info"
                  outlined
                  (onClick)="downloadAll(book)"
                  [pTooltip]="t('downloadAllTooltip')"
                  tooltipPosition="top">
                </p-button>
              </div>
            }
            @if (book.primaryFile) {
              <div class="files-section">
                <h4 class="files-section-title">{{ t('primaryFile') }}</h4>
                <div class="files-list">
                  <div class="file-item primary-file">
                    <div class="file-info">
                      <span class="file-type-badge" [style.background-color]="getFileTypeBgColor(book.primaryFile.extension)">
                        {{ book.primaryFile.extension | uppercase }}
                      </span>
                      <span class="file-name" [pTooltip]="book.primaryFile.filePath" tooltipPosition="top">{{ book.primaryFile.fileName }}</span>
                      <span class="file-size">{{ getFileSizeInMB(book.primaryFile) }}</span>
                    </div>
                    <div class="file-actions">
                      @if (book.primaryFile.bookType === 'EPUB') {
                        <p-button
                          icon="pi pi-book"
                          size="small"
                          text
                          severity="primary"
                          [pTooltip]="t('readTooltip')"
                          tooltipPosition="top"
                          (onClick)="read(book.id)">
                        </p-button>
                        <p-button
                          icon="pi pi-play"
                          size="small"
                          text
                          severity="info"
                          [pTooltip]="t('streamingReaderTooltip')"
                          tooltipPosition="top"
                          (onClick)="read(book.id, 'epub-streaming')">
                        </p-button>
                      } @else if (book.primaryFile.bookType && ['PDF', 'FB2', 'MOBI', 'AZW3', 'CBX'].includes(book.primaryFile.bookType)) {
                        <p-button
                          icon="pi pi-book"
                          size="small"
                          text
                          severity="primary"
                          [pTooltip]="t('readTooltip')"
                          tooltipPosition="top"
                          (onClick)="read(book.id)">
                        </p-button>
                      } @else if (book.primaryFile.bookType === 'AUDIOBOOK') {
                        <p-button
                          icon="pi pi-play"
                          size="small"
                          text
                          severity="primary"
                          [pTooltip]="t('playTooltip')"
                          tooltipPosition="top"
                          (onClick)="read(book.id)">
                        </p-button>
                      }
                      <p-button
                        icon="pi pi-download"
                        size="small"
                        text
                        severity="success"
                        [pTooltip]="t('downloadTooltip')"
                        tooltipPosition="top"
                        (onClick)="download(book)">
                      </p-button>
                      @if (canDetach(book)) {
                        <p-button
                          icon="pi pi-external-link"
                          size="small"
                          text
                          severity="warn"
                          [pTooltip]="t('detachTooltip')"
                          tooltipPosition="top"
                          (onClick)="detachFile(book, book.primaryFile!.id, book.primaryFile!.fileName || 'file')">
                        </p-button>
                      }
                      <p-button
                        icon="pi pi-trash"
                        size="small"
                        text
                        severity="danger"
                        [pTooltip]="t('deleteTooltip')"
                        tooltipPosition="top"
                        (onClick)="deleteFile(book, book.primaryFile!.id, book.primaryFile!.fileName || 'file', true)">
                      </p-button>
                    </div>
                  </div>
                </div>
              </div>
            }
            @if (book.alternativeFormats && book.alternativeFormats.length > 0) {
              <div class="files-section">
                <h4 class="files-section-title">{{ t('alternativeFormats') }}</h4>
                <div class="files-list">
                  @for (format of book.alternativeFormats; track format.id) {
                    <div class="file-item">
                      <div class="file-info">
                        <span class="file-type-badge" [style.background-color]="getFileTypeBgColor(format.extension)">
                          {{ format.extension | uppercase }}
                        </span>
                        <span class="file-name" [pTooltip]="format.filePath" tooltipPosition="top">{{ format.fileName }}</span>
                        <span class="file-size">{{ getFileSizeInMB(format) }}</span>
                      </div>
                      <div class="file-actions">
                        @if (format.bookType === 'EPUB') {
                          <p-button
                            icon="pi pi-book"
                            size="small"
                            text
                            severity="primary"
                            [pTooltip]="t('readTooltip')"
                            tooltipPosition="top"
                            (onClick)="read(book.id, undefined, format.bookType)">
                          </p-button>
                          <p-button
                            icon="pi pi-play"
                            size="small"
                            text
                            severity="info"
                            [pTooltip]="t('streamingReaderTooltip')"
                            tooltipPosition="top"
                            (onClick)="read(book.id, 'epub-streaming', format.bookType)">
                          </p-button>
                        } @else if (format.bookType && ['PDF', 'FB2', 'MOBI', 'AZW3', 'CBX'].includes(format.bookType)) {
                          <p-button
                            icon="pi pi-book"
                            size="small"
                            text
                            severity="primary"
                            [pTooltip]="t('readTooltip')"
                            tooltipPosition="top"
                            (onClick)="read(book.id, undefined, format.bookType)">
                          </p-button>
                        } @else if (format.bookType === 'AUDIOBOOK') {
                          <p-button
                            icon="pi pi-play"
                            size="small"
                            text
                            severity="primary"
                            [pTooltip]="t('playTooltip')"
                            tooltipPosition="top"
                            (onClick)="read(book.id, undefined, format.bookType)">
                          </p-button>
                        }
                        <p-button
                          icon="pi pi-download"
                          size="small"
                          text
                          severity="success"
                          [pTooltip]="t('downloadTooltip')"
                          tooltipPosition="top"
                          (onClick)="downloadAdditionalFile(book, format.id)">
                        </p-button>
                        @if (canDetach(book)) {
                          <p-button
                            icon="pi pi-external-link"
                            size="small"
                            text
                            severity="warn"
                            [pTooltip]="t('detachTooltip')"
                            tooltipPosition="top"
                            (onClick)="detachFile(book, format.id, format.fileName || 'file')">
                          </p-button>
                        }
                        <p-button
                          icon="pi pi-trash"
                          size="small"
                          text
                          severity="danger"
                          [pTooltip]="t('deleteTooltip')"
                          tooltipPosition="top"
                          (onClick)="deleteFile(book, format.id, format.fileName || 'file', false)">
                        </p-button>
                      </div>
                    </div>
                  }
                </div>
              </div>
            }
            @if (book.supplementaryFiles && book.supplementaryFiles.length > 0) {
              <div class="files-section">
                <h4 class="files-section-title">{{ t('supplementaryFiles') }}</h4>
                <div class="files-list">
                  @for (file of book.supplementaryFiles; track file.id) {
                    <div class="file-item">
                      <div class="file-info">
                        <i [class]="getFileIcon(getFileExtension(file.filePath))" class="file-icon"></i>
                        <span class="file-name" [pTooltip]="file.filePath" tooltipPosition="top">{{ file.fileName }}</span>
                        <span class="file-size">{{ getFileSizeInMB(file) }}</span>
                      </div>
                      <div class="file-actions">
                        <p-button
                          icon="pi pi-download"
                          size="small"
                          text
                          severity="success"
                          [pTooltip]="t('downloadTooltip')"
                          tooltipPosition="top"
                          (onClick)="downloadAdditionalFile(book, file.id)">
                        </p-button>
                        @if (canDetach(book)) {
                          <p-button
                            icon="pi pi-external-link"
                            size="small"
                            text
                            severity="warn"
                            [pTooltip]="t('detachTooltip')"
                            tooltipPosition="top"
                            (onClick)="detachFile(book, file.id, file.fileName || 'file')">
                          </p-button>
                        }
                        <p-button
                          icon="pi pi-trash"
                          size="small"
                          text
                          severity="danger"
                          [pTooltip]="t('deleteTooltip')"
                          tooltipPosition="top"
                          (onClick)="deleteSupplementary(book.id, file.id, file.fileName || 'file')">
                        </p-button>
                      </div>
                    </div>
                  }
                </div>
              </div>
            }
          }
        </div>
      </ng-template>
    </p-tabpanel>
  </p-tabpanels>
</p-tabs>
</ng-container>
