<script>
  export let question = { prompt: '', explanation: '', answers: [''], correct_answer_indices: [0] };
  export let index = 0;
  export let onRemove = () => {};

  function addAnswer() {
    if (!question.answers) question.answers = [''];
    question.answers = [...question.answers, ''];
    if (!question.correct_answer_indices?.length) question.correct_answer_indices = [0];
  }

  function removeAnswer(i) {
    const answers = [...(question.answers || [])];
    let indices = (question.correct_answer_indices ?? [0]).filter((idx) => idx !== i).map((idx) => (idx > i ? idx - 1 : idx));
    answers.splice(i, 1);
    if (indices.length === 0) indices = [0];
    question.answers = answers;
    question.correct_answer_indices = indices;
  }

  function setAnswer(i, value) {
    const answers = [...(question.answers || [])];
    answers[i] = value;
    question.answers = answers;
  }

  function toggleCorrect(i) {
    const indices = [...(question.correct_answer_indices ?? [0])];
    const pos = indices.indexOf(i);
    if (pos >= 0) {
      indices.splice(pos, 1);
    } else {
      indices.push(i);
      indices.sort((a, b) => a - b);
    }
    question.correct_answer_indices = indices.length ? indices : [0];
  }
</script>

<div class="question-editor">
  <div class="q-row">
    <span class="q-label">Question {index + 1}</span>
    <button type="button" class="btn-remove" onclick={onRemove} title="Remove question">×</button>
  </div>
  <input
    type="text"
    class="input"
    placeholder="Prompt"
    bind:value={question.prompt}
  />
  <textarea
    class="input textarea"
    placeholder="Explanation (optional)"
    bind:value={question.explanation}
    rows="2"
  ></textarea>
  <div class="answers-section">
    <span class="answers-label">Answers (check correct)</span>
    {#each (question.answers || ['']) as answer, i}
      <div class="answer-row">
        <input
          type="checkbox"
          checked={(question.correct_answer_indices ?? [0]).includes(i)}
          onchange={() => toggleCorrect(i)}
          class="correct-check"
        />
        <input
          type="text"
          class="input answer-input"
          placeholder="Answer {i + 1}"
          value={answer}
          oninput={(e) => setAnswer(i, e.target.value)}
        />
        {#if (question.answers || []).length > 1}
          <button type="button" class="btn-remove" onclick={() => removeAnswer(i)} title="Remove answer">×</button>
        {/if}
      </div>
    {/each}
    <button type="button" class="btn-add" onclick={addAnswer}>+ Add answer</button>
  </div>
</div>

<style>
  .question-editor {
    padding: 1rem;
    background: var(--bg-muted, #252525);
    border: 1px solid var(--border, #333);
    border-radius: 8px;
    margin-bottom: 1rem;
  }

  .q-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.5rem;
  }

  .q-label {
    font-size: 0.9rem;
    font-weight: 500;
    color: var(--text-muted, #a0a0a0);
  }

  .btn-remove {
    width: 1.5rem;
    height: 1.5rem;
    padding: 0;
    font-size: 1.2rem;
    line-height: 1;
    border: none;
    border-radius: 4px;
    background: transparent;
    color: var(--text-muted, #a0a0a0);
    cursor: pointer;
  }

  .btn-remove:hover {
    color: #ef4444;
    background: rgba(239, 68, 68, 0.1);
  }

  .input {
    width: 100%;
    padding: 0.5rem 0.75rem;
    font-size: 0.95rem;
    border: 1px solid var(--border, #333);
    border-radius: 6px;
    background: var(--card-bg, #1e1e1e);
    color: var(--text-primary, #f0f0f0);
    margin-bottom: 0.5rem;
  }

  .textarea {
    resize: vertical;
    min-height: 2.5rem;
  }

  .answers-section {
    margin-top: 0.75rem;
  }

  .answers-label {
    font-size: 0.85rem;
    color: var(--text-muted, #a0a0a0);
    display: block;
    margin-bottom: 0.5rem;
  }

  .answer-row {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.5rem;
  }

  .correct-check {
    flex-shrink: 0;
  }

  .answer-input {
    flex: 1;
    margin-bottom: 0;
  }

  .btn-add {
    padding: 0.35rem 0.75rem;
    font-size: 0.85rem;
    border: 1px dashed var(--border, #333);
    border-radius: 6px;
    background: transparent;
    color: var(--text-muted, #a0a0a0);
    cursor: pointer;
  }

  .btn-add:hover {
    color: var(--text-primary, #f0f0f0);
    border-color: var(--border-hover, #444);
  }
</style>
