{% extends "base.html" %}
{% block title %}{{ student['username'] }} — Student Report{% endblock %}
{% block content %}
<div class="admin-page">

  <div class="breadcrumb">
    <a href="{{ url_for('teacher_dashboard') }}">My Classes</a>
    <span>›</span>
    <span>{{ student['username'] }}</span>
  </div>

  <div class="page-header">
    <div>
      <h1 class="page-title">{{ student['username'] }}</h1>
      <p class="page-sub">{{ student['email'] }} · Joined {{ student['created_at'][:10] }}</p>
    </div>
    <div style="display:flex;gap:.75rem;align-items:flex-start;flex-wrap:wrap">
      <div class="stat-mini-row">
        <div class="stat-mini">
          <div class="stat-mini-val">{{ pct }}%</div>
          <div class="stat-mini-lbl">Complete</div>
        </div>
        <div class="stat-mini">
          <div class="stat-mini-val">{{ stats.programs_done }}</div>
          <div class="stat-mini-lbl">Programs</div>
        </div>
        <div class="stat-mini">
          <div class="stat-mini-val">{{ stats.exercises_done }}</div>
          <div class="stat-mini-lbl">Exercises</div>
        </div>
        <div class="stat-mini">
          <div class="stat-mini-val">{{ quizzes_passed }}/12</div>
          <div class="stat-mini-lbl">Quizzes</div>
        </div>
      </div>
      {% if stats.programs_done >= 108 %}
      <a href="{{ url_for('certificate', username=student['username']) }}"
         class="btn btn-outline" style="align-self:center">
        🎓 Download Certificate
      </a>
      {% endif %}
    </div>
  </div>

  <!-- Overall progress bar -->
  <div class="progress-section" style="margin-bottom:1.5rem">
    <div class="progress-bar-track">
      <div class="progress-bar-fill" style="width:{{ pct }}%"></div>
    </div>
    <div class="progress-labels">
      <span>0</span><span>27</span><span>54</span><span>81</span><span>108</span>
    </div>
  </div>

  <!-- ── Weak spots detector ── -->
  {% if weak_spots %}
  <div class="section-block weak-spots-block">
    <h2 class="section-heading">🎯 Weak Spots — Focus Areas</h2>
    <p class="section-sub" style="margin-bottom:1rem">
      Modules ranked by combined program completion + quiz performance.
      Top 3 need the most attention.
    </p>
    <div class="weak-spots-grid">
      {% for ws in weak_spots[:6] %}
      <div class="ws-card {% if loop.index <= 3 %}ws-weak{% endif %}">
        <div class="ws-header">
          <span class="ws-rank">
            {% if loop.index == 1 %}🔴{% elif loop.index == 2 %}🟠{% elif loop.index == 3 %}🟡{% else %}🟢{% endif %}
          </span>
          <span class="ws-mod">{{ ws.mod }}</span>
          {% if loop.index <= 3 %}<span class="ws-focus-tag">Focus here</span>{% endif %}
        </div>
        <div class="ws-stats">
          <div class="ws-stat">
            <div class="ws-stat-label">Programs</div>
            <div class="mini-bar-track wide">
              <div class="mini-bar-fill" style="width:{{ ws.prog_pct }}%"></div>
            </div>
            <span class="mini-pct">{{ ws.prog_done }}/{{ ws.prog_total }}</span>
          </div>
          <div class="ws-stat">
            <div class="ws-stat-label">Quiz</div>
            {% if ws.quiz_pct is not none %}
            <div class="mini-bar-track wide">
              <div class="mini-bar-fill {% if ws.quiz_passed %}bar-pass{% endif %}"
                   style="width:{{ ws.quiz_pct }}%"></div>
            </div>
            <span class="mini-pct">{{ ws.quiz_pct }}%{% if ws.quiz_passed %} ✓{% endif %}</span>
            {% else %}
            <span class="text-muted" style="font-size:.78rem">No attempt</span>
            {% endif %}
          </div>
        </div>
      </div>
      {% endfor %}
    </div>
  </div>
  {% endif %}

  <!-- ── Module breakdown ── -->
  <div class="section-block">
    <h2 class="section-heading">Progress by Module</h2>
    <div class="mod-breakdown">
      {% for m in mod_stats %}
      <div class="mod-row">
        <div class="mod-row-name">{{ m['mod'] }}</div>
        <div class="mod-row-bar">
          <div class="mini-bar-track wide">
            <div class="mini-bar-fill"
                 style="width:{{ (m['done']/m['total']*100)|round|int }}%"></div>
          </div>
        </div>
        <div class="mod-row-count">{{ m['done'] }}/{{ m['total'] }}</div>
      </div>
      {% endfor %}
    </div>
  </div>

  <!-- ── Quiz results ── -->
  <div class="section-block">
    <h2 class="section-heading">🏆 Quiz Results
      <span style="font-weight:400;font-size:.85rem;color:var(--text-3)">
        — {{ quizzes_passed }}/12 modules passed
      </span>
    </h2>
    {% if quiz_results %}
    <div class="table-wrap">
      <table class="data-table">
        <thead><tr><th>Module</th><th>Best score</th><th>Status</th></tr></thead>
        <tbody>
          {% for mod_name, r in quiz_results.items() %}
          <tr>
            <td>{{ mod_name }}</td>
            <td><span class="pill-num">{{ r['score'] }}/{{ r['total'] }}</span></td>
            <td>
              {% if r['passed'] %}
              <span class="status-pill status-active">✓ Passed</span>
              {% else %}
              <span class="status-pill status-inactive">Not yet</span>
              {% endif %}
            </td>
          </tr>
          {% endfor %}
        </tbody>
      </table>
    </div>
    {% else %}
    <p class="empty-note">No quiz attempts yet.</p>
    {% endif %}
  </div>

  <!-- ── Teacher comments ── -->
  <div class="section-block">
    <h2 class="section-heading">💬 My Comments on {{ student['username'] }}'s Programs</h2>
    <p class="section-sub" style="margin-bottom:1rem">
      Click any completed program below to leave or edit a comment and star rating.
    </p>

    {% set completed_progs = all_programs | selectattr('n') | list %}
    {% set has_comments = my_comments|length > 0 %}

    {% if has_comments %}
    <div class="comments-list" style="margin-bottom:1.5rem">
      {% for prog_n, c in my_comments.items() %}
      {% set prog = namespace(found=none) %}
      {% for p in all_programs %}{% if p.n == prog_n %}{% set prog.found = p %}{% endif %}{% endfor %}
      <div class="comment-card" id="comment-{{ prog_n }}">
        <div class="comment-card-header">
          <div>
            <span class="prog-num">#{{ prog_n }}</span>
            {% if prog.found %}
            <span style="font-weight:600;margin-left:.3rem">{{ prog.found.title }}</span>
            {% endif %}
            <span class="star-display">
              {% for i in range(1,6) %}{{ '★' if i <= c['rating'] else '☆' }}{% endfor %}
            </span>
          </div>
          <span class="text-muted" style="font-size:.75rem">{{ c['updated_at'][:10] }}</span>
        </div>
        <div class="comment-text">{{ c['comment'] }}</div>
        <div style="margin-top:.5rem;display:flex;gap:.5rem">
          <button class="btn btn-sm btn-ghost"
                  onclick="toggleEditForm({{ prog_n }})">Edit</button>
          <form method="POST"
                action="{{ url_for('teacher_delete_comment', student_id=student['id'], program_n=prog_n) }}"
                onsubmit="return confirm('Delete this comment?')" style="display:inline">
            <button type="submit" class="btn btn-sm btn-ghost" style="color:var(--coral)">
              Delete
            </button>
          </form>
        </div>
        <!-- Inline edit form (hidden) -->
        <form method="POST"
              action="{{ url_for('teacher_save_comment', student_id=student['id'], program_n=prog_n) }}"
              class="comment-edit-form" id="edit-form-{{ prog_n }}" style="display:none;margin-top:.75rem">
          <div class="star-picker" data-target="rating-{{ prog_n }}">
            {% for i in range(1,6) %}
            <span class="star-pick {% if i <= c['rating'] %}star-on{% endif %}"
                  data-val="{{ i }}" onclick="pickStar(this,'rating-{{ prog_n }}')">★</span>
            {% endfor %}
          </div>
          <input type="hidden" name="rating" id="rating-{{ prog_n }}" value="{{ c['rating'] }}">
          <textarea name="comment" class="comment-textarea" rows="3">{{ c['comment'] }}</textarea>
          <button type="submit" class="btn btn-primary btn-sm">Save changes</button>
        </form>
      </div>
      {% endfor %}
    </div>
    {% endif %}

    <!-- Add new comment — select program -->
    <details class="add-comment-details">
      <summary class="btn btn-outline btn-sm">+ Add comment on a program</summary>
      <div style="margin-top:1rem">
        <div class="table-wrap">
          <table class="data-table">
            <thead><tr><th>Program</th><th>Done</th><th>Comment</th><th></th></tr></thead>
            <tbody>
              {% for p in all_programs %}
              {% if prog_progress.get(p['n'], 0) == 1 %}
              <tr id="comment-{{ p['n'] }}">
                <td><strong>#{{ p['n'] }}</strong> {{ p['title'] }}</td>
                <td><span class="done-tick">✓</span></td>
                <td>
                  {% if my_comments.get(p['n']) %}
                  <span class="text-muted" style="font-size:.8rem">
                    {{ my_comments[p['n']]['comment'][:50] }}…
                  </span>
                  {% else %}
                  <span class="text-muted" style="font-size:.8rem">No comment</span>
                  {% endif %}
                </td>
                <td>
                  <button class="btn btn-sm btn-outline"
                          onclick="toggleCommentForm({{ p['n'] }})">
                    {{ 'Edit' if my_comments.get(p['n']) else 'Comment' }}
                  </button>
                  <form method="POST"
                        action="{{ url_for('teacher_save_comment', student_id=student['id'], program_n=p['n']) }}"
                        class="inline-comment-form" id="cf-{{ p['n'] }}"
                        style="display:none;margin-top:.6rem">
                    <div class="star-picker">
                      {% for i in range(1,6) %}
                      {% set cur = my_comments.get(p['n'], {}).get('rating', 0) if my_comments.get(p['n']) else 0 %}
                      <span class="star-pick {% if i <= cur %}star-on{% endif %}"
                            data-val="{{ i }}"
                            onclick="pickStar(this,'cf-rating-{{ p['n'] }}')">★</span>
                      {% endfor %}
                    </div>
                    <input type="hidden" name="rating" id="cf-rating-{{ p['n'] }}"
                           value="{{ my_comments.get(p['n'], {}).get('rating', 0) if my_comments.get(p['n']) else 0 }}">
                    <textarea name="comment" class="comment-textarea" rows="2"
                              placeholder="Your feedback…">{{ my_comments.get(p['n'], {}).get('comment', '') if my_comments.get(p['n']) else '' }}</textarea>
                    <div style="display:flex;gap:.5rem;margin-top:.4rem">
                      <button type="submit" class="btn btn-primary btn-sm">Save</button>
                      <button type="button" class="btn btn-ghost btn-sm"
                              onclick="toggleCommentForm({{ p['n'] }})">Cancel</button>
                    </div>
                  </form>
                </td>
              </tr>
              {% endif %}
              {% endfor %}
            </tbody>
          </table>
        </div>
      </div>
    </details>
  </div>

  <!-- ── Program grid ── -->
  <div class="section-block">
    <h2 class="section-heading">All Programs</h2>
    <div class="program-grid">
      {% for p in all_programs %}
      <div class="prog-tile-sm {% if prog_progress.get(p['n'],0) %}prog-done{% endif %}">
        <span class="prog-num">#{{ p['n'] }}</span>
        <span class="prog-name">{{ p['title'] }}</span>
        {% if prog_progress.get(p['n'],0) %}<span class="prog-check">✓</span>{% endif %}
        {% if my_comments.get(p['n']) %}<span class="prog-bookmark-dot" title="Commented">💬</span>{% endif %}
      </div>
      {% endfor %}
    </div>
  </div>

</div>

<script>
function toggleEditForm(n) {
  const f = document.getElementById('edit-form-' + n);
  f.style.display = f.style.display === 'none' ? 'block' : 'none';
}
function toggleCommentForm(n) {
  const f = document.getElementById('cf-' + n);
  f.style.display = f.style.display === 'none' ? 'block' : 'none';
}
function pickStar(el, targetId) {
  const val = parseInt(el.dataset.val);
  document.getElementById(targetId).value = val;
  const stars = el.parentElement.querySelectorAll('.star-pick');
  stars.forEach((s, i) => {
    s.classList.toggle('star-on', i < val);
  });
}
</script>
{% endblock %}