{% load custom_tags %}

<input type="hidden" id="globalCsrf" value="{{ csrf_token }}">

<div id="ai-generated-section" class="col-lg-12">
  <div class="result-section" style="width:100%;">
    <div class="result-header">AI Generated & Logical Multi-Subtopic Tagging</div>

    <form id="ai-question-form">
      {% csrf_token %}
      <input type="hidden" name="original_question_id" value="{{ question_id }}">

      <div class="scrollable-content">
        <div class="container-fluid">
          {% for pair in paired_blocks %}
          <div class="row mb-4 single-pair" data-pair-index="{{ forloop.counter }}" data-question-id="{{ question_id }}">
            <div class="card-container">

              <!-- 🟦 English Block -->
              <div class="result-section border border-primary rounded p-3 lang-card">
                <div class="result-header mb-2">Question (EN) #{{ forloop.counter }}</div>
                <textarea class="form-control ai-textarea-en" readonly>{{ pair.english }}</textarea>

                <div class="mt-3">
                  <label><b>Keywords (EN)</b></label>
                  <div class="keyword-display-en mb-2">
                    {% for kw in pair.en_keywords|default_if_none:""|trim|split:"," %}
                      {% if kw %}
                        <span class="keyword-badge keyword-new">{{ kw|trim }}<span class="keyword-remove">×</span></span>
                      {% endif %}
                    {% endfor %}
                  </div>

                  <input type="text" class="form-control keywords-input-en d-none" placeholder="Add keywords separated by commas" />
                  <button type="button" class="btn btn-sm btn-outline-primary keyword-edit-btn">✏️ Edit Keywords</button>
                </div>

                {% if pair.matched_subtopics %}
                <div class="mt-3 subtopic-section">
                  <label><b>Matched Logical Subtopics</b></label>
                  <span class="toggle-btn" data-target="#subtopic-{{ forloop.counter }}">▲ Hide</span>
                  <div id="subtopic-{{ forloop.counter }}" class="subtopic-list mt-2">
                    {% for st in pair.matched_subtopics %}
                      <span class="subtopic-chip area-{{ st.area|default:"other"|lower|slugify }}" data-code="{{ st.code }}">
                        {{ st.area|default:"—" }} → {{ st.subtopic|default:"—" }} ({{ st.code|default:"—" }})
                      </span>
                    {% endfor %}
                  </div>
                </div>
                {% endif %}
              </div>

              <!-- 🟩 Hindi Block -->
              <div class="result-section border border-success rounded p-3 lang-card">
                <div class="result-header mb-2">Question (HI) #{{ forloop.counter }}</div>
                <textarea class="form-control ai-textarea-hi" readonly>{{ pair.hindi }}</textarea>

                <div class="mt-3">
                  <label><b>Keywords (HI)</b></label>
                  <div class="keyword-display-hi mb-2">
                    {% for kw in pair.hi_keywords|default_if_none:""|trim|split:"," %}
                      {% if kw %}
                        <span class="keyword-badge keyword-new">{{ kw|trim }}<span class="keyword-remove">×</span></span>
                      {% endif %}
                    {% endfor %}
                  </div>

                  <input type="text" class="form-control keywords-input-hi d-none" placeholder="कीवर्ड जोड़ें (कॉमा से अलग करें)" />
                  <button type="button" class="btn btn-sm btn-outline-primary keyword-edit-btn">✏️ Edit Keywords</button>
                </div>

                <div class="d-flex justify-content-between mt-3">
                  <button type="button" class="btn btn-success save-pair-btn">💾 Save Question</button>
                  <small class="save-status text-muted"></small>
                </div>
              </div>

            </div>
          </div>
          {% endfor %}
        </div>
      </div>
    </form>
  </div>
</div>

<script>
document.addEventListener('click', async e => {

  // ✏️ Edit / Done Keywords
  if(e.target.classList.contains('keyword-edit-btn')){
    const parent = e.target.closest('.mt-3');
    const display = parent.querySelector('.keyword-display-en, .keyword-display-hi');
    const input = parent.querySelector('input');
    const editing = !input.classList.contains('d-none');

    if(editing){
      const list = input.value.split(',').map(k => k.trim()).filter(Boolean);
      display.innerHTML = list.map(k => 
        `<span class='keyword-badge keyword-new'>${k}<span class='keyword-remove'>×</span></span>`
      ).join('');
      input.classList.add('d-none');
      e.target.textContent = '✏️ Edit Keywords';
      e.target.classList.replace('btn-outline-success','btn-outline-primary');
    } else {
      input.value = Array.from(display.querySelectorAll('.keyword-badge'))
        .map(b => b.textContent.replace('×','').trim())
        .join(', ');
      input.classList.remove('d-none');
      input.focus();
      e.target.textContent = '💾 Done';
      e.target.classList.replace('btn-outline-primary','btn-outline-success');
    }
    return;
  }

  // Remove keyword
  if(e.target.classList.contains('keyword-remove')){
    e.target.parentElement.remove();
    return;
  }

  // Toggle subtopics
  if(e.target.classList.contains('toggle-btn')){
    const target = document.querySelector(e.target.dataset.target);
    target.classList.toggle('d-none');
    e.target.textContent = target.classList.contains('d-none') 
      ? "▼ Show" 
      : "▲ Hide";
    return;
  }

  // 💾 SAVE QUESTION
  if(e.target.classList.contains('save-pair-btn')){

    const pair = e.target.closest('.single-pair');
    const status = pair.querySelector('.save-status');
    const csrf = document.getElementById('globalCsrf').value;
    const original_id = pair.dataset.questionId;

    const enText = pair.querySelector('.ai-textarea-en').value.trim();
    const hiText = pair.querySelector('.ai-textarea-hi').value.trim();

    const enKeywords = Array.from(
      pair.querySelectorAll('.keyword-display-en .keyword-badge')
    ).map(k => k.textContent.replace("×","").trim())
     .filter(Boolean)
     .join(", ");

    const hiKeywords = Array.from(
      pair.querySelectorAll('.keyword-display-hi .keyword-badge')
    ).map(k => k.textContent.replace("×","").trim())
     .filter(Boolean)
     .join(", ");

    if(!enText || !hiText){
      status.textContent = "⚠️ Cannot save: Question text is empty!";
      return;
    }

    status.textContent = "⏳ Saving AI alternate question...";

    try {
      const response = await fetch("{% url 'save_alternate_question' %}", {
        method: "POST",
        headers: {
          "Content-Type": "application/json",
          "X-CSRFToken": csrf
        },
        body: JSON.stringify({
          source_id: original_id,
          content: {
            english_blocks: [
              `Question: ${enText}\nKeywords: ${enKeywords}`
            ],
            hindi_blocks: [
              `Question: ${hiText}\nKeywords: ${hiKeywords}`
            ]
          }
        })
      });

      const data = await response.json();

      if(response.ok && data.status === "success"){
        status.textContent = 
          "✅ Question saved successfully! New IDs: " 
          + data.new_ids.join(", ");

        e.target.textContent = "Saved";
        e.target.disabled = true;
        e.target.classList.replace("btn-success","btn-secondary");
      } else {
        status.textContent = 
          "⚠️ Save failed: " + (data.message || "Unknown error");
      }

    } catch(err){
      console.error("❌ Save Error:", err);
      status.textContent = "❌ Network or server error!";
    }
  }

});
</script>