<ng-container *transloco="let t; prefix: 'settingsAuditLogs'">
  <div class="main-container">
    <div class="settings-header">
      <h2 class="settings-title">
        <i class="pi pi-history"></i>
        {{ t('title') }}
      </h2>
      <p class="settings-description">{{ t('description') }}</p>
    </div>

    <div class="settings-card">
      <div class="section-header">
        <h3 class="section-title">
          <i class="pi pi-list"></i>
          {{ t('sectionTitle') }}
        </h3>
        <div class="filter-controls">
          <p-select
            [options]="actionOptions"
            [(ngModel)]="selectedAction"
            optionLabel="label"
            optionValue="value"
            [placeholder]="t('filterPlaceholder')"
            (onChange)="onFilterChange()"
            class="action-filter">
          </p-select>
          <p-select
            [options]="usernameOptions"
            [(ngModel)]="selectedUsername"
            optionLabel="label"
            optionValue="value"
            [placeholder]="t('userFilterPlaceholder')"
            (onChange)="onFilterChange()"
            class="user-filter">
          </p-select>
          <p-datepicker
            [(ngModel)]="dateRange"
            (ngModelChange)="onDateRangeChange()"
            selectionMode="range"
            [placeholder]="t('dateRangePlaceholder')"
            dateFormat="yy-mm-dd"
            [showIcon]="true"
            [showButtonBar]="true"
            class="date-range-filter">
          </p-datepicker>
          <button
            *ngIf="hasActiveFilters"
            (click)="clearAllFilters()"
            class="icon-btn clear-btn"
            [title]="t('clearFilters')">
            <i class="pi pi-filter-slash"></i>
          </button>
          <button
            (click)="toggleAutoRefresh()"
            class="icon-btn refresh-btn"
            [class.active]="autoRefresh"
            [title]="t('autoRefresh')">
            <i class="pi pi-sync" [class.pi-spin]="autoRefresh"></i>
          </button>
        </div>
      </div>
      <div class="section-body">
        <p-table
          [value]="logs"
          [lazy]="true"
          [paginator]="true"
          [rows]="rows"
          [first]="currentPage * rows"
          [totalRecords]="totalRecords"
          [loading]="loading"
          [showCurrentPageReport]="true"
          [currentPageReportTemplate]="t('pageReport')"
          (onLazyLoad)="onLazyLoad($event)"
          [rowsPerPageOptions]="[10, 25, 50]"
          styleClass="p-datatable-sm p-datatable-striped">

          <ng-template pTemplate="header">
            <tr>
              <th style="width: 120px">{{ t('columns.timestamp') }}</th>
              <th style="width: 100px">{{ t('columns.user') }}</th>
              <th style="width: 200px">{{ t('columns.action') }}</th>
              <th>{{ t('columns.description') }}</th>
              <th style="width: 160px">{{ t('columns.ip') }}</th>
            </tr>
          </ng-template>

          <ng-template pTemplate="body" let-log>
            <tr>
              <td class="timestamp-cell" [title]="log.createdAt | date:'medium'">
                {{ getRelativeTime(log.createdAt) }}
              </td>
              <td>{{ log.username }}</td>
              <td>
                <app-tag [color]="getActionColor(log.action)" size="2xs" [rounded]="true">
                  {{ formatAction(log.action) }}
                </app-tag>
              </td>
              <td class="description-cell"
                  [class.expanded]="expandedRows.has(log.id)"
                  (click)="toggleDescription(log.id)">
                {{ log.description }}
              </td>
              <td class="ip-cell">
                <span *ngIf="log.countryCode" class="flag-emoji">{{ countryCodeToFlag(log.countryCode) }}</span>
                {{ log.ipAddress || '—' }}
              </td>
            </tr>
          </ng-template>

          <ng-template pTemplate="emptymessage">
            <tr>
              <td colspan="5" class="empty-message">
                <i class="pi pi-inbox"></i>
                <span>{{ t('empty') }}</span>
              </td>
            </tr>
          </ng-template>
        </p-table>
      </div>
    </div>
  </div>
</ng-container>
