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

{% block content %}
<div class="page-story-reader fade-in">

  <a href="/stories" class="back-link">← Stories</a>

  <header class="story-reader-header">
    <div class="story-reader-emoji">{{ story.cover_emoji }}</div>
    <div class="story-reader-title-block">
      <h1 class="story-reader-title">{{ story.title_de }}</h1>
      <p class="story-reader-subtitle">{{ story.title_en }}</p>
      <div class="story-reader-meta">
        <span class="level-badge {% if story.level == 'A2' %}level-badge-a2{% endif %}">{{ story.level }}</span>
        <span class="story-read-time">{{ read_time }} min read</span>
        {% if is_read %}<span class="story-read-badge">✓ Read</span>{% endif %}
      </div>
    </div>
  </header>

  <p class="story-situation">{{ story.situation }}</p>

  <div class="story-tip card">
    💡 <strong>Tip:</strong> Tap any <span class="phrase-highlight-demo">green phrase</span> to see its meaning and usage note.
  </div>

  <!-- Paragraphs -->
  <div class="story-body">
    {% for para in paragraphs %}
    <div class="story-paragraph">
      <p class="story-para-de">{{ para.de_html | safe }}</p>
      <button class="btn-translation-toggle" aria-expanded="false" data-target="trans-{{ loop.index }}">
        Show translation
      </button>
      <p class="story-para-en" id="trans-{{ loop.index }}" hidden>{{ para.en }}</p>
    </div>
    {% endfor %}
  </div>

  <!-- Vocab spotlight -->
  {% if story.vocab_spotlight %}
  <section class="vocab-spotlight card">
    <h2 class="card-title">Vocab spotlight</h2>
    <div class="vocab-list">
      {% for v in story.vocab_spotlight %}
      <div class="vocab-item">
        <div class="vocab-de">{{ v.de }}</div>
        <div class="vocab-en">{{ v.en }}</div>
        {% if v.note %}<div class="vocab-note">{{ v.note }}</div>{% endif %}
      </div>
      {% endfor %}
    </div>
  </section>
  {% endif %}

  <!-- Comprehension questions -->
  {% if story.comprehension_questions %}
  <section class="comprehension card">
    <h2 class="card-title">Comprehension</h2>
    <div class="question-list">
      {% for q in story.comprehension_questions %}
      <div class="question-item">
        <div class="question-text">
          <span class="question-de">{{ q.question_de }}</span>
          <span class="question-en muted">{{ q.question_en }}</span>
        </div>
        <button class="btn-show-answer" data-answer-de="{{ q.answer_de }}" data-answer-en="{{ q.answer_en }}">
          Show answer
        </button>
        <div class="answer-reveal" hidden>
          <span class="answer-de">{{ q.answer_de }}</span>
          <span class="answer-en muted">{{ q.answer_en }}</span>
        </div>
      </div>
      {% endfor %}
    </div>
  </section>
  {% endif %}

  <!-- Mark as read -->
  <div class="story-footer">
    {% if is_read %}
    <div class="story-already-read">✓ You've read this story</div>
    <a href="/stories" class="btn btn-primary">Back to Stories</a>
    {% else %}
    <form method="post" action="/stories/{{ story.story_id }}/mark-read">
      <button type="submit" class="btn btn-primary btn-large btn-full">Mark as read ✓</button>
    </form>
    {% endif %}
  </div>

</div>

<!-- Phrase popup -->
<div id="phrase-popup" class="phrase-popup" hidden role="dialog" aria-modal="true">
  <button class="phrase-popup-close" id="phrase-popup-close" aria-label="Close">×</button>
  <div class="phrase-popup-de" id="popup-de"></div>
  <div class="phrase-popup-en" id="popup-en"></div>
  <div class="phrase-popup-usage" id="popup-usage"></div>
  <div class="phrase-popup-grammar" id="popup-grammar"></div>
</div>
<div id="phrase-popup-backdrop" class="phrase-popup-backdrop" hidden></div>

{% endblock %}

{% block scripts %}
<script>
// ── Translation toggles ──────────────────────────────────────
document.querySelectorAll(".btn-translation-toggle").forEach(btn => {
  btn.addEventListener("click", () => {
    const targetId = btn.dataset.target;
    const para = document.getElementById(targetId);
    const visible = !para.hidden;
    para.hidden = visible;
    btn.textContent = visible ? "Show translation" : "Hide translation";
    btn.setAttribute("aria-expanded", String(!visible));
  });
});

// ── Show-answer buttons ──────────────────────────────────────
document.querySelectorAll(".btn-show-answer").forEach(btn => {
  btn.addEventListener("click", () => {
    const item = btn.closest(".question-item");
    const reveal = item.querySelector(".answer-reveal");
    reveal.hidden = false;
    btn.hidden = true;
  });
});

// ── Phrase popup ─────────────────────────────────────────────
const popup   = document.getElementById("phrase-popup");
const backdrop = document.getElementById("phrase-popup-backdrop");

function openPopup(span) {
  document.getElementById("popup-de").textContent      = span.dataset.de      || "";
  document.getElementById("popup-en").textContent      = span.dataset.en      || "";
  document.getElementById("popup-usage").textContent   = span.dataset.usage   || "";
  const grammar = span.dataset.grammar || "";
  const grammarEl = document.getElementById("popup-grammar");
  grammarEl.textContent = grammar;
  grammarEl.hidden = !grammar;
  popup.hidden   = false;
  backdrop.hidden = false;
}

function closePopup() {
  popup.hidden   = true;
  backdrop.hidden = true;
}

document.querySelectorAll(".phrase-highlight").forEach(span => {
  span.addEventListener("click", (e) => {
    e.stopPropagation();
    openPopup(span);
  });
});

document.getElementById("phrase-popup-close").addEventListener("click", closePopup);
backdrop.addEventListener("click", closePopup);
document.addEventListener("keydown", e => { if (e.key === "Escape") closePopup(); });
</script>
{% endblock %}