<section class="admin-reviews-card">
  @if (facade.dashboardStats(); as stats) {
    <app-moderation-dashboard [stats]="stats" />
  }

  <div class="toolbar">
    <div class="filters">
      <app-input type="search" [ngModel]="facade.filters().search" (ngModelChange)="facade.updateFilters({ search: $event })" [placeholder]="'adminModeration.search' | translate" />
      <select [attr.aria-label]="'backoffice.status' | translate" [ngModel]="facade.filters().status" (ngModelChange)="facade.updateFilters({ status: $event })">
        @for (status of statuses; track status) {
          <option [value]="status">{{ status === 'all' ? ('adminModeration.allStatuses' | translate) : ('adminModeration.status.' + status | translate) }}</option>
        }
      </select>
      <select [attr.aria-label]="'adminModeration.rating' | translate" [ngModel]="facade.filters().rating" (ngModelChange)="facade.updateFilters({ rating: $event })">
        @for (rating of ratings; track rating) {
          <option [ngValue]="rating">{{ rating === 'all' ? ('adminModeration.allRatings' | translate) : rating + '★' }}</option>
        }
      </select>
    </div>
    <div class="toolbar__view-controls">
      <div class="view-toggle" role="group" [attr.aria-label]="'adminProducts.viewMode' | translate">
        <app-button variant="ghost" size="sm" [attr.aria-pressed]="facade.viewMode() === 'table'" (click)="facade.setViewMode('table')">{{ 'adminProducts.viewTable' | translate }}</app-button>
        <app-button variant="ghost" size="sm" [attr.aria-pressed]="facade.viewMode() === 'cards'" (click)="facade.setViewMode('cards')">{{ 'adminProducts.viewGrid' | translate }}</app-button>
      </div>
      <div class="view-toggle" role="group" [attr.aria-label]="'adminProducts.density' | translate">
        <app-button variant="ghost" size="sm" [attr.aria-pressed]="facade.density() === 'comfortable'" (click)="facade.setDensity('comfortable')">{{ 'adminProducts.densityComfortable' | translate }}</app-button>
        <app-button variant="ghost" size="sm" [attr.aria-pressed]="facade.density() === 'compact'" (click)="facade.setDensity('compact')">{{ 'adminProducts.densityCompact' | translate }}</app-button>
      </div>
      <app-button variant="ghost" size="sm" (click)="columnsPanelOpen.set(!columnsPanelOpen())">{{ 'adminProducts.columns' | translate }}</app-button>
      <app-button variant="secondary" (click)="viewReports()">{{ 'adminModeration.reportsQueue' | translate }}</app-button>
    </div>
  </div>

  @if (columnsPanelOpen()) {
    <app-card padding="sm" class="columns-panel">
      @for (column of allColumns; track column) {
        <label class="check">
          <input type="checkbox" [checked]="isColumnVisible(column)" (change)="facade.setColumnVisible(column, $any($event.target).checked)" />
          <span>{{ ('adminModeration.column_' + column) | translate }}</span>
        </label>
      }
    </app-card>
  }

  @if (facade.selectedIds().length > 0) {
    <div class="bulk-actions">
      <span>{{ facade.selectedIds().length }} {{ 'adminProducts.selectedCount' | translate }}</span>
      <select [attr.aria-label]="'adminModeration.changeStatus' | translate" [ngModel]="bulkStatusValue()" (ngModelChange)="bulkStatusValue.set($event)">
        <option value="approved">{{ 'adminModeration.status.approved' | translate }}</option>
        <option value="rejected">{{ 'adminModeration.status.rejected' | translate }}</option>
        <option value="spam">{{ 'adminModeration.status.spam' | translate }}</option>
      </select>
      <app-button variant="secondary" size="sm" (click)="applyBulkStatus()">{{ 'adminOrders.applyStatus' | translate }}</app-button>
      <app-button variant="secondary" size="sm" (click)="facade.applyBulkVisible(false)">{{ 'adminModeration.hideSelected' | translate }}</app-button>
      <app-button variant="secondary" size="sm" (click)="facade.exportSelectedAsCsv()">{{ 'adminProducts.bulkExportAction' | translate }}</app-button>
      <app-button variant="danger" size="sm" (click)="bulkDelete()">{{ 'adminModeration.deleteSelected' | translate }}</app-button>
    </div>
  }
  <app-confirm-dialog
    [open]="bulkDeleteConfirmOpen()"
    [titleText]="'adminModeration.deleteSelected' | translate"
    [message]="'adminModeration.confirmBulkDelete' | translate"
    [destructive]="true"
    (confirmed)="confirmBulkDelete()"
    (cancelled)="bulkDeleteConfirmOpen.set(false)" />

  @if (facade.loading()) {
    <div class="skeleton-rows" role="status" aria-live="polite" aria-busy="true">
      @for (i of [1,2,3,4]; track i) { <app-skeleton shape="rect" height="40px" /> }
      <span class="sr-only">{{ 'common.loading' | translate }}</span>
    </div>
  } @else if (facade.reviews().length === 0) {
    <app-empty-state [title]="'adminModeration.emptyTitle' | translate" [description]="'adminModeration.emptyDescription' | translate" />
    <p class="admin-reviews-card__guide">{{ 'adminModeration.emptyGuide' | translate }}</p>
  } @else if (facade.viewMode() === 'table') {
    <div class="table-scroll" [class.density-compact]="facade.density() === 'compact'">
      <app-table>
        <thead>
          <tr>
            <th scope="col"><input type="checkbox" [attr.aria-label]="'adminModeration.selectAllRows' | translate" (change)="facade.toggleAll($any($event.target).checked)" /></th>
            <th scope="col">{{ 'adminModeration.customer' | translate }}</th>
            @if (isColumnVisible('product')) { <th scope="col">{{ 'adminModeration.product' | translate }}</th> }
            @if (isColumnVisible('rating')) { <th scope="col">{{ 'adminModeration.rating' | translate }}</th> }
            @if (isColumnVisible('status')) { <th scope="col">{{ 'backoffice.status' | translate }}</th> }
            @if (isColumnVisible('reports')) { <th scope="col">{{ 'adminModeration.reportsColumn' | translate }}</th> }
            @if (isColumnVisible('created')) { <th scope="col">{{ 'adminOrders.createdAt' | translate }}</th> }
            <th scope="col">{{ 'adminModeration.health' | translate }}</th>
            <th scope="col">{{ 'adminProducts.actions' | translate }}</th>
          </tr>
        </thead>
        <tbody>
          @for (review of facade.reviews(); track review.id) {
            <tr>
              <td><input type="checkbox" [checked]="isSelected(review.id)" [attr.aria-label]="review.customerName" (change)="facade.toggleSelection(review.id, $any($event.target).checked)" /></td>
              <th scope="row">{{ review.customerName }}</th>
              @if (isColumnVisible('product')) { <td>{{ review.productName }}</td> }
              @if (isColumnVisible('rating')) { <td>{{ review.rating }}★</td> }
              @if (isColumnVisible('status')) {
                <td><app-badge [variant]="review.status === 'approved' ? 'success' : review.status === 'pending' ? 'neutral' : review.status === 'spam' ? 'danger' : 'warning'">{{ ('adminModeration.status.' + review.status) | translate }}</app-badge></td>
              }
              @if (isColumnVisible('reports')) {
                <td>@if (review.reportCount > 0) { <app-badge variant="danger">{{ review.reportCount }}</app-badge> } @else { — }</td>
              }
              @if (isColumnVisible('created')) { <td>{{ review.createdAt | date:'short' }}</td> }
              <td class="health-cell"><app-review-health-widget [items]="healthItems(review)" [completionPercent]="facade.health(review).completionPercent" [compact]="true" /></td>
              <td class="actions">
                <app-button variant="secondary" size="sm" (click)="view(review.id)">{{ 'adminOrders.view' | translate }}</app-button>
              </td>
            </tr>
          }
        </tbody>
      </app-table>
    </div>
  } @else {
    <div class="review-grid" [class.review-grid--compact]="facade.density() === 'compact'">
      @for (review of facade.reviews(); track review.id) {
        <app-card padding="sm" class="review-grid__item">
          <label class="review-grid__select">
            <input type="checkbox" [checked]="isSelected(review.id)" (change)="facade.toggleSelection(review.id, $any($event.target).checked)" [attr.aria-label]="review.customerName" />
          </label>
          <div class="review-grid__meta">
            <strong>{{ review.customerName }}</strong>
            <span>{{ review.rating }}★</span>
          </div>
          <p class="review-grid__product">{{ review.productName }}</p>
          <p class="review-grid__text">{{ review.text }}</p>
          <app-badge [variant]="review.status === 'approved' ? 'success' : review.status === 'pending' ? 'neutral' : review.status === 'spam' ? 'danger' : 'warning'">{{ ('adminModeration.status.' + review.status) | translate }}</app-badge>
          <app-review-health-widget [items]="healthItems(review)" [completionPercent]="facade.health(review).completionPercent" [compact]="true" />
          <app-button variant="secondary" size="sm" (click)="view(review.id)">{{ 'adminOrders.view' | translate }}</app-button>
        </app-card>
      }
    </div>
  }

  @if (facade.reviews().length > 0) {
    <div class="pager">
      <span>{{ facade.total() }} {{ 'adminModeration.itemsCount' | translate }}</span>
      <app-pagination [currentPage]="facade.filters().page" [totalPages]="totalPages()" (pageChange)="facade.updateFilters({ page: $event })" />
    </div>
  }
</section>
