<div class="page">
  <div class="flex flex-wrap gap-3 items-end mb-4">
    <label class="flex flex-col gap-1">
      Search / 搜尋
      <kendo-textbox placeholder="Summary / entity / user" [(ngModel)]="search"
        (keydown.enter)="applyFilter()"></kendo-textbox>
    </label>
    <label class="flex flex-col gap-1">
      Category / 類別
      <kendo-dropdownlist [data]="categories" textField="label" valueField="value" [valuePrimitive]="true"
        [(ngModel)]="category" [defaultItem]="{ value: null, label: 'All Categories/全部類別' }">
      </kendo-dropdownlist>
    </label>
    <label class="flex flex-col gap-1">
      Action / 動作
      <kendo-dropdownlist [data]="actions" textField="label" valueField="value" [valuePrimitive]="true"
        [(ngModel)]="action" [defaultItem]="{ value: null, label: 'All Actions/全部動作' }">
      </kendo-dropdownlist>
    </label>
    <label class="flex flex-col gap-1">
      From / 起
      <kendo-datepicker [(ngModel)]="from"></kendo-datepicker>
    </label>
    <label class="flex flex-col gap-1">
      To / 迄
      <kendo-datepicker [(ngModel)]="to"></kendo-datepicker>
    </label>
    <button kendoButton themeColor="primary" (click)="applyFilter()">Apply / 套用</button>
  </div>

  <kendo-grid [data]="{ data: rows, total: total }" [loading]="loading" [pageable]="true" [skip]="skip"
    [pageSize]="pageSize" (pageChange)="onPageChange($event)">

    <kendo-grid-column title="Time / 時間" [width]="170">
      <ng-template kendoGridCellTemplate let-dataItem>{{ dataItem.timestamp | date:'short' }}</ng-template>
    </kendo-grid-column>
    <kendo-grid-column title="Level / 等級" [width]="100">
      <ng-template kendoGridCellTemplate let-dataItem>
        <span [class]="levelClass(dataItem.level)">{{ dataItem.level }}</span>
      </ng-template>
    </kendo-grid-column>
    <kendo-grid-column field="category" title="Category / 類別" [width]="120"></kendo-grid-column>
    <kendo-grid-column field="action" title="Action / 動作" [width]="140"></kendo-grid-column>
    <kendo-grid-column title="Entity / 對象" [width]="160">
      <ng-template kendoGridCellTemplate let-dataItem>
        <span *ngIf="dataItem.entityName">{{ dataItem.entityName }}<span *ngIf="dataItem.entityId"> #{{ dataItem.entityId }}</span></span>
      </ng-template>
    </kendo-grid-column>
    <kendo-grid-column field="summary" title="Summary / 摘要"></kendo-grid-column>
    <kendo-grid-column title="User / 使用者" [width]="180">
      <ng-template kendoGridCellTemplate let-dataItem>{{ dataItem.userEmail || dataItem.userId }}</ng-template>
    </kendo-grid-column>
    <kendo-grid-column title="" [width]="90">
      <ng-template kendoGridCellTemplate let-dataItem>
        <button kendoButton fillMode="flat" themeColor="primary" (click)="view(dataItem)">View</button>
      </ng-template>
    </kendo-grid-column>
  </kendo-grid>

  <!-- Detail dialog -->
  <kendo-dialog *ngIf="detail" title="Audit Log #{{ detail.id }}" [width]="720" [maxWidth]="'95vw'" [maxHeight]="'90vh'" (close)="detail = null">
    <div class="p-2 flex flex-col gap-2 text-sm">
      <div class="grid grid-cols-2 gap-2">
        <div><strong>Time:</strong> {{ detail.timestamp | date:'medium' }}</div>
        <div><strong>Level:</strong> <span [class]="levelClass(detail.level)">{{ detail.level }}</span></div>
        <div><strong>Category:</strong> {{ detail.category }}</div>
        <div><strong>Action:</strong> {{ detail.action }}</div>
        <div *ngIf="detail.entityName"><strong>Entity:</strong> {{ detail.entityName }} <span *ngIf="detail.entityId">#{{ detail.entityId }}</span></div>
        <div *ngIf="detail.userEmail || detail.userId"><strong>User:</strong> {{ detail.userEmail || detail.userId }}</div>
        <div *ngIf="detail.ipAddress"><strong>IP:</strong> {{ detail.ipAddress }}</div>
        <div class="col-span-2" *ngIf="detail.summary"><strong>Summary:</strong> {{ detail.summary }}</div>
        <div class="col-span-2" *ngIf="detail.correlationId"><strong>Correlation:</strong> {{ detail.correlationId }}</div>
      </div>
      <ng-container *ngIf="detailChanges">
        <div><strong>Changes (before → after)</strong></div>
        <pre class="detail-block">{{ detailChanges }}</pre>
      </ng-container>
    </div>
    <kendo-dialog-actions>
      <button kendoButton (click)="detail = null">Close / 關閉</button>
    </kendo-dialog-actions>
  </kendo-dialog>
</div>
