<div class="k-p-4">

  <ng-template appPageHeaderActions>
    <button kendoButton themeColor="primary" (click)="openAddDialog()">+ Add Member</button>
  </ng-template>

  <!-- Filters -->
  <div class="k-d-flex k-gap-3 k-mb-4">
    <kendo-textbox
      [(ngModel)]="searchText"
      placeholder="Search name, nick name, email..."
      (keyup.enter)="onSearch()"
      style="width: 300px">
    </kendo-textbox>
    <kendo-dropdownlist
      [(ngModel)]="filterStatus"
      [data]="statusOptions"
      textField="label" valueField="value" [valuePrimitive]="true"
      (valueChange)="onSearch()"
      style="width: 160px">
    </kendo-dropdownlist>
    <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] }"
    [sortable]="false"
    (pageChange)="onPageChange($event)">

    <kendo-grid-column title="Name" [width]="200">
      <ng-template kendoGridCellTemplate let-row>
        <div>
          <strong>{{ memberDisplayName(row) }}</strong>
          <span *ngIf="row.firstName_zh || row.lastName_zh" class="k-ml-1">
            ({{ row.lastName_zh }}{{ row.firstName_zh }})
          </span>
        </div>
        <div *ngIf="row.nickName && row.nickName !== row.firstName_en" class="k-font-size-sm">
          Legal: {{ row.firstName_en }}
        </div>
      </ng-template>
    </kendo-grid-column>

    <kendo-grid-column title="Status" [width]="100">
      <ng-template kendoGridCellTemplate let-row>
        <span class="status-badge" [attr.data-status]="row.status">{{ row.status }}</span>
      </ng-template>
    </kendo-grid-column>

    <kendo-grid-column field="email"     title="Email"    [width]="200"></kendo-grid-column>
    <kendo-grid-column field="phoneCell" title="Phone"    [width]="130"></kendo-grid-column>
    <kendo-grid-column field="joinDate"  title="Joined"   [width]="110"></kendo-grid-column>

    <kendo-grid-column title="Account" [width]="100">
      <ng-template kendoGridCellTemplate let-row>
        <span [class]="row.linkedUserId ? 'account-badge has-account' : 'account-badge no-account'">
          {{ row.linkedUserId ? 'User' : '--' }}
        </span>
      </ng-template>
    </kendo-grid-column>

    <kendo-grid-column title="Actions" [width]="360">
      <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" themeColor="error" (click)="deleteMember(row)">Delete</button>
          <button *ngIf="!row.linkedUserId" kendoButton size="small" themeColor="info"
            (click)="openCreateUserDialog(row)">+ Account</button>
          <button *appHasPermission="['Users', 'write']" kendoButton size="small" themeColor="warning"
            (click)="openInviteDialog(row)">Invite</button>
          <button *appHasPermission="['Settings', 'write']" kendoButton size="small"
            (click)="openPushDialog(row)">Push</button>
        </div>
      </ng-template>
    </kendo-grid-column>

  </kendo-grid>
</div>

<!-- Member Form Dialog -->
<app-member-form-dialog
  *ngIf="showMemberDialog"
  [member]="editingMember"
  (saved)="onMemberSaved($event)"
  (cancelled)="closeMemberDialog()">
</app-member-form-dialog>

<!-- Create User Account Dialog -->
<app-create-user-dialog
  *ngIf="showCreateUserDialog && selectedMemberForUser"
  [member]="selectedMemberForUser"
  (created)="onUserCreated()"
  (cancelled)="closeCreateUserDialog()">
</app-create-user-dialog>

<!-- Invitation Link Dialog -->
<app-invitation-dialog
  *ngIf="showInviteDialog && selectedMemberForInvite"
  [member]="selectedMemberForInvite"
  (cancelled)="closeInviteDialog()">
</app-invitation-dialog>

<!-- Send Push Dialog (one-to-one test) -->
<app-send-push-dialog
  *ngIf="showPushDialog && selectedMemberForPush"
  [member]="selectedMemberForPush"
  (cancelled)="closePushDialog()">
</app-send-push-dialog>
