<div class="page-container animate-fade-in">
    <div class="page-header" style="display: flex; align-items: center; justify-content: space-between;">
      <div>
        <h1>Student Users</h1>
        <p class="page-subtitle">View and manage registered students</p>
      </div>
      <button class="btn btn-primary" (click)="openCreateModal()">
        <span class="material-symbols-rounded">person_add</span> Create Student
      </button>
    </div>

    <div class="filter-tabs">
      <button class="tab" [class.active]="showAll()" (click)="toggleFilter(true)">All Students</button>
      <button class="tab" [class.active]="!showAll()" (click)="toggleFilter(false)">Currently Online</button>
    </div>

    @if (loading()) {
      <div class="loading-state">
        <div class="loader"></div>
        <p>Loading users...</p>
      </div>
    } @else if (users().length === 0) {
      <div class="empty-state">
        <span class="empty-icon">👤</span>
        <h3>No students found</h3>
        <p>{{ showAll() ? 'No students have registered yet.' : 'No students are currently online.' }}</p>
      </div>
    } @else {
      <div class="users-grid">
        @for (user of users(); track user._id) {
          <a [routerLink]="['/hr/users', user._id, 'history']" class="user-card">
            <div class="user-card-avatar">{{ user.name?.charAt(0) || '?' }}</div>
            <div class="user-card-info">
              <div class="name-row">
                <h4>{{ user.name }}</h4>
                <span class="level-badge" [attr.data-level]="(user.level || 'beginner').toLowerCase()">
                  {{ getLevelLabel(user.level || 'beginner') }}
                </span>
              </div>
              <p>{{ user.email }}</p>
              <span class="user-joined">Joined {{ user.createdAt | date:'mediumDate' }}</span>
            </div>
            
            <div class="status-dot" [class.online]="user.isLoggedIn" title="Online Status"></div>
            
            <button class="action-btn text-primary ml-auto" style="margin-right: 8px;" (click)="$event.preventDefault(); $event.stopPropagation(); openEditModal(user)" title="Edit Student">
              <span class="material-symbols-rounded">edit</span>
            </button>
            <button class="action-btn text-danger" (click)="$event.preventDefault(); $event.stopPropagation(); deleteUser(user._id)" title="Delete Student">
              <span class="material-symbols-rounded">delete</span>
            </button>
            
            <span class="view-arrow">→</span>
          </a>
        }
      </div>
    }
</div>

<!-- ─── Create / Edit Student Modal ───────────────────────────── -->
@if (showUserModal()) {
  <div class="student-modal-overlay" (click)="closeModal()">
    <div class="student-modal-container" (click)="$event.stopPropagation()">
      <div class="student-modal-header">
        <h2>{{ isEditMode() ? 'Edit Student' : 'Create Student' }}</h2>
        <button class="student-modal-close" (click)="closeModal()">
          <span class="material-symbols-rounded">close</span>
        </button>
      </div>

      <div class="student-modal-body">
        <div class="form-group">
          <label class="form-label">Full Name *</label>
          <input class="form-input" [(ngModel)]="userForm.name" placeholder="Enter student's full name">
        </div>
        <div class="form-group">
          <label class="form-label">Email Address *</label>
          <input class="form-input" type="email" [(ngModel)]="userForm.email" placeholder="student@example.com">
        </div>
        <div class="form-group">
          <label class="form-label">Password {{ isEditMode() ? '(Optional)' : '*' }}</label>
          <input class="form-input" type="password" [(ngModel)]="userForm.password" [placeholder]="isEditMode() ? 'Leave blank to keep current password' : 'Enter initial password'">
          @if (isEditMode()) {
            <small class="form-hint">Change this only if the student forgot their password.</small>
          }
        </div>
      </div>

      <div class="student-modal-footer">
        <button class="btn btn-outline" (click)="closeModal()">Cancel</button>
        <button class="btn btn-primary" (click)="saveUser()" [disabled]="savingUser()">
          @if (savingUser()) {
            <div class="spinner spinner-sm"></div> Saving...
          } @else {
            <span class="material-symbols-rounded">save</span>
            {{ isEditMode() ? 'Save Changes' : 'Create Student' }}
          }
        </button>
      </div>
    </div>
  </div>
}
