<div class="quiz-container">
  @if (loading()) {
    <div class="loading-state">
      <div class="loader"></div>
      <p>Loading quiz...</p>
    </div>
  } @else if (error() && !quiz()) {
    <div class="error-state">
      <span class="error-icon">⚠️</span>
      <h2>{{ error() }}</h2>
      <a routerLink="/student/dashboard" class="back-btn">← Back to Dashboard</a>
    </div>
  } @else if (submitted()) {
    <div class="success-state">
      <div class="success-animation">
        <span class="success-icon">🎉</span>
      </div>
      <h2>Quiz Submitted Successfully!</h2>
      <p>Redirecting to dashboard...</p>
    </div>
  } @else {
    <!-- Quiz Header -->
    <div class="quiz-header">
      <div class="quiz-title">
        <h1>{{ quiz()?.title }}</h1>
        <span class="q-counter">Question {{ currentIndex() + 1 }} of {{ questions().length }}</span>
      </div>
      @if (error()) {
        <div class="inline-error" style="background:#ef444420; color:#ef4444; padding:0.5rem 1rem; border-radius:0.5rem; border:1px solid #ef444450; display:flex; align-items:center; gap:0.5rem; margin-top:0.5rem; font-weight:500;">
          ⚠️ {{ error() }}
        </div>
      }
      <div class="timer" [class.warning]="timeLeft() < 60" [class.danger]="timeLeft() < 30">
        <span class="timer-icon">⏱️</span>
        <span class="timer-value">{{ formattedTime() }}</span>
      </div>
    </div>

    <!-- Progress Bar -->
    <div class="progress-bar-wrap">
      <div class="progress-bar" [style.width.%]="progress()"></div>
    </div>

    <!-- Question Area -->
    @if (currentQuestion()) {
      <div class="question-area">
        <div class="question-header">
          <span class="q-badge">Q{{ currentIndex() + 1 }}</span>
          <span class="q-type">{{ currentQuestion().type === 'mcq' ? 'Multiple Correct' : 'Single Answer' }}</span>
        </div>
        <h2 class="question-text">{{ currentQuestion().question }}</h2>

        <div class="options-list">
          @for (opt of currentQuestion().options; track opt; let i = $index) {
            <button class="option-btn"
                    [class.selected]="isSelected(currentQuestion()._id, opt)"
                    (click)="selectOption(currentQuestion()._id, opt, currentQuestion().type)">
              <span class="option-letter">{{ ['A', 'B', 'C', 'D'][i] }}</span>
              <span class="option-text">{{ opt }}</span>
              @if (isSelected(currentQuestion()._id, opt)) {
                <span class="check-mark">✓</span>
              }
            </button>
          }
        </div>
      </div>
    }

    <!-- Navigation -->
    <div class="quiz-nav">
      <button class="nav-btn" (click)="prev()" [disabled]="currentIndex() === 0">
        ← Previous
      </button>
      
      <div class="question-dots">
        @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>

      @if (currentIndex() === questions().length - 1) {
        <button class="nav-btn submit-btn" (click)="submitQuiz()" [disabled]="submitting()">
          @if (submitting()) {
            <span class="spinner"></span> Submitting...
          } @else {
            Submit Quiz ✓
          }
        </button>
      } @else {
        <button class="nav-btn next-btn" (click)="next()">
          Next →
        </button>
      }
    </div>
  }
</div>
