{% extends "base.html" %}
{% block title %}Progression · Sabaidee{% endblock %}
{% block content %}
<div class="page-head">
  <div>
    <span class="eyebrow">↗度 JÌNDÙ</span>
    <h1>Progression</h1>
    <p>Une vue dans le temps, par niveau, type de mot et thème de vocabulaire.</p>
  </div>
</div>

<section class="level-card wide">
  <div class="level-left">
    <span class="level-label">PALIER</span>
    <div class="level">{{ progress.level }}</div>
    <div class="level-copy">Niveau démontré : {{ progress.demonstrated_level }}</div>
  </div>
  <div class="progress-ring" style="--p: {{ progress.overall }}">
    <div><b>{{ progress.overall }}%</b><small>{{ progress.level }}</small></div>
  </div>
  <div class="level-meta">
    <b>{{ progress.known_count }} / {{ progress.target }}</b>
    <span>objectif vocabulaire interne</span>
    <small>Indice de niveau démontré : {{ progress.proficiency }}%</small>
  </div>
</section>

<section class="card">
  <h2>Compétences</h2>
  <div class="metric-grid five">
    {% for label, value, cn in [
      ('Vocabulaire', progress.vocab, '◈'),
      ('Construction', progress.grammar, '✎'),
      ('Compréhension', progress.comprehension, '◉'),
      ('Prononciation', progress.pronunciation, '♫'),
      ('Niveau démontré', progress.proficiency, '✧')
    ] %}
      <div class="metric">
        <span>{{ cn }}</span><b>{{ value }}%</b><small>{{ label }}</small>
        <div class="bar"><i style="width: {{ value }}%"></i></div>
      </div>
    {% endfor %}
  </div>
</section>

<section class="card">
  <div class="section-head"><div><span class="eyebrow">时间</span><h2>Évolution dans le temps</h2></div></div>
  <div class="chart-legend"><span>● Mots connus</span><span>◆ Mots maîtrisés</span></div>
  <div class="chart-wrap"><canvas id="progressChart" height="260"></canvas></div>
  {% if history|length < 2 %}<p class="tiny muted">Le graphique commencera à devenir utile après plusieurs jours d'utilisation.</p>{% endif %}
</section>

<section class="two-col">
  <div class="card">
    <h2>Par type de mot</h2>
    <div class="category-stats">
      {% for g in type_stats %}
      <div class="category-row">
        <div><b>{{ g.word_type }}</b><small>{{ g.mastered or 0 }} maîtrisés / {{ g.total }}</small></div>
        <span>{{ g.avg_mastery or 0 }}%</span>
        <div class="bar"><i style="width: {{ g.avg_mastery or 0 }}%"></i></div>
      </div>
      {% else %}<p class="muted">Ajoute du vocabulaire pour voir les statistiques.</p>{% endfor %}
    </div>
  </div>
  <div class="card">
    <h2>Par thème</h2>
    <div class="category-stats">
      {% for g in theme_stats %}
      <div class="category-row">
        <div><b>{{ g.theme }}</b><small>{{ g.mastered or 0 }} maîtrisés / {{ g.total }}</small></div>
        <span>{{ g.avg_mastery or 0 }}%</span>
        <div class="bar"><i style="width: {{ g.avg_mastery or 0 }}%"></i></div>
      </div>
      {% else %}<p class="muted">Tu peux modifier le thème d'un mot depuis la page Vocabulaire.</p>{% endfor %}
    </div>
  </div>
</section>

<section class="card">
  <div class="section-head"><h2>Activité récente</h2></div>
  <div class="timeline">
    {% for e in events %}
    <div class="timeline-item"><i></i><div><b>{{ e.event_type }}</b><small>{{ e.created_at[:16].replace('T',' ') }}</small></div></div>
    {% else %}<p class="muted">Pas encore d'activité.</p>{% endfor %}
  </div>
  <p class="tiny muted">Les niveaux sont des estimations pédagogiques internes, pas une certification officielle HSK/CECRL.</p>
</section>

<script>
window.PROGRESS_HISTORY = {{ history|tojson }};
</script>
{% endblock %}
{% block scripts %}
<script src="{{ url_for('static', filename='js/progress.js') }}"></script>
{% endblock %}