{% extends "base.html" %}
{% block title %}My Sura Memorization — IslamInLife Quran App{% endblock %}
{% block body %}
<header>
  <h1>📿 My Sura Memorization</h1>
  <div><a href="{{ url_for('memorization_status') }}">Memorized &amp; In-progress</a> &nbsp;·&nbsp; <a href="{{ url_for('memorization_planning') }}">Planning</a> &nbsp;·&nbsp; <a href="{{ url_for('memorization_sequence') }}" target="_blank" rel="noopener">Sequence</a> &nbsp;·&nbsp; {{ display_name }} &nbsp;·&nbsp; <a href="{{ url_for('home') }}">Home</a></div>
</header>
<main>
  <div id="msgBox"></div>

  <div class="card" style="background:#f5eef8; font-size:13px; color:#5b2c6f;">
    ℹ️ This is your record of what's actually memorized — edit it directly anytime.
    Planning something you haven't memorized yet? Use
    <a href="{{ url_for('memorization_planning') }}">Planning</a> instead — marking a plan
    Done adds it here automatically.
  </div>

  <div class="card">
    <a class="btn" style="background:#6c3483; display:inline-block; text-decoration:none;"
       href="{{ url_for('memorization_sequence') }}" target="_blank" rel="noopener">
      📜 Show All Memorized Sura/Verses
    </a>
  </div>

  <div class="card">
    <label>Sura</label>
    <select id="suraSelect" onchange="window.location.href='/memorization?sura_no=' + this.value">
      {% for s in suras %}
      <option value="{{ s.sura_no }}" {% if s.sura_no == sura_no %}selected{% endif %}>{{ s.label }}</option>
      {% endfor %}
    </select>
  </div>

  <div class="card" style="background:#f5eef8;">
    <div style="font-weight:bold; font-size:16px; color:#5b2c6f;">Sura {{ sura_no }} — {{ sura_name }}</div>
  </div>

  <div class="card">
    <div class="section-title">Existing Entries</div>
    {% if not entries %}
      <p style="font-size:13px; color:#566573;">No entries recorded yet for this sura.</p>
    {% endif %}
    {% for e in entries %}
    <div class="card" style="margin-bottom:8px;">
      <div style="display:flex; justify-content:space-between; align-items:flex-start;">
        <div>
          <strong>{{ e.memo_type }}</strong> — {{ e.verse_detail }}
          <div style="font-size:12px; color:#566573;">
            {{ e.status }} &middot; {{ e.quality }}
            {% if e.mushaf_pages %} &middot; Page {{ e.mushaf_pages }}{% endif %}
          </div>
          {% if e.notes %}<div style="font-size:12px; margin-top:4px;">{{ e.notes }}</div>{% endif %}
        </div>
        <div>
          <a href="#" onclick='loadForEdit({{ e.id }}, {{ e.memo_type | tojson }}, {{ e.verse_detail | tojson }}, {{ e.status | tojson }}, {{ e.quality | tojson }}, {{ (e.mushaf_pages or "") | tojson }}, {{ (e.notes or "") | tojson }}); return false;' style="font-size:13px; margin-right:10px;">Edit</a>
          <a href="#" onclick="deleteEntry({{ e.id }}); return false;" style="font-size:13px; color:#a93226;">Delete</a>
        </div>
      </div>
    </div>
    {% endfor %}
  </div>

  <div class="card">
    <div class="section-title" id="formTitle">Add New Entry</div>
    <input type="hidden" id="entryId" value="">

    <label>Memo Type</label>
    <select id="memoType" onchange="handleMemoTypeChange()">
      <option>Complete Sura</option>
      <option>Single Verse</option>
      <option>Verse Range</option>
      <option>Multiple Ranges</option>
    </select>

    <label>Verse Detail</label>
    <input type="text" id="verseDetail" placeholder="e.g. All | 5 | 1-15 | 1-5, 19-31" onchange="autoFillPage()">

    <div class="row">
      <div>
        <label>Status</label>
        <select id="status">
          <option>Memorized</option>
          <option selected>In Progress</option>
        </select>
      </div>
      <div>
        <label>Quality</label>
        <select id="quality">
          <option>Strong</option>
          <option selected>Average</option>
          <option>Weak</option>
        </select>
      </div>
    </div>

    <label>Mushaf Pages</label>
    <input type="text" id="mushafPages" placeholder="auto-fills, or type your own">

    <label>Notes</label>
    <textarea id="notes" placeholder="optional"></textarea>

    <button class="btn-save" onclick="saveEntry()" id="saveBtn">💾 Save Entry</button>
    <button class="btn-clear" onclick="clearForm()">✨ New / Clear</button>
  </div>
</main>

<script>
const SURA_NO = {{ sura_no }};

function clearForm() {
  document.getElementById('entryId').value = '';
  document.getElementById('memoType').selectedIndex = 0;
  document.getElementById('verseDetail').value = '';
  document.getElementById('status').value = 'In Progress';
  document.getElementById('quality').value = 'Average';
  document.getElementById('mushafPages').value = '';
  document.getElementById('notes').value = '';
  document.getElementById('formTitle').textContent = 'Add New Entry';
  handleMemoTypeChange();
}

// Verse Detail is only meaningful (and required) for Single Verse, Verse
// Range, and Multiple Ranges. Complete Sura always covers every verse,
// so it's auto-filled as "All" rather than requiring the user to type
// it -- this also makes sure the Mushaf Page lookup fires for it.
function handleMemoTypeChange() {
  const memoType = document.getElementById('memoType').value;
  if (memoType === 'Complete Sura') {
    document.getElementById('verseDetail').value = 'All';
    autoFillPage();
  }
}

function loadForEdit(id, memoType, verseDetail, status, quality, mushafPages, notes) {
  document.getElementById('entryId').value = id;
  document.getElementById('memoType').value = memoType;
  document.getElementById('verseDetail').value = verseDetail;
  document.getElementById('status').value = status;
  document.getElementById('quality').value = quality;
  document.getElementById('mushafPages').value = mushafPages;
  document.getElementById('notes').value = notes;
  document.getElementById('formTitle').textContent = 'Editing Entry #' + id;
  window.scrollTo(0, document.body.scrollHeight);
}

function autoFillPage() {
  const verses = document.getElementById('verseDetail').value || 'All';
  fetch(`/api/memorization/auto-fill-page?sura_no=${SURA_NO}&verses=${encodeURIComponent(verses)}`)
    .then(r => r.json())
    .then(d => { if (d.page) document.getElementById('mushafPages').value = d.page; });
}

// Run once on load: the form's default state already has "Complete
// Sura" pre-selected, so Verse Detail needs to be set to "All" (and
// the page auto-filled) immediately, not only on a later change event.
handleMemoTypeChange();

function showMsg(text, isError) {
  document.getElementById('msgBox').innerHTML = `<div class="msg ${isError ? 'msg-error' : 'msg-success'}">${text}</div>`;
}

function saveEntry() {
  const fd = new FormData();
  fd.append('sura_no', SURA_NO);
  fd.append('entry_id', document.getElementById('entryId').value);
  fd.append('memo_type', document.getElementById('memoType').value);
  fd.append('verse_detail', document.getElementById('verseDetail').value);
  fd.append('status', document.getElementById('status').value);
  fd.append('quality', document.getElementById('quality').value);
  fd.append('mushaf_pages', document.getElementById('mushafPages').value);
  fd.append('notes', document.getElementById('notes').value);

  fetch('/api/memorization/save', { method: 'POST', body: fd })
    .then(r => r.json().then(d => ({ ok: r.ok, body: d })))
    .then(({ ok, body }) => {
      if (ok && body.ok) { showMsg('✅ Saved.', false); setTimeout(() => location.reload(), 700); }
      else showMsg(body.error || 'Could not save.', true);
    });
}

function deleteEntry(id) {
  if (!confirm('Delete this entry?')) return;
  const fd = new FormData();
  fd.append('entry_id', id);
  fetch('/api/memorization/delete', { method: 'POST', body: fd })
    .then(() => location.reload());
}
</script>
{% endblock %}