/**
 * Quiz Engine - Renderiza questões na página
 */

function _renderQuestion(q) {
  if (!q) return;
  const body = document.getElementById('quiz-body');
  if (!body) return;

  const counter = document.getElementById('q-counter');
  if (counter) {
    counter.textContent = `${_qState.qIndex + 1} de ${_qState.questions.length}`;
  }

  const prog = document.getElementById('prog');
  if (prog) {
    const pct = ((_qState.qIndex + 1) / _qState.questions.length) * 100;
    prog.style.width = pct + '%';
  }

  if (q.type === 'mc') {
    body.innerHTML = `<div class="mc-area fade">
      <p class="q-text">${md(q.text)}</p>
      <div class="options">
        ${q.options
          .map(
            (o, i) => `<button class="opt" data-opt="${esc(o)}" data-answer="${esc(q.answer)}" onclick="selectOpt(this)" aria-label="Opção ${LETRAS[i]}: ${o}">
            <span class="opt-letter">${LETRAS[i]}</span>
            <span>${md(o)}</span>
          </button>`
          )
          .join('')}
      </div>
      <div class="feedback-line" id="feedback" aria-live="polite" aria-atomic="true"><span class="feedback-dot"></span><span id="feedback-msg"></span></div>
      ${q.comment ? `<div class="comment-block" id="comment"><div class="comment-label">comentário</div><div>${md(q.comment)}</div></div>` : ''}
    </div>`;
  } else {
    // Modo Flashcard para questões abertas
    const isRevealed = _qState.flipped || false;
    body.innerHTML = `<div class="flashcard-area fade">
      <p class="q-text">${md(q.text)}</p>
      <div class="flashcard-simple" id="flashcard">
        ${!isRevealed ? `<button class="btn btn-reveal" onclick="flipFlashcard()">Revelar Resposta</button>` : `<div class="ref-label">resposta de referência</div><div class="ref-content">${md(q.reference)}</div>`}
      </div>
      <div class="feedback-line" id="feedback" aria-live="polite" aria-atomic="true"><span class="feedback-dot"></span><span id="feedback-msg"></span></div>
      ${q.comment ? `<div class="comment-block" id="comment"><div class="comment-label">comentário</div><div>${md(q.comment)}</div></div>` : ''}
      <div class="flashcard-btns" id="flashcard-btns">
        <button class="btn btn-ok" onclick="markFlashcardOk()">✓ Acertei</button>
        <button class="btn btn-bad" onclick="markFlashcardBad()">✗ Errei</button>
      </div>
    </div>`;
  }
}

function selectOpt(btn) {
  if (_qState.answered) return;
  _qState.answered = true;
  const chosen = btn.dataset.opt;
  const correct = btn.dataset.answer;
  btn.closest('.options').querySelectorAll('.opt').forEach((b) => {
    b.disabled = true;
    if (b.dataset.opt === correct) b.classList.add('correct');
    else if (b === btn) b.classList.add('wrong');
    else b.classList.add('revealed');
  });
  if (chosen === correct) {
    _qState.acertos++;
    setFeedback(true, 'Correto');
  } else {
    _qState.erros++;
    setFeedback(false, 'Incorreto — a correta está destacada');
  }
  document.getElementById('comment')?.classList.add('show');
  document.getElementById('btn-next').style.display = '';
}

function flipFlashcard() {
  const card = document.getElementById('flashcard');
  if (card) {
    _qState.flipped = true;
    _renderQuestion(_qState.questions[_qState.qIndex]);
  }
}

function markFlashcardOk() {
  _qState.answered = true;
  _qState.acertos++;
  setFeedback(true, 'Marcado como acertado');
  document.getElementById('comment')?.classList.add('show');
  document.getElementById('flashcard-btns').innerHTML = '';
  document.getElementById('btn-next').style.display = '';
}

function markFlashcardBad() {
  _qState.answered = true;
  _qState.erros++;
  setFeedback(false, 'Marcado como errado');
  document.getElementById('comment')?.classList.add('show');
  document.getElementById('flashcard-btns').innerHTML = '';
  document.getElementById('btn-next').style.display = '';
}

function setFeedback(ok, msg) {
  const fb = document.getElementById('feedback');
  fb.className = 'feedback-line show ' + (ok ? 'ok' : 'bad');
  document.getElementById('feedback-msg').textContent = msg;
}

function _buildResult() {
  const { acertos, erros, questions } = _qState;
  const total = questions.length;
  const pct = total ? Math.round((acertos / total) * 100) : 0;
  let nivel, detalhe;
  if (pct >= 90) {
    nivel = 'Excelente';
    detalhe = 'Domínio consistente do conteúdo. Mantenha revisão periódica.';
  } else if (pct >= 70) {
    nivel = 'Bom';
    detalhe = 'Base sólida com pontos a refinar. Revise os erros e releia os comentários.';
  } else if (pct >= 50) {
    nivel = 'Regular';
    detalhe = 'Compreensão parcial, com lacunas importantes. Retome o material teórico.';
  } else {
    nivel = 'Insuficiente';
    detalhe = 'Os conceitos centrais ainda não estão consolidados. Estude o tema e refaça.';
  }
  document.getElementById('res-pct').textContent = pct + '%';
  document.getElementById('res-a').textContent = acertos;
  document.getElementById('res-a2').textContent = acertos;
  document.getElementById('res-e').textContent = erros;
  document.getElementById('res-t').textContent = total;
  document.getElementById('res-msg-body').innerHTML = `<strong>${nivel}</strong> — ${acertos} de ${total} (${pct}%). ${detalhe}`;
}

function _saveProgress(key) {
  try {
    localStorage.setItem(PROGRESS_PREFIX + key, JSON.stringify({
      questions: _qState.questions,
      qIndex: _qState.qIndex,
      acertos: _qState.acertos,
      erros: _qState.erros,
      flipped: _qState.flipped,
    }));
  } catch (e) {}
}

function _loadProgress(key) {
  try {
    const s = localStorage.getItem(PROGRESS_PREFIX + key);
    if (!s) return false;
    const d = JSON.parse(s);
    if (!d.questions || !d.questions.length) return false;
    Object.assign(_qState, {
      questions: d.questions,
      qIndex: d.qIndex || 0,
      acertos: d.acertos || 0,
      erros: d.erros || 0,
      flipped: d.flipped || false,
    });
    return true;
  } catch (e) {
    return false;
  }
}

function _clearProgress(key) {
  try {
    localStorage.removeItem(PROGRESS_PREFIX + key);
  } catch (e) {}
}