<div class="page-container animate-fade-in">

  <!-- ─── Page Header ─────────────────────────────── -->
  <div class="page-header">
    <div class="page-header-left">
      @if (selectedCategory()) {
        <button class="back-btn" (click)="clearCategory()">
          <span class="material-symbols-rounded">arrow_back</span>
        </button>
      }
      <div>
        <h1>
          @if (selectedCategory()) {
            {{ selectedCategory() }}
          } @else {
            Quizzes
          }
        </h1>
        <p class="page-subtitle">
          @if (selectedCategory()) {
            {{ filteredQuizzes().length }} quiz{{ filteredQuizzes().length !== 1 ? 'zes' : '' }} in this category
          } @else {
            {{ categories().length }} categor{{ categories().length !== 1 ? 'ies' : 'y' }} · {{ quizzes().length }} total quizzes
          }
        </p>
      </div>
    </div>
    <a routerLink="/hr/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="/hr/create-quiz" class="btn btn-primary" style="margin-top: 16px;">Create Quiz</a>
    </div>

  } @else if (!selectedCategory()) {
    <!-- ─── Category Grid View ──────────────────────── -->
    <div class="category-grid stagger-children">
      @for (group of categoryGroups(); track group.name; let i = $index) {
        <button class="category-card card card-hover" (click)="selectCategory(group.name)">
          <div class="cat-icon-wrap" [style.background]="getCategoryColor(i) + '18'" [style.border-color]="getCategoryColor(i) + '30'">
            <span class="material-symbols-rounded cat-icon" [style.color]="getCategoryColor(i)">{{ getCategoryIcon(group.name) }}</span>
          </div>
          <div class="cat-body">
            <h3 class="cat-name">{{ group.name }}</h3>
            <p class="cat-count">{{ group.count }} quiz{{ group.count !== 1 ? 'zes' : '' }}</p>
            <div class="cat-diffs">
              @for (diff of group.difficulties; track diff) {
                <span class="diff-chip badge" [ngClass]="getDifficultyClass(diff)">{{ getDifficultyLabel(diff) }}</span>
              }
            </div>
          </div>
          <div class="cat-arrow-wrap">
            <span class="material-symbols-rounded cat-arrow">chevron_right</span>
            @if (group.totalAttempts > 0) {
              <span class="cat-attempts-badge">{{ group.totalAttempts }} attempt{{ group.totalAttempts !== 1 ? 's' : '' }}</span>
            }
          </div>
        </button>
      }
    </div>

  } @else {
    <!-- ─── Quiz Drill-down View ────────────────────── -->
    <div class="quiz-grid stagger-children">
      @for (quiz of filteredQuizzes(); 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>
}
