{% extends "base.html" %}
{% block title %}আমার সূরা মুখস্থকরণ — ইসলামইনলাইফ কুরআন অ্যাপ{% endblock %}
{% block body %}
<header>
  <h1>📿 আমার সূরা মুখস্থকরণ</h1>
  <div><a href="{{ url_for('memorization_status') }}">মুখস্থ ও চলমান</a> &nbsp;·&nbsp; <a href="{{ url_for('memorization_planning') }}">পরিকল্পনা পরিচালনা করুন</a> &nbsp;·&nbsp; <a href="{{ url_for('memorization_sequence') }}" target="_blank" rel="noopener">ক্রম</a> &nbsp;·&nbsp; {{ display_name }} &nbsp;·&nbsp; <a href="{{ url_for('home') }}">হোম</a></div>
</header>
<main>
  <div id="msgBox"></div>

  <div class="card" style="background:#f5eef8; font-size:13px; color:#5b2c6f;">
    ℹ️ এটি আপনার প্রকৃতপক্ষে মুখস্থ করা বিষয়ের রেকর্ড — যেকোনো সময় সরাসরি সম্পাদনা করুন।
    এখনও মুখস্থ করেননি এমন কিছুর পরিকল্পনা করছেন? পরিবর্তে
    <a href="{{ url_for('memorization_planning') }}">পরিকল্পনা পরিচালনা করুন</a> ব্যবহার করুন — একটি পরিকল্পনা
    সম্পন্ন চিহ্নিত করলে এটি স্বয়ংক্রিয়ভাবে এখানে যোগ হয়।
  </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">
      📜 সকল মুখস্থ সূরা/আয়াত দেখান
    </a>
  </div>

  <div class="card">
    <label>সূরা</label>
    <select id="suraSelect" onchange="window.location.href=APP_PREFIX + '/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_no }} — {{ sura_name }}</div>
  </div>

  <div class="card">
    <div class="section-title">বিদ্যমান এন্ট্রি</div>
    {% if not entries %}
      <p style="font-size:13px; color:#566573;">এই সূরার জন্য এখনও কোনো এন্ট্রি রেকর্ড করা হয়নি।</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 | bn_status }}</strong> — {{ e.verse_detail }}
          <div style="font-size:12px; color:#566573;">
            {{ e.status | bn_status }} &middot; {{ e.quality | bn_status }}
            {% if e.mushaf_pages %} &middot; পৃষ্ঠা {{ 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;">সম্পাদনা</a>
          <a href="#" onclick="deleteEntry({{ e.id }}); return false;" style="font-size:13px; color:#a93226;">মুছুন</a>
        </div>
      </div>
    </div>
    {% endfor %}
  </div>

  <div class="card">
    <div class="section-title" id="formTitle">নতুন এন্ট্রি যোগ করুন</div>
    <input type="hidden" id="entryId" value="">

    <label>মুখস্থকরণের ধরন</label>
    <select id="memoType" onchange="handleMemoTypeChange()">
      <option value="Complete Sura">সম্পূর্ণ সূরা</option>
      <option value="Single Verse">একক আয়াত</option>
      <option value="Verse Range">আয়াতের পরিসীমা</option>
      <option value="Multiple Ranges">একাধিক পরিসীমা</option>
    </select>

    <label>আয়াতের বিবরণ</label>
    <input type="text" id="verseDetail" placeholder="যেমন All | 5 | 1-15 | 1-5, 19-31" onchange="autoFillPage()">

    <div class="row">
      <div>
        <label>অবস্থা</label>
        <select id="status">
          <option value="Memorized">মুখস্থ হয়েছে</option>
          <option value="In Progress" selected>চলমান</option>
        </select>
      </div>
      <div>
        <label>মান</label>
        <select id="quality">
          <option value="Strong">শক্তিশালী</option>
          <option value="Average" selected>গড়পড়তা</option>
          <option value="Weak">দুর্বল</option>
        </select>
      </div>
    </div>

    <label>মুসহাফ পৃষ্ঠা</label>
    <input type="text" id="mushafPages" placeholder="স্বয়ংক্রিয়ভাবে পূরণ হবে, অথবা নিজে লিখুন">

    <label>নোট</label>
    <textarea id="notes" placeholder="ঐচ্ছিক"></textarea>

    <button class="btn-save" onclick="saveEntry()" id="saveBtn">💾 এন্ট্রি সংরক্ষণ করুন</button>
    <button class="btn-clear" onclick="clearForm()">✨ নতুন / পরিষ্কার করুন</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 = 'নতুন এন্ট্রি যোগ করুন';
  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 = 'এন্ট্রি #' + id + ' সম্পাদনা করা হচ্ছে';
  window.scrollTo(0, document.body.scrollHeight);
}

function autoFillPage() {
  const verses = document.getElementById('verseDetail').value || 'All';
  fetch(APP_PREFIX + `/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(APP_PREFIX + '/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('✅ সংরক্ষণ করা হয়েছে।', false); setTimeout(() => location.reload(), 700); }
      else showMsg(body.error || 'সংরক্ষণ করা যায়নি।', true);
    });
}

function deleteEntry(id) {
  if (!confirm('এই এন্ট্রি মুছে ফেলবেন?')) return;
  const fd = new FormData();
  fd.append('entry_id', id);
  fetch(APP_PREFIX + '/api/memorization/delete', { method: 'POST', body: fd })
    .then(() => location.reload());
}
</script>
{% endblock %}