<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-header-main">
        <div class="profile-avatar">{{ user().name?.charAt(0)?.toUpperCase() }}</div>
        <div class="profile-info">
          <h1>{{ user().name }}</h1>
          <p class="profile-email">
            <span class="material-symbols-rounded">mail</span>
            {{ user().email }}
          </p>
          @if (user().phoneNumber) {
            <p class="profile-phone">
              <span class="material-symbols-rounded">call</span>
              {{ user().phoneNumber }}
            </p>
          }
          <p class="profile-joined">Member since {{ user().createdAt | date:'mediumDate' }}</p>
          
          <!-- Resume Display -->
          @if (user().resume) {
            <div class="resume-display">
              <a [href]="getResumeUrl()" target="_blank" class="resume-link">
                <span class="material-symbols-rounded">description</span>
                View Resume
              </a>
              <button class="btn btn-ghost btn-icon-only remove-resume-btn" (click)="deleteResume()" title="Remove Resume">
                <span class="material-symbols-rounded">delete</span>
              </button>
            </div>
          } @else {
            <p class="no-resume-text">No resume uploaded</p>
          }
        </div>
      </div>
      <div class="profile-actions">
        <button class="btn btn-primary" (click)="openEditProfile()">
          <span class="material-symbols-rounded">edit</span>
          Update Profile
        </button>
      </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 History</h2>
      @if (submissions().length === 0) {
        <div class="empty-state">
          <span class="material-symbols-rounded">assignment</span>
          <h3>No test history yet</h3>
          <p>Take a quiz to see your test history 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-status-wrap">
                <span class="status-badge">Submitted</span>
              </div>
            </div>
          }
        </div>
      }
    </div>
  }
</div>

<!-- Edit Profile Modal -->
@if (isEditingProfile()) {
  <div class="modal-overlay" (click)="closeEditProfile()">
    <div class="modal-container" (click)="$event.stopPropagation()">
      <div class="modal-header">
        <h2>Update Profile</h2>
        <button class="icon-btn" (click)="closeEditProfile()">
          <span class="material-symbols-rounded">close</span>
        </button>
      </div>
      <div class="modal-body">
        <div class="form-group">
          <label class="form-label">Name</label>
          <input class="form-input" [(ngModel)]="editName" placeholder="Enter full name">
        </div>
        <div class="form-group">
          <label class="form-label">Email</label>
          <input class="form-input" [(ngModel)]="editEmail" placeholder="Enter email address" type="email">
        </div>
        <div class="form-group">
          <label class="form-label">Phone Number</label>
          <input class="form-input" [(ngModel)]="editPhone" placeholder="Enter phone number" type="tel">
        </div>
        <div class="form-group">
          <label class="form-label">Upload New Resume (PDF, DOC)</label>
          <div class="file-upload-wrap">
            <input type="file" (change)="onFileSelected($event)" accept=".pdf,.doc,.docx" class="form-input file-input">
          </div>
          @if (user()?.resume) {
            <small class="form-hint">Uploading a new resume will replace your existing one.</small>
          }
        </div>
      </div>
      <div class="modal-footer">
        <button class="btn btn-outline" (click)="closeEditProfile()">Cancel</button>
        <button class="btn btn-primary" (click)="saveProfile()" [disabled]="isSavingProfile()">
          @if (isSavingProfile()) {
            <span class="spinner spinner-sm"></span> Saving...
          } @else {
            Save Changes
          }
        </button>
      </div>
    </div>
  </div>
}
