<div class="dashboard-layout">
  <aside class="sidebar">
    <div class="sidebar-header">
      <span class="logo-icon">📝</span>
      <h2>QuizMaster</h2><span class="role-badge">Admin</span>
    </div>
    <nav class="sidebar-nav">
      <a routerLink="/admin/dashboard" class="nav-item"><span class="nav-icon">🏠</span><span>Dashboard</span></a>
      <a routerLink="/admin/users" class="nav-item"><span class="nav-icon">👥</span><span>Users</span></a>
      <a routerLink="/admin/generate-quiz" class="nav-item active"><span class="nav-icon">➕</span><span>Generate
          Quiz</span></a>
    </nav>
    <div class="sidebar-footer">
      <div class="user-info">
        <div class="user-avatar">{{ authService.currentUser()?.name?.charAt(0) || 'A' }}</div>
        <div class="user-details"><span class="user-name">{{ authService.currentUser()?.name }}</span><span
            class="user-email">{{ authService.currentUser()?.email }}</span></div>
      </div>
      <button class="logout-btn" (click)="logout()"><span>🚪</span> Logout</button>
    </div>
  </aside>

  <main class="main-content">
    <div class="page-header">
      <h1>Generate Quiz</h1>
      <p>Create a new quiz by uploading questions from an Excel file</p>
    </div>

    @if (success()) {
    <div class="alert alert-success">✅ {{ success() }}</div>
    }
    @if (error()) {
    <div class="alert alert-error">⚠️ {{ error() }}</div>
    }

    <div class="create-section">
      <form (ngSubmit)="onSubmit()" class="quiz-form">
        <div class="form-row">
          <div class="form-group">
            <label for="title">Quiz Name</label>
            <input type="text" id="title" [(ngModel)]="title" name="title"
              placeholder="e.g., JavaScript Fundamentals" />
          </div>
          <div class="form-group">
            <label for="timer">Timer (minutes)</label>
            <input type="number" id="timer" [(ngModel)]="timer" name="timer" min="1" placeholder="30" />
          </div>
        </div>

        <div class="form-group">
          <label>Questions File (.xlsx)</label>
          <div class="file-upload" (click)="fileInput.click()">
            <input #fileInput type="file" accept=".xlsx,.xls" (change)="onFileSelected($event)" hidden />
            @if (fileName()) {
            <span class="file-icon">📄</span>
            <span class="file-name">{{ fileName() }}</span>
            <span class="file-change">Change</span>
            } @else {
            <span class="upload-icon">📤</span>
            <span class="upload-text">Click to upload Excel file</span>
            <span class="upload-hint">Format: Question | Option1 | Option2 | Option3 | Option4 | Correct</span>
            }
          </div>
        </div>

        <div class="form-group">
          <label>Assign Quiz To</label>
          <select class="form-select" [ngModel]="assignmentType()" (ngModelChange)="assignmentType.set($event)" name="assignmentType">
            <option value="all">All Candidates</option>
            <option value="users">Individual People</option>
            <option value="groups">Specific Groups</option>
          </select>
        </div>

        @if (assignmentType() === 'users') {
          <div class="form-group assignment-box">
            <label>Search Candidates</label>
            <input class="form-input" type="text" [ngModel]="userSearchQuery()" (ngModelChange)="userSearchQuery.set($event); onUserSearch()" name="userSearchQuery" placeholder="Search by name or email...">
            
            <div class="list-container mt-2">
              @for (user of filteredUsers; track user._id) {
                <div class="list-item" (click)="toggleUserSelection(user._id)">
                  <input type="checkbox" [checked]="selectedUsers().includes(user._id)" 
                         (change)="toggleUserSelection(user._id)">
                  <div class="item-details">
                    <span class="item-name">{{ user.name }}</span>
                    <span class="item-sub">{{ user.email }}</span>
                  </div>
                </div>
              }
              @if (filteredUsers.length === 0) {
                <div class="empty-state">No candidates found</div>
              }
            </div>
          </div>
        }

        @if (assignmentType() === 'groups') {
          <div class="form-group assignment-box">
            <label>Select Groups</label>
            <div class="list-container mt-2">
              @for (group of groups(); track group) {
                <div class="list-item" (click)="onGroupToggle(group, {target: {checked: !selectedGroups().includes(group)}})">
                  <input type="checkbox" [checked]="selectedGroups().includes(group)" 
                         (change)="onGroupToggle(group, $event)">
                  <div class="item-details">
                    <span class="item-name">{{ group }}</span>
                  </div>
                </div>
              }
              @if (groups().length === 0) {
                <div class="empty-state">No groups found</div>
              }
            </div>
          </div>
        }
        <button mat-raised-button color="primary" type="submit" class="btn btn-primary" [disabled]="loading()">
          @if (loading()) {
          <span class="spinner"></span> Creating Quiz...
          } @else {
          🚀 Create Quiz
          }
        </button>

      </form>
    </div>

    <!-- Existing Quizzes -->
    <h2 class="section-title">Existing Quizzes</h2>
    @if (loadingQuizzes()) {
    <div class="loading-state">
      <div class="loader"></div>
    </div>
    } @else if (quizzes().length === 0) {
    <div class="empty-state">
      <span class="empty-icon">📋</span>
      <h3>No quizzes yet</h3>
      <p>Create your first quiz above</p>
    </div>
    } @else {
    <div class="quiz-grid">
      @for (quiz of quizzes(); track quiz._id) {
      <div class="quiz-card">
        <div class="quiz-card-header">
          <h4>{{ quiz.title }}</h4>
          <button class="delete-btn" (click)="deleteQuiz(quiz._id)">🗑️</button>
        </div>
        <div class="quiz-meta">
          <span>⏱️ {{ quiz.timer }} min</span>
          <span>📝 {{ quiz.totalQuestions }} questions</span>
        </div>
        <span class="quiz-date">Created {{ quiz.createdAt | date:'mediumDate' }}</span>
      </div>
      }
    </div>
    }
  </main>
</div>