<section class="admin-monitoring-page">
  <div class="card">
    <h2>{{ 'adminMonitoring.systemState' | translate }}</h2>
    <div class="health-grid">
      <app-badge [variant]="dashboardFacade.bootstrap() ? 'success' : 'neutral'">{{ 'adminMonitoring.backendConnectivity' | translate }}: {{ dashboardFacade.bootstrap() ? ('adminMonitoring.connected' | translate) : ('adminMonitoring.loading' | translate) }}</app-badge>
      <app-badge [variant]="dashboardFacade.dirty() ? 'warning' : 'success'">{{ 'adminMonitoring.draftState' | translate }}: {{ dashboardFacade.dirty() ? ('adminMonitoring.unsavedChanges' | translate) : ('adminMonitoring.noDraft' | translate) }}</app-badge>
      <app-badge variant="neutral">{{ 'adminMonitoring.lastSaved' | translate }}: {{ dashboardFacade.lastSavedAt() ? (dashboardFacade.lastSavedAt() | date:'short') : ('adminAnalytics.unknown' | translate) }}</app-badge>
      <app-badge variant="neutral">{{ 'adminMonitoring.lastPublished' | translate }}: {{ dashboardFacade.lastPublishedAt() ? (dashboardFacade.lastPublishedAt() | date:'short') : ('adminAnalytics.unknown' | translate) }}</app-badge>
      <app-badge variant="neutral">{{ 'adminMonitoring.syncStatus' | translate }}: {{ 'adminAnalytics.unknown' | translate }}</app-badge>
    </div>
  </div>

  <div class="card">
    <h2>{{ 'adminMonitoring.health' | translate }}</h2>
    <div class="health-grid">
      @for (check of dashboardFacade.healthChecks(); track check.code) {
        <app-badge [variant]="check.healthy ? 'success' : 'danger'">{{ check.labelKey | translate }}</app-badge>
      }
    </div>
  </div>

  <div class="card">
    <h2>{{ 'adminMonitoring.queues' | translate }}</h2>
    <div class="queue-grid">
      @for (queue of facade.queues(); track queue.name) {
        <div class="queue-item">
          <strong>{{ queueLabel(queue.name) }}</strong>
          <span>{{ 'adminMonitoring.depth' | translate }}: {{ queue.depth }}</span>
          <app-badge [variant]="queue.status === 'healthy' ? 'success' : queue.status === 'degraded' ? 'warning' : 'danger'">{{ ('adminMonitoring.queueStatus.' + queue.status) | translate }}</app-badge>
        </div>
      }
    </div>
  </div>

  <div class="card">
    <h2>{{ 'adminMonitoring.webhooks' | translate }}</h2>
    <app-table>
      <thead>
        <tr>
          <th scope="col">{{ 'adminMonitoring.endpoint' | translate }}</th>
          <th scope="col">{{ 'adminMonitoring.event' | translate }}</th>
          <th scope="col">{{ 'backoffice.status' | translate }}</th>
          <th scope="col">{{ 'adminOrders.createdAt' | translate }}</th>
        </tr>
      </thead>
      <tbody>
        @for (delivery of facade.webhooks(); track delivery.id) {
          <tr>
            <th scope="row">{{ delivery.endpoint }}</th>
            <td>{{ webhookEventLabel(delivery.event) }}</td>
            <td><app-badge [variant]="delivery.status === 'delivered' ? 'success' : delivery.status === 'failed' ? 'danger' : 'neutral'">{{ ('adminMonitoring.webhookStatus.' + delivery.status) | translate }}</app-badge></td>
            <td>{{ delivery.timestamp | date:'short' }}</td>
          </tr>
        }
      </tbody>
    </app-table>
  </div>

  <div class="card">
    <h2>{{ 'adminMonitoring.events' | translate }}</h2>
    <div class="filters">
      <app-input type="search" [ngModel]="facade.filters().search" (ngModelChange)="facade.updateFilters({ search: $event })" [placeholder]="'adminOrders.search' | translate" />
      <select [attr.aria-label]="'adminMonitoring.category' | translate" [ngModel]="facade.filters().category" (ngModelChange)="facade.updateFilters({ category: $event })">
        @for (category of categories; track category) {
          <option [value]="category">{{ ('adminMonitoring.categoryValue.' + category) | translate }}</option>
        }
      </select>
    </div>
    @if (facade.loading()) {
      <div class="skeleton-rows" role="status" aria-live="polite" aria-busy="true">
        @for (i of [1,2,3]; track i) {
          <app-skeleton shape="rect" height="36px" />
        }
        <span class="sr-only">{{ 'common.loading' | translate }}</span>
      </div>
    } @else if (facade.error()) {
      <app-empty-state [title]="'common.errorTitle' | translate" [description]="'common.errorDescription' | translate">
        <span slot="actions">
          <app-button variant="primary" (click)="facade.loadAll()">{{ 'common.retry' | translate }}</app-button>
        </span>
      </app-empty-state>
    } @else if (facade.events().length === 0) {
      <app-empty-state [title]="'adminMonitoring.eventsEmptyTitle' | translate" [description]="'adminMonitoring.eventsEmptyDescription' | translate" />
    } @else {
      <app-table>
        <thead>
          <tr>
            <th scope="col">{{ 'adminMonitoring.category' | translate }}</th>
            <th scope="col">{{ 'adminMonitoring.level' | translate }}</th>
            <th scope="col">{{ 'adminMonitoring.message' | translate }}</th>
            <th scope="col">{{ 'adminUsers.name' | translate }}</th>
            <th scope="col">{{ 'adminOrders.createdAt' | translate }}</th>
          </tr>
        </thead>
        <tbody>
          @for (event of facade.events(); track event.id) {
            <tr>
              <td>{{ ('adminMonitoring.categoryValue.' + event.category) | translate }}</td>
              <td><app-badge [variant]="event.level === 'error' ? 'danger' : event.level === 'warning' ? 'warning' : 'neutral'">{{ ('adminMonitoring.levelValue.' + event.level) | translate }}</app-badge></td>
              <td>
                {{ event.message }}
                @if (event.technicalDetail) {
                  <details class="monitoring-technical-detail">
                    <summary>{{ 'adminMonitoring.technicalDetails' | translate }}</summary>
                    <code>{{ event.technicalDetail }}</code>
                  </details>
                }
              </td>
              <td>{{ event.actor }}</td>
              <td>{{ event.timestamp | date:'short' }}</td>
            </tr>
          }
        </tbody>
      </app-table>
    }
  </div>
</section>
