{% extends "base.html" %}
{% block title %}Data & Backup — IslamInLife Quran App{% endblock %}
{% block body %}
<header>
  <h1>🗄️ Data &amp; Backup</h1>
  <div>{% if session_is_admin %}<a href="{{ url_for('backup_manager') }}">Backup Manager</a> &nbsp;·&nbsp; {% endif %}{{ display_name }} &nbsp;·&nbsp; <a href="{{ url_for('home') }}">Home</a></div>
</header>
<main>
  <div class="card">
    <p style="font-size:13px; color:#566573; margin-top:0;">Download a copy of your own data, any time.</p>
    <a class="btn" style="background:#1a5276; display:inline-block; text-decoration:none;" href="{{ url_for('api_export_hifz') }}">📖 Export Hifz Memorization (CSV)</a><br>
    <a class="btn" style="background:#1a7a4a; display:inline-block; text-decoration:none;" href="{{ url_for('api_export_revision') }}">📝 Export Revision Log (CSV)</a><br>
    <a class="btn" style="background:#6c3483; display:inline-block; text-decoration:none;" href="{{ url_for('api_export_fsr') }}">📌 Export FSR Lessons (CSV)</a><br>
    <a class="btn" style="background:#a04000; display:inline-block; text-decoration:none;" href="{{ url_for('api_export_full') }}">📋 Full App Export (.txt)</a>
    {% if session_is_admin %}<br>
    <a class="btn" style="background:#5b2c6f; display:inline-block; text-decoration:none;" href="{{ url_for('api_export_tafseer') }}">📚 Export Tafseer Notes (CSV) <span style="font-size:10px;">(Admin, shared data)</span></a>
    {% endif %}
  </div>

  <div id="msgBox"></div>

  <div class="card">
    <div class="section-title">📥 Import Data</div>
    <p style="font-size:13px; color:#566573; margin-top:0;">
      Import a previously exported CSV back in. Import Hifz first if you're also importing
      Revision Log — revision entries link to memo records that need to exist first.
    </p>

    <label>📖 Hifz Memorization (QPA_Hifz.csv)</label>
    <input type="file" id="file_hifz" accept=".csv">
    <button class="btn-save" onclick="doImport('hifz')">Import Hifz</button>

    <label style="margin-top:16px;">📝 Revision Log (QPA_Revisions.csv)</label>
    <input type="file" id="file_revisions" accept=".csv">
    <button class="btn-save" onclick="doImport('revisions')">Import Revisions</button>

    <label style="margin-top:16px;">📌 FSR Lessons (QPA_FSR.csv)</label>
    <input type="file" id="file_fsr" accept=".csv">
    <button class="btn-save" onclick="doImport('fsr')">Import FSR</button>

    {% if session_is_admin %}
    <label style="margin-top:16px;">📚 Tafseer Notes (QPA_Tafseer.csv) <span style="font-size:11px; color:#7d6608;">(Admin, shared data)</span></label>
    <input type="file" id="file_tafseer" accept=".csv">
    <button class="btn-save" onclick="doImport('tafseer')">Import Tafseer</button>
    {% endif %}
  </div>
</main>

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

function doImport(kind) {
  const fileInput = document.getElementById('file_' + kind);
  if (!fileInput.files.length) {
    showMsg('Please choose a file first.', true);
    return;
  }
  const fd = new FormData();
  fd.append('file', fileInput.files[0]);
  fetch(`/api/import/${kind}`, { method: 'POST', body: fd })
    .then(r => r.json())
    .then(d => {
      if (!d.ok) {
        showMsg(d.error || 'Import failed.', true);
        return;
      }
      let msg = `Imported ${d.imported}, skipped ${d.skipped} (already existed).`;
      if (d.errors && d.errors.length) {
        msg += `<br>${d.errors.length} row(s) had errors: ${d.errors.slice(0, 5).join('; ')}`;
      }
      showMsg(msg, false);
    });
}
</script>
{% endblock %}