<ng-container *transloco="let t; prefix: 'book.reviews'">
<div class="book-reviews-container">
  <div class="reviews-content">
    @if (loading) {
      <div class="loading-state">
        <p-progressSpinner/>
        <span class="loading-text">{{ t('labels.loadingReviews') }}</span>
      </div>
    } @else if (reviews?.length === 0) {
      <div class="empty-state">
        <div class="empty-state-icon">
          @if (hasPermission && !reviewsLocked && reviewDownloadEnabled) {
            <p-button
              outlined
              rounded
              icon="pi pi-download"
              severity="primary"
              (click)="fetchNewReviews()"
              [pTooltip]="t('tooltip.fetchReviews')"
              tooltipPosition="top"
              class="action-btn floating-btn">
            </p-button>
          }
        </div>
        <p class="empty-state-title">{{ t('empty.noReviews') }}</p>
        @if (!reviewDownloadEnabled) {
          <p class="empty-state-subtitle empty-state-subtitle--warning">
            {{ t('empty.downloadsDisabled') }}
          </p>
        } @else if (hasPermission && !reviewsLocked) {
          <p class="empty-state-subtitle">
            {{ t('empty.fetchPrompt') }}
          </p>
        }
        <div class="empty-state-decoration"></div>
      </div>
    } @else {
      <div class="reviews-scroll-container">
        <div class="reviews-horizontal-list">
          @for (review of reviews; track review.id || $index) {
            <div [class]="'review-card' + (!review.title ? ' no-title' : '') + (review.spoiler && !isSpoilerRevealed(review.id!) ? ' has-spoiler' : '')">
              @if (review.spoiler && !isSpoilerRevealed(review.id!)) {
                <p-button
                  [label]="t('labels.showSpoiler')"
                  icon="pi pi-eye"
                  severity="warn"
                  size="small"
                  class="spoiler-overlay-button"
                  (onClick)="revealSpoiler(review.id!)"/>
              }

              <div class="review-header">
                <div class="review-header-inner">
                  <div class="reviewer-info-group">
                    <div class="reviewer-name-row">
                      <span class="reviewer-name">{{ review.reviewerName || t('labels.anonymous') }}</span>
                      @if (review.metadataProvider) {
                        <p-tag
                          [rounded]="true"
                          [value]="review.metadataProvider"
                          [severity]="getProviderSeverity(review.metadataProvider)"/>
                      }
                      @if (review.country) {
                        <p-tag [rounded]="true" [value]="review.country" severity="info"/>
                      }
                      @if (review.spoiler) {
                        <p-tag [rounded]="true" [value]="t('labels.spoiler')" severity="warn" icon="pi pi-exclamation-triangle"/>
                      }
                    </div>
                    <div class="review-meta">
                      <i class="pi pi-clock review-meta-icon"></i>
                      @if (review.date) {
                        <span class="review-meta-text">{{ formatDate(review.date) }}</span>
                      }
                    </div>
                  </div>

                  <div class="review-actions">
                    @if (review.rating) {
                      <div class="rating-wrapper">
                        <p-rating
                          [ngModel]="review.rating"
                          [readonly]="true"
                          [stars]="5"/>
                        <span class="rating-text">{{ review.rating }}/5</span>
                      </div>
                    }

                    @if (hasPermission) {
                      @if (reviewsLocked) {
                        <div class="lock-icon-container">
                          <i class="pi pi-lock lock-icon"
                             [pTooltip]="t('tooltip.reviewsLocked')"
                             tooltipPosition="top"></i>
                        </div>
                      } @else {
                        <p-button
                          icon="pi pi-trash"
                          size="small"
                          severity="danger"
                          text
                          (onClick)="deleteReview(review)"
                          [pTooltip]="t('tooltip.deleteReview')"
                          tooltipPosition="top"
                          class="action-btn-hover"/>
                      }
                    }
                  </div>
                </div>
              </div>

              @if (review.title && (!review.spoiler || isSpoilerRevealed(review.id!))) {
                <div class="review-title-section">
                  <h4 class="review-title"
                      [pTooltip]="review.title"
                      tooltipPosition="top">{{ review.title }}
                  </h4>
                </div>
              }

              <div class="review-content-area">
                @if (review.spoiler && !isSpoilerRevealed(review.id!)) {
                  <div class="spoiler-blur-content">
                    @if (review.title) {
                      <h4 class="review-title review-title--blurred">{{ review.title }}</h4>
                    }
                    @if (review.body) {
                      <div class="review-body review-body--blurred">{{ review.body }}</div>
                    } @else {
                      <div class="review-empty-text review-empty-text--blurred">{{ t('empty.noContent') }}</div>
                    }
                  </div>
                } @else {
                  @if (review.body) {
                    <div class="review-body">{{ review.body }}</div>
                  } @else {
                    <div class="review-empty-text">{{ t('empty.noContent') }}</div>
                  }
                }
                <div class="review-fade-overlay"></div>
              </div>
              <div class="review-bottom-glow"></div>
            </div>
          }
        </div>
      </div>
    }
  </div>

  <div class="action-bar">
    <div class="action-buttons">

      @if (hasPermission) {
        <p-button
          outlined
          [icon]="reviewsLocked ? 'pi pi-lock' : 'pi pi-lock-open'"
          size="small"
          [severity]="reviewsLocked ? 'danger' : 'success'"
          [disabled]="!reviewDownloadEnabled || loading"
          (click)="toggleReviewsLock()"
          [pTooltip]="loading ? t('tooltip.pleaseWait') : (!reviewDownloadEnabled ? t('tooltip.enableDownloads') : (reviewsLocked ? t('tooltip.unlockReviews') : t('tooltip.lockReviews')))"
          tooltipPosition="left"
          class="action-btn"/>

        <p-button
          outlined
          icon="pi pi-refresh"
          size="small"
          severity="primary"
          [loading]="loading"
          [disabled]="reviewsLocked || !reviewDownloadEnabled || loading"
          (click)="fetchNewReviews()"
          [pTooltip]="loading ? t('tooltip.pleaseWait') : (!reviewDownloadEnabled ? t('tooltip.enableDownloads') : (reviewsLocked ? t('tooltip.reviewsLocked') : t('tooltip.fetchNewReviews')))"
          tooltipPosition="left"
          class="action-btn"/>
      }

      @if (hasPermission && reviews && reviews.length > 0) {
        <p-button
          outlined
          icon="pi pi-trash"
          size="small"
          severity="danger"
          [disabled]="reviewsLocked || loading"
          (click)="deleteAllReviews()"
          [pTooltip]="loading ? t('tooltip.pleaseWait') : (reviewsLocked ? t('tooltip.reviewsLocked') : t('tooltip.deleteAllReviews'))"
          tooltipPosition="left"
          class="action-btn"/>
      }

      @if (reviews && reviews.length > 0) {
        <p-button
          outlined
          [icon]="allSpoilersRevealed ? 'pi pi-eye-slash' : 'pi pi-eye'"
          size="small"
          [severity]="allSpoilersRevealed ? 'warn' : 'info'"
          [disabled]="loading"
          (click)="toggleSpoilerVisibility()"
          [pTooltip]="loading ? t('tooltip.pleaseWait') : (allSpoilersRevealed ? t('tooltip.hideAllSpoilers') : t('tooltip.revealAllSpoilers'))"
          tooltipPosition="left"
          class="action-btn"/>

        <p-button
          outlined
          icon="pi pi-sort-amount-down"
          size="small"
          severity="contrast"
          [disabled]="loading"
          (click)="toggleSortOrder()"
          [pTooltip]="loading ? t('tooltip.pleaseWait') : (sortAscending ? t('tooltip.sortNewest') : t('tooltip.sortOldest'))"
          tooltipPosition="left"
          class="action-btn"/>
      }
    </div>
  </div>
</div>
</ng-container>
