<ng-container *transloco="let t; prefix: 'readerEbook.metadataDialog'">
<div class="dialog-overlay" (click)="close.emit()">
  <div class="dialog" (click)="$event.stopPropagation()">
    <div class="dialog-header">
      <h2>{{ t('title') }}</h2>
      <button class="close-btn" (click)="close.emit()">&#10005;</button>
    </div>

    <div class="dialog-body">
      <div class="metadata-container">
        <div class="cover-section">
          @if (bookCoverUrl) {
            <img [src]="bookCoverUrl" [alt]="metadata?.title || t('unknown')" class="book-cover">
          } @else {
            <div class="cover-placeholder">
              <span class="placeholder-icon">&#128218;</span>
            </div>
          }
        </div>

        <div class="metadata-section">
          <div class="metadata-group">
            <h3 class="section-title">{{ t('basicInformation') }}</h3>

            <div class="metadata-item">
              <span class="label">{{ t('titleLabel') }}</span>
              <span class="value">{{ metadata?.title || t('unknown') }}</span>
            </div>

            @if (metadata?.subtitle) {
              <div class="metadata-item">
                <span class="label">{{ t('subtitle') }}</span>
                <span class="value">{{ metadata?.subtitle }}</span>
              </div>
            }

            <div class="metadata-item">
              <span class="label">{{ t('authors') }}</span>
              <span class="value">{{ formatAuthors(metadata?.authors) }}</span>
            </div>

            @if (metadata?.publisher) {
              <div class="metadata-item">
                <span class="label">{{ t('publisher') }}</span>
                <span class="value">{{ metadata?.publisher }}</span>
              </div>
            }

            @if (metadata?.publishedDate) {
              <div class="metadata-item">
                <span class="label">{{ t('published') }}</span>
                <span class="value">{{ formatDate(metadata?.publishedDate) }}</span>
              </div>
            }

            @if (metadata?.language) {
              <div class="metadata-item">
                <span class="label">{{ t('language') }}</span>
                <span class="value">{{ metadata?.language }}</span>
              </div>
            }

            @if (metadata?.pageCount) {
              <div class="metadata-item">
                <span class="label">{{ t('pages') }}</span>
                <span class="value">{{ metadata?.pageCount }}</span>
              </div>
            }
          </div>

          @if (metadata?.seriesName) {
            <div class="metadata-group">
              <h3 class="section-title">{{ t('series') }}</h3>

              <div class="metadata-item">
                <span class="label">{{ t('seriesName') }}</span>
                <span class="value">{{ metadata?.seriesName }}</span>
              </div>

              @if (metadata?.seriesNumber) {
                <div class="metadata-item">
                  <span class="label">{{ t('bookNumber') }}</span>
                  <span class="value">
                    {{ metadata?.seriesNumber }}@if (metadata?.seriesTotal) {
                    / {{ metadata?.seriesTotal }}
                  }
                  </span>
                </div>
              }
            </div>
          }

          @if (metadata?.isbn13 || metadata?.isbn10 || metadata?.asin) {
            <div class="metadata-group">
              <h3 class="section-title">{{ t('identifiers') }}</h3>

              @if (metadata?.isbn13) {
                <div class="metadata-item">
                  <span class="label">ISBN-13</span>
                  <span class="value">{{ metadata?.isbn13 }}</span>
                </div>
              }

              @if (metadata?.isbn10) {
                <div class="metadata-item">
                  <span class="label">ISBN-10</span>
                  <span class="value">{{ metadata?.isbn10 }}</span>
                </div>
              }

              @if (metadata?.asin) {
                <div class="metadata-item">
                  <span class="label">ASIN</span>
                  <span class="value">{{ metadata?.asin }}</span>
                </div>
              }
            </div>
          }

          @if (metadata?.rating || metadata?.goodreadsRating || metadata?.amazonRating) {
            <div class="metadata-group">
              <h3 class="section-title">{{ t('ratings') }}</h3>

              @if (metadata?.goodreadsRating) {
                <div class="metadata-item">
                  <span class="label">Goodreads</span>
                  <span class="value">
                    &#11088; {{ metadata?.goodreadsRating?.toFixed(2) }}
                    @if (metadata?.goodreadsReviewCount) {
                      <span class="review-count">({{ metadata?.goodreadsReviewCount }} {{ t('reviews') }})</span>
                    }
                  </span>
                </div>
              }

              @if (metadata?.amazonRating) {
                <div class="metadata-item">
                  <span class="label">Amazon</span>
                  <span class="value">
                    &#11088; {{ metadata?.amazonRating?.toFixed(2) }}
                    @if (metadata?.amazonReviewCount) {
                      <span class="review-count">({{ metadata?.amazonReviewCount }} {{ t('reviews') }})</span>
                    }
                  </span>
                </div>
              }
            </div>
          }

          @if (metadata?.categories && metadata?.categories!.length > 0) {
            <div class="metadata-group">
              <h3 class="section-title">{{ t('categories') }}</h3>
              <div class="tags-container">
                @for (category of metadata?.categories; track category) {
                  <span class="tag">{{ category }}</span>
                }
              </div>
            </div>
          }

          @if (metadata?.tags && metadata?.tags!.length > 0) {
            <div class="metadata-group">
              <h3 class="section-title">{{ t('tags') }}</h3>
              <div class="tags-container">
                @for (tag of metadata?.tags; track tag) {
                  <span class="tag">{{ tag }}</span>
                }
              </div>
            </div>
          }

          @if (book?.fileSizeKb) {
            <div class="metadata-group">
              <h3 class="section-title">{{ t('fileInformation') }}</h3>

              <div class="metadata-item">
                <span class="label">{{ t('fileSize') }}</span>
                <span class="value">{{ formatFileSize(book?.fileSizeKb) }}</span>
              </div>

              @if (book?.fileName) {
                <div class="metadata-item">
                  <span class="label">{{ t('fileName') }}</span>
                  <span class="value file-name">{{ book?.fileName }}</span>
                </div>
              }
            </div>
          }

          @if (metadata?.description) {
            <div class="metadata-group">
              <h3 class="section-title">{{ t('description') }}</h3>
              <p class="description">{{ metadata?.description }}</p>
            </div>
          }
        </div>
      </div>
    </div>
  </div>
</div>
</ng-container>
