{% extends "base.html" %}
{% block title %}Revision Log — IslamInLife Quran App{% endblock %}
{% block body %}
<header>
  <h1>🔁 Revision Log</h1>
  <div><a href="{{ url_for('revision_mode_setup') }}">Mode Setup</a> &nbsp;·&nbsp; <a href="{{ url_for('revision_due') }}">Due</a> &nbsp;·&nbsp; <a href="{{ url_for('revision_summary') }}">Summary</a> &nbsp;·&nbsp; {{ display_name }} &nbsp;·&nbsp; <a href="{{ url_for('home') }}">Home</a></div>
</header>
<main>
  {% include "_revision_log_banner.html" %}
  <div id="msgBox"></div>

  <div class="card" style="background:#eaf4fb;">
    Mode: <strong>{{ mode | capitalize }}-based</strong>
    <span style="font-size:12px; color:#566573;">(change this in the desktop app's Revision Mode Setup)</span>
  </div>

  <div class="card">
    <div class="section-title">Log a Revision Session</div>

    {% if mode == "sura" %}
      <label>Sura (memorised suras only)</label>
      <select id="f_sura" onchange="loadMemos()">
        <option value="">— Select —</option>
        {% for s in suras %}<option value="{{ s.sura_no }}">{{ s.label }}</option>{% endfor %}
      </select>
      <label>Memo Entry</label>
      <select id="f_memo"><option value="">— Select a sura first —</option></select>

    {% elif mode == "page" %}
      <label>Mushaf Page Number</label>
      <input type="text" id="f_page" placeholder="e.g. 15">

    {% elif mode == "verse" %}
      <label>Sura</label>
      <select id="f_sura">
        <option value="">— Select —</option>
        {% for s in suras %}<option value="{{ s.sura_no }}">{{ s.label }}</option>{% endfor %}
      </select>
      <div class="row">
        <div><label>Verse From</label><input type="text" id="f_verse_from" placeholder="1"></div>
        <div><label>Verse To (optional)</label><input type="text" id="f_verse_to" placeholder="optional"></div>
      </div>
    {% endif %}

    <label>Quality</label>
    <select id="f_quality">
      <option>Strong</option>
      <option selected>Average</option>
      <option>Weak</option>
    </select>

    <label>Notes (optional)</label>
    <textarea id="f_notes" placeholder="Optional notes..."></textarea>

    <button class="btn-save" onclick="logRevision()">✅ Log Revision Today</button>
  </div>

  <div class="card">
    <div class="section-title">📅 Recent Revisions</div>
    <table>
      <tr><th>Date</th><th>Sura / Page / Verse</th><th>Quality</th><th>Notes</th></tr>
      {% for h in history %}
      <tr><td data-label="Date">{{ h.date }}</td><td data-label="Sura / Page / Verse">{{ h.sura }}</td><td data-label="Quality">{{ h.quality }}</td><td data-label="Notes">{{ h.notes or "" }}</td></tr>
      {% endfor %}
    </table>
  </div>
</main>

<script>
const MODE = "{{ mode }}";

function loadMemos() {
  const sura = document.getElementById('f_sura').value;
  const memoSel = document.getElementById('f_memo');
  if (!sura) { memoSel.innerHTML = '<option value="">— Select a sura first —</option>'; return; }
  fetch(APP_PREFIX + `/api/revision/memos-for-sura/${sura}`).then(r => r.json()).then(memos => {
    memoSel.innerHTML = '<option value="">— Select —</option>';
    memos.forEach(m => {
      const opt = document.createElement('option');
      opt.value = m.id; opt.textContent = m.label;
      memoSel.appendChild(opt);
    });
  });
}

function showMsg(text, isError) {
  const box = document.getElementById('msgBox');
  box.innerHTML = `<div class="msg ${isError ? 'msg-error' : 'msg-success'}">${text}</div>`;
  if (!isError) setTimeout(() => location.reload(), 900);
}

function logRevision() {
  const fd = new FormData();
  fd.append('mode', MODE);
  fd.append('quality', document.getElementById('f_quality').value);
  fd.append('notes', document.getElementById('f_notes').value);

  if (MODE === 'sura') {
    fd.append('sura_no', document.getElementById('f_sura').value);
    fd.append('memo_id', document.getElementById('f_memo').value);
  } else if (MODE === 'page') {
    fd.append('page_no', document.getElementById('f_page').value);
  } else if (MODE === 'verse') {
    fd.append('sura_no', document.getElementById('f_sura').value);
    fd.append('verse_no', document.getElementById('f_verse_from').value);
    fd.append('verse_no_end', document.getElementById('f_verse_to').value);
  }

  fetch(APP_PREFIX + '/api/revision/log', { method: 'POST', body: fd })
    .then(r => r.json().then(d => ({ ok: r.ok, body: d })))
    .then(({ ok, body }) => {
      if (ok && body.ok) showMsg('✅ Logged.', false);
      else showMsg(body.error || 'Could not log this revision.', true);
    });
}
</script>
{% endblock %}