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

{% block content %}
{% set total_done = phrases_reviewed + phrases_learned %}
{% set msgs = [
  ("Ausgezeichnet!", "Excellent. You finished a focused session and kept the habit alive."),
  ("Sehr gut!", "Great work. The strongest learners are the ones who return tomorrow."),
  ("Toll gemacht!", "Nice session. Practical language grows from small, repeated wins."),
  ("Wunderbar!", "Another step done. Real usefulness comes from steady repetition."),
  ("Prima!", "Solid work. Short sessions are exactly how consistency becomes easy.")
] %}
{% set msg = msgs[duration % 5] %}

<div class="page-complete fade-in">
  <div class="card card-complete">
    <div class="complete-emoji">🎉</div>
    <h1 class="complete-heading">Gut gemacht!</h1>
    <p class="complete-message">
      <strong>{{ msg[0] }}</strong> {{ msg[1] }}
    </p>

    <div class="complete-stats">
      <div class="complete-stat">
        <span class="complete-stat-num">{{ phrases_reviewed }}</span>
        <span class="complete-stat-label">reviewed</span>
      </div>
      <div class="complete-stat">
        <span class="complete-stat-num">{{ phrases_learned }}</span>
        <span class="complete-stat-label">learned</span>
      </div>
      <div class="complete-stat">
        {% set mins = duration // 60 %}
        {% set secs = duration % 60 %}
        <span class="complete-stat-num">{{ mins }}:{{ "%02d" | format(secs) }}</span>
        <span class="complete-stat-label">time</span>
      </div>
    </div>

    {% if session_outcomes %}
    <div class="complete-outcomes">
      <div class="complete-log-title">What this helps you do</div>
      <div class="complete-outcomes-grid">
        {% for item in session_outcomes %}
        <div class="complete-outcome-card">
          <div class="complete-outcome-top">
            <span class="complete-outcome-emoji">{{ item.cover_emoji }}</span>
            <span class="complete-outcome-meter">{{ item.pct }}%</span>
          </div>
          <div class="complete-outcome-title">{{ item.pack_name }}</div>
          <div class="complete-outcome-copy">{{ item.can_do }}</div>
        </div>
        {% endfor %}
      </div>
    </div>
    {% endif %}

    {% if activity_log %}
    <div class="complete-log">
      <div class="complete-log-title">This session</div>
      {% for entry in activity_log %}
      <div class="complete-log-row">
        <span class="complete-log-icon">{{ entry.icon }}</span>
        <span class="complete-log-de">{{ entry.de }}</span>
        <span class="complete-log-en muted">{{ entry.en }}</span>
      </div>
      {% endfor %}
    </div>
    {% endif %}

    {% if grammar_tip and grammar_tip.grammar_note %}
    <div class="complete-grammar">
      <div class="complete-grammar-title">Grammar note</div>
      <div class="complete-grammar-phrase">{{ grammar_tip.de }}</div>
      <div class="complete-grammar-note">{{ grammar_tip.grammar_note }}</div>
    </div>
    {% endif %}

    <div class="complete-next card-subsection">
      <div class="complete-log-title">Next move</div>
      {% if recommended_pack %}
      <div class="complete-next-card">
        <div>
          <div class="complete-next-title">{{ recommended_pack.cover_emoji }} {{ recommended_pack.pack_name }}</div>
          <div class="complete-next-copy">{{ recommended_pack.can_do }}</div>
        </div>
        <a href="/packs/{{ recommended_pack.pack_id }}" class="btn btn-primary">Open next lesson</a>
      </div>
      {% else %}
      <div class="complete-next-card">
        <div>
          <div class="complete-next-title">Keep it light tomorrow</div>
          <div class="complete-next-copy">A short review tomorrow at {{ reminder_time }} is enough to keep the chain going.</div>
        </div>
        <a href="/" class="btn btn-primary">Back home</a>
      </div>
      {% endif %}
    </div>

    {% if practical_wins %}
    <div class="complete-practical-note">
      <strong>{{ streak }}-day streak.</strong> You are building usable German, not just finishing cards.
    </div>
    {% endif %}

    <div class="complete-actions">
      <button class="btn btn-secondary" id="share-btn"
              data-text="Ich habe heute {{ total_done }} deutsche Phrasen gelernt! 🇩🇪 #AufDeutsch">
        Teilen / Share
      </button>
      <a href="/" class="btn btn-primary">Bis morgen →</a>
    </div>
  </div>
</div>
{% endblock %}

{% block scripts %}
<script>
  const shareBtn = document.getElementById("share-btn");
  if (shareBtn) {
    shareBtn.addEventListener("click", () => {
      const text = shareBtn.dataset.text;
      if (navigator.clipboard) {
        navigator.clipboard.writeText(text).then(() => {
          shareBtn.textContent = "✓ Copied!";
          setTimeout(() => { shareBtn.textContent = "Teilen / Share"; }, 2500);
        }).catch(() => { shareBtn.textContent = "Copy failed"; });
      } else {
        prompt("Copy this:", text);
      }
    });
  }
</script>
{% endblock %}