<!-- Header -->
<div class="p-4 border-b border-border">
  <h3 class="font-semibold text-foreground">{{ 'chat.userList.members' | translate }}</h3>
  <p class="text-xs text-muted-foreground">
    {{ 'chat.userList.onlineInVoice' | translate: { online: onlineUsers().length, inVoice: voiceUsers().length } }}
  </p>
  @if (voiceUsers().length > 0) {
    <div class="mt-2 flex flex-wrap gap-2">
      @for (v of voiceUsers(); track v.id) {
        <span class="px-2 py-1 text-xs rounded bg-secondary text-foreground flex items-center gap-1">
          <span class="inline-block w-1.5 h-1.5 rounded-full bg-green-500"></span>
          {{ v.displayName }}
        </span>
      }
    </div>
  }
</div>

<!-- User List -->
<div class="flex-1 overflow-y-auto p-2 space-y-1">
  @for (user of onlineUsers(); track user.id) {
    <div
      class="group relative flex items-center gap-3 p-2 rounded-lg hover:bg-secondary/50 transition-colors cursor-pointer"
      [attr.data-testid]="'user-card-' + (user.oderId || user.id)"
      (click)="openDirectMessage(user)"
      (keydown.enter)="openDirectMessage(user)"
      (keydown.space)="openDirectMessage(user)"
      role="button"
      tabindex="0"
    >
      <!-- Avatar with status indicator -->
      <div class="relative">
        <app-user-avatar
          [name]="user.displayName"
          [status]="user.status"
          [showStatusBadge]="true"
          size="sm"
        />
      </div>

      <!-- User Info -->
      <div class="flex-1 min-w-0">
        <div class="flex items-center gap-1">
          <span class="font-medium text-sm text-foreground truncate">
            {{ user.displayName }}
          </span>
          @if (user.isAdmin) {
            <ng-icon
              name="lucideShield"
              class="w-3 h-3 text-primary"
            />
          }
          @if (user.isRoomOwner) {
            <ng-icon
              name="lucideCrown"
              class="w-3 h-3 text-yellow-500"
            />
          }
        </div>
        @if (user.status && user.status !== 'online') {
          <span
            class="text-xs"
            [class.text-yellow-500]="user.status === 'away'"
            [class.text-red-500]="user.status === 'busy'"
            [class.text-muted-foreground]="user.status === 'offline'"
          >
            {{ statusLabel(user.status) | translate }}
          </span>
        }
      </div>

      <!-- Voice/Screen Status -->
      <div class="flex items-center gap-1">
        <button
          type="button"
          class="grid h-7 w-7 place-items-center rounded-md text-muted-foreground transition-colors hover:bg-card hover:text-foreground"
          [class.hidden]="isCurrentUser(user)"
          [title]="'chat.userList.message' | translate"
          (click)="$event.stopPropagation(); openDirectMessage(user)"
        >
          <ng-icon
            name="lucideMessageCircle"
            class="w-4 h-4"
          />
        </button>

        @if (user.voiceState?.isSpeaking) {
          <ng-icon
            name="lucideMic"
            class="w-4 h-4 text-green-500 animate-pulse"
          />
        } @else if (user.voiceState?.isMuted) {
          <ng-icon
            name="lucideMicOff"
            class="w-4 h-4 text-muted-foreground"
          />
        } @else if (user.voiceState?.isConnected) {
          <ng-icon
            name="lucideMic"
            class="w-4 h-4 text-muted-foreground"
          />
        }

        @if (user.screenShareState?.isSharing) {
          <ng-icon
            name="lucideMonitor"
            class="w-4 h-4 text-primary"
          />
        }
      </div>

      <!-- User Menu -->
      @if (showUserMenu() === user.id && isAdmin() && !isCurrentUser(user)) {
        <div
          class="absolute right-0 top-full mt-1 z-10 w-48 bg-card border border-border rounded-lg shadow-lg py-1"
          (click)="$event.stopPropagation()"
          (keydown)="$event.stopPropagation()"
          role="menu"
          tabindex="0"
        >
          @if (user.voiceState?.isConnected) {
            <button
              type="button"
              (click)="muteUser(user)"
              class="w-full px-4 py-2 text-left text-sm hover:bg-secondary flex items-center gap-2"
            >
              @if (user.voiceState?.isMutedByAdmin) {
                <ng-icon
                  name="lucideVolume2"
                  class="w-4 h-4"
                />
                <span>{{ 'chat.userList.unmute' | translate }}</span>
              } @else {
                <ng-icon
                  name="lucideVolumeX"
                  class="w-4 h-4"
                />
                <span>{{ 'chat.userList.mute' | translate }}</span>
              }
            </button>
          }
          <button
            type="button"
            (click)="kickUser(user)"
            class="w-full px-4 py-2 text-left text-sm hover:bg-secondary flex items-center gap-2 text-yellow-500"
          >
            <ng-icon
              name="lucideUserX"
              class="w-4 h-4"
            />
            <span>{{ 'chat.userList.kick' | translate }}</span>
          </button>
          <button
            type="button"
            (click)="banUser(user)"
            class="w-full px-4 py-2 text-left text-sm hover:bg-destructive/10 flex items-center gap-2 text-destructive"
          >
            <ng-icon
              name="lucideBan"
              class="w-4 h-4"
            />
            <span>{{ 'chat.userList.ban' | translate }}</span>
          </button>
        </div>
      }
    </div>
  }

  @if (onlineUsers().length === 0) {
    <div class="text-center py-8 text-muted-foreground text-sm">{{ 'chat.userList.noUsersOnline' | translate }}</div>
  }
</div>

<!-- Ban Dialog -->
@if (showBanDialog()) {
  <app-confirm-dialog
    [title]="'chat.userList.banUserTitle' | translate"
    [confirmLabel]="'chat.userList.banUserConfirm' | translate"
    variant="danger"
    [widthClass]="'w-96 max-w-[90vw]'"
    (confirmed)="confirmBan()"
    (cancelled)="closeBanDialog()"
  >
    <p class="mb-4">
      {{ 'chat.userList.banConfirmMessage' | translate: { name: userToBan()?.displayName } }}
    </p>

    <div class="mb-4">
      <label
        for="ban-reason-input"
        class="block text-sm font-medium text-foreground mb-1"
        >{{ 'chat.userList.banReasonLabel' | translate }}</label
      >
      <input
        type="text"
        [(ngModel)]="banReason"
        [placeholder]="'chat.userList.banReasonPlaceholder' | translate"
        id="ban-reason-input"
        class="w-full px-3 py-2 bg-secondary rounded border border-border text-foreground placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-primary"
      />
    </div>

    <div>
      <label
        for="ban-duration-select"
        class="block text-sm font-medium text-foreground mb-1"
        >{{ 'chat.userList.banDurationLabel' | translate }}</label
      >
      <select
        [(ngModel)]="banDuration"
        id="ban-duration-select"
        class="w-full px-3 py-2 bg-secondary rounded border border-border text-foreground focus:outline-none focus:ring-2 focus:ring-primary"
      >
        <option value="3600000">{{ 'chat.userList.banDuration1Hour' | translate }}</option>
        <option value="86400000">{{ 'chat.userList.banDuration1Day' | translate }}</option>
        <option value="604800000">{{ 'chat.userList.banDuration1Week' | translate }}</option>
        <option value="2592000000">{{ 'chat.userList.banDuration30Days' | translate }}</option>
        <option value="0">{{ 'chat.userList.banDurationPermanent' | translate }}</option>
      </select>
    </div>
  </app-confirm-dialog>
}
