{% extends "base.html" %}
{% block title %}{{ cls['name'] }} — Teacher View{% endblock %}
{% block content %}
<div class="admin-page">

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

  <div class="page-header">
    <div>
      <h1 class="page-title">{{ cls['name'] }}</h1>
      <p class="page-sub">{{ students|length }} students enrolled
        {% if cls['description'] %} · {{ cls['description'] }}{% endif %}
      </p>
    </div>
    <a href="{{ url_for('teacher_export', class_id=cls['id']) }}" class="btn btn-outline">
      ⬇ Export CSV
    </a>
  </div>

  <!-- ── Enrol code panel ── -->
  <div class="enrol-code-panel">
    <div class="ecp-left">
      <div class="ecp-label">Class Enrol Code</div>
      {% if cls['enrol_code'] %}
        <div class="ecp-code {% if not cls['code_active'] %}ecp-code-off{% endif %}">
          {{ cls['enrol_code'] }}
        </div>
        <div class="ecp-status">
          {% if cls['code_active'] %}
          <span class="status-pill status-active">Active — students can join</span>
          {% else %}
          <span class="status-pill status-inactive">Disabled — new joins paused</span>
          {% endif %}
        </div>
      {% else %}
        <div class="ecp-none">No code generated yet</div>
      {% endif %}
    </div>
    <div class="ecp-right">
      <form method="POST" action="{{ url_for('teacher_gen_code', class_id=cls['id']) }}" style="display:inline">
        <button type="submit" class="btn btn-primary btn-sm">
          {% if cls['enrol_code'] %}↺ New Code{% else %}+ Generate Code{% endif %}
        </button>
      </form>
      {% if cls['enrol_code'] %}
      <form method="POST" action="{{ url_for('teacher_toggle_code', class_id=cls['id']) }}" style="display:inline;margin-left:.4rem">
        <button type="submit" class="btn btn-ghost btn-sm">
          {% if cls['code_active'] %}Disable{% else %}Enable{% endif %}
        </button>
      </form>
      {% endif %}
    </div>
  </div>
  <div class="ecp-hint">
    Share this code with students. They go to <strong>Dashboard → Join Class</strong> and enter it.
  </div>

  <!-- ── Leaderboard visibility setting ── -->
  <div class="section-block">
    <div style="display:flex;align-items:center;justify-content:space-between;gap:1rem;flex-wrap:wrap">
      <div>
        <h2 class="section-heading" style="margin-bottom:.2rem">🏅 Leaderboard Settings</h2>
        <p class="section-sub">Control what students see on the class leaderboard.</p>
      </div>
      <form method="POST"
            action="{{ url_for('teacher_leaderboard_setting', class_id=cls['id']) }}"
            style="display:flex;align-items:center;gap:.75rem">
        <label class="checkbox-label">
          <input type="checkbox" name="show_xp" value="1"
                 {% if leaderboard_show_xp %}checked{% endif %}
                 onchange="this.form.submit()">
          Show XP scores to students
        </label>
        <span class="text-muted" style="font-size:.8rem">
          (unchecked = show program count only)
        </span>
      </form>
    </div>
  </div>

  <!-- ── Announcements ── -->
  <div class="section-block">
    <div style="display:flex;align-items:center;justify-content:space-between;margin-bottom:.75rem">
      <h2 class="section-heading" style="margin-bottom:0">📢 Announcements</h2>
      <a href="{{ url_for('teacher_announcements', class_id=cls['id']) }}"
         class="btn btn-primary btn-sm">Manage announcements →</a>
    </div>
    {% set active_anns = announcements | selectattr('expires_at', 'none') | list if announcements else [] %}
    {% if announcements %}
    <div class="ann-preview-list">
      {% for a in announcements[:3] %}
      <div class="ann-preview-item {% if a['pinned'] %}ann-pinned{% endif %}">
        <span class="ann-icon">{% if a['pinned'] %}📌{% else %}📢{% endif %}</span>
        <div style="flex:1">
          <span class="ann-title">{{ a['title'] }}</span>
          <span class="text-muted" style="font-size:.75rem;margin-left:.5rem">{{ a['created_at'][:10] }}</span>
        </div>
      </div>
      {% endfor %}
      {% if announcements|length > 3 %}
      <p class="empty-note" style="margin-top:.5rem">
        +{{ announcements|length - 3 }} more —
        <a href="{{ url_for('teacher_announcements', class_id=cls['id']) }}">view all</a>
      </p>
      {% endif %}
    </div>
    {% else %}
    <p class="empty-note">
      No announcements yet.
      <a href="{{ url_for('teacher_announcements', class_id=cls['id']) }}">Post one →</a>
    </p>
    {% endif %}
  </div>

  <!-- ── Assignments ── -->
  <div class="section-block">
    <div style="display:flex;align-items:center;justify-content:space-between;margin-bottom:.75rem">
      <h2 class="section-heading" style="margin-bottom:0">📋 Assignments</h2>
      <a href="{{ url_for('teacher_assignments', class_id=cls['id']) }}"
         class="btn btn-primary btn-sm">Manage assignments →</a>
    </div>
    {% if assignments %}
    <div class="table-wrap">
      <table class="data-table">
        <thead><tr><th>Program</th><th>Due date</th><th>Note</th></tr></thead>
        <tbody>
          {% for a in assignments %}
          <tr class="{% if a['due_date'] < now_date %}row-overdue{% endif %}">
            <td><strong>#{{ a['program_n'] }}</strong></td>
            <td>
              {{ a['due_date'] }}
              {% if a['due_date'] < now_date %}
              <span class="overdue-tag">Overdue</span>
              {% endif %}
            </td>
            <td class="text-muted">{{ a['note'] or '—' }}</td>
          </tr>
          {% endfor %}
        </tbody>
      </table>
    </div>
    {% else %}
    <p class="empty-note">
      No assignments yet.
      <a href="{{ url_for('teacher_assignments', class_id=cls['id']) }}">Create one →</a>
    </p>
    {% endif %}
  </div>

  <!-- ── Quiz summary ── -->
  {% if quiz_summary %}
  <div class="section-block">
    <h2 class="section-heading">🏆 Quiz Results</h2>
    <div class="table-wrap">
      <table class="data-table">
        <thead>
          <tr>
            <th>Student</th>
            <th>Modules passed</th>
            <th>Modules attempted</th>
            <th>Pass rate</th>
          </tr>
        </thead>
        <tbody>
          {% for s in quiz_summary %}
          <tr>
            <td>
              <a href="{{ url_for('teacher_student', student_id=s['id']) }}">
                {{ s['username'] }}
              </a>
            </td>
            <td>
              <span class="pill-num">{{ s['modules_passed'] }}/12</span>
            </td>
            <td>{{ s['modules_attempted'] }}</td>
            <td>
              {% if s['modules_attempted'] > 0 %}
              <div class="mini-bar-track">
                <div class="mini-bar-fill"
                     style="width:{{ (s['modules_passed']/12*100)|round|int }}%">
                </div>
              </div>
              <span class="mini-pct">
                {{ (s['modules_passed']/12*100)|round|int }}%
              </span>
              {% else %}
              <span class="text-muted">No attempts</span>
              {% endif %}
            </td>
          </tr>
          {% endfor %}
        </tbody>
      </table>
    </div>
  </div>
  {% endif %}

  <!-- ── Streak leaderboard ── -->
  {% if streaks %}
  <div class="section-block">
    <h2 class="section-heading">🔥 Streak Leaderboard</h2>
    <div class="table-wrap">
      <table class="data-table">
        <thead>
          <tr><th>Student</th><th>Current streak</th><th>Best streak</th><th>Studied today</th></tr>
        </thead>
        <tbody>
          {% for s in streaks %}
          <tr>
            <td><a href="{{ url_for('teacher_student', student_id=s['id']) }}">{{ s['username'] }}</a></td>
            <td>
              <span class="streak-pill {% if s['current_streak'] > 0 %}streak-pill-on{% endif %}">
                🔥 {{ s['current_streak'] }} day{{ 's' if s['current_streak'] != 1 else '' }}
              </span>
            </td>
            <td>🏆 {{ s['longest_streak'] }}</td>
            <td>
              {% if s['studied_today'] %}
              <span class="status-pill status-active">✓ Yes</span>
              {% else %}
              <span class="status-pill status-inactive">✗ Not yet</span>
              {% endif %}
            </td>
          </tr>
          {% endfor %}
        </tbody>
      </table>
    </div>
  </div>
  {% endif %}

  <!-- ── Summary table ── -->
  <div class="section-block">
    <h2 class="section-heading">Student Summary</h2>
    {% if summary %}
    <div class="table-wrap">
      <table class="data-table">
        <thead>
          <tr>
            <th>Rank</th><th>Student</th>
            <th>Programs done</th><th>Progress</th>
            <th>Exercises solved</th><th>Actions</th>
          </tr>
        </thead>
        <tbody>
          {% for s in summary %}
          <tr>
            <td class="td-rank">{{ loop.index }}</td>
            <td><strong>{{ s['username'] }}</strong></td>
            <td>
              <span class="pill-num">{{ s['prog_done'] }}/108</span>
            </td>
            <td>
              <div class="mini-bar-track">
                <div class="mini-bar-fill" style="width:{{ (s['prog_done']/108*100)|round|int }}%"></div>
              </div>
              <span class="mini-pct">{{ (s['prog_done']/108*100)|round|int }}%</span>
            </td>
            <td>{{ s['ex_done'] }}/108</td>
            <td>
              <a href="{{ url_for('teacher_student', student_id=s['id']) }}"
                 class="btn btn-sm btn-outline">Detail →</a>
            </td>
          </tr>
          {% endfor %}
        </tbody>
      </table>
    </div>
    {% else %}
    <div class="empty-state">
      <div class="empty-title">No students in this class yet</div>
      <div class="empty-sub">Ask the admin to assign students.</div>
    </div>
    {% endif %}
  </div>

  <!-- ── Heatmap ── -->
  {% if heatmap %}
  <div class="section-block">
    <h2 class="section-heading">Progress Heatmap — All 108 Programs</h2>
    <p class="section-sub">
      <span class="hm-legend done-cell"></span> Completed &nbsp;
      <span class="hm-legend todo-cell"></span> Not done
    </p>

    <div class="heatmap-scroll">
      <table class="heatmap-table">
        <thead>
          <tr>
            <th class="hm-student-col">Student</th>
            {% for mod_name in mod_names %}
              {% set prog_count = all_programs | selectattr('mod','equalto',mod_name) | list | length %}
              <th colspan="{{ prog_count }}" class="hm-mod-header">
                {{ mod_name|truncate(18,True,'…') }}
              </th>
            {% endfor %}
            <th>Total</th>
          </tr>
          <tr>
            <th></th>
            {% for p in all_programs %}
            <th class="hm-prog-num" title="#{{ p['n'] }} {{ p['title'] }}">#{{ p['n'] }}</th>
            {% endfor %}
            <th></th>
          </tr>
        </thead>
        <tbody>
          {% for row in heatmap %}
          <tr>
            <td class="hm-student-name">
              <a href="{{ url_for('teacher_student', student_id=row['student']['id']) }}">
                {{ row['student']['username'] }}
              </a>
            </td>
            {% for mod in row['mods'] %}
              {% for cell in mod['cells'] %}
              <td class="hm-cell {% if cell %}hm-done{% else %}hm-todo{% endif %}"
                  title="{{ '✓' if cell else '○' }}"></td>
              {% endfor %}
            {% endfor %}
            <td class="hm-total">{{ row['total'] }}</td>
          </tr>
          {% endfor %}
        </tbody>
      </table>
    </div>
  </div>
  {% endif %}

</div>
{% endblock %}