{% extends "base.html" %}
{% block title %}Simple Plan for Today — IslamInLife Quran App{% endblock %}
{% block body %}
<header>
  <h1>📿 Simple Plan for Today</h1>
  <div>{{ display_name }} &nbsp;·&nbsp; <a href="{{ url_for('logout') }}">Logout</a></div>
</header>
<main>
  <div id="msgBox"></div>

  <div class="card">
    <label>Plan &amp; Execution Date</label>
    <input type="date" id="planDate" value="{{ plan_date }}" onchange="window.location.href='/today-plan?date=' + this.value">
    <a class="btn" style="background:#1a5276; display:inline-block; text-decoration:none; margin-top:8px;"
       href="{{ url_for('today_plan_view') }}" target="_blank" rel="noopener">
      📋 View Today's Plan
    </a>
    <a class="btn" style="background:#5b2c6f; display:inline-block; text-decoration:none; margin-top:8px;"
       href="{{ url_for('all_plans_view') }}" target="_blank" rel="noopener">
      🗂️ View All Plans
    </a>
  </div>

  {% macro section(key, cls, icon, title, type_label) %}
  <div class="card {{ cls }}">
    <div class="section-title">{{ icon }} {{ title }}</div>
    <div id="{{ key }}_items">
      {% for it in items[key] %}
      <div class="row" id="item_{{ it.id }}" style="align-items:center; margin-bottom:8px;" data-section="{{ key }}">
        {% if key == "visual" %}<div style="max-width:90px;"><label>Page</label><input type="text" class="item-page" id="item_{{ it.id }}_page" value="{{ it.page or '' }}" readonly></div>{% endif %}
        <div>
          <label>Sura</label>
          <select class="item-sura" id="item_{{ it.id }}_sura" disabled onchange="{% if key == 'visual' %}autoFillItemPage({{ it.id }}){% endif %}">
            {% for s in suras %}<option value="{{ s.sura_no }}" {% if s.sura_no == it.sura_no %}selected{% endif %}>{{ s.label }}</option>{% endfor %}
          </select>
        </div>
        <div>
          <label>{{ type_label }}</label>
          <select class="item-memotype" id="item_{{ it.id }}_memotype" disabled onchange="handleItemMemoTypeChange({{ it.id }})">
            <option {% if it.memo_type == 'Complete Sura' %}selected{% endif %}>Complete Sura</option>
            <option {% if it.memo_type == 'Single Verse' %}selected{% endif %}>Single Verse</option>
            <option {% if it.memo_type == 'Verse Range' %}selected{% endif %}>Verse Range</option>
            <option {% if it.memo_type == 'Multiple Ranges' %}selected{% endif %}>Multiple Ranges</option>
          </select>
        </div>
        <div>
          <label>Verses</label>
          <input type="text" class="item-verses" id="item_{{ it.id }}_verses" value="{{ it.verses }}" readonly
                 {% if key == "visual" %}onchange="autoFillItemPage({{ it.id }})"{% endif %}>
        </div>
        <div class="done-check">
          <input type="checkbox" onchange="toggleItem({{ it.id }}, this.checked)" {% if it.done %}checked{% endif %}>
          <label style="margin:0;">Done</label>
        </div>
        <div id="item_{{ it.id }}_actions">
          <a href="#" onclick="startEditItem({{ it.id }}); return false;" style="font-size:13px; margin-right:8px;">Edit</a>
          <a href="#" onclick="deleteItem({{ it.id }}); return false;" style="color:#a93226; font-size:13px;">Delete</a>
        </div>
      </div>
      {% endfor %}
    </div>

    <div class="row" id="{{ key }}_addrow" style="align-items:flex-end;">
      {% if key == "visual" %}<div style="max-width:90px;"><label>Page</label><input type="text" id="{{ key }}_new_page" readonly placeholder="auto-fills"></div>{% endif %}
      <div>
        <label>Sura</label>
        <select id="{{ key }}_new_sura" onchange="{% if key == 'visual' %}autoFillPage('{{ key }}'){% endif %}">
          <option value="">— None —</option>
          {% for s in suras %}<option value="{{ s.sura_no }}">{{ s.label }}</option>{% endfor %}
        </select>
      </div>
      <div>
        <label>{{ type_label }}</label>
        <select id="{{ key }}_new_memotype" onchange="handleNewMemoTypeChange('{{ key }}')">
          <option>Complete Sura</option>
          <option>Single Verse</option>
          <option>Verse Range</option>
          <option>Multiple Ranges</option>
        </select>
      </div>
      <div>
        <label>Verses</label>
        <input type="text" id="{{ key }}_new_verses" placeholder="e.g. All | 5 | 1-15"
               {% if key == "visual" %}onchange="autoFillPage('{{ key }}')"{% endif %}>
      </div>
      <div><button class="btn-save" style="margin:0;" onclick="addItem('{{ key }}')">+ Add</button></div>
    </div>
  </div>
  {% endmacro %}

  {{ section("memorize", "memorize", "📖", "Memorize (Sura/Verse(s))", "Memo Type") }}
  {{ section("revise", "revise", "🔁", "Revise (Sura/Verse(s))", "Revision Type") }}
  {{ section("recite", "recite", "🕌", "Recite these Sura/Verse(s) in Salat today", "Recitation Type") }}
  {{ section("visual", "visual", "👁️", "Visual reading from Mushaf", "Reading Type") }}

  <div class="card">
    <label>Notes (optional)</label>
    <textarea id="notes" placeholder="Anything else for today...">{{ notes }}</textarea>
    <button class="btn-save" onclick="saveNotes()">💾 Save Notes</button>
  </div>

  <div class="card">
    <button class="btn-delete" onclick="deletePlan()">🗑 Delete This Whole Plan</button>
  </div>

  <div class="card">
    <div class="section-title">📋 Recent Plans (tap a row to open it)</div>
    <table>
      <tr><th>Date</th><th>What's planned</th></tr>
      {% for p in recent %}
      <tr class="plan-row" onclick="window.location.href='/today-plan?date={{ p.plan_date }}'"><td data-label="Date">{{ p.plan_date }}</td><td data-label="What's planned">{{ p.summary }}</td></tr>
      {% endfor %}
    </table>
  </div>
</main>

<script>
const PLAN_DATE = "{{ plan_date }}";

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

function autoFillPage(key) {
  const sura = document.getElementById(key + '_new_sura').value;
  const verses = document.getElementById(key + '_new_verses').value || 'All';
  const pageField = document.getElementById(key + '_new_page');
  if (!sura) { pageField.value = ''; return; }
  fetch(`/api/plan/auto-fill-page?sura_no=${sura}&verses=${encodeURIComponent(verses)}`)
    .then(r => r.json())
    .then(d => { pageField.value = d.page || ''; });
}

// Verses is only required (and only meaningful) for Single Verse, Verse
// Range, and Multiple Ranges. Complete Sura always covers every verse,
// so it's auto-filled as "All" instead of requiring the user to type
// it -- mirrors the same fix already applied on the Memorization page.
function handleNewMemoTypeChange(key) {
  const memoType = document.getElementById(key + '_new_memotype').value;
  const versesField = document.getElementById(key + '_new_verses');
  if (memoType === 'Complete Sura') {
    versesField.value = 'All';
  } else if (versesField.value === 'All') {
    versesField.value = '';
  }
  if (key === 'visual') autoFillPage(key);
}

function addItem(section) {
  const sura = document.getElementById(section + '_new_sura').value;
  const memoTypeField = document.getElementById(section + '_new_memotype');
  const memoType = memoTypeField ? memoTypeField.value : '';
  let verses = document.getElementById(section + '_new_verses').value.trim();
  if (memoType === 'Complete Sura' && !verses) verses = 'All';

  if (!sura) { showMsg('Please choose a Sura.', true); return; }
  if (memoType !== 'Complete Sura' && !verses) {
    showMsg('Please enter the Verses for this Memo Type.', true);
    return;
  }

  const fd = new FormData();
  fd.append('plan_date', PLAN_DATE);
  fd.append('section', section);
  fd.append('sura_no', sura);
  fd.append('memo_type', memoType);
  fd.append('verses', verses);
  if (section === 'visual') {
    fd.append('page', document.getElementById('visual_new_page').value);
  }

  fetch('/api/plan/add-item', { method: 'POST', body: fd })
    .then(r => r.json().then(d => ({ ok: r.ok, body: d })))
    .then(({ ok, body }) => {
      if (ok && body.ok) { showMsg('✅ Added.', false); setTimeout(() => location.reload(), 500); }
      else showMsg(body.error || 'Could not add.', true);
    });
}

function toggleItem(itemId, checked) {
  const fd = new FormData();
  fd.append('item_id', itemId);
  fd.append('done', checked ? '1' : '0');
  fetch('/api/plan/toggle-item', { method: 'POST', body: fd })
    .then(r => r.json())
    .then(d => { if (!d.ok) showMsg(d.error || 'Could not update.', true); });
}

function startEditItem(itemId) {
  document.getElementById(`item_${itemId}_sura`).disabled = false;
  document.getElementById(`item_${itemId}_verses`).readOnly = false;
  const memoTypeField = document.getElementById(`item_${itemId}_memotype`);
  if (memoTypeField) memoTypeField.disabled = false;
  const pageField = document.getElementById(`item_${itemId}_page`);
  if (pageField) pageField.readOnly = true; // page stays auto-filled, not hand-typed

  document.getElementById(`item_${itemId}_actions`).innerHTML = `
    <a href="#" onclick="saveEditItem(${itemId}); return false;" style="color:#1a7a4a; font-size:13px; margin-right:8px;">Save</a>
    <a href="#" onclick="cancelEditItem(${itemId}); return false;" style="font-size:13px;">Cancel</a>
  `;
}

function cancelEditItem(itemId) {
  location.reload(); // simplest reliable way to discard an in-progress edit
}

function handleItemMemoTypeChange(itemId) {
  const memoType = document.getElementById(`item_${itemId}_memotype`).value;
  const versesField = document.getElementById(`item_${itemId}_verses`);
  if (memoType === 'Complete Sura') {
    versesField.value = 'All';
  } else if (versesField.value === 'All') {
    versesField.value = '';
  }
  autoFillItemPage(itemId); // no-op for non-visual rows, which have no page field
}

function autoFillItemPage(itemId) {
  const sura = document.getElementById(`item_${itemId}_sura`).value;
  const verses = document.getElementById(`item_${itemId}_verses`).value || 'All';
  const pageField = document.getElementById(`item_${itemId}_page`);
  if (!sura || !pageField) return;
  fetch(`/api/plan/auto-fill-page?sura_no=${sura}&verses=${encodeURIComponent(verses)}`)
    .then(r => r.json())
    .then(d => { pageField.value = d.page || ''; });
}

function saveEditItem(itemId) {
  const sura = document.getElementById(`item_${itemId}_sura`).value;
  const memoTypeField = document.getElementById(`item_${itemId}_memotype`);
  const memoType = memoTypeField ? memoTypeField.value : '';
  let verses = document.getElementById(`item_${itemId}_verses`).value.trim();
  const pageField = document.getElementById(`item_${itemId}_page`);
  if (memoType === 'Complete Sura' && !verses) verses = 'All';

  if (!sura) { showMsg('Please choose a Sura.', true); return; }
  if (memoType !== 'Complete Sura' && !verses) {
    showMsg('Please enter the Verses for this Memo Type.', true);
    return;
  }

  const fd = new FormData();
  fd.append('item_id', itemId);
  fd.append('sura_no', sura);
  fd.append('memo_type', memoType);
  fd.append('verses', verses);
  if (pageField) fd.append('page', pageField.value);

  fetch('/api/plan/update-item', { method: 'POST', body: fd })
    .then(r => r.json().then(d => ({ ok: r.ok, body: d })))
    .then(({ ok, body }) => {
      if (ok && body.ok) { showMsg('✅ Updated.', false); setTimeout(() => location.reload(), 500); }
      else showMsg(body.error || 'Could not update.', true);
    });
}

function deleteItem(itemId) {
  if (!confirm('Remove this item?')) return;
  const fd = new FormData();
  fd.append('item_id', itemId);
  fetch('/api/plan/delete-item', { method: 'POST', body: fd })
    .then(() => location.reload());
}

function saveNotes() {
  const fd = new FormData();
  fd.append('plan_date', PLAN_DATE);
  fd.append('notes', document.getElementById('notes').value);
  fetch('/api/plan/update-notes', { method: 'POST', body: fd })
    .then(r => r.json())
    .then(d => { if (d.ok) showMsg('✅ Notes saved.', false); else showMsg('Could not save notes.', true); });
}

function deletePlan() {
  if (!confirm('Delete the ENTIRE plan for this date, including all items? This cannot be undone.')) return;
  const fd = new FormData();
  fd.append('plan_date', PLAN_DATE);
  fetch('/api/plan/delete', { method: 'POST', body: fd })
    .then(() => { showMsg('Deleted.', false); setTimeout(() => location.reload(), 500); });
}

// Run once on load: each "Add new" row defaults to "Complete Sura", so
// Verses needs to be set to "All" immediately, not only on a later
// change event -- same reasoning as the Memorization page fix.
['memorize', 'revise', 'recite', 'visual'].forEach(handleNewMemoTypeChange);
</script>
{% endblock %}