<!-- Take Quiz -->
<div class="quiz-page" #quizContainer>

  <!-- ── Loading ─────────────────────────────── -->
  @if (loading()) {
    <div class="loading-center">
      <div class="spinner spinner-lg"></div>
      <p class="loading-text">Loading quiz...</p>
    </div>

  <!-- ── Error (pre-load) ─────────────────────── -->
  } @else if (error() && !quiz()) {
    <div class="error-state">
      <span class="material-symbols-rounded" style="font-size:48px;color:var(--danger)">error</span>
      <h2>{{ error() }}</h2>
      <a routerLink="/candidate/dashboard" class="btn btn-outline">Back to Dashboard</a>
    </div>

  <!-- ── Success (submitted) ─────────────────── -->
  } @else if (submitted()) {
    <div class="success-state animate-scale-in">
      <span class="material-symbols-rounded" style="font-size:64px;color:var(--success)">check_circle</span>
      <h2>Quiz Submitted!</h2>
      <p>Redirecting to dashboard...</p>
    </div>

  <!-- ── Active Quiz ────────────────────────── -->
  } @else if (quiz() && currentQuestion()) {

    <!-- Quiz Header -->
    <div class="quiz-header">
      <div class="quiz-title-area">
        <h1>{{ quiz().title }}</h1>
        <span class="q-counter">Question {{ currentIndex() + 1 }} of {{ questions().length }}</span>
      </div>

      <div class="header-right-cluster">
        <!-- Violation badge (shows only when there's at least 1 violation) -->
        @if (violationCount() > 0) {
          <div class="violation-badge" [class.critical]="violationCount() >= getMaxViolations() - 1"
               title="Violations detected. {{ getMaxViolations() - violationCount() }} warning(s) remaining.">
            <span class="material-symbols-rounded">warning</span>
            <span>{{ violationCount() }}/{{ getMaxViolations() }}</span>
          </div>
        }

        <!-- Fullscreen indicator -->
        <div class="fullscreen-indicator" [class.active]="isFullscreen()" title="{{ isFullscreen() ? 'Fullscreen active' : 'Not in fullscreen' }}">
          <span class="material-symbols-rounded">{{ isFullscreen() ? 'fullscreen' : 'fullscreen_exit' }}</span>
        </div>

        <!-- Timer -->
        <div class="timer" [class.warning]="timeLeft() < 300 && timeLeft() >= 60" [class.danger]="timeLeft() < 60">
          <span class="material-symbols-rounded">timer</span>
          <span class="timer-value">{{ formattedTime() }}</span>
        </div>
      </div>
    </div>

    <!-- Progress -->
    <div class="progress-track"><div class="progress-fill" [style.width.%]="progress()"></div></div>

    @if (error()) {
      <div class="alert alert-error" style="margin-bottom:16px">
        <span class="material-symbols-rounded">error</span>{{ error() }}
      </div>
    }

    <!-- Question Card -->
    <div class="question-card card card-padding animate-fade-in">
      <div class="q-header">
        <span class="q-badge">Q{{ currentIndex() + 1 }}</span>
        <span class="q-type badge badge-primary">{{ currentQuestion().type === 'mcq' ? 'Multiple Correct' : 'Single Correct' }}</span>
      </div>
      <p class="q-text">{{ currentQuestion().question }}</p>
      <div class="options-list">
        @for (option of currentQuestion().options; track option; let i = $index) {
          <button class="option-btn"
                  [class.selected]="isSelected(currentQuestion()._id, option)"
                  (click)="selectOption(currentQuestion()._id, option, currentQuestion().type)">
            <span class="option-letter">{{ 'ABCD'[i] }}</span>
            <span class="option-text">{{ option }}</span>
            @if (isSelected(currentQuestion()._id, option)) {
              <span class="material-symbols-rounded check-icon">check_circle</span>
            }
          </button>
        }
      </div>
    </div>

    <!-- Navigation -->
    <div class="quiz-nav">
      <button class="btn btn-outline" (click)="prev()" [disabled]="currentIndex() === 0">
        <span class="material-symbols-rounded">arrow_back</span> Previous
      </button>

      <div class="dots-wrapper">
        <button class="dots-scroll-btn" (click)="scrollDots(-1)" [disabled]="!canScrollLeft()" aria-label="Scroll left">
          <span class="material-symbols-rounded">chevron_left</span>
        </button>
        <div class="question-dots" #dotsContainer (scroll)="updateScrollButtons()">
          @for (q of questions(); track q._id; let i = $index) {
            <button class="dot" [class.active]="i === currentIndex()" [class.answered]="isAnswered(i)" (click)="goTo(i)">{{ i + 1 }}</button>
          }
        </div>
        <button class="dots-scroll-btn" (click)="scrollDots(1)" [disabled]="!canScrollRight()" aria-label="Scroll right">
          <span class="material-symbols-rounded">chevron_right</span>
        </button>
      </div>

      @if (currentIndex() < questions().length - 1) {
        <button class="btn btn-primary" (click)="next()">Next <span class="material-symbols-rounded">arrow_forward</span></button>
      } @else {
        <button class="btn btn-primary" style="background:var(--success)" (click)="submitQuiz()" [disabled]="submitting()">
          @if (submitting()) { <div class="spinner"></div> } @else { Submit }
        </button>
      }
    </div>
  }
</div>

<!-- ══════════════════════════════════════════════════════════
     Anti-Cheat Warning Modal (rendered at page root level)
     ══════════════════════════════════════════════════════════ -->
@if (showWarningModal() && currentWarning()) {
  <div class="ac-overlay" (click)="!currentWarning()!.isAutoSubmit && dismissWarning()">
    <div class="ac-modal animate-scale-in" (click)="$event.stopPropagation()">

      <!-- Icon -->
      <div class="ac-icon-wrap" [class.danger]="currentWarning()!.isAutoSubmit">
        <span class="material-symbols-rounded filled ac-icon">
          {{ currentWarning()!.isAutoSubmit ? 'block' : 'warning' }}
        </span>
      </div>

      <!-- Content -->
      <h2 class="ac-title">{{ currentWarning()!.title }}</h2>
      <p class="ac-message">{{ currentWarning()!.message }}</p>

      <!-- Violation progress dots -->
      @if (!currentWarning()!.isAutoSubmit) {
        <div class="ac-violation-dots">
          @for (i of [1,2,3]; track i) {
            <div class="ac-dot" [class.filled]="i <= currentWarning()!.violationCount"></div>
          }
        </div>
        <p class="ac-dot-label">{{ currentWarning()!.violationCount }}/{{ getMaxViolations() }} violations</p>
      }

      <!-- Actions -->
      @if (!currentWarning()!.isAutoSubmit) {
        <button class="btn btn-primary ac-dismiss-btn" (click)="dismissWarning()">
          <span class="material-symbols-rounded">fullscreen</span>
          Return to Fullscreen
        </button>
        <p class="ac-note">⚠️ Exiting fullscreen or switching tabs again will count as another violation.</p>
      } @else {
        <div class="ac-submitting">
          <div class="spinner spinner-lg"></div>
          <p>Submitting your quiz...</p>
        </div>
      }
    </div>
  </div>
}
