{% extends 'base.html' %}
{% block content %}
<div class="container">
  <h1 class="title">{{ actividad.titulo }}</h1>
  <p>{{ actividad.descripcion }}</p>

  <div id="result-summary" style="margin-top:1rem; display:none;" class="notification is-info"></div>

  <div style="margin-top:0.75rem;">
    <a id="ver-resultados-btn" class="button is-primary" href="{% url 'actividades:resultado_actividad' actividad.pk %}" style="display:none; margin-bottom: 0.75rem;">
      Ver resultados
    </a>
    <button id="retry-btn" class="button is-warning" style="display:none; margin-left:8px;">Reintentar actividad</button>
  </div>

  <div style="margin-top:1.5rem;">
    <h3 class="is-size-6">Preguntas</h3>
    {% if preguntas %}
      <div class="box">
        {% for pregunta in preguntas %}
          <div class="content pregunta-block" data-pregunta="{{ pregunta.pk }}" style="margin-bottom:1rem;">
            <p><strong>{{ forloop.counter }}. {{ pregunta.texto }}</strong></p>
            <div>
              {% for opcion in pregunta.opciones.all %}
                <button class="button is-light option-button" data-pregunta="{{ pregunta.pk }}" data-opcion="{{ opcion.pk }}">
                  {{ opcion.texto }}
                </button>
              {% endfor %}
            </div>
            <div class="msg-area" style="margin-top:.5rem;"></div>
          </div>
        {% endfor %}
      </div>
    {% else %}
      <p>No hay preguntas para esta actividad.</p>
    {% endif %}
  </div>

  <div style="margin-top:1rem;">
    <a class="button is-link" href="{% url 'actividades:lista_actividades' %}">Volver</a>
  </div>
</div>
<script>
document.addEventListener('DOMContentLoaded', function() {
  const ACTIVIDAD_ID = {{ actividad.pk }};
  const RECORD_ANSWER_URL = "{% url 'actividades:record_answer' %}";
  const RETRY_URL = "{% url 'actividades:retry_activity' actividad.pk %}";
  const UPDATE_PROGRESS_URL = "{% url 'actividades:update_progress' %}";
  const PROG_COMPLETED = {% if prog and prog.completed %}true{% else %}false{% endif %};

  function getCookie(name) {
    let v = null;
    if (document.cookie && document.cookie !== '') {
      document.cookie.split(';').forEach(cookie => {
        const cookiePair = cookie.trim().split('=');
        if (cookiePair[0] === name) v = decodeURIComponent(cookiePair[1]);
      });
    }
    return v;
  }

  function postAnswer(preguntaId, opcionId) {
    const formData = new FormData();
    formData.append('pregunta_id', preguntaId);
    formData.append('opcion_id', opcionId);

    fetch(RECORD_ANSWER_URL, {
      method: 'POST',
      headers: {'X-CSRFToken': getCookie('csrftoken'), 'X-Requested-With': 'XMLHttpRequest'},
      body: formData
    })
    .then(res => res.json())
    .then(data => {
      if (!data.ok) {
        console.error('Error guardando respuesta', data);
        return;
      }
      const parent = document.querySelector(`.pregunta-block[data-pregunta="${preguntaId}"]`);
      if (parent) {
        const msgArea = parent.querySelector('.msg-area');
        if (msgArea) {
          msgArea.textContent = 'Respuesta guardada.';
        }
      }

      if (data.completed) {
        showCompletedUI(data);
      }
    })
    .catch(err => console.error(err));
  }

  function postRetry() {
    fetch(RETRY_URL, {
      method: 'POST',
      headers: {'X-CSRFToken': getCookie('csrftoken'), 'X-Requested-With': 'XMLHttpRequest'},
      body: new FormData()
    })
    .then(res => res.json())
    .then(data => {
      if (!data.ok) {
        console.error('Error al reintentar', data);
        return;
      }

      const div = document.getElementById('result-summary');
      if (div) {
        div.style.display = 'none';
        div.innerHTML = '';
      }
      const verBtn = document.getElementById('ver-resultados-btn');
      if (verBtn) verBtn.style.display = 'none';
      const retryBtn = document.getElementById('retry-btn');
      if (retryBtn) retryBtn.style.display = 'none';

      document.querySelectorAll('.option-button').forEach(b => {
        b.disabled = false;
      });
      document.querySelectorAll('.msg-area').forEach(ma => ma.textContent = '');
    })
    .catch(err => console.error(err));
  }

  function showCompletedUI(data) {
    const div = document.getElementById('result-summary');
    if (div) {
      div.style.display = 'block';
      if (data && typeof data.correct !== 'undefined') {
        div.innerHTML = `<strong>Actividad finalizada</strong><br>
                         Correctas: ${data.correct} <br>
                         Incorrectas: ${data.incorrect} <br>
                         Progreso: ${data.progress}%`;
      } else {
        div.innerHTML = `<strong>Actividad finalizada</strong>`;
      }
    }

    const verBtn = document.getElementById('ver-resultados-btn');
    if (verBtn) verBtn.style.display = 'inline-block';
    const retryBtn = document.getElementById('retry-btn');
    if (retryBtn) retryBtn.style.display = 'inline-block';
    document.querySelectorAll('.option-button').forEach(b => b.disabled = true);
  }

  document.addEventListener('click', function(e) {
    if (e.target.matches('.option-button')) {
      const preguntaId = e.target.dataset.pregunta;
      const opcionId = e.target.dataset.opcion;
      postAnswer(preguntaId, opcionId);
    }
  });

  const retryBtnEl = document.getElementById('retry-btn');
  if (retryBtnEl) {
    retryBtnEl.addEventListener('click', function() {
      if (!confirm('¿Seguro que quieres reiniciar la actividad? Se borrarán tus respuestas.')) return;
      postRetry();
    });
  }
  if (PROG_COMPLETED) {
    showCompletedUI();
  }
});
</script>
{% endblock %}