<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 profile...</p></div>
    } @else {
      <!-- Profile Header -->
      <div class="profile-header">
        <div class="profile-avatar">{{ user()?.name?.charAt(0) || 'S' }}</div>
        <div class="profile-info">
          <h1>{{ user()?.name }}</h1>
          <p class="profile-email">{{ user()?.email }}</p>
          <p class="profile-joined">Member since {{ user()?.createdAt | date:'mediumDate' }}</p>
        </div>
      </div>

      <!-- Stats Cards -->
      <div class="stats-grid">
        <div class="stat-card">
          <span class="stat-icon">📝</span>
          <span class="stat-value">{{ submissions().length }}</span>
          <span class="stat-label">Tests Taken</span>
        </div>
        <div class="stat-card">
          <span class="stat-icon">📊</span>
          <span class="stat-value">{{ avgScore }}%</span>
          <span class="stat-label">Average Score</span>
        </div>
        <div class="stat-card">
          <span class="stat-icon">🏆</span>
          <span class="stat-value">{{ bestScore }}%</span>
          <span class="stat-label">Best Score</span>
        </div>
      </div>

      <!-- Test Results -->
      <h2 class="section-title">Test Results</h2>
      @if (submissions().length === 0) {
        <div class="empty-state">
          <span class="empty-icon">📋</span>
          <h3>No tests taken yet</h3>
          <p>Complete a quiz to see your results here</p>
        </div>
      } @else {
        <div class="results-list">
          @for (sub of submissions(); track sub._id) {
            <div class="result-card">
              <div class="result-icon-wrap">
                <span class="result-icon">{{ sub.percentage >= 70 ? '🏆' : sub.percentage >= 40 ? '📋' : '📝' }}</span>
              </div>
              <div class="result-info">
                <h4>{{ sub.quizId?.title || 'Deleted Quiz' }}</h4>
                <p>{{ sub.submittedAt | date:'medium' }} · {{ formatTime(sub.timeTaken) }}</p>
              </div>
              <div class="result-score">
                <div class="score-circle" [class.good]="sub.percentage >= 70" [class.avg]="sub.percentage >= 40 && sub.percentage < 70" [class.poor]="sub.percentage < 40">
                  <span>{{ sub.percentage }}%</span>
                </div>
                <span class="score-detail">{{ sub.score }}/{{ sub.totalMarks }}</span>
              </div>
              <a [routerLink]="['/student/results', sub._id]" class="view-btn">View →</a>
            </div>
          }
        </div>
      }
    }
  </main>
</div>
