{% extends "base.html" %}
{% block title %}QCP Check-In — IslamInLife Quran App{% endblock %}
{% block body %}
<header>
  <h1 title="Quran Completion &amp; Its Plan">📖 QCP</h1>
  <div><a href="{{ url_for('qcp_tracker') }}">Tracker</a> &nbsp;·&nbsp; <a href="{{ url_for('qcp_completions') }}">Completions</a> &nbsp;·&nbsp; <a href="{{ url_for('qcp_recitation') }}">Recitation Revision</a> &nbsp;·&nbsp; {{ display_name }} &nbsp;·&nbsp; <a href="{{ url_for('home') }}">Home</a></div>
</header>
<main>
  {% include "_qcp_banner.html" %}
  <div id="msgBox"></div>

  {% if not plan %}
    <div class="card">
      <p>No active QCP plan yet.</p>
      <a class="btn btn-save" style="display:inline-block; text-decoration:none;" href="{{ url_for('qcp_new_plan') }}">
        ➕ Create a QCP Plan
      </a>
    </div>
  {% else %}
    {% if missed_days %}
    <div class="card" style="background:#fef9e7; border:1px solid #f7dc6f;">
      <div class="section-title" style="margin-bottom:6px;">⏰ Compensation Reminder</div>
      <p style="font-size:13px; color:#7d6608; margin-top:0;">
        You planned to compensate missed days: <strong>{{ plan.compensation_time }}</strong>.
        {{ missed_days|length }} day(s) still need catching up:
      </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 }}</span>
        <a href="#" onclick="markCompensated('{{ d.log_date }}'); return false;" style="font-size:13px; color:#1a7a4a;">✅ Mark as Compensated</a>
      </div>
      {% endfor %}
    </div>
    {% endif %}

    <div class="card" style="background:#eaf2fb;">
      <div style="font-size:13px; color:#566573;">Daily target: {{ plan.daily_pages }} pages/day</div>
      <div id="pctText" style="font-size:26px; font-weight:bold; color:#1a5276; margin-top:4px;">
        {{ progress.pct_pages }}% complete
      </div>
      <div style="font-size:13px; color:#566573;">
        {{ progress.total_done }} / {{ progress.total_pages }} pages &middot;
        {% if progress.ahead_behind >= 0 %}
          <span style="color:#1a7a4a;">{{ progress.ahead_behind }} pages ahead</span>
        {% else %}
          <span style="color:#a93226;">{{ -progress.ahead_behind }} pages behind</span>
        {% endif %}
      </div>
      {% if progress.days_auto > 0 %}
      <div style="font-size:12px; color:#7d6608; margin-top:4px;">
        🤖 {{ progress.days_auto }} of {{ progress.days_done }} "Done" day(s) were auto-assumed, not confirmed by you.
        <a href="{{ url_for('qcp_tracker') }}">Review &amp; correct on the Tracker</a>.
      </div>
      {% endif %}
      <button class="btn-save" style="margin-top:10px;" onclick="document.getElementById('qcpPlanDetailsModal').classList.add('open')">🔍 See Your QCP Plan</button>
      <button class="btn-delete" style="margin-top:10px;" onclick="deleteQcpPlan()">🗑 Delete This Plan</button>
    </div>

    <div class="card">
      <div class="section-title">Today ({{ today }})</div>
      {% if today_entry %}
        <p style="font-size:14px;">
          Already logged today: <strong>{{ today_entry.status | replace('_', ' ') | capitalize }}</strong>
          ({{ today_entry.pages_done }} pages). Logging again below will update it.
        </p>
      {% endif %}
      <button class="btn-save" onclick="logQcp('done')">✅ Done Today</button>
      <button class="btn-delete" onclick="logQcp('not_done')">❌ Not Done Today</button>
      <div style="margin-top:12px;">
        <label>◐ Partial — pages actually read today</label>
        <div class="row">
          <div><input type="text" id="partialPages" placeholder="e.g. 3"></div>
          <div><button class="btn-clear" onclick="logQcp('partial')" style="width:100%;">Log Partial</button></div>
        </div>
      </div>
      <label>Notes (optional)</label>
      <textarea id="qcpNotes" placeholder="optional..."></textarea>
    </div>

    <div class="card">
      <div class="section-title">This Week</div>
      <p style="font-size:14px;">{{ progress.week_done }} done &middot; {{ progress.week_missed }} missed &middot; {{ progress.week_pages }} pages read</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')">✕ Close</button>
        <h2>🔍 Your QCP Plan</h2>
        <p style="font-size:13px; color:#7f8c8d; margin-top:-8px;">
          Read-only — these were fixed when the plan was created. To change them, delete this plan and create a new one.
        </p>
        <table class="no-stack">
          <tr><td><strong>Target Days</strong></td><td>{{ plan.target_days }} days</td></tr>
          <tr><td><strong>Daily Pages Target</strong></td><td>{{ plan.daily_pages }} pages/day</td></tr>
          <tr><td><strong>Start Date</strong></td><td>{{ plan.start_date }}</td></tr>
          <tr><td><strong>Entry Mode</strong></td><td>
            {% if plan.entry_mode == 'auto_done' %}Auto-Done (assumed done unless marked otherwise){% else %}Manual (choose Done/Not Done/Partial){% endif %}
          </td></tr>
          <tr><td><strong>Progress Tracker View</strong></td><td>
            {% if plan.progress_tracker == 'not_done_only' %}Show Not-Done Only{% else %}Show All Days{% endif %}
          </td></tr>
          <tr><td><strong>Compensation Time</strong></td><td>{{ plan.compensation_time or 'None' }}</td></tr>
          <tr><td><strong>Notes</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('✅ Logged.', false);
      else showMsg(body.error || 'Could not log this.', true);
    });
}

function deleteQcpPlan() {
  const confirmed = confirm(
    "Delete this QCP plan permanently?\n\n" +
    "This will erase the plan and every day you've logged for it. " +
    "This CANNOT be undone -- there is no way to recover it once deleted."
  );
  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('🗑 Plan permanently deleted.', false); }
      else showMsg(body.error || 'Could not delete this plan.', 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('✅ Marked as compensated.', false);
      else showMsg(body.error || 'Could not update this.', true);
    });
}
</script>
{% endblock %}