{% extends "base.html" %}
{% block title %}QCP চেক-ইন — ইসলামইনলাইফ কুরআন অ্যাপ{% endblock %}
{% block body %}
<header>
  <h1 title="কুরআন সম্পূর্ণকরণ ও এর পরিকল্পনা">📖 QCP</h1>
  <div><a href="{{ url_for('qcp_tracker') }}">ট্র্যাকার</a> &nbsp;·&nbsp; <a href="{{ url_for('qcp_completions') }}">সম্পন্নসমূহ</a> &nbsp;·&nbsp; <a href="{{ url_for('qcp_recitation') }}">তিলাওয়াত পুনরাবৃত্তি</a> &nbsp;·&nbsp; {{ display_name }} &nbsp;·&nbsp; <a href="{{ url_for('home') }}">হোম</a></div>
</header>
<main>
  {% include "_qcp_banner.html" %}
  <div id="msgBox"></div>

  {% if not plan %}
    <div class="card">
      <p>এখনও কোনো সক্রিয় QCP পরিকল্পনা নেই।</p>
      <a class="btn btn-save" style="display:inline-block; text-decoration:none;" href="{{ url_for('qcp_new_plan') }}">
        ➕ একটি QCP পরিকল্পনা তৈরি করুন
      </a>
    </div>
  {% else %}
    {% if missed_days %}
    <div class="card" style="background:#fef9e7; border:1px solid #f7dc6f;">
      <div class="section-title" style="margin-bottom:6px;">⏰ পূরণের অনুস্মারক</div>
      <p style="font-size:13px; color:#7d6608; margin-top:0;">
        আপনি মিস হওয়া দিন পূরণ করার পরিকল্পনা করেছিলেন: <strong>{{ plan.compensation_time }}</strong>।
        {{ missed_days|length }}টি দিন এখনও পূরণ করা বাকি:
      </p>
      {% for d in missed_days %}
      <div style="display:flex; justify-content:space-between; align-items:center; padding:6px 0; border-top:1px solid #f9e79f;">
        <span style="font-size:13px;">{{ d.log_date | fmt_date }}</span>
        <a href="#" onclick="markCompensated('{{ d.log_date }}'); return false;" style="font-size:13px; color:#1a7a4a;">✅ পূরণ হয়েছে হিসেবে চিহ্নিত করুন</a>
      </div>
      {% endfor %}
    </div>
    {% endif %}

    <div class="card" style="background:#eaf2fb;">
      <div style="font-size:13px; color:#566573;">দৈনিক লক্ষ্য: {{ plan.daily_pages }} পৃষ্ঠা/দিন</div>
      <div id="pctText" style="font-size:26px; font-weight:bold; color:#1a5276; margin-top:4px;">
        {{ progress.pct_pages }}% সম্পন্ন
      </div>
      <div style="font-size:13px; color:#566573;">
        {{ progress.total_done }} / {{ progress.total_pages }} পৃষ্ঠা &middot;
        {% if progress.ahead_behind >= 0 %}
          <span style="color:#1a7a4a;">{{ progress.ahead_behind }} পৃষ্ঠা এগিয়ে</span>
        {% else %}
          <span style="color:#a93226;">{{ -progress.ahead_behind }} পৃষ্ঠা পিছিয়ে</span>
        {% endif %}
      </div>
      {% if progress.days_auto > 0 %}
      <div style="font-size:12px; color:#7d6608; margin-top:4px;">
        🤖 {{ progress.days_done }}টি "সম্পন্ন" দিনের মধ্যে {{ progress.days_auto }}টি স্বয়ংক্রিয়ভাবে ধরে নেওয়া হয়েছে, আপনি নিশ্চিত করেননি।
        <a href="{{ url_for('qcp_tracker') }}">ট্র্যাকারে পর্যালোচনা ও সংশোধন করুন</a>।
      </div>
      {% endif %}
      <button class="btn-save" style="margin-top:10px;" onclick="document.getElementById('qcpPlanDetailsModal').classList.add('open')">🔍 আপনার QCP পরিকল্পনা দেখুন</button>
      <button class="btn-delete" style="margin-top:10px;" onclick="deleteQcpPlan()">🗑 এই পরিকল্পনা মুছে ফেলুন</button>
    </div>

    <div class="card">
      <div class="section-title">আজ ({{ today | fmt_date }})</div>
      {% if today_entry %}
        <p style="font-size:14px;">
          আজ ইতিমধ্যে লগ করা হয়েছে: <strong>{{ today_entry.status | bn_status }}</strong>
          ({{ today_entry.pages_done }} পৃষ্ঠা)। নিচে আবার লগ করলে এটি আপডেট হবে।
        </p>
      {% endif %}
      <button class="btn-save" onclick="logQcp('done')">✅ আজ সম্পন্ন</button>
      <button class="btn-delete" onclick="logQcp('not_done')">❌ আজ সম্পন্ন হয়নি</button>
      <div style="margin-top:12px;">
        <label>◐ আংশিক — আজ প্রকৃতপক্ষে যত পৃষ্ঠা পড়া হয়েছে</label>
        <div class="row">
          <div><input type="text" id="partialPages" placeholder="যেমন 3"></div>
          <div><button class="btn-clear" onclick="logQcp('partial')" style="width:100%;">আংশিক লগ করুন</button></div>
        </div>
      </div>
      <label>নোট (ঐচ্ছিক)</label>
      <textarea id="qcpNotes" placeholder="ঐচ্ছিক..."></textarea>
    </div>

    <div class="card">
      <div class="section-title">এই সপ্তাহ</div>
      <p style="font-size:14px;">{{ progress.week_done }}টি সম্পন্ন &middot; {{ progress.week_missed }}টি মিস &middot; {{ progress.week_pages }} পৃষ্ঠা পড়া হয়েছে</p>
    </div>

    <div class="qpa-modal-overlay" id="qcpPlanDetailsModal">
      <div class="qpa-modal-box">
        <button class="qpa-modal-close" onclick="document.getElementById('qcpPlanDetailsModal').classList.remove('open')">✕ বন্ধ করুন</button>
        <h2>🔍 আপনার QCP পরিকল্পনা</h2>
        <p style="font-size:13px; color:#7f8c8d; margin-top:-8px;">
          শুধুমাত্র পঠনযোগ্য — পরিকল্পনা তৈরির সময় এগুলো নির্ধারিত হয়েছিল। পরিবর্তন করতে, এই পরিকল্পনাটি মুছে নতুন একটি তৈরি করুন।
        </p>
        <table class="no-stack">
          <tr><td><strong>লক্ষ্য দিন</strong></td><td>{{ plan.target_days }} দিন</td></tr>
          <tr><td><strong>দৈনিক পৃষ্ঠা লক্ষ্য</strong></td><td>{{ plan.daily_pages }} পৃষ্ঠা/দিন</td></tr>
          <tr><td><strong>শুরুর তারিখ</strong></td><td>{{ plan.start_date | fmt_date }}</td></tr>
          <tr><td><strong>এন্ট্রি মোড</strong></td><td>
            {% if plan.entry_mode == 'auto_done' %}স্বয়ংক্রিয়-সম্পন্ন (অন্যথায় চিহ্নিত না করলে সম্পন্ন ধরে নেওয়া হয়){% else %}ম্যানুয়াল (সম্পন্ন/সম্পন্ন হয়নি/আংশিক নির্বাচন করুন){% endif %}
          </td></tr>
          <tr><td><strong>অগ্রগতি ট্র্যাকার ভিউ</strong></td><td>
            {% if plan.progress_tracker == 'not_done_only' %}শুধুমাত্র সম্পন্ন-হয়নি দেখান{% else %}সকল দিন দেখান{% endif %}
          </td></tr>
          <tr><td><strong>পূরণের সময়</strong></td><td>{{ plan.compensation_time or 'কোনোটি নয়' }}</td></tr>
          <tr><td><strong>নোট</strong></td><td>{{ plan.plan_note or '—' }}</td></tr>
        </table>
      </div>
    </div>
  {% endif %}
</main>

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

function logQcp(action) {
  const fd = new FormData();
  fd.append('action', action);
  fd.append('notes', document.getElementById('qcpNotes').value);
  if (action === 'partial') fd.append('pages_done', document.getElementById('partialPages').value);

  fetch(APP_PREFIX + '/api/qcp/log', { method: 'POST', body: fd })
    .then(r => r.json().then(d => ({ ok: r.ok, body: d })))
    .then(({ ok, body }) => {
      if (ok && body.ok) showMsg('✅ লগ করা হয়েছে।', false);
      else showMsg(body.error || 'এটি লগ করা যায়নি।', true);
    });
}

function deleteQcpPlan() {
  const confirmed = confirm(
    "এই QCP পরিকল্পনা স্থায়ীভাবে মুছে ফেলবেন?\n\n" +
    "এটি পরিকল্পনা এবং এর জন্য লগ করা প্রতিটি দিন মুছে ফেলবে। " +
    "এটি পূর্বাবস্থায় ফেরানো যাবে না — একবার মুছে ফেলার পর এটি পুনরুদ্ধার করার কোনো উপায় নেই।"
  );
  if (!confirmed) return;

  fetch(APP_PREFIX + '/api/qcp/delete-plan', { method: 'POST' })
    .then(r => r.json().then(d => ({ ok: r.ok, body: d })))
    .then(({ ok, body }) => {
      if (ok && body.ok) { showMsg('🗑 পরিকল্পনা স্থায়ীভাবে মুছে ফেলা হয়েছে।', false); }
      else showMsg(body.error || 'এই পরিকল্পনা মুছে ফেলা যায়নি।', true);
    });
}

function markCompensated(logDate) {
  const fd = new FormData();
  fd.append('log_date', logDate);
  fetch(APP_PREFIX + '/api/qcp/mark-compensated', { method: 'POST', body: fd })
    .then(r => r.json().then(d => ({ ok: r.ok, body: d })))
    .then(({ ok, body }) => {
      if (ok && body.ok) showMsg('✅ পূরণ হয়েছে হিসেবে চিহ্নিত করা হয়েছে।', false);
      else showMsg(body.error || 'এটি আপডেট করা যায়নি।', true);
    });
}
</script>
{% endblock %}