{% extends "base.html" %}
{% block title %}Progress – Auf Deutsch{% endblock %}

{% block content %}
<div class="page-progress fade-in">
  <h1 class="page-title">Your Progress</h1>

  {% if recommended_pack %}
  <div class="card recommended-pack-card">
    <h2 class="card-title">Next Recommended Pack</h2>
    <p><strong>{{ recommended_pack.pack_name }}</strong></p>
    <p class="muted">{{ recommended_pack.can_do }}</p>
    <a href="/packs/{{ recommended_pack.pack_id }}" class="btn btn-primary">Open pack</a>
  </div>
  {% endif %}

  <div class="stats-row">
    <div class="stat-card">
      <span class="stat-num">{{ total_learned }}</span>
      <span class="stat-label">phrases learned</span>
    </div>
    <div class="stat-card">
      <span class="stat-num">{{ total_due }}</span>
      <span class="stat-label">due today</span>
    </div>
    <div class="stat-card">
      <span class="stat-num">{{ streak }}</span>
      <span class="stat-label">day streak</span>
    </div>
  </div>

  <div class="progress-overview-grid">
    <div class="card">
      <h2 class="card-title">Weekly consistency</h2>
      <div class="consistency-topline">
        <div class="consistency-big">{{ weekly_snapshot.active_days }}/{{ weekly_snapshot.target_days }}</div>
        <div class="consistency-copy">
          <strong>{{ weekly_snapshot.status }}</strong>
          <span>{{ weekly_snapshot.minutes }} minutes studied in the last 7 days.</span>
        </div>
      </div>
      <div class="progress-bar progress-bar-large">
        <div class="progress-fill" style="width: {{ weekly_snapshot.pct }}%"></div>
      </div>
      <p class="consistency-note">{{ habit_hint }}</p>
    </div>

    {% if practical_wins %}
    <div class="card">
      <h2 class="card-title">Practical wins</h2>
      <div class="next-pack-list">
        {% for item in practical_wins %}
        <a href="/packs/{{ item.pack_id }}" class="next-pack-row">
          <span class="next-pack-emoji">{{ item.cover_emoji }}</span>
          <span class="next-pack-main">
            <strong>{{ item.pack_name }}</strong>
            <span class="muted">{{ item.can_do }}</span>
          </span>
        </a>
        {% endfor %}
      </div>
    </div>
    {% endif %}
  </div>

  <div class="card chart-card">
    <h2 class="card-title">Last 7 days</h2>
    <div class="bar-chart">
      {% for day in chart_days %}
      <div class="bar-col">
        <div class="bar-wrapper">
          <div class="bar-fill"
               style="height: {{ ((day.count / max_reviewed) * 100) | int if max_reviewed > 0 else 0 }}%"
               title="{{ day.count }} phrases"></div>
        </div>
        <span class="bar-label">{{ day.label }}</span>
      </div>
      {% endfor %}
    </div>
  </div>

  <div class="card">
    <h2 class="card-title">Pack Progress</h2>
    {% for ps in pack_stats %}
    <div class="pack-progress-row">
      <span class="pack-progress-emoji">{{ ps.cover_emoji }}</span>
      <div class="pack-progress-info">
        <div class="pack-progress-name">{{ ps.pack_name }}</div>
        <div class="pack-progress-note">{{ ps.can_do }}</div>
        <div class="progress-bar">
          <div class="progress-fill" style="width: {{ ps.pct }}%"></div>
        </div>
        <span class="pack-progress-count muted">{{ ps.learned }}/{{ ps.total }}</span>
        {% if ps.latest_quiz %}
        <div class="pack-progress-count muted">Latest quiz: {{ ps.latest_quiz.score }}/{{ ps.latest_quiz.total }}</div>
        {% elif ps.blocked_by %}
        <div class="pack-progress-count muted">Locked by prerequisites</div>
        {% endif %}
      </div>
    </div>
    {% endfor %}
  </div>

</div>
{% endblock %}