{% load custom_tags %}

<style>
  body { background-color:#f8f9fa; font-family:"Inter",sans-serif; }
  .result-section{background:white;padding:20px;border-radius:10px;box-shadow:0 0 10px rgba(0,0,0,0.08);margin-bottom:20px;}
  .result-header{background:linear-gradient(90deg,#010f1f,#403e7b);color:#fff;padding:10px 15px;border-radius:8px 8px 0 0;font-weight:600;font-size:1.05rem;}
  .ai-textarea-en,.ai-textarea-hi{
    background:#000;
    color:#fff;
    height:280px;
    font-family:"Roboto Mono",monospace;
    border-radius:8px;
  }
  .keyword-badge{
    display:inline-flex;align-items:center;
    margin:3px 4px;padding:4px 8px;
    border-radius:12px;font-size:0.82rem;
    cursor:pointer;transition:0.2s;
  }
  .keyword-badge:hover{opacity:0.85;transform:scale(1.05);}
  .keyword-existing{background:#6c757d;color:#fff;}
  .keyword-new{background:#28a745;color:#fff;}
  .keyword-remove{margin-left:5px;font-weight:bold;color:#fff;cursor:pointer;}
  .keyword-remove:hover{color:#ffc107;}
  .save-status{font-size:0.85rem;}
  .reason-box{background:#f8f9fa;padding:6px 10px;border-radius:6px;margin-top:4px;font-size:0.82rem;}
  .subtopic-chip{display:inline-block;padding:6px 10px;margin:4px;border-radius:18px;font-size:0.83rem;font-weight:500;color:#fff;}
  .area-polity{background:#264de4;}
  .area-economy{background:#ff9f00;}
  .area-history{background:#a64ca6;}
  .area-geography{background:#3cb371;}
  .area-environment{background:#228b22;}
  .area-science{background:#f04e4e;}
  .area-gs2{background:#6b7280;}
  .toggle-btn{color:#0d6efd;cursor:pointer;font-weight:500;margin-top:5px;display:inline-block;}
  .toggle-btn:hover{text-decoration:underline;}
  .scrollable-content{max-height:80vh;overflow-y:auto;}
  .card-container{display:flex;gap:20px;align-items:stretch;}
  .lang-card{flex:1;display:flex;flex-direction:column;justify-content:space-between;}
  .db-keyword-section{background:#f1f3f5;padding:6px 10px;border-radius:8px;margin-top:5px;}
  .db-keyword-section .keyword-badge{background:#495057;color:#fff;}
  .db-keyword-section .keyword-badge:hover{background:#212529;}
</style>

<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 &amp; 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 }}">
            <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 %}
                        {% if kw|trim|lower in existing_keywords %}
                          <span class="keyword-badge keyword-existing">{{ kw|trim }}<span class="keyword-remove">×</span></span>
                        {% else %}
                          <span class="keyword-badge keyword-new">{{ kw|trim }}<span class="keyword-remove">×</span></span>
                        {% endif %}
                      {% endif %}
                    {% empty %}
                      <span class="text-muted">No English keywords found</span>
                    {% endfor %}
                  </div>

                  <!-- 🟣 Existing DB Keywords (EN) -->
                  {% if pair.db_en_keywords %}
                    <div class="db-keyword-section">
                      <span class="toggle-btn" data-target="#db-en-{{ forloop.counter }}">▲ Hide Existing DB Keywords (EN)</span>
                      <div id="db-en-{{ forloop.counter }}" class="mt-1">
                        {% for kw in pair.db_en_keywords %}
                          <span class="keyword-badge keyword-existing db-keyword">{{ kw }}</span>
                        {% empty %}
                          <span class="text-muted">No DB keywords</span>
                        {% endfor %}
                      </div>
                    </div>
                  {% endif %}

                  <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>

                <!-- Subtopics -->
                {% 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 %}
                      {% with st.area|default:"other"|lower as area %}
                        <span class="subtopic-chip area-{{ area|slugify }}" data-code="{{ st.code }}">
                          {{ st.area|default:"—" }} → {{ st.subtopic|default:"—" }} ({{ st.code|default:"—" }})
                        </span>
                        <div class="reason-box">
                          🧠 <b>Reason:</b> {{ st.reason|default:"—" }}<br>
                          🎯 <b>Confidence:</b> {{ st.confidence|floatformat:2 }}
                        </div>
                      {% endwith %}
                    {% 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">
                    {% with cleaned_hi=pair.hi_keywords|default_if_none:""|cut:" "|trim %}
                      {% for kw in cleaned_hi|cut:"|"|cut:" "|split:"," %}
                        {% if kw %}
                          <span class="keyword-badge keyword-new">{{ kw|trim }}<span class="keyword-remove">×</span></span>
                        {% endif %}
                      {% empty %}
                        <span class="text-muted">No Hindi keywords found</span>
                      {% endfor %}
                    {% endwith %}
                  </div>

                  <!-- 🟣 Existing DB Keywords (HI) -->
                  {% if pair.db_hi_keywords %}
                    <div class="db-keyword-section">
                      <span class="toggle-btn" data-target="#db-hi-{{ forloop.counter }}">▲ Hide Existing DB Keywords (HI)</span>
                      <div id="db-hi-{{ forloop.counter }}" class="mt-1">
                        {% for kw in pair.db_hi_keywords %}
                          <span class="keyword-badge keyword-existing db-keyword">{{ kw }}</span>
                        {% empty %}
                          <span class="text-muted">No DB keywords</span>
                        {% endfor %}
                      </div>
                    </div>
                  {% endif %}

                  <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-end mt-3">
                  <button type="button" class="btn btn-success save-pair-btn">💾 Save</button>
                </div>
                <small class="save-status text-muted"></small>
              </div>

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

<script>
/* ✏️ Keyword Editing */
document.addEventListener('click', e => {
  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');
    }
  }

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

  /* 🟢 Click DB Keyword → Add to Editable Keywords */
  if(e.target.classList.contains('db-keyword')){
    const kw = e.target.textContent.trim();
    const langBlock = e.target.closest('.lang-card');
    const display = langBlock.querySelector('.keyword-display-en, .keyword-display-hi');
    const exists = Array.from(display.querySelectorAll('.keyword-badge')).some(b => b.textContent.replace('×','').trim().toLowerCase() === kw.toLowerCase());
    if(!exists){
      const newBadge = document.createElement('span');
      newBadge.className = 'keyword-badge keyword-new';
      newBadge.innerHTML = `${kw}<span class='keyword-remove'>×</span>`;
      display.appendChild(newBadge);
    }
  }
});

/* 🔽 Toggle Show/Hide Sections */
document.addEventListener('click', e => {
  if(e.target.classList.contains('toggle-btn')){
    const target = document.querySelector(e.target.dataset.target);
    if(target.classList.contains('d-none')){
      target.classList.remove('d-none');
      e.target.textContent = e.target.textContent.replace('▼ Show','▲ Hide');
    } else {
      target.classList.add('d-none');
      e.target.textContent = e.target.textContent.replace('▲ Hide','▼ Show');
    }
  }
});

/* 💾 Save Keywords + Subtopics */
document.addEventListener('click', async e => {
  if(!e.target.classList.contains('save-pair-btn')) return;

  const pair = e.target.closest('.single-pair');
  const status = pair.querySelector('.save-status');
  const qid = document.querySelector('[name="original_question_id"]').value;
  const csrf = document.getElementById('globalCsrf').value;

  const enKeywords = Array.from(pair.querySelectorAll('.keyword-display-en .keyword-badge'))
    .map(el => el.textContent.replace("×","").trim()).join(", ");
  const hiKeywords = Array.from(pair.querySelectorAll('.keyword-display-hi .keyword-badge'))
    .map(el => el.textContent.replace("×","").trim()).join(", ");
  const subtopicCodes = Array.from(pair.querySelectorAll('.subtopic-chip'))
    .map(el => el.dataset.code).filter(Boolean);

  status.textContent = "⏳ Saving keywords and subtopics...";

  try {
    const response = await fetch("{% url 'update_question_keywords' %}", {
      method: "POST",
      headers: {"Content-Type": "application/json", "X-CSRFToken": csrf},
      body: JSON.stringify({
        question_id: qid,
        english_keywords: enKeywords,
        hindi_keywords: hiKeywords,
        subtopics: subtopicCodes
      })
    });
    const data = await response.json();
    if(data.status === "success"){
      status.textContent = "✅ Saved successfully — Keywords and subtopics updated.";
      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>