{% extends "base.html" %}
{% block title %}Dashboard — Python 108{% endblock %}
{% block content %}
<div class="dashboard">

  <!-- Header -->
  <div class="dash-header">
    <div>
      <h1 class="dash-greeting">Hello, {{ user['username'] }} 👋</h1>
      <p class="dash-sub">
        {% if student_class %}Class: <strong>{{ student_class['name'] }}</strong> &nbsp;·&nbsp; {% endif %}
        One program a day changes everything.
      </p>
    </div>
    {% if next_prog %}
    <a href="{{ url_for('program', n=next_prog['n']) }}" class="btn btn-primary">
      Continue → #{{ next_prog['n'] }} {{ next_prog['title'] }}
    </a>
    {% else %}
    <div style="display:flex;gap:.75rem;align-items:center;flex-wrap:wrap">
      <div class="badge badge-gold">🏆 All 108 complete!</div>
      <a href="{{ url_for('certificate_preview') }}" class="btn btn-primary">
        🎓 Download Certificate
      </a>
    </div>
    {% endif %}
  </div>

  <!-- Announcements -->
  {% if announcements %}
  <div class="announcements-section">
    {% for a in announcements %}
    <div class="announcement-banner {% if a['pinned'] %}ann-pinned{% endif %}">
      <div class="ann-left">
        <span class="ann-icon">{% if a['pinned'] %}📌{% else %}📢{% endif %}</span>
        <div class="ann-content">
          <div class="ann-title">{{ a['title'] }}</div>
          {% if a['body'] %}<div class="ann-body">{{ a['body'] }}</div>{% endif %}
        </div>
      </div>
      <div class="ann-meta">
        <span class="ann-teacher">{{ a['teacher_name'] }}</span>
        <span class="ann-date">{{ a['created_at'][:10] }}</span>
      </div>
    </div>
    {% endfor %}
  </div>
  {% endif %}

  <!-- No-class nudge -->
  {% if not student_class %}
  <div class="enrol-nudge">
    <span class="enrol-nudge-icon">🏫</span>
    <div class="enrol-nudge-text">
      <strong>You haven't joined a class yet.</strong>
      Have a code from your teacher? Join now to unlock the leaderboard and track your progress with your class.
    </div>
    <a href="{{ url_for('enrol') }}" class="btn btn-outline btn-sm">Enter class code →</a>
  </div>
  {% endif %}

  <!-- Assignments due -->
  {% if assignments %}
  <div class="assignments-panel">
    <div class="ap-header">
      <span class="ap-title">📋 Assignments</span>
      <span class="ap-count">{{ assignments|length }} assigned</span>
    </div>
    <div class="ap-list">
      {% for a in assignments %}
      <a href="{{ url_for('program', n=a['program_n']) }}"
         class="ap-item {% if a['overdue'] and not a['completed'] %}ap-overdue{% elif a['completed'] %}ap-done{% else %}ap-pending{% endif %}">
        <div class="ap-item-left">
          <span class="ap-prog-num">#{{ a['program_n'] }}</span>
          <span class="ap-prog-name">
            {% for p in modules.values() %}{% for prog in p %}{% if prog.n == a['program_n'] %}{{ prog.title }}{% endif %}{% endfor %}{% endfor %}
          </span>
        </div>
        <div class="ap-item-right">
          {% if a['completed'] %}
            <span class="ap-status ap-status-done">✓ Done</span>
          {% elif a['overdue'] %}
            <span class="ap-status ap-status-overdue">⚠ Overdue</span>
          {% else %}
            <span class="ap-status ap-status-pending">Due {{ a['due_date'] }}</span>
          {% endif %}
        </div>
      </a>
      {% endfor %}
    </div>
  </div>
  {% endif %}

  <!-- ── XP Level bar ── -->
  <div class="xp-bar-card">
    <div class="xp-bar-left">
      <span class="xp-level-icon">{{ level_info.icon }}</span>
      <div class="xp-level-info">
        <div class="xp-level-name">Level {{ level_info.level }} — {{ level_info.name }}</div>
        <div class="xp-total">{{ total_xp }} XP total</div>
      </div>
    </div>
    <div class="xp-bar-right">
      {% if level_info.next_level %}
      <div class="xp-bar-track">
        <div class="xp-bar-fill" style="width:{{ level_info.pct }}%"></div>
      </div>
      <div class="xp-bar-label">
        {{ level_info.xp_in_level }} / {{ level_info.xp_needed }} XP to
        {{ level_info.next_level.icon }} {{ level_info.next_level.name }}
      </div>
      {% else %}
      <div class="xp-bar-track">
        <div class="xp-bar-fill" style="width:100%"></div>
      </div>
      <div class="xp-bar-label">🏆 Maximum level reached!</div>
      {% endif %}
    </div>
    <a href="{{ url_for('profile') }}" class="btn btn-ghost btn-sm">View badges →</a>
  </div>

  <!-- ── Streak banner ── -->
  <div class="streak-banner {% if streak.studied_today %}streak-active{% endif %}">
    <div class="streak-flame">
      <span class="flame-emoji {% if streak.current_streak > 0 %}flame-on{% endif %}">🔥</span>
    </div>
    <div class="streak-info">
      <div class="streak-number">{{ streak.current_streak }}
        <span class="streak-label">day streak</span>
      </div>
      <div class="streak-msg">
        {% if streak.studied_today %}
          ✓ You studied today — keep it going!
        {% elif streak.current_streak > 0 %}
          ⚡ Complete a program today to keep your {{ streak.current_streak }}-day streak!
        {% else %}
          Start your streak — complete a program today!
        {% endif %}
      </div>
    </div>
    <div class="streak-stats">
      <div class="streak-stat">
        <div class="streak-stat-val">{{ streak.longest_streak }}</div>
        <div class="streak-stat-lbl">Best streak 🏆</div>
      </div>
      <div class="streak-stat">
        <div class="streak-stat-val">{{ streak.total_days }}</div>
        <div class="streak-stat-lbl">Active days</div>
      </div>
      <div class="streak-stat">
        <div class="streak-stat-val">{{ stats.programs_done }}</div>
        <div class="streak-stat-lbl">Programs done</div>
      </div>
    </div>
  </div>

  <!-- ── 30-day activity calendar ── -->
  <div class="activity-cal-card">
    <div class="cal-header">
      <span class="cal-title">Last 30 days</span>
      <div class="cal-legend">
        <span class="cal-dot cal-0"></span> None
        <span class="cal-dot cal-1"></span> 1–2
        <span class="cal-dot cal-3"></span> 3–5
        <span class="cal-dot cal-5"></span> 5+
      </div>
    </div>
    <div class="cal-grid">
      {% for day in activity %}
      <div class="cal-cell cal-lvl-{{ [0, [1 if day.programs_done==0 else 2 if day.programs_done<=2 else 3 if day.programs_done<=5 else 4][0]][0] }}"
           title="{{ day.date }}: {{ day.programs_done }} program(s) completed"
           {% if day.is_today %}style="outline:2px solid var(--purple);outline-offset:1px;"{% endif %}>
        <span class="cal-day-num">{{ day.day }}</span>
      </div>
      {% endfor %}
    </div>
    <div class="cal-months">
      {% set seen = [] %}
      {% for day in activity %}
        {% if day.month not in seen %}
          <span class="cal-month-label">{{ day.month }}</span>
          {% set _ = seen.append(day.month) %}
        {% endif %}
      {% endfor %}
    </div>
  </div>

  <!-- Stats row -->
  <div class="stats-row">
    <div class="stat-card"><div class="stat-val">{{ stats.programs_done }}</div><div class="stat-lbl">Programs done</div></div>
    <div class="stat-card"><div class="stat-val">{{ 108 - stats.programs_done }}</div><div class="stat-lbl">Remaining</div></div>
    <div class="stat-card"><div class="stat-val">{{ stats.exercises_done }}</div><div class="stat-lbl">Exercises solved</div></div>
    <div class="stat-card"><div class="stat-val">{{ pct }}%</div><div class="stat-lbl">Progress</div></div>
    <div class="stat-card"><div class="stat-val">{{ quizzes_passed }}/12</div><div class="stat-lbl">Quizzes passed</div></div>
    <div class="stat-card stat-bookmarks">
      <a href="{{ url_for('bookmarks') }}" style="text-decoration:none;color:inherit">
        <div class="stat-val">{{ bookmarks_count }}</div>
        <div class="stat-lbl">🔖 Saved</div>
      </a>
    </div>
    {% if assignments %}
    {% set pending = assignments | selectattr('completed', 'equalto', None) | list | length %}
    {% set overdue = assignments | selectattr('overdue', 'equalto', 1) | list | length %}
    <div class="stat-card {% if overdue %}stat-overdue{% endif %}">
      <div class="stat-val">{{ assignments|length }}</div>
      <div class="stat-lbl">📋 Assigned{% if overdue %} ({{ overdue }} overdue){% endif %}</div>
    </div>
    {% endif %}
  </div>

  <!-- Progress bar -->
  <div class="progress-section">
    <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>

  <!-- Main body -->
  <div class="dash-body">
    <div class="dash-programs">
      {% for mod_name, programs in modules.items() %}
      <div class="module-section">
        <div class="module-header">
          <h2 class="module-title">{{ mod_name }}</h2>
          <span class="module-count">{{ programs|selectattr('done','equalto',true)|list|length }}/{{ programs|length }}</span>
          <!-- Quiz badge -->
          {% set slug = module_slugs.get(mod_name) %}
          {% set qr   = quiz_results.get(mod_name) %}
          {% if slug %}
            {% if qr %}
              <a href="{{ url_for('quiz', slug=slug) }}"
                 class="quiz-mod-badge {% if qr.passed %}qbadge-pass{% else %}qbadge-tried{% endif %}">
                {% if qr.passed %}🏆 {{ qr.score }}/10 Passed{% else %}📝 {{ qr.score }}/10 Retry{% endif %}
              </a>
            {% else %}
              <a href="{{ url_for('quiz', slug=slug) }}" class="quiz-mod-badge qbadge-new">
                📝 Take Quiz
              </a>
            {% endif %}
          {% endif %}
        </div>
        <div class="program-grid">
          {% for p in programs %}
          <a href="{{ url_for('program', n=p['n']) }}"
             class="prog-tile {% if p['done'] %}prog-done{% endif %}">
            <span class="prog-num">#{{ p['n'] }}</span>
            <span class="prog-name">{{ p['title'] }}</span>
            {% if p['done'] %}<span class="prog-check">✓</span>{% endif %}
            {% if p['bookmarked'] %}<span class="prog-bookmark-dot" title="Bookmarked">🔖</span>{% endif %}
          </a>
          {% endfor %}
        </div>
      </div>
      {% endfor %}
    </div>

    <!-- Sidebar -->
    <div class="dash-sidebar">

      <!-- Streak milestones -->
      <div class="milestone-card">
        <div class="milestone-title">🎯 Streak Milestones</div>
        <div class="milestone-list">
          {% for days, label, emoji in [
            (3,'3-day start','🌱'),
            (7,'1 week','⭐'),
            (14,'2 weeks','🔥'),
            (21,'21-day habit','💪'),
            (30,'1 month','🏅'),
            (60,'2 months','🥇'),
            (108,'All 108 days','🏆')
          ] %}
          <div class="milestone-row {% if streak.longest_streak >= days %}milestone-reached{% endif %}">
            <span class="milestone-emoji">{{ emoji }}</span>
            <span class="milestone-label">{{ label }}</span>
            <span class="milestone-days">{{ days }}d</span>
            {% if streak.longest_streak >= days %}
            <span class="milestone-tick">✓</span>
            {% endif %}
          </div>
          {% endfor %}
        </div>
      </div>

      <!-- Leaderboard -->
      {% if leaderboard %}
      <div class="leaderboard-card" style="margin-top:1rem">
        <div class="lb-header">🏅 Class {{ 'XP ' if show_xp else '' }}Leaderboard</div>
        <div class="lb-class">{{ student_class['name'] }}</div>
        <div class="lb-list">
          {% for s in leaderboard %}
          {% set i = loop.index %}
          <div class="lb-row {% if s['id'] == user['id'] %}lb-me{% endif %}">
            <span class="lb-rank">{% if i==1 %}🥇{% elif i==2 %}🥈{% elif i==3 %}🥉{% else %}{{ i }}{% endif %}</span>
            <span class="lb-name">{{ s['username'] }}{% if s['id']==user['id'] %} (you){% endif %}</span>
            {% if show_xp %}
            <span class="lb-score">{{ s['total_xp'] }} XP</span>
            {% else %}
            <span class="lb-score">{{ s['prog_done'] }}/108</span>
            {% endif %}
          </div>
          {% endfor %}
        </div>
      </div>
      {% endif %}

    </div>
  </div>

</div>

<script>
// Live-update streak badge in navbar when marking a program complete
function updateNavStreak(n) {
  const badge = document.getElementById('nav-streak-count');
  if (badge) badge.textContent = n;
}
</script>
{% endblock %}