<div class="page-container animate-fade-in">
  <div class="page-header">
    <div>
      <h1>Quizzes</h1>
      <p class="page-subtitle">Manage all quizzes in the system</p>
    </div>
    <a routerLink="/admin/create-quiz" class="btn btn-primary">
      <span class="material-symbols-rounded">add</span> Create Quiz
    </a>
  </div>

  @if (error()) {
    <div class="alert alert-error">
      <span class="material-symbols-rounded">error</span> {{ error() }}
    </div>
  }

  @if (loading()) {
    <div class="loading-center">
      <div class="spinner spinner-lg"></div>
      <p>Loading quizzes...</p>
    </div>
  } @else if (quizzes().length === 0) {
    <div class="empty-state">
      <span class="material-symbols-rounded">quiz</span>
      <h3>No quizzes yet</h3>
      <p>Create your first quiz to get started.</p>
      <a routerLink="/admin/create-quiz" class="btn btn-primary" style="margin-top: 16px;">Create Quiz</a>
    </div>
  } @else {
    <div class="quiz-grid stagger-children">
      @for (quiz of quizzes(); track quiz._id) {
        <div class="card card-hover quiz-card">
          <div class="quiz-card-header">
            <h3 class="quiz-title">{{ quiz.title }}</h3>
            <span class="badge" [ngClass]="getDifficultyClass(quiz.difficulty)">
              {{ quiz.difficulty || 'General' }}
            </span>
          </div>
          <div class="quiz-meta">
            <div class="meta-item">
              <span class="material-symbols-rounded">help</span>
              {{ quiz.totalQuestions }} questions
            </div>
            <div class="meta-item">
              <span class="material-symbols-rounded">timer</span>
              {{ quiz.timer }} min
            </div>
            <div class="meta-item">
              <span class="material-symbols-rounded">category</span>
              {{ quiz.category || 'Uncategorized' }}
            </div>
          </div>
          <div class="quiz-card-actions">
            <a [routerLink]="['/hr/quiz', quiz._id, 'assign']" class="btn btn-primary btn-sm">
              <span class="material-symbols-rounded">person_add</span> Assign
            </a>
            @if (quiz.attemptCount > 0) {
              <span class="attempted-badge">
                <span class="material-symbols-rounded">lock</span>
                {{ quiz.attemptCount }} attempt{{ quiz.attemptCount > 1 ? 's' : '' }}
              </span>
            } @else {
              <button class="btn btn-outline btn-sm" (click)="openEditPopup(quiz)">
                <span class="material-symbols-rounded">edit</span> Edit
              </button>
              <button class="btn btn-danger btn-sm" (click)="deleteQuiz(quiz._id)">
                <span class="material-symbols-rounded">delete</span> Delete
              </button>
            }
          </div>
        </div>
      }
    </div>
  }
</div>

<!-- Edit Quiz Modal -->
@if (showEditPopup()) {
  <div class="modal-overlay" (click)="closeEditPopup()">
    <div class="modal-container" (click)="$event.stopPropagation()">
      <div class="modal-header">
        <h2>Edit Quiz Details</h2>
        <button class="icon-btn" (click)="closeEditPopup()">
          <span class="material-symbols-rounded">close</span>
        </button>
      </div>
      
      <div class="modal-body quiz-form">
        <div class="form-group">
          <label class="form-label">Quiz Title</label>
          <input class="form-input" [(ngModel)]="editQuizForm.title" placeholder="Quiz title">
        </div>
        
        <div class="form-row">
          <div class="form-group">
            <label class="form-label">Timer (min)</label>
            <input class="form-input" type="number" [(ngModel)]="editQuizForm.timer" min="1">
          </div>
          <div class="form-group">
            <label class="form-label">Difficulty</label>
            <select class="form-select" [(ngModel)]="editQuizForm.difficulty">
              <option value="easy">Easy</option>
              <option value="medium">Medium</option>
              <option value="hard">Hard</option>
            </select>
          </div>
        </div>
        
        <div class="form-group">
          <label class="form-label">Category</label>
          <input class="form-input" [(ngModel)]="editQuizForm.category" placeholder="e.g. Java, Angular">
        </div>
      </div>
      
      <div class="modal-footer" style="display: flex; gap: 12px; margin-top: 24px; justify-content: flex-end;">
        <button class="btn btn-outline" (click)="editQuestions()">
          <span class="material-symbols-rounded">edit_square</span> Edit Questions
        </button>
        <button class="btn btn-primary" (click)="saveBasicChanges()" [disabled]="savingPopup()">
          @if (savingPopup()) {
            <div class="spinner"></div> Saving...
          } @else {
            <span class="material-symbols-rounded">save</span> Save Changes
          }
        </button>
      </div>
    </div>
  </div>
}
