{% extends 'sbas/base.html' %}

{% block content %}
  <div class="question-review-question mb-3">
    Active filters:
    {% if filters.category %}
      <span class="badge bg-primary me-1">Category: {{ filters.category }}</span>
    {% else %}
      <span class="badge bg-secondary me-1">Category: Any</span>
    {% endif %}
    {% if filters.status %}
      <span class="badge bg-primary me-1">Status: {{ filters.status }}</span>
    {% else %}
      <span class="badge bg-secondary me-1">Status: Any</span>
    {% endif %}
    <h5 class="mb-1">Reviewing question: {{ question.title |default:"No Title" }}</h5>

    <a href="{% url 'sbas:question_detail' question.pk %}" target="_blank" class="btn btn-sm btn-outline-secondary mb-2">View full question details</a>
    <a href="{% url 'sbas:question_update' question.pk %}" target="_blank" class="btn btn-sm btn-outline-secondary mb-2">Edit question</a>


    <div class="question-metadata mt-2 mb-2">
      <h6 class="small text-muted">Metadata</h6>
      <ul class="list-inline small mb-0">
        <li class="list-inline-item me-2">Category: {% if question.category %}{{ question.category }}{% else %}&mdash;{% endif %}</li>
        <li class="list-inline-item me-2">Author(s):
          {% if question.author.count %}
            {% for a in question.author.all %}
              {{ a.get_full_name|default:a.username }}{% if not forloop.last %}, {% endif %}
            {% endfor %}
          {% else %}&mdash;{% endif %}
        </li>
        <li class="list-inline-item me-2">Created: {{ question.created_date|date:"Y-m-d H:i" }}</li>
        <li class="list-inline-item me-2">Open: {% if question.open_access %}Yes{% else %}No{% endif %}</li>
        {% if question.sources %}
          <li class="list-inline-item me-2">Sources: {{ question.sources|length }} item{{ question.sources|length|pluralize }}</li>
        {% endif %}
        {% if question.finding.count %}
          <li class="list-inline-item me-2">Findings: {{ question.finding.count }}</li>
        {% endif %}
        {% if question.structure.count %}
          <li class="list-inline-item me-2">Structures: {{ question.structure.count }}</li>
        {% endif %}
        {% if question.condition.count %}
          <li class="list-inline-item me-2">Conditions: {{ question.condition.count }}</li>
        {% endif %}
        {% if question.presentation.count %}
          <li class="list-inline-item me-2">Presentations: {{ question.presentation.count }}</li>
        {% endif %}
        {% if question.subspecialty.count %}
          <li class="list-inline-item me-2">Subspecialties: {{ question.subspecialty.count }}</li>
        {% endif %}
      </ul>
    </div>

    <div class="mb-2">
      <div class="question-stem">Stem: {{ question.stem|safe }}</div>
    </div>

  {# Multiple-choice answers (SBA specific) #}
    <div class="list-group mb-2">
      {% if question.a_answer %}
        <div class="list-group-item d-flex justify-content-between align-items-start">
          <div><strong>A.</strong> <span class="ms-2">{{ question.a_answer|safe }}</span></div>
          {% if question.best_answer == 'a' %}<span class="badge bg-success">Correct</span>{% endif %}
          {% if question.a_feedback %}
            <div class="mt-1"><strong>Feedback:</strong> {{ question.a_feedback|safe }}</div>
          {% endif %}
        </div>
      {% endif %}
      {% if question.b_answer %}
        <div class="list-group-item d-flex justify-content-between align-items-start">
          <div><strong>B.</strong> <span class="ms-2">{{ question.b_answer|safe }}</span></div>
          {% if question.best_answer == 'b' %}<span class="badge bg-success">Correct</span>{% endif %}
          {% if question.b_feedback %}
            <div class="mt-1"><strong>Feedback:</strong> {{ question.b_feedback|safe }}</div>
          {% endif %}
        </div>
      {% endif %}
      {% if question.c_answer %}
        <div class="list-group-item d-flex justify-content-between align-items-start">
          <div><strong>C.</strong> <span class="ms-2">{{ question.c_answer|safe }}</span></div>
          {% if question.best_answer == 'c' %}<span class="badge bg-success">Correct</span>{% endif %}
          {% if question.c_feedback %}
            <div class="mt-1"><strong>Feedback:</strong> {{ question.c_feedback|safe }}</div>
          {% endif %}
        </div>
      {% endif %}
      {% if question.d_answer %}
        <div class="list-group-item d-flex justify-content-between align-items-start">
          <div><strong>D.</strong> <span class="ms-2">{{ question.d_answer|safe }}</span></div>
          {% if question.best_answer == 'd' %}<span class="badge bg-success">Correct</span>{% endif %}
          {% if question.d_feedback %}
            <div class="mt-1"><strong>Feedback:</strong> {{ question.d_feedback|safe }}</div>
          {% endif %}
        </div>
      {% endif %}
      {% if question.e_answer %}
        <div class="list-group-item d-flex justify-content-between align-items-start">
          <div><strong>E.</strong> <span class="ms-2">{{ question.e_answer|safe }}</span></div>
          {% if question.best_answer == 'e' %}<span class="badge bg-success">Correct</span>{% endif %}
          {% if question.e_feedback %}
            <div class="mt-1"><strong>Feedback:</strong> {{ question.e_feedback|safe }}</div>
          {% endif %}
        </div>
      {% endif %}

    </div>

  {# Generic feedback text if present #}
    {% if question.feedback %}
      <div class="mt-2"><strong>Feedback:</strong> {{ question.feedback|safe }}</div>
    {% endif %}

    {% if question.source %}
      <div class="mt-2"><strong>Source:</strong> {{ question.source|safe }}</div>
    {% endif %}
  </div>

{% comment %} <span class="btn btn-sm btn-outline-success" data-bs-toggle="modal" data-bs-target="#reviewModal" hx-get="{% url 'sbas:question_set_review' question.pk %}?edit=1&new=1" hx-target="#review-form" hx-swap="innerHTML" hx-trigger="load">Add Review</button> {% endcomment %}

  {% comment %} The included partial contains its own <form> with hx-post. Do not wrap it in another form (nested forms break submission). {% endcomment %}
  {% include 'generic/partials/question_review_form.html' with app_name='sbas' question=question form=form %}

  <div class="d-flex gap-2 mt-3">
  {# Skip increments a 'skip' query param used by the view to skip matching questions #}
    <button id="review-skip-btn" type="button" class="btn btn-outline-secondary">Skip</button>

   {# Next should only be enabled after a successful Save (server will send HX-Trigger 'reviewSaved') #}
    <button id="review-next-btn" type="button" class="btn btn-primary" disabled>Next</button>
  </div>

  <script>
    (function(){
      const nextBtn = document.getElementById('review-next-btn');

      // Listen for the server-triggered event 'reviewSaved' (sent via HX-Trigger header).
      // HTMX will dispatch a DOM event with the same name when it receives the header.
      document.addEventListener('reviewSaved', function(){
        nextBtn.disabled = false;
        skipBtn.disabled = true;
      });

      // Build base URL for navigation
      const base = "{% url app_name|add:':question_review_next' %}";

      // Active filters passed from server-side context
      const activeCategory = "{{ filters.category|default:'' }}";
      const activeStatus = "{{ filters.status|default:'' }}";

      // Navigate to the review-next endpoint including current filters
      nextBtn.addEventListener('click', function(){
        const params = new URLSearchParams();
        if (activeCategory) params.set('category', activeCategory);
        if (activeStatus) params.set('status', activeStatus);
        // Preserve any existing skip value from current URL so the caller's
        // skip position isn't lost when moving to the next item.
        const curParams = new URLSearchParams(window.location.search);
        const curSkip = curParams.get('skip');
        if (curSkip) params.set('skip', curSkip);

        // Next navigates to the next matching item (respecting skip)
        const qs = params.toString();
        window.location.href = qs ? (base + '?' + qs) : base;
      });

      // Skip: increment 'skip' query param (defaults to 1) and include current filters
      const skipBtn = document.getElementById('review-skip-btn');
      skipBtn.addEventListener('click', function(){
        // read existing skip from current URL (if present) and increment
        const curParams = new URLSearchParams(window.location.search);
        let curSkip = parseInt(curParams.get('skip') || '0', 10) || 0;
        const newSkip = curSkip + 1;

        const params = new URLSearchParams();
        params.set('skip', String(newSkip));
        if (activeCategory) params.set('category', activeCategory);
        if (activeStatus) params.set('status', activeStatus);

        window.location.href = base + '?' + params.toString();
      });
    })();
  </script>

  <div id="question-review-block" class="mt-4">
    {# Placeholder while HTMX fetches review/block #}
  </div>


{% endblock %}