{% extends "base.html" %}
{% block title %}General Sura Sequence Quiz — IslamInLife Quran App{% endblock %}
{% block body %}
<header>
  <h1>🎯 General Sura Sequence Quiz</h1>
  <div><a href="{{ url_for('lss_home') }}">LSS Home</a> &nbsp;·&nbsp; <a href="{{ url_for('home') }}">Home</a></div>
</header>
<main>
  <div class="card" id="quizCard">
    <div id="quizBody"></div>
  </div>
  <div class="card" id="doneCard" style="display:none;">
    <p>Quiz complete! <span id="scoreText"></span></p>
    <a class="btn btn-save" style="display:inline-block; text-decoration:none;" href="{{ url_for('lss_quiz') }}">
      🔄 New Round
    </a>
  </div>
</main>

<script>
const QUESTIONS = {{ questions | tojson }};
let current = 0;
let score = 0;

function renderQuestion() {
  const q = QUESTIONS[current];
  const body = document.getElementById('quizBody');
  let optionsHtml = '';
  const opts = q.type === 'yes_no' ? ['Yes', 'No'] : q.options;
  opts.forEach(opt => {
    optionsHtml += `<button class="btn-clear" style="display:block; width:100%; text-align:left; margin-bottom:8px;" onclick="answer('${opt.replace(/'/g, "\\'")}')">${opt}</button>`;
  });
  body.innerHTML = `
    <div style="font-size:12px; color:#7f8c8d;">Question ${current + 1} of ${QUESTIONS.length}</div>
    <p style="font-size:15px; font-weight:bold;">${q.text}</p>
    <div id="optionsArea">${optionsHtml}</div>
    <div id="feedbackArea"></div>
  `;
}

function answer(chosen) {
  const q = QUESTIONS[current];
  const isCorrect = chosen === q.correct;
  if (isCorrect) score++;

  document.getElementById('optionsArea').style.display = 'none';
  document.getElementById('feedbackArea').innerHTML = `
    <div class="msg ${isCorrect ? 'msg-success' : 'msg-error'}">
      ${isCorrect ? '✅ Correct!' : '❌ Not quite.'} ${q.explanation}
    </div>
    <button class="btn-save" onclick="nextQuestion()">Next</button>
  `;

  const fd = new FormData();
  fd.append('correct', isCorrect ? '1' : '0');
  fetch('/api/lss/answer', { method: 'POST', body: fd });
}

function nextQuestion() {
  current++;
  if (current >= QUESTIONS.length) {
    document.getElementById('quizCard').style.display = 'none';
    document.getElementById('doneCard').style.display = 'block';
    document.getElementById('scoreText').textContent = `You scored ${score}/${QUESTIONS.length}.`;
    return;
  }
  renderQuestion();
}

renderQuestion();
</script>
{% endblock %}