{% extends "base.html" %}
{% block title %}হোম — ইসলামইনলাইফ কুরআন অ্যাপ{% endblock %}

{% block extra_style %}
<style>
  /* Scoped to the Home page only -- this block is empty on every other
     template, so none of this touches any other page's appearance. */
  body { background: #0d0d10 !important; }
  .qpa-home-bar { background: #151519 !important; border-bottom: 2px solid #2a2a30 !important; }

  .iqa-topbar {
    background: #151519; color: #f0f0f2; padding: 16px 20px;
    display: flex; justify-content: space-between; align-items: center;
    flex-wrap: wrap; gap: 8px; border-radius: 12px; margin-bottom: 18px;
  }
  .iqa-topbar h1 { font-size: 19px; margin: 0; }
  .iqa-topbar div { font-size: 13px; }
  .iqa-topbar a { color: #8ecdf7; text-decoration: none; }
  .iqa-topbar a:hover { text-decoration: underline; }

  .iqa-stats-strip { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 22px; }
  .iqa-stats-strip .stat {
    flex: 1; min-width: 120px; background: #17171c; border: 1px solid #2a2a30;
    border-radius: 10px; padding: 12px 14px;
  }
  .iqa-stats-strip .stat .label { font-size: 11px; color: #9a9aa5; }
  .iqa-stats-strip .stat .value { font-size: 22px; font-weight: bold; color: #ffffff; }
  .iqa-stats-strip .stat .sub { font-size: 10px; color: #7a7a85; }

  .iqa-section {
    margin-bottom: 24px; border: 1px solid rgba(130, 170, 195, 0.45);
    border-radius: 12px; padding: 14px;
  }
  .iqa-section-header {
    background: #17171c; color: #f0f0f2; font-weight: bold; font-size: 17px;
    padding: 10px 16px; border-radius: 8px; margin-bottom: 10px;
    border-left: 4px solid #3a3a42;
  }
  .iqa-btn-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 10px; }
  .iqa-btn {
    display: flex; flex-direction: row; align-items: center; justify-content: center;
    gap: 8px; text-decoration: none; color: #ffffff; font-weight: bold; font-size: 13px;
    line-height: 1.2; border-radius: 8px; padding: 11px 14px; text-align: center;
    box-shadow: 0 2px 5px rgba(0,0,0,0.35);
    transition: transform 0.1s ease, filter 0.15s ease;
  }
  .iqa-btn .icon { font-size: 16px; flex-shrink: 0; }
  .iqa-btn .badge { font-size: 10px; font-weight: normal; opacity: 0.85; }
  .iqa-btn:hover { filter: brightness(1.12); transform: translateY(-1px); }
  .iqa-btn:active { transform: translateY(0); filter: brightness(0.95); }

  @media (max-width: 420px) {
    .iqa-btn-grid { grid-template-columns: repeat(2, 1fr); }
    .iqa-btn { font-size: 12px; padding: 10px 8px; }
  }
</style>
{% endblock %}

{% block body %}
<header class="iqa-topbar">
  <h1>📖 ইসলামইনলাইফ কুরআন অ্যাপ</h1>
  <div>{{ display_name }} &nbsp;·&nbsp; <a href="{{ url_for('memorization_plannings_summary') }}">মুখস্থকরণ পরিকল্পনা</a> &nbsp;·&nbsp; <a href="{{ url_for('account') }}">অ্যাকাউন্ট</a> &nbsp;·&nbsp; <a href="{{ url_for('logout') }}">লগআউট</a></div>
</header>
<main>

  <div class="iqa-stats-strip">
    <div class="stat">
      <div class="label">📖 হিফজ এন্ট্রি</div>
      <div class="value">{{ stats.hifz_count }}</div>
      <div class="sub">{{ stats.memorized_count }}টি মুখস্থ</div>
    </div>
    <div class="stat">
      <div class="label">📝 আজ পুনরাবৃত্তি</div>
      <div class="value">{{ stats.revised_today }}</div>
      <div class="sub">সেশন</div>
    </div>
    <div class="stat">
      <div class="label">📌 FSR অপেক্ষমাণ</div>
      <div class="value">{{ stats.fsr_pending }}</div>
      <div class="sub">পাঠ</div>
    </div>
    <div class="stat">
      <div class="label">🗓️ পরিকল্পনার সংখ্যা</div>
      <div class="value">{{ stats.plan_count }}</div>
      <div class="sub">মুখস্থকরণ পরিকল্পনা</div>
    </div>
  </div>

  <div class="iqa-section">
    <div class="iqa-section-header">🕒 আজকের কার্যক্রম</div>
    <div class="iqa-btn-grid">
      <a class="iqa-btn" style="background:#1a7a4a;" href="{{ url_for('today_plan') }}"><span class="icon">📿</span>আজকের সহজ পরিকল্পনা</a>
      <a class="iqa-btn" style="background:#6c3483;" href="{{ url_for('today_in_hifz') }}"><span class="icon">📿</span>আজকের তিলাওয়াতের পুনর্বিবরণ</a>
      <a class="iqa-btn" style="background:#a04000;" href="{{ url_for('qcp_checkin') }}" title="কুরআন সম্পূর্ণকরণ ও এর পরিকল্পনা"><span class="icon">📖</span>QCP</a>
    </div>
  </div>

  <div class="iqa-section">
    <div class="iqa-section-header">📿 মুখস্থকরণ ও লক্ষ্য</div>
    <div class="iqa-btn-grid">
      <a class="iqa-btn" style="background:#1a5276;" href="{{ url_for('revision_log') }}"><span class="icon">🔁</span>পুনরাবৃত্তি লগ</a>
      <a class="iqa-btn" style="background:#6c3483;" href="{{ url_for('memorization') }}"><span class="icon">📿</span>আমার সূরা মুখস্থকরণ</a>
      <a class="iqa-btn" style="background:#148f77;" href="{{ url_for('smgp_list') }}"><span class="icon">🎯</span>বিশেষ মুখস্থকরণ লক্ষ্য পরিকল্পনা</a>
      <a class="iqa-btn" style="background:#117864;" href="{{ url_for('lss_home') }}"><span class="icon">🎯</span>সূরা ক্রম শিখুন</a>
      {% if session_is_admin %}
      <a class="iqa-btn" style="background:#1a5276;" href="{{ url_for('ssrp_tonight') }}"><span class="icon">🕌</span>SSRP<span class="badge">(শুধুমাত্র অ্যাডমিন)</span></a>
      {% endif %}
    </div>
  </div>

  <div class="iqa-section">
    <div class="iqa-section-header">📚 রেফারেন্স ও অধ্যয়ন</div>
    <div class="iqa-btn-grid">
      <a class="iqa-btn" style="background:#8e44ad;" href="{{ url_for('fsr_checkin') }}"><span class="icon">🔍📖💭</span>FSR চেক-ইন</a>
      <a class="iqa-btn" style="background:#2471a3;" href="{{ url_for('suras_browse') }}"><span class="icon">📖</span>সূরা ব্রাউজ ও অনুসন্ধান</a>
      <a class="iqa-btn" style="background:#5b2c6f;" href="{{ url_for('quran_viewer') }}"><span class="icon">📜</span>কুরআন টেক্সট ভিউয়ার</a>
      <a class="iqa-btn" style="background:#a04000;" href="{{ url_for('audio_home') }}"><span class="icon">🔊</span>অডিও প্লেব্যাক</a>
      {% if session_is_admin %}
      <a class="iqa-btn" style="background:#5b2c6f;" href="{{ url_for('tafseer_view') }}"><span class="icon">📚</span>তাফসীর রেফারেন্স<span class="badge">(শুধুমাত্র অ্যাডমিন)</span></a>
      {% endif %}
    </div>
  </div>

  <div class="iqa-section">
    <div class="iqa-section-header">📊 রিপোর্ট ও ডেটা</div>
    <div class="iqa-btn-grid">
      <a class="iqa-btn" style="background:#1a5276;" href="{{ url_for('progress_report') }}"><span class="icon">📊</span>অগ্রগতি প্রতিবেদন</a>
      <a class="iqa-btn" style="background:#283747;" href="{{ url_for('data_backup') }}"><span class="icon">🗄️</span>ডেটা ও ব্যাকআপ</a>
      {% if session_is_admin %}
      <a class="iqa-btn" style="background:#1a3a5c;" href="{{ url_for('admin_users') }}"><span class="icon">👥</span>ব্যবহারকারী ব্যবস্থাপনা<span class="badge">(শুধুমাত্র অ্যাডমিন)</span></a>
      {% endif %}
    </div>
  </div>

</main>
{% endblock %}