<div class="page animate-fade-in">
  @if (loading()) {
    <div class="loading-center"><div class="spinner spinner-lg"></div><p class="loading-text">Loading profile...</p></div>
  } @else if (user()) {
    <div class="profile-header card card-padding">
      <div class="profile-avatar">{{ user().name?.charAt(0)?.toUpperCase() }}</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>

    <div class="stats-row">
      <div class="stat-card card card-padding">
        <span class="material-symbols-rounded stat-icon blue">assignment</span>
        <span class="stat-value">{{ testsTaken }}</span>
        <span class="stat-label">Tests Taken</span>
      </div>
      <div class="stat-card card card-padding">
        <span class="material-symbols-rounded stat-icon green">trending_up</span>
        <span class="stat-value">{{ avgScore }}%</span>
        <span class="stat-label">Average Score</span>
      </div>
      <div class="stat-card card card-padding">
        <span class="material-symbols-rounded stat-icon orange">emoji_events</span>
        <span class="stat-value">{{ bestScore }}%</span>
        <span class="stat-label">Best Score</span>
      </div>
    </div>

    <div class="section">
      <h2 class="section-title">Test Results</h2>
      @if (submissions().length === 0) {
        <div class="empty-state">
          <span class="material-symbols-rounded">assignment</span>
          <h3>No results yet</h3>
          <p>Take a quiz to see results here</p>
        </div>
      } @else {
        <div class="results-list">
          @for (sub of submissions(); track sub._id) {
            <div class="result-item card card-padding">
              <div class="result-icon-wrap">
                <span class="material-symbols-rounded">quiz</span>
              </div>
              <div class="result-info">
                <h4>{{ sub.quizId?.title }}</h4>
                <p>{{ sub.submittedAt | date:'medium' }} · {{ sub.timeTaken ? (sub.timeTaken + 's') : '—' }}</p>
              </div>
              <div class="result-score-wrap">
                <span class="score-circle" [ngClass]="{
                  'good': sub.percentage >= 70,
                  'avg': sub.percentage >= 40 && sub.percentage < 70,
                  'poor': sub.percentage < 40
                }">{{ sub.percentage }}%</span>
                <span class="score-detail">{{ sub.score }}/{{ sub.totalMarks }}</span>
              </div>
              <a [routerLink]="['/candidate/results', sub._id]" class="btn btn-outline btn-sm">View</a>
            </div>
          }
        </div>
      }
    </div>
  }
</div>
