{% extends "base.html" %}

{% block title %}Fichas Mnemotécnicas 3D (Flashcards) - AVANZO | MINEDUCYT El Salvador{% endblock %}

{% block content %}
<div class="container py-4">

  <div class="text-center mb-4">
    <span class="badge bg-primary text-uppercase px-3 py-1 small">Repaso Rápido de Fórmulas y Fechas</span>
    <h3 class="fw-bold text-dark mt-2 mb-1">Fichas de Estudio Mnemotécnicas 3D</h3>
    <p class="text-muted small">Haz clic sobre la tarjeta o presiona la barra espaciadora para voltearla y ver la respuesta.</p>
  </div>

  <!-- FILTROS -->
  <div class="d-flex justify-content-center flex-wrap gap-2 mb-4 pb-2 border-bottom">
    <a href="{{ url_for('flashcards_view') }}" class="btn btn-sm {% if not selected_category %}btn-primary{% else %}btn-outline-secondary{% endif %} rounded-pill px-3">
      Todas las Materias
    </a>
    {% for cat in categories %}
    <a href="{{ url_for('flashcards_view', materia=cat.id) }}" class="btn btn-sm {% if selected_category == cat.id %}btn-primary{% else %}btn-outline-secondary{% endif %} rounded-pill px-3">
      <i class="bi {{ cat.icon }} me-1"></i> {{ cat.name }}
    </a>
    {% endfor %}
  </div>

  {% if flashcards %}
  <div class="flashcard-scene mb-4">
    <div class="flashcard-inner" id="active-flashcard" onclick="toggleFlip()">
      <!-- FRENTE -->
      <div class="flashcard-front">
        <div class="d-flex justify-content-between align-items-center">
          <span class="badge bg-light text-primary border px-2 py-1 small text-uppercase" id="card-cat">
            {{ flashcards[0].category_id | capitalize }}
          </span>
          <span class="text-muted small" id="card-counter">1 de {{ flashcards | length }}</span>
        </div>

        <div class="text-center my-auto">
          <h5 class="fw-bold text-primary mb-3" id="card-title">{{ flashcards[0].title }}</h5>
          <h4 class="fw-semibold text-dark lh-base" id="card-prompt">{{ flashcards[0].prompt }}</h4>
        </div>

        <div class="text-center text-muted small">
          <i class="bi bi-arrow-repeat me-1"></i> Clic para ver fórmula / respuesta
        </div>
      </div>

      <!-- REVERSO -->
      <div class="flashcard-back">
        <div class="d-flex justify-content-between align-items-center">
          <span class="badge bg-warning text-dark px-2 py-1 small fw-bold">RESPUESTA CLAVE</span>
          <span class="text-white-50 small">AVANZO SV</span>
        </div>

        <div class="text-center my-auto">
          <h3 class="fw-bold text-warning font-monospace mb-3" id="card-answer">{{ flashcards[0].answer }}</h3>
          <p class="text-light small mb-0 px-2" id="card-detail">{{ flashcards[0].detail }}</p>
        </div>

        <div class="text-center text-white-50 small">
          <i class="bi bi-arrow-repeat me-1"></i> Clic para volver a la pregunta
        </div>
      </div>
    </div>
  </div>

  <!-- CONTROLES -->
  <div class="d-flex justify-content-center align-items-center gap-3">
    <button onclick="prevCard()" class="btn btn-outline-secondary px-4 fw-semibold">
      <i class="bi bi-chevron-left me-1"></i> Anterior
    </button>
    <button onclick="toggleFlip()" class="btn btn-primary px-4 fw-bold">
      <i class="bi bi-arrow-clockwise me-1"></i> Voltear (Espacio)
    </button>
    <button onclick="nextCard()" class="btn btn-outline-secondary px-4 fw-semibold">
      Siguiente <i class="bi bi-chevron-right ms-1"></i>
    </button>
  </div>
  {% else %}
  <div class="text-center py-5 text-muted">
    <i class="bi bi-inbox fs-1 d-block mb-2"></i>
    No hay flashcards disponibles en esta categoría.
  </div>
  {% endif %}

</div>
{% endblock %}

{% block extra_js %}
<script>
  const cardsData = {{ flashcards | tojson }};
  let currentCardIndex = 0;
  const cardElem = document.getElementById("active-flashcard");

  function renderCurrentCard() {
    if (!cardsData || cardsData.length === 0) return;
    const c = cardsData[currentCardIndex];

    if (cardElem) cardElem.classList.remove("is-flipped");

    document.getElementById("card-cat").innerText = c.category_id.toUpperCase();
    document.getElementById("card-counter").innerText = `${currentCardIndex + 1} de ${cardsData.length}`;
    document.getElementById("card-title").innerText = c.title;
    document.getElementById("card-prompt").innerText = c.prompt;
    document.getElementById("card-answer").innerText = c.answer;
    document.getElementById("card-detail").innerText = c.detail;
  }

  function toggleFlip() {
    if (cardElem) cardElem.classList.toggle("is-flipped");
  }

  function nextCard() {
    if (currentCardIndex < cardsData.length - 1) {
      currentCardIndex++;
      renderCurrentCard();
    } else {
      currentCardIndex = 0;
      renderCurrentCard();
    }
  }

  function prevCard() {
    if (currentCardIndex > 0) {
      currentCardIndex--;
      renderCurrentCard();
    } else {
      currentCardIndex = cardsData.length - 1;
      renderCurrentCard();
    }
  }

  document.addEventListener("keydown", (e) => {
    if (e.code === "Space") {
      e.preventDefault();
      toggleFlip();
    } else if (e.code === "ArrowRight") {
      nextCard();
    } else if (e.code === "ArrowLeft") {
      prevCard();
    }
  });
</script>
{% endblock %}