{% extends "base.html" %}
{% block title %}#{{ prog.n }} {{ prog.title }} — Python 108{% endblock %}
{% block content %}
<div class="program-page">

  <!-- Breadcrumb -->
  <div class="breadcrumb">
    <a href="{{ url_for('dashboard') }}">Dashboard</a>
    <span>›</span>
    <span>{{ prog.mod }}</span>
    <span>›</span>
    <span>Program {{ prog.n }}</span>
  </div>

  <!-- Program header -->
  <div class="prog-header">
    <div class="prog-header-left">
      <div class="prog-num-big">#{{ prog.n }}</div>
      <div>
        <h1 class="prog-title">{{ prog.title }}</h1>
        <span class="mod-badge">{{ prog.mod }}</span>
      </div>
    </div>
    <div style="display:flex;gap:.6rem;align-items:center;flex-wrap:wrap">
      <button id="bookmark-btn"
        class="btn {% if is_bookmarked %}btn-bookmarked{% else %}btn-ghost{% endif %}"
        onclick="toggleBookmark({{ prog.n }})"
        title="{{ 'Remove bookmark' if is_bookmarked else 'Bookmark this program' }}">
        {% if is_bookmarked %}🔖 Saved{% else %}🔖 Save{% endif %}
      </button>
      <button id="complete-btn"
        class="btn {% if is_done %}btn-done{% else %}btn-primary{% endif %}"
        onclick="toggleComplete({{ prog.n }})">
        {% if is_done %}✓ Completed{% else %}Mark as complete{% endif %}
      </button>
    </div>
  </div>

  <!-- What & learns -->
  <div class="prog-meta-row">
    <div class="meta-card">
      <div class="meta-label">What this program teaches</div>
      <div class="meta-val">{{ prog.what }}</div>
    </div>
    <div class="meta-card">
      <div class="meta-label">Key concepts</div>
      <ul class="learns-list">
        {% for item in prog.learns %}<li>{{ item }}</li>{% endfor %}
      </ul>
    </div>
  </div>

  <!-- Code block -->
  <div class="code-section">
    <div class="code-header">
      <span class="code-label">Python Code</span>
      <button class="btn-copy" onclick="copyCode()">Copy</button>
    </div>
    <pre><code class="language-python" id="prog-code">{{ prog.code }}</code></pre>
  </div>

  <!-- Output block -->
  <div class="output-section">
    <div class="output-header">Expected Output</div>
    <pre class="output-box">{{ prog.output }}</pre>
  </div>

  <!-- ── Inline Python runner ── -->
  <div class="runner-section">
    <div class="runner-header">
      <span class="runner-title">▶ Try it yourself</span>
      <span class="pyodide-status" id="prog-status"></span>
      <div class="runner-header-actions">
        <button class="btn btn-ghost btn-sm" onclick="resetToOriginal()">Reset code</button>
        <button id="prog-run-btn" class="btn btn-run" onclick="runProgram()">▶ Run</button>
      </div>
    </div>
    <textarea
      id="prog-editor"
      class="sandbox-editor runner-editor"
      spellcheck="false"
      autocomplete="off"
      autocorrect="off"
      autocapitalize="off"
      oninput="autoResize(this)"
      onkeydown="handleTab(event); if((event.ctrlKey||event.metaKey)&&event.key==='Enter'){event.preventDefault();runProgram()}"
    >{{ prog.code }}</textarea>
    <div class="runner-output-wrap">
      <div class="runner-output-label">
        Output
        <button class="btn btn-ghost btn-sm" onclick="clearOutput(document.getElementById('prog-output'))">Clear</button>
      </div>
      <pre id="prog-output" class="sandbox-output runner-output">Output will appear here…</pre>
    </div>
    <div class="editor-footer">
      <span class="editor-hint"><kbd>Ctrl</kbd>+<kbd>Enter</kbd> to run &nbsp;·&nbsp; Tab = 4 spaces &nbsp;·&nbsp; Edit freely — Reset button restores original</span>
    </div>
  </div>

  <!-- Streak badge -->
  {% if streak.current_streak > 0 %}
  <div class="prog-streak-badge">
    🔥 Day {{ streak.current_streak }} of your streak
    {% if streak.studied_today %} · <span style="color:var(--teal-dk)">✓ Studied today</span>{% endif %}
  </div>
  {% endif %}

  <!-- Assignment deadline badge -->
  {% if deadline %}
  <div class="deadline-badge {% if deadline['overdue'] %}deadline-overdue{% elif deadline['completed'] %}deadline-done{% else %}deadline-pending{% endif %}">
    {% if deadline['completed'] %}
      ✓ Assignment completed
    {% elif deadline['overdue'] %}
      ⚠ Assignment overdue — was due {{ deadline['due_date'] }}
    {% else %}
      📋 Assignment due: {{ deadline['due_date'] }}
    {% endif %}
    {% if deadline['note'] %} · {{ deadline['note'] }}{% endif %}
  </div>
  {% endif %}

  <!-- Teacher comments -->
  {% if prog_comments %}
  <div class="teacher-comments-box">
    <div class="tc-header">💬 Teacher feedback</div>
    {% for c in prog_comments %}
    <div class="tc-item">
      <div class="tc-meta">
        <span class="tc-teacher">{{ c['teacher_name'] }}</span>
        <span class="tc-stars">
          {% for i in range(1,6) %}{{ '★' if i <= c['rating'] else '☆' }}{% endfor %}
        </span>
        <span class="tc-date">{{ c['updated_at'][:10] }}</span>
      </div>
      <div class="tc-text">{{ c['comment'] }}</div>
    </div>
    {% endfor %}
  </div>
  {% endif %}

  <!-- Exercise teaser -->
  {% if exercise %}
  <div class="exercise-teaser">
    <div class="teaser-left">
      <span class="teaser-badge badge-{{ exercise.diff|lower }}">{{ exercise.diff }}</span>
      <div class="teaser-title">Exercise {{ prog.n }}: Ready to practice?</div>
      <div class="teaser-q">{{ exercise.q[:120] }}...</div>
    </div>
    <a href="{{ url_for('exercise', n=prog.n) }}" class="btn btn-outline">Try exercise →</a>
  </div>
  {% endif %}

  <!-- ── My Notes ── -->
  <div class="notes-panel">
    <div class="notes-header">
      <span class="notes-title">📝 My Notes</span>
      <span class="notes-saved-msg" id="note-saved-msg"></span>
    </div>
    <textarea
      id="note-editor"
      class="notes-editor"
      placeholder="Write your own notes, questions, or observations about this program…"
      oninput="scheduleNoteSave()"
    >{{ note }}</textarea>
    <div class="notes-footer">
      Auto-saves as you type &nbsp;·&nbsp;
      <a href="{{ url_for('bookmarks') }}">View all notes →</a>
    </div>
  </div>

  <!-- Navigation -->
  <div class="prog-nav">
    {% if prev_n %}
    <a href="{{ url_for('program', n=prev_n) }}" class="btn btn-outline">← Program {{ prev_n }}</a>
    {% else %}<span></span>{% endif %}
    <a href="{{ url_for('dashboard') }}" class="btn btn-ghost">Dashboard</a>
    {% if next_n %}
    <a href="{{ url_for('program', n=next_n) }}" class="btn btn-outline">Program {{ next_n }} →</a>
    {% else %}<span></span>{% endif %}
  </div>

</div>

<script src="{{ url_for('static', filename='js/pyodide_runner.js') }}"></script>
<script src="{{ url_for('static', filename='js/gamification.js') }}"></script>
<script>
const ORIGINAL_CODE = {{ prog.code | tojson }};
const progEditor    = document.getElementById('prog-editor');
const progOutput    = document.getElementById('prog-output');
const progRunBtn    = document.getElementById('prog-run-btn');
const progStatus    = document.getElementById('prog-status');

ensurePyodide(progStatus);
autoResize(progEditor);

async function runProgram() {
  await runPython(progEditor.value, progOutput, progStatus, progRunBtn);
}
function resetToOriginal() {
  resetCode(progEditor, ORIGINAL_CODE);
  clearOutput(progOutput);
}

// ── Complete toggle ──────────────────────────────────────────
function toggleComplete(n) {
  fetch('/toggle_program/' + n, {method:'POST'})
    .then(r => r.json())
    .then(data => {
      // Update navbar streak
      const badge = document.getElementById('nav-streak-count');
      if (badge && data.streak !== undefined) badge.textContent = data.streak;
      // Show XP toast
      if (data.xp_earned && data.xp_earned > 0) {
        showXPToast('+' + data.xp_earned + ' XP');
      }
      // Show badge overlay if new badges
      if (data.new_badges && data.new_badges.length > 0) {
        showBadgeOverlayDynamic(data.new_badges);
      } else {
        location.reload();
      }
    });
}

// ── Bookmark toggle ──────────────────────────────────────────
function toggleBookmark(n) {
  fetch('/toggle_bookmark/' + n, {method:'POST'})
    .then(r => r.json())
    .then(data => {
      const btn = document.getElementById('bookmark-btn');
      if (data.bookmarked) {
        btn.textContent = '🔖 Saved';
        btn.className = 'btn btn-bookmarked';
      } else {
        btn.textContent = '🔖 Save';
        btn.className = 'btn btn-ghost';
      }
    });
}

// ── Note auto-save ───────────────────────────────────────────
let noteSaveTimer = null;
function scheduleNoteSave() {
  clearTimeout(noteSaveTimer);
  noteSaveTimer = setTimeout(saveNote, 800);
}
function saveNote() {
  const note = document.getElementById('note-editor').value;
  const msg  = document.getElementById('note-saved-msg');
  fetch('/save_note/{{ prog.n }}', {
    method: 'POST',
    headers: {'Content-Type': 'application/json'},
    body: JSON.stringify({note})
  }).then(() => {
    msg.textContent = 'Saved ✓';
    setTimeout(() => msg.textContent = '', 2000);
  });
}

// ── Copy code ────────────────────────────────────────────────
function copyCode() {
  const code = document.getElementById('prog-code').innerText;
  navigator.clipboard.writeText(code).then(() => {
    const btn = document.querySelector('.btn-copy');
    btn.textContent = 'Copied!';
    setTimeout(() => btn.textContent = 'Copy', 2000);
  });
}
</script>
{% endblock %}