@if (facade.selected(); as review) {
<main class="review-detail">
  <header class="toolbar">
    <app-button variant="secondary" size="sm" (click)="back()">{{ 'adminOrders.back' | translate }}</app-button>
    <h1>{{ review.customerName }} — {{ review.rating }}★</h1>
    <app-badge [variant]="review.status === 'approved' ? 'success' : review.status === 'pending' ? 'neutral' : review.status === 'spam' ? 'danger' : 'warning'">{{ ('adminModeration.status.' + review.status) | translate }}</app-badge>
    @if (review.reportCount > 0) {
      <app-badge variant="danger">{{ review.reportCount }} {{ 'adminModeration.reportsColumn' | translate }}</app-badge>
    }
  </header>

  <section class="grid two">
    <div class="card">
      <h3>{{ 'adminModeration.customer' | translate }}</h3>
      <p>{{ review.customerName }}</p>
      <p>{{ review.customerEmail }}</p>
    </div>
    <div class="card">
      <h3>{{ 'adminModeration.product' | translate }}</h3>
      <p>{{ review.productName }}</p>
    </div>
  </section>

  <section class="card">
    <h3>{{ 'adminModeration.reviewText' | translate }}</h3>
    <p>{{ review.text }}</p>
    <h4>{{ 'adminModeration.photos' | translate }}</h4>
    @if (review.photos.length === 0) {
      <p class="muted">{{ 'adminModeration.notAvailable' | translate }}</p>
    } @else {
      <div class="photo-row">
        @for (photo of review.photos; track photo) { <img [src]="photo" alt="" loading="lazy" /> }
      </div>
    }
  </section>

  <section class="card">
    <h3>{{ 'adminModeration.workflow' | translate }}</h3>
    <div class="workflow-actions">
      <app-button variant="secondary" size="sm" [disabled]="review.status === 'approved'" (click)="facade.setStatus(review.id, 'approved')">{{ 'adminModeration.approve' | translate }}</app-button>
      <app-button variant="secondary" size="sm" [disabled]="review.status === 'rejected'" (click)="facade.setStatus(review.id, 'rejected')">{{ 'adminModeration.reject' | translate }}</app-button>
      <app-button variant="secondary" size="sm" [disabled]="review.status === 'spam'" (click)="facade.setStatus(review.id, 'spam')">{{ 'adminModeration.markSpam' | translate }}</app-button>
      @if (review.visible) {
        <app-button variant="secondary" size="sm" (click)="facade.setVisible(review.id, false)">{{ 'adminModeration.hide' | translate }}</app-button>
      } @else {
        <app-button variant="secondary" size="sm" (click)="facade.setVisible(review.id, true)">{{ 'adminModeration.restore' | translate }}</app-button>
      }
      <app-button variant="secondary" size="sm" (click)="facade.setPinned(review.id, !review.pinned)">{{ (review.pinned ? 'adminModeration.unpin' : 'adminModeration.pin') | translate }}</app-button>
      <app-button variant="secondary" size="sm" [disabled]="review.status !== 'approved'" [attr.title]="review.status !== 'approved' ? ('adminModeration.featureDisabledHint' | translate) : null" (click)="facade.setFeatured(review.id, !review.featured)">{{ (review.featured ? 'adminModeration.unfeature' : 'adminModeration.feature') | translate }}</app-button>
    </div>
  </section>

  <section class="card">
    <h3>{{ 'adminOrders.timeline' | translate }}</h3>
    <app-order-timeline [entries]="timelineEntries()" />
  </section>

  <section class="card">
    <h3>{{ 'adminModeration.moderatorNotes' | translate }}</h3>
    @for (line of review.moderatorNotes.split('\n'); track $index) { @if (line) { <p>{{ line }}</p> } }
    <textarea rows="2" [ngModel]="noteDraft()" (ngModelChange)="noteDraft.set($event)"></textarea>
    <app-button variant="secondary" size="sm" (click)="submitNote(review.id)">{{ 'adminOrders.addNote' | translate }}</app-button>
  </section>
</main>
} @else {
  <p>{{ 'common.loading' | translate }}</p>
}