<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>

    <!-- Topics of Interest Section -->
    <div class="section topics-section card card-padding">
      <div class="section-header">
        <h2 class="section-title">Topics of Interest</h2>
        @if (isSavingTopics()) {
          <span class="saving-indicator">Saving...</span>
        }
      </div>
      <p class="section-desc">Define your preferred topics to help admins assign relevant quizzes based on your comfort level.</p>
      
      <!-- Existing Topics Display -->
      <div class="existing-topics">
        @for (topic of topics(); track $index) {
          <div class="topic-tag">
            <div class="topic-tag-info">
              <span class="topic-tag-name">{{ topic.topic }}</span>
              <span class="topic-tag-level" 
                [class.high]="topic.comfortLevel >= 75" 
                [class.medium]="topic.comfortLevel >= 40 && topic.comfortLevel < 75" 
                [class.low]="topic.comfortLevel < 40">
                {{ topic.comfortLevel }}%
              </span>
            </div>
            <button class="topic-tag-remove" (click)="removeTopic($index)" title="Remove topic">
              <span class="material-symbols-rounded">close</span>
            </button>
          </div>
        }
        @if (topics().length === 0) {
          <p class="no-topics-msg">You haven't added any topics yet.</p>
        }
      </div>

      <!-- Add New Topic Form -->
      <div class="add-topic-form">
        <div class="topic-input-group">
          <label>Topic Name</label>
          <input type="text" [(ngModel)]="newTopicName" placeholder="e.g., Python, React..." class="input-field" (keyup.enter)="addTopic()" />
        </div>
        <div class="topic-slider-group">
          <div class="slider-header">
            <label>Comfort Level</label>
            <span class="comfort-value" 
              [class.high]="newTopicComfort() >= 75" 
              [class.medium]="newTopicComfort() >= 40 && newTopicComfort() < 75" 
              [class.low]="newTopicComfort() < 40">
              {{ newTopicComfort() }}%
            </span>
          </div>
          <input type="range" [(ngModel)]="newTopicComfort" min="0" max="100" class="slider-field" />
        </div>
        <button class="btn btn-primary btn-add" (click)="addTopic()" [disabled]="!newTopicName().trim() || isSavingTopics()">
          <span class="material-symbols-rounded">add</span> Add
        </button>
      </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>
