<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 {
    <div class="card card-padding form-card">
      <div class="quiz-form">
        <div class="form-group">
          <label class="form-label">Quiz Title</label>
          <input class="form-input" [(ngModel)]="title" placeholder="Quiz title">
        </div>
        <div class="form-row">
          <div class="form-group">
            <label class="form-label">Timer (min)</label>
            <input class="form-input" type="number" [(ngModel)]="timer" min="1">
          </div>
          <div class="form-group">
            <label class="form-label">Difficulty</label>
            <select class="form-select" [(ngModel)]="difficulty">
              <option value="easy">Easy</option>
              <option value="medium">Medium</option>
              <option value="hard">Hard</option>
            </select>
          </div>
        </div>
        <div class="form-group">
          <label class="form-label">Category</label>
          <input class="form-input" [(ngModel)]="category" placeholder="e.g. Java, Angular, Data Structures">
        </div>
      </div>
    </div>

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

      @for (q of questions(); track $index; let i = $index) {
        <div class="card card-padding question-card">
          <div class="question-header">
            <span class="q-number">Q{{ i + 1 }}</span>
            <button class="btn btn-ghost btn-sm" (click)="removeQuestion(i)">
              <span class="material-symbols-rounded">delete</span>
            </button>
          </div>
          <div class="form-group">
            <input class="form-input" [ngModel]="q.question" (ngModelChange)="updateQuestion(i, 'question', $event)" placeholder="Question text">
          </div>
          <div class="options-grid">
            @for (opt of q.options; track $index; let j = $index) {
              <div class="option-input-wrap">
                <span class="option-letter">{{ ['A','B','C','D'][j] }}</span>
                <input class="form-input" [ngModel]="opt" (ngModelChange)="updateOption(i, j, $event)" placeholder="Option {{ j+1 }}">
              </div>
            }
          </div>
          <div class="form-row">
            <div class="form-group">
              <label class="form-label">Correct Answer</label>
              <input class="form-input" [ngModel]="q.correctAnswer" (ngModelChange)="updateQuestion(i, 'correctAnswer', $event)" placeholder="Correct answer text">
            </div>
            <div class="form-group" style="max-width: 120px;">
              <label class="form-label">Marks</label>
              <input class="form-input" type="number" [ngModel]="q.marks" (ngModelChange)="updateQuestion(i, 'marks', $event)" min="1">
            </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>
