{% extends 'anatomy/exams.html' %}

{% block content %}
  <div class="row">
    <div class="col-md-6">
      <div class="card mb-3">
        <div class="card-body">
          <div class="d-flex justify-content-between align-items-start">
            <div>
              <h5 class="card-title mb-1">Marking question {{ question_details.current }} of {{ question_details.total }}</h5>
              <div class="mb-2">
                <a class="btn btn-sm btn-outline-secondary me-1" href="{% url 'anatomy:question_detail' question.id %}" title="View the Question">View</a>
                <a class="btn btn-sm btn-outline-secondary me-1" href="{% url 'anatomy:anatomy_question_update' question.id %}" title="Edit the Question">Edit</a>
                {% if request.user.is_superuser %}
                  <a class="btn btn-sm btn-outline-secondary" href="{% url 'admin:anatomy_anatomyquestion_change' question.id %}" title="Admin Edit">Admin Edit</a>
                {% endif %}
                <a class="btn btn-sm btn-outline-secondary" href="{% url 'anatomy:mark' exam.id question_number %}">Classic mark</a>
              </div>
              <h6 class="mb-1">{{ question.question_type }}</h6>
              {% if question.structure %}
                <div class="small text-muted">Structure: {{ question.structure }}</div>
              {% endif %}
              <div class="mt-2">Primary answer: <span id="primary-answer" title="The primary answer of the question">{{ question.get_primary_answer }}</span></div>
            </div>
            <div class="text-end">
              {% if question.answer_help %}
                <button class="btn btn-sm btn-outline-info" data-bs-toggle="collapse" data-bs-target="#marking-help">Answer Help</button>
              {% endif %}
            </div>
          </div>
          {% if question.answer_help %}
            <div class="collapse mt-2" id="marking-help">
              <div class="card card-body">
                {{ question.answer_help|safe }}
              </div>
            </div>
          {% endif %}

          <div class="mt-3">
            <form method="POST" class="post-form">{% csrf_token %}
              <p class="small text-muted">Click each answer to toggle through marks awarded (as per colour). This UI writes marks immediately.</p>
              <div class="d-flex justify-content-between align-items-center mb-2">
                <div></div>
                <div>
                  {% if question_details.current > 1 %}
                    <button type="submit" name="previous" class="btn btn-outline-secondary btn-sm me-1">Previous</button>
                  {% endif %}
                  <button type="submit" name="save" class="btn btn-primary btn-sm me-1">Save</button>
                  {% if question_details.current < question_details.total %}
                    <button type="submit" name="next" class="btn btn-outline-primary btn-sm me-1">Next</button>
                  {% endif %}
                </div>
              </div>
              <div class="mb-2">
                <button class="btn btn-sm btn-outline-info me-1" hx-get="{% url 'anatomy:mark2_exam_marked' exam.id question_number %}" hx-target="#exam-marked-container" hx-swap="innerHTML">Show exam-submitted answers</button>
                <button class="btn btn-sm btn-outline-info" hx-get="{% url 'anatomy:mark2_question_marked' question.pk %}" hx-target="#question-marked-container" hx-swap="innerHTML">Show all stored answers for question</button>
              </div>

              <div class="row">
                <div class="col-12">
                  <h6>Answers</h6>
                  <ul id="answer-list" class="list-group answer-list mb-3">
                    {# Render currently-stored marked answers first, then unmarked submissions #}
                    {% include 'anatomy/partials/mark2_marked_list_fragment.html' %}
                    {% include 'anatomy/partials/mark2_unmarked_list_fragment.html' %}
                  </ul>
                  <div id="exam-marked-container" class="mt-2"></div>
                  <div id="question-marked-container" class="mt-2"></div>
                </div>
              </div>

              <div class="mt-3">
                <div class="small text-muted key">Key: <span class="key-item correct">2 Marks</span>, <span class="key-item half-correct">1 Mark</span>, <span class="key-item incorrect">0 Marks</span></div>
              </div>

              <span class="visually-hidden">{{ form.as_p }}</span>
            </form>
          </div>
        </div>
      </div>
    </div>

    <div class="col-md-6">
      <div id="single-dicom-viewer" class="marking-dicom" data-images="{{ question.get_image_url_array }}" data-annotations='{{ question.get_image_annotations }}'></div>
    </div>
  </div>
{% endblock %}

{% block css %}
  <style>
  /* Ensure answer states are visible and clickable in the new layout */
    .answer { cursor: pointer; }
    /* Use border to indicate mark state instead of background */
    .answer.correct { color: #155724; background-color: transparent; }
    .answer.half-correct { color: #856404; background-color: transparent; }
    .answer.incorrect { color: #721c24; background-color: transparent; }
    .answer.not-marked { color: inherit; background-color: transparent; }
    .answer-list .list-group-item pre { margin: 0; font-family: monospace; white-space: pre-wrap; }
    .mark-controls { display:flex; gap:0.25rem; }
    .mark-btn { padding: 0.15rem 0.4rem; font-size: 0.8rem; }
    /* Per-state border indicators on the list item */
    .marked-item { }
    .marked-correct { border-left: 4px solid #2a9d3f; }
    .marked-half-correct { border-left: 4px solid #ffb020; }
    .marked-incorrect { border-left: 4px solid #d3413a; }

    /* Key items use a small left-border swatch to match the list markers */
    .key .key-item { display:inline-block; padding-left:8px; margin-left:6px; }
    .key .key-item.correct { border-left: 8px solid #2a9d3f; }
    .key .key-item.half-correct { border-left: 8px solid #ffb020; }
    .key .key-item.incorrect { border-left: 8px solid #d3413a; }
    /* Right-floating action icons for answer external links */
    .answer-actions { min-width: 6rem; }
    .answer-actions .action-icon { margin-left: 0.5rem; color: #6c757d; text-decoration: none; border: none; background: none; }
    .answer-actions .action-icon:hover { color: #000; text-decoration: none; }
    .answer-actions .copy-to-clipboard { cursor: pointer; }
  /* Active state for numeric mark buttons */
    .mark-btn.active { background-color: #0d6efd; color: #fff; border-color: #0d6efd; }
  </style>
{% endblock %}

{% block js %}
  <script>
    (function(){
  // CSRF helper for fetch
      function getCookie(name) {
        let cookieValue = null;
        if (document.cookie && document.cookie !== '') {
          const cookies = document.cookie.split(';');
          for (let i = 0; i < cookies.length; i++) {
            const cookie = cookies[i].trim();
            if (cookie.substring(0, name.length + 1) === (name + '=')) {
              cookieValue = decodeURIComponent(cookie.substring(name.length + 1));
              break;
            }
          }
        }
        return cookieValue;
      }
      const csrftoken = getCookie('csrftoken');

  // Delegated click handler for answers — only updates local state.
      document.addEventListener('click', function(e){
        // Ignore clicks on action icons or mark controls
        if (e.target.closest('.answer-actions') || e.target.closest('.mark-controls') || e.target.closest('.copy-to-clipboard')) return;

        // Prefer a clicked span.answer if present
        let spanEl = e.target.closest('span.answer');
        // Otherwise fall back to the list-item's span
        if (!spanEl) {
          const li = e.target.closest('#answer-list li');
          if (!li) return;
          spanEl = li.querySelector('span.answer');
          if (!spanEl) return;
        }

        // Ensure span has an explicit state class
        if (!spanEl.classList.contains('correct') && !spanEl.classList.contains('half-correct') && !spanEl.classList.contains('incorrect') && !spanEl.classList.contains('not-marked')) {
          spanEl.classList.add('not-marked');
        }

        // cycle states: not-marked -> correct -> half-correct -> incorrect -> not-marked
        const states = ['not-marked', 'correct', 'half-correct', 'incorrect'];
        let currentState = 'not-marked';
        for (let p of spanEl.classList) {
          if (states.includes(p)) { currentState = p; break; }
        }
        let idx = (states.indexOf(currentState) + 1) % states.length;
        const newState = states[idx];

        // map to numeric for setMarkForSpan
        let numeric = null;
        if (newState === 'correct') numeric = 2;
        else if (newState === 'half-correct') numeric = 1;
        else if (newState === 'incorrect') numeric = 0;

        // delegate to setMarkForSpan to keep behaviour consistent (updates classes, active buttons, hidden field)
        setMarkForSpan(spanEl, numeric);

      }, false);

      function updateMarkedAnswersField() {
        const marked = { 'correct': [], 'half-correct': [], 'incorrect': [] };
        document.querySelectorAll('#answer-list span.answer').forEach(function(el) {
          if (el.classList.contains('correct')) marked.correct.push((el.title || el.textContent).trim());
          else if (el.classList.contains('half-correct')) marked['half-correct'].push((el.title || el.textContent).trim());
          else if (el.classList.contains('incorrect')) marked.incorrect.push((el.title || el.textContent).trim());
        });

    // Ensure the hidden input exists
        let hidden = document.getElementById('id_marked_answers');
        if (!hidden) {
          hidden = document.createElement('input');
          hidden.type = 'hidden';
          hidden.name = 'marked_answers';
          hidden.id = 'id_marked_answers';
          const form = document.querySelector('form.post-form');
          if (form) form.appendChild(hidden);
        }
        hidden.value = JSON.stringify(marked);
      }

  // Enhance list items with numeric mark controls (2,1,0,Clear)
      function attachNumericControls() {
        function makeButton(label, cls) {
          const b = document.createElement('button');
          b.type = 'button';
          b.className = 'btn btn-sm btn-outline-secondary me-1 mark-btn ' + cls;
          b.textContent = label;
          return b;
        }

        document.querySelectorAll('.answer-list li').forEach(function(li) {
          if (li.querySelector('.mark-controls')) return; // already attached
          const span = li.querySelector('span.answer');
          if (!span) return;
          // Ensure span has an explicit default state class so logic is consistent
          if (!span.classList.contains('correct') && !span.classList.contains('half-correct') && !span.classList.contains('incorrect') && !span.classList.contains('not-marked')) {
            span.classList.add('not-marked');
          }
          const controls = document.createElement('div');
          controls.className = 'mark-controls mt-2';
          const b2 = makeButton('2', 'mark-2');
          const b1 = makeButton('1', 'mark-1');
          const b0 = makeButton('0', 'mark-0');
          const bClear = makeButton('⨯', 'mark-clear');

          controls.appendChild(b2);
          controls.appendChild(b1);
          controls.appendChild(b0);
          controls.appendChild(bClear);
      // append after the pre
          li.appendChild(controls);

      // wire clicks
          b2.addEventListener('click', function(){ setMarkForSpan(span, 2); });
          b1.addEventListener('click', function(){ setMarkForSpan(span, 1); });
          b0.addEventListener('click', function(){ setMarkForSpan(span, 0); });
          bClear.addEventListener('click', function(){ setMarkForSpan(span, null); });

      // set initial active button based on existing state
          (function(){
            let state = null;
            if (span.classList.contains('correct')) state = 2;
            else if (span.classList.contains('half-correct')) state = 1;
            else if (span.classList.contains('incorrect')) state = 0;
            // clear any pre-existing active flags then set the correct one
            [b2, b1, b0, bClear].forEach(b => b.classList.remove('active'));
            if (state === 2) b2.classList.add('active');
            else if (state === 1) b1.classList.add('active');
            else if (state === 0) b0.classList.add('active');
            else bClear.classList.add('active');
          })();
        });
      }

      function setMarkForSpan(el, numeric) {
        // numeric: 2 -> correct, 1 -> half-correct, 0 -> incorrect, null -> not-marked
        const li = el.closest('li');
        let state = 'not-marked';
        if (numeric === 2) state = 'correct';
        else if (numeric === 1) state = 'half-correct';
        else if (numeric === 0) state = 'incorrect';
        el.className = 'answer ' + state;
        if (li) {
          // clear previous per-state classes
          li.classList.remove('marked-correct','marked-half-correct','marked-incorrect','marked-item');
          if (state === 'not-marked') {
            // nothing
          } else if (state === 'correct') {
            li.classList.add('marked-item','marked-correct');
          } else if (state === 'half-correct') {
            li.classList.add('marked-item','marked-half-correct');
          } else if (state === 'incorrect') {
            li.classList.add('marked-item','marked-incorrect');
          }
        }
        // update active state of numeric controls for this list item
        try {
          const li = el.closest('li');
          if (li) {
            const btn2 = li.querySelector('.mark-2');
            const btn1 = li.querySelector('.mark-1');
            const btn0 = li.querySelector('.mark-0');
            const btnClear = li.querySelector('.mark-clear');
            [btn2, btn1, btn0, btnClear].forEach(b => { if (b) { b.classList.remove('active'); } });
            if (numeric === 2 && btn2) btn2.classList.add('active');
            else if (numeric === 1 && btn1) btn1.classList.add('active');
            else if (numeric === 0 && btn0) btn0.classList.add('active');
            else if (numeric === null && btnClear) btnClear.classList.add('active');
          }
        } catch (err) {
          // ignore
        }

        updateMarkedAnswersField();
      }

  // Run once on load to add controls. Also re-run after HTMX swaps so controls
  // appear when partials are replaced.
      function initMark2() {
        attachNumericControls();
      }

      if (document.readyState === 'loading') {
        document.addEventListener('DOMContentLoaded', initMark2);
      } else {
        initMark2();
      }

  // If HTMX is used to update parts of the page, re-run attachNumericControls
  // after swaps so newly inserted list items get controls.
      document.addEventListener('htmx:afterSwap', function(evt) {
        initMark2();
      });

  // Ensure the hidden marked_answers field is updated before any form submit
      const postForm = document.querySelector('form.post-form');
      if (postForm) {
        postForm.addEventListener('submit', function(e){
          try { updateMarkedAnswersField(); } catch (err) { /* still submit */ }
        });
      }

  // Copy-to-clipboard handler for dropdown items
      document.addEventListener('click', function(e){
        const btn = e.target.closest('.copy-to-clipboard');
        if (!btn) return;
        const text = btn.getAttribute('data-text');
        if (!text) return;
        try {
          navigator.clipboard.writeText(text);
          // simple visual feedback: change the button text briefly
          const prev = btn.textContent;
          btn.textContent = 'Copied';
          setTimeout(function(){ btn.textContent = prev; }, 1200);
        } catch (err) {
          console.warn('copy failed', err);
        }
      });

    })();
  </script>
{% endblock %}