{% extends "base.html" %}
{% block title %}My Profile — Python 108{% endblock %}
{% block content %}
<div class="profile-page">

  <!-- ── Header ── -->
  <div class="profile-hero">
    <div class="profile-avatar">{{ level_info.icon }}</div>
    <div class="profile-info">
      <h1 class="profile-name">{{ user['username'] }}</h1>
      <div class="profile-level">Level {{ level_info.level }} — {{ level_info.name }}</div>
      <div class="profile-xp">{{ total_xp }} XP total · {{ earned_keys|length }} / 30 badges earned</div>
    </div>
    <div class="profile-stats">
      <div class="pstat"><div class="pstat-val">{{ stats.programs_done }}</div><div class="pstat-lbl">Programs</div></div>
      <div class="pstat"><div class="pstat-val">{{ stats.exercises_done }}</div><div class="pstat-lbl">Exercises</div></div>
      <div class="pstat"><div class="pstat-val">{{ streak.current_streak }}</div><div class="pstat-lbl">Streak 🔥</div></div>
    </div>
  </div>

  <!-- ── Level progress ── -->
  <div class="section-block">
    <h2 class="section-heading">Level Progress</h2>
    <div class="level-progress-grid">
      {% for lvl in levels %}
      <div class="level-pip {% if level_info.level >= lvl.level %}level-pip-done{% elif level_info.level + 1 == lvl.level %}level-pip-next{% endif %}">
        <div class="level-pip-icon">{{ lvl.icon }}</div>
        <div class="level-pip-num">{{ lvl.level }}</div>
        <div class="level-pip-name">{{ lvl.name }}</div>
        <div class="level-pip-xp">{{ lvl.xp_required }} XP</div>
      </div>
      {% endfor %}
    </div>
    {% if level_info.next_level %}
    <div class="level-bar-section">
      <div class="level-bar-labels">
        <span>{{ level_info.icon }} Lv{{ level_info.level }}</span>
        <span>{{ level_info.xp_in_level }} / {{ level_info.xp_needed }} XP</span>
        <span>{{ level_info.next_level.icon }} Lv{{ level_info.next_level.level }}</span>
      </div>
      <div class="xp-bar-track" style="height:10px;border-radius:5px">
        <div class="xp-bar-fill" style="width:{{ level_info.pct }}%"></div>
      </div>
    </div>
    {% endif %}
  </div>

  <!-- ── Badges by category ── -->
  {% for cat_name, badges in categories.items() %}
  <div class="section-block">
    <h2 class="section-heading">
      {{ cat_name }} badges
      <span style="font-weight:400;font-size:.82rem;color:var(--text-3)">
        — {{ badges | selectattr('earned') | list | length }}/{{ badges|length }}
      </span>
    </h2>
    <div class="badge-grid">
      {% for b in badges %}
      <div class="badge-card {% if b.earned %}badge-earned{% else %}badge-locked{% endif %}">
        <div class="badge-icon">{{ b.icon }}</div>
        <div class="badge-name">{{ b.name }}</div>
        <div class="badge-desc">{{ b.desc }}</div>
        {% if b.earned %}
        <div class="badge-earned-date">Earned {{ b.earned_at }}</div>
        {% else %}
        <div class="badge-locked-label">🔒 Locked</div>
        {% endif %}
      </div>
      {% endfor %}
    </div>
  </div>
  {% endfor %}

  <!-- ── Recent XP log ── -->
  <div class="section-block">
    <h2 class="section-heading">Recent XP Activity</h2>
    {% if xp_log %}
    <div class="xp-log-list">
      {% for entry in xp_log %}
      <div class="xp-log-row">
        <span class="xp-log-action">{{ entry['action'].replace('_',' ').title() }}</span>
        <span class="xp-log-note text-muted">{{ entry['note'] }}</span>
        <span class="xp-log-xp">+{{ entry['xp_earned'] }} XP</span>
        <span class="xp-log-date text-muted">{{ entry['created_at'][:10] }}</span>
      </div>
      {% endfor %}
    </div>
    {% else %}
    <p class="empty-note">No XP earned yet — complete a program to start!</p>
    {% endif %}
  </div>

</div>
{% endblock %}