{% extends "base.html" %}
{% block title %}Home — IslamInLife Quran App{% endblock %}
{% block body %}
<header>
  <h1>📖 IslamInLife Quran App</h1>
  <div>{{ display_name }} &nbsp;·&nbsp; <a href="{{ url_for('account') }}">Account</a> &nbsp;·&nbsp; <a href="{{ url_for('logout') }}">Logout</a></div>
</header>
<main>
  <div class="card" style="background:#f5eef8;">
    <div class="section-title">📿 Today in Hifz</div>
    <p style="font-size:13px; color:#566573; margin-top:0;">Revision Due, Planner, and Goal Plans — pulled together in one place.</p>
    <a class="btn" style="background:#6c3483; display:inline-block; text-decoration:none;" href="{{ url_for('today_in_hifz') }}">
      📿 Open Today in Hifz
    </a>
  </div>

  <div class="card" style="display:flex; flex-wrap:wrap; gap:12px;">
    <div style="flex:1; min-width:130px;">
      <div style="font-size:12px; color:#566573;">📖 Hifz Entries</div>
      <div style="font-size:22px; font-weight:bold; color:#1a5276;">{{ stats.hifz_count }}</div>
      <div style="font-size:11px; color:#7f8c8d;">{{ stats.memorized_count }} memorized</div>
    </div>
    <div style="flex:1; min-width:130px;">
      <div style="font-size:12px; color:#566573;">📝 Revised Today</div>
      <div style="font-size:22px; font-weight:bold; color:#1a7a4a;">{{ stats.revised_today }}</div>
      <div style="font-size:11px; color:#7f8c8d;">sessions</div>
    </div>
    <div style="flex:1; min-width:130px;">
      <div style="font-size:12px; color:#566573;">📌 FSR Pending</div>
      <div style="font-size:22px; font-weight:bold; color:#6c3483;">{{ stats.fsr_pending }}</div>
      <div style="font-size:11px; color:#7f8c8d;">lessons</div>
    </div>
  </div>

  {% if session_is_admin %}
  <div class="card" style="background:#eaf2fb;">
    <div class="section-title">🕌 SSRP (Salat Sura Recitation Plan)</div>
    {% if stats.tonight_plan_id %}
      <div style="font-size:20px; font-weight:bold; color:#1a5276;">
        {{ stats.tonight_done_sets }}/{{ stats.tonight_total_sets }} sets
      </div>
      <div style="font-size:13px; color:#566573;">{{ stats.tonight_plan_name }} [{{ stats.tonight_type_name }}]</div>
      <a class="btn" style="background:#1a5276; display:inline-block; text-decoration:none; margin-top:8px;" href="{{ url_for('ssrp_tonight') }}">
        🕌 SSRP
      </a>
    {% else %}
      <div style="font-size:14px; color:#566573;">No SSRP plan yet.</div>
    {% endif %}
  </div>
  {% endif %}

  <div class="card" style="background:#eafaf1;">
    <div class="section-title">📿 Simple Plan for Today</div>
    <p style="font-size:13px; color:#566573; margin-top:0;">
      {% if today_plan_exists %}You already have a plan for today.{% else %}Busy day? Jot down just what matters.{% endif %}
    </p>
    <a class="btn btn-save" href="{{ url_for('today_plan') }}" style="display:inline-block; text-decoration:none;">
      📿 Open Today's Plan
    </a>
  </div>

  <div class="card">
    <div class="section-title">📿 My Sura Memorization</div>
    <p style="font-size:13px; color:#566573; margin-top:0;">Record and manage your Hifz entries.</p>
    <a class="btn" style="background:#6c3483; display:inline-block; text-decoration:none;" href="{{ url_for('memorization') }}">
      📿 Open My Sura Memorization
    </a>
  </div>

  <div class="card">
    <div class="section-title">📖 Browse &amp; Search Suras</div>
    <p style="font-size:13px; color:#566573; margin-top:0;">Reference info for any sura — verses, Juz, pages.</p>
    <a class="btn" style="background:#1a5276; display:inline-block; text-decoration:none;" href="{{ url_for('suras_browse') }}">
      📖 Open Browse Suras
    </a>
  </div>

  <div class="card">
    <div class="section-title">🎯 Learn Sura Sequence</div>
    <p style="font-size:13px; color:#566573; margin-top:0;">Quiz yourself on sura order — a sequence window and a quick quiz.</p>
    <a class="btn" style="background:#148f77; display:inline-block; text-decoration:none;" href="{{ url_for('lss_home') }}">
      🎯 Open Learn Sura Sequence
    </a>
  </div>

  <div class="card">
    <div class="section-title">📜 Quran Text Viewer</div>
    <p style="font-size:13px; color:#566573; margin-top:0;">View any sura's Arabic text, color-coded by memorization status.</p>
    <a class="btn" style="background:#5b2c6f; display:inline-block; text-decoration:none;" href="{{ url_for('quran_viewer') }}">
      📜 Open Quran Text Viewer
    </a>
  </div>

  <div class="card">
    <div class="section-title">🔊 Audio Playback</div>
    <p style="font-size:13px; color:#566573; margin-top:0;">Listen to verse-by-verse recitation audio.</p>
    <a class="btn" style="background:#a04000; display:inline-block; text-decoration:none;" href="{{ url_for('audio_home') }}">
      🔊 Open Audio Playback
    </a>
  </div>

  <div class="card">
    <div class="section-title">📊 Progress Report</div>
    <p style="font-size:13px; color:#566573; margin-top:0;">A printable, date-range summary across every module.</p>
    <a class="btn" style="background:#1a5276; display:inline-block; text-decoration:none;" href="{{ url_for('progress_report') }}">
      📊 Open Progress Report
    </a>
  </div>

  <div class="card">
    <div class="section-title">🔁 Revision Log</div>
    <p style="font-size:13px; color:#566573; margin-top:0;">Log what you revised today.</p>
    <a class="btn" style="background:#1a5276; display:inline-block; text-decoration:none;" href="{{ url_for('revision_log') }}">
      🔁 Open Revision Log
    </a>
  </div>

  <div class="card">
    <div class="section-title">📖 QCP Daily Check-In</div>
    <p style="font-size:13px; color:#566573; margin-top:0;">Mark today's Quran reading Done, Not Done, or Partial.</p>
    <a class="btn" style="background:#a04000; display:inline-block; text-decoration:none;" href="{{ url_for('qcp_checkin') }}">
      📖 Open QCP Check-In
    </a>
  </div>

  <div class="card">
    <div class="section-title">🔍📖💭 FSR Check-In</div>
    <p style="font-size:13px; color:#566573; margin-top:0;">Mark Find / Study / Reflect stages done for your lessons.</p>
    <a class="btn" style="background:#6c3483; display:inline-block; text-decoration:none;" href="{{ url_for('fsr_checkin') }}">
      🔍📖💭 Open FSR Check-In
    </a>
  </div>

  <div class="card">
    <div class="section-title">🎯 Special Memo Goal Plans</div>
    <p style="font-size:13px; color:#566573; margin-top:0;">Mark items memorized in your goal plans.</p>
    <a class="btn" style="background:#6c3483; display:inline-block; text-decoration:none;" href="{{ url_for('smgp_list') }}">
      🎯 Open Goal Plans
    </a>
  </div>

  {% if session_is_admin %}
  <div class="card">
    <div class="section-title">📚 Tafseer References <span style="font-size:11px; color:#7d6608;">(Admin only)</span></div>
    <p style="font-size:13px; color:#566573; margin-top:0;">Browse tafseer entries by sura.</p>
    <a class="btn" style="background:#5b2c6f; display:inline-block; text-decoration:none;" href="{{ url_for('tafseer_view') }}">
      📚 Open Tafseer References
    </a>
  </div>
  {% endif %}

  <div class="card">
    <div class="section-title">🗄️ Data &amp; Backup</div>
    <p style="font-size:13px; color:#566573; margin-top:0;">Download a copy of your data.</p>
    <a class="btn" style="background:#1a5276; display:inline-block; text-decoration:none;" href="{{ url_for('data_backup') }}">
      🗄️ Open Data &amp; Backup
    </a>
  </div>
</main>
{% endblock %}