{% extends "base.html" %}
{% block title %}Hifz Sequence Quiz — IslamInLife Quran App{% endblock %}
{% block body %}
<header>
  <h1>🎯 Hifz 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>
  {% if not questions %}
    <div class="card">
      <p>Locked until you have at least 6 qualifying memorised entries (Al-Fatiha doesn't count).
      You currently have {{ entry_count }}.</p>
    </div>
  {% else %}
    <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_hifz_quiz') }}">
        🔄 New Round
      </a>
    </div>
  {% endif %}
</main>

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

function renderQuestion() {
  const q = QUESTIONS[current];
  const body = document.getElementById('quizBody');
  const header = `<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>`;

  if (q.type === 'order_three') {
    body.innerHTML = header + `
      <div id="tileRow" style="display:flex; gap:8px; flex-wrap:wrap; margin-bottom:10px;"></div>
      <button class="btn-save" id="checkBtn" onclick="checkOrder()">✓ Check Order</button>
      <div id="feedbackArea"></div>
    `;
    const tileRow = document.getElementById('tileRow');
    window._tileSelected = null;
    q.options.forEach((opt, i) => {
      const btn = document.createElement('button');
      btn.textContent = opt;
      btn.className = 'btn-clear';
      btn.style.margin = '0';
      btn.onclick = () => swapTile(i);
      tileRow.appendChild(btn);
    });
  } else {
    let optionsHtml = '';
    q.options.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 = header + `<div id="optionsArea">${optionsHtml}</div><div id="feedbackArea"></div>`;
  }
}

function swapTile(idx) {
  const tileRow = document.getElementById('tileRow');
  const tiles = Array.from(tileRow.children);
  if (window._tileSelected === null) {
    window._tileSelected = idx;
    tiles[idx].style.borderColor = '#c9a84c';
    tiles[idx].style.background = '#fef9e7';
  } else if (window._tileSelected === idx) {
    tiles[idx].style.borderColor = '';
    tiles[idx].style.background = '';
    window._tileSelected = null;
  } else {
    const a = tiles[window._tileSelected], b = tiles[idx];
    const tmp = a.textContent; a.textContent = b.textContent; b.textContent = tmp;
    a.style.borderColor = ''; a.style.background = '';
    window._tileSelected = null;
  }
}

function checkOrder() {
  const q = QUESTIONS[current];
  const tileRow = document.getElementById('tileRow');
  const tiles = Array.from(tileRow.children);
  const userOrder = tiles.map(t => t.textContent);
  const isCorrect = JSON.stringify(userOrder) === JSON.stringify(q.correct);
  if (isCorrect) score++;

  tiles.forEach((t, i) => {
    t.disabled = true;
    const ok = t.textContent === q.correct[i];
    t.style.background = ok ? '#d4efdf' : '#fdecea';
    t.style.borderColor = ok ? '#27ae60' : '#e74c3c';
  });
  document.getElementById('checkBtn').style.display = 'none';
  document.getElementById('feedbackArea').innerHTML = `
    <div class="msg ${isCorrect ? 'msg-success' : 'msg-error'}">
      ${isCorrect ? '✅ Perfect order!' : '❌ Correct order: ' + q.correct_str}
    </div>
    <button class="btn-save" onclick="nextQuestion()">Next</button>
  `;
  recordAnswer(isCorrect);
}

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 — correct answer: ' + q.correct}
    </div>
    <button class="btn-save" onclick="nextQuestion()">Next</button>
  `;
  recordAnswer(isCorrect);
}

function recordAnswer(isCorrect) {
  const fd = new FormData();
  fd.append('correct', isCorrect ? '1' : '0');
  fetch('/api/lss/hifz-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();
}

if (QUESTIONS.length) renderQuestion();
</script>
{% endblock %}