<div class="page-container animate-fade-in">
  <div class="page-header">
    <a routerLink="/admin/quizzes" class="back-link">
      <span class="material-symbols-rounded">arrow_back</span> Back to Quizzes
    </a>
    <h1>Edit Quiz</h1>
  </div>

  @if (error()) {
    <div class="alert alert-error"><span class="material-symbols-rounded">error</span> {{ error() }}</div>
  }
  @if (success()) {
    <div class="alert alert-success"><span class="material-symbols-rounded">check_circle</span> {{ success() }}</div>
  }
  @if (locked()) {
    <div class="alert alert-warning"><span class="material-symbols-rounded">lock</span> This quiz has been attempted. Questions cannot be modified.</div>
  }

  @if (loading()) {
    <div class="loading-center"><div class="spinner spinner-lg"></div><p>Loading quiz...</p></div>
  } @else {

    @if (!locked()) {
      <div class="questions-header">
        <h2>Questions ({{ questions().length }})</h2>
        <button class="btn btn-outline btn-sm" (click)="addQuestion()">
          <span class="material-symbols-rounded">add</span> Add Question
        </button>
      </div>

      <div class="questions-list">
        @for (q of questions(); track $index; let i = $index) {
          <div class="question-card">
            <!-- Question Header -->
            <div class="q-header">
              <span class="q-number">Q{{ i + 1 }}</span>
              <span class="q-type-badge">{{ q.type === 'mcq' ? 'MCQ' : 'SINGLE' }}</span>
              <button class="delete-q-btn" (click)="removeQuestion(i)" title="Delete question">
                <span class="material-symbols-rounded">delete</span>
              </button>
            </div>

            <!-- Question Text (editable) -->
            <div class="q-text-wrap">
              <input class="q-text-input"
                     [ngModel]="q.question"
                     (ngModelChange)="updateQuestion(i, 'question', $event)"
                     placeholder="Enter question text...">
            </div>

            <!-- Options Grid -->
            <div class="options-grid">
              @for (opt of q.options; track $index; let j = $index) {
                <div class="option"
                     [class.correct-answer]="q.correctAnswer && opt && q.correctAnswer === opt && opt !== ''"
                     (click)="opt ? setCorrectAnswer(i, opt) : null">
                  <div class="option-inner">
                    <span class="option-marker">
                      @if (q.correctAnswer && opt && q.correctAnswer === opt && opt !== '') {
                        ✓
                      }
                    </span>
                    <input class="option-input"
                           [ngModel]="opt"
                           (ngModelChange)="updateOption(i, j, $event)"
                           placeholder="Option {{ ['A','B','C','D'][j] }}"
                           (click)="$event.stopPropagation()">
                  </div>
                </div>
              }
            </div>

            <!-- Correct Answer Selector -->
            <div class="correct-answer-row">
              <span class="material-symbols-rounded correct-icon">check_circle</span>
              <label class="correct-label">Correct Answer:</label>
              <select class="correct-select"
                      [ngModel]="q.correctAnswer"
                      (ngModelChange)="setCorrectAnswer(i, $event)">
                <option value="">-- Select --</option>
                @for (opt of q.options; track $index; let j = $index) {
                  @if (opt) {
                    <option [value]="opt">{{ ['A','B','C','D'][j] }}. {{ opt }}</option>
                  }
                }
              </select>
            </div>
          </div>
        }
      </div>
    }

    <button class="btn btn-primary btn-lg save-btn" (click)="onSave()" [disabled]="saving()">
      @if (saving()) {
        <div class="spinner"></div> Saving...
      } @else {
        <span class="material-symbols-rounded">save</span> Save Changes
      }
    </button>
  }
</div>
