<div class="dashboard-layout">
  <aside class="sidebar">
    <div class="sidebar-header">
      <span class="logo-icon">📝</span><h2>QuizMaster</h2><span class="role-badge student">Student</span>
    </div>
    <nav class="sidebar-nav">
      <a routerLink="/student/dashboard" class="nav-item"><span class="nav-icon">🏠</span><span>Dashboard</span></a>
      <a routerLink="/student/profile" class="nav-item active"><span class="nav-icon">👤</span><span>Profile</span></a>
    </nav>
    <div class="sidebar-footer">
      <div class="user-info">
        <div class="user-avatar">{{ authService.currentUser()?.name?.charAt(0) || 'S' }}</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">
    @if (loading()) {
      <div class="loading-state"><div class="loader"></div><p>Loading results...</p></div>
    } @else {
      <div class="breadcrumb">
        <a routerLink="/student/profile">← Back to Profile</a>
      </div>

      <!-- Score Summary -->
      <div class="result-header">
        <h1>{{ quizInfo()?.title }}</h1>
        <div class="score-summary">
          <div class="score-card main-score" [class.good]="percentage() >= 70" [class.avg]="percentage() >= 40 && percentage() < 70" [class.poor]="percentage() < 40">
            <span class="big-score">{{ percentage() }}%</span>
            <span class="score-sub">{{ score() }}/{{ totalMarks() }} correct</span>
          </div>
          <div class="score-card">
            <span class="score-label">⏱️ Time Taken</span>
            <span class="score-val">{{ formatTime(timeTaken()) }}</span>
          </div>
          <div class="score-card">
            <span class="score-label">📅 Submitted</span>
            <span class="score-val small">{{ submittedAt() | date:'medium' }}</span>
          </div>
        </div>
      </div>

      <!-- Detailed Answers -->
      <h2 class="section-title">Question Review</h2>
      <div class="questions-list">
        @for (q of detailedResults(); track $index; let i = $index) {
          <div class="question-card" [class.correct]="q.isCorrect" [class.wrong]="!q.isCorrect">
            <div class="q-header">
              <span class="q-number">Q{{ i + 1 }}</span>
              <span class="q-type-badge">{{ q.type === 'mcq' ? 'MCQ' : 'Single' }}</span>
              <span class="q-status" [class.is-correct]="q.isCorrect">{{ q.isCorrect ? '✓ Correct' : '✗ Incorrect' }}</span>
            </div>
            <p class="q-text">{{ q.question }}</p>
            <div class="options-grid">
              @for (opt of q.options; track opt) {
                <div class="option"
                     [class.correct-opt]="q.correctAnswers.includes(opt)"
                     [class.student-opt]="q.studentAnswers.includes(opt)"
                     [class.wrong-opt]="q.studentAnswers.includes(opt) && !q.correctAnswers.includes(opt)">
                  <span class="opt-marker">
                    @if (q.correctAnswers.includes(opt) && q.studentAnswers.includes(opt)) { ✓ }
                    @else if (q.correctAnswers.includes(opt)) { ✓ }
                    @else if (q.studentAnswers.includes(opt)) { ✗ }
                  </span>
                  <span class="opt-text">{{ opt }}</span>
                  @if (q.correctAnswers.includes(opt)) {
                    <span class="opt-badge correct-badge">Correct Answer</span>
                  }
                  @if (q.studentAnswers.includes(opt) && !q.correctAnswers.includes(opt)) {
                    <span class="opt-badge wrong-badge">Your Answer</span>
                  }
                </div>
              }
            </div>
          </div>
        }
      </div>
    }
  </main>
</div>
