<div class="k-p-4">
  <ng-template appPageHeaderActions>
    <button kendoButton themeColor="primary" (click)="openCreateDialog()">+ Add New User</button>
    <button kendoButton (click)="testAuth()">Test Auth</button>
  </ng-template>

  <!-- Auth test result (dev only) -->
  <div *ngIf="authTestResult" class="k-mb-3 k-p-2" style="background:#f0f4ff;border-radius:4px;font-size:12px">
    <strong>Auth test:</strong> <pre style="margin:0;white-space:pre-wrap">{{ authTestResult }}</pre>
    <button kendoButton size="small" (click)="authTestResult=null">Clear</button>
  </div>

  <!-- Reset password result banner -->
  <div *ngIf="resetPasswordResult"
    class="reset-password-banner k-d-flex k-align-items-center k-gap-3 k-p-3 k-mb-4">
    <span>New temporary password: <strong><code>{{ resetPasswordResult.tempPassword }}</code></strong></span>
    <button kendoButton size="small" (click)="copyResetPassword()">Copy</button>
    <button kendoButton size="small" (click)="dismissResetResult()">X</button>
    <span class="k-ml-2">Warning: This will not be shown again.</span>
  </div>

  <!-- Search -->
  <div class="k-d-flex k-gap-3 k-mb-4">
    <kendo-textbox [(ngModel)]="searchText" placeholder="Search email or member name..."
      (keyup.enter)="onSearch()" style="width:300px"></kendo-textbox>
    <button kendoButton (click)="onSearch()">Search</button>
  </div>

  <!-- Grid -->
  <kendo-grid
    [data]="{ data: data, total: totalCount }"
    [pageSize]="pageSize"
    [skip]="(page - 1) * pageSize"
    [pageable]="{ pageSizes: [10, 20, 50] }"
    (pageChange)="onPageChange($event)">

    <kendo-grid-column field="email" title="Email" [width]="220"></kendo-grid-column>

    <kendo-grid-column title="Member" [width]="180">
      <ng-template kendoGridCellTemplate let-row>
        {{ row.memberDisplayName ?? '--' }}
      </ng-template>
    </kendo-grid-column>

    <kendo-grid-column title="Roles" [width]="200">
      <ng-template kendoGridCellTemplate let-row>
        <span *ngFor="let role of row.roles" class="role-badge k-mr-1">{{ role }}</span>
      </ng-template>
    </kendo-grid-column>

    <kendo-grid-column title="Active" [width]="90">
      <ng-template kendoGridCellTemplate let-row>
        <span [class]="row.isActive ? 'status-active' : 'status-inactive'">
          {{ row.isActive ? 'Active' : 'Inactive' }}
        </span>
      </ng-template>
    </kendo-grid-column>

    <kendo-grid-column title="Last Login" [width]="160">
      <ng-template kendoGridCellTemplate let-row>
        {{ row.lastLoginAt ? (row.lastLoginAt | date:'MM/dd/yyyy HH:mm') : '--' }}
      </ng-template>
    </kendo-grid-column>

    <kendo-grid-column title="Actions" [width]="240">
      <ng-template kendoGridCellTemplate let-row>
        <div class="k-d-flex k-gap-2">
          <button kendoButton size="small" (click)="openEditDialog(row)">Edit</button>
          <button kendoButton size="small" (click)="resetPassword(row)">Reset Pwd</button>
          <button *ngIf="row.isActive" kendoButton size="small" themeColor="warning"
            (click)="deactivateUser(row)">Deactivate</button>
        </div>
      </ng-template>
    </kendo-grid-column>

  </kendo-grid>
</div>

<!-- Create User Dialog -->
<app-create-user-dialog
  *ngIf="showCreateDialog"
  (saved)="onUserCreated($event)"
  (cancelled)="closeCreateDialog()">
</app-create-user-dialog>

<!-- Edit User Dialog -->
<app-edit-user-dialog
  *ngIf="showEditDialog && editingUser"
  [user]="editingUser"
  (saved)="onUserSaved($event)"
  (cancelled)="closeEditDialog()">
</app-edit-user-dialog>
