{% extends "admin/layout.html" %}
{% block content %}
<h2 class="text-xl font-bold text-slate-800 mb-4">{{ title }}</h2>
<form method="POST" action="" enctype="multipart/form-data">
  {{ form.hidden_tag() }}
  <div class="space-y-4">
    <div>
      {{ form.title.label(class="label-field") }}
      {% if form.title.errors %}{{ form.title(class="input-field border-red-400", id="judul") }}
      {% else %}{{ form.title(class="input-field", id="judul") }}{% endif %}
      {% for error in form.title.errors %}<p class="text-xs text-red-500 mt-1">{{ error }}</p>{% endfor %}
    </div>
    <div>

      <label class="label-field">Category</label>
      {% if form.kategori.errors %}{{ form.kategori(class="input-field border-red-400") }}
      {% else %}{{ form.kategori(class="input-field") }}{% endif %}
      {% for error in form.kategori.errors %}<p class="text-xs text-red-500 mt-1">{{ error }}</p>{% endfor %}
    </div>
    <div>
      {% if gemini_enabled %}
      <button id="generate-ai-btn" class="btn bg-brand-500 text-white hover:bg-brand-600"><i class="fas fa-magic"></i> Generate AI</button>
      {% endif %}
    </div>
    <div>
      {{ form.content.label(class="label-field") }}
      {% if form.content.errors %}{{ form.content(class="input-field border-red-400", rows="12") }}
      {% else %}{{ form.content(class="input-field", rows="12") }}{% endif %}
      {% for error in form.content.errors %}<p class="text-xs text-red-500 mt-1">{{ error }}</p>{% endfor %}
    </div>
    <div>
      {{ form.thumbnail.label(class="label-field") }}
      {{ form.thumbnail(class="block w-full text-sm text-slate-500 file:mr-4 file:py-2 file:px-4 file:rounded-lg file:border-0 file:bg-brand-50 file:text-brand-700 hover:file:bg-brand-100") }}
      {% for error in form.thumbnail.errors %}<p class="text-xs text-red-500 mt-1">{{ error }}</p>{% endfor %}
    </div>
    <div>
      {{ form.multiple_company.label(class="label-field", for="tagValue") }}
      {{ form.multiple_company(type="hidden", id="tagValue") }}
      <div class="input-field flex flex-wrap items-center gap-2" id="tagWrap">
        <span id="tagChips" class="flex flex-wrap gap-2"></span>
        <input id="tagInput" list="tagList" autocomplete="off"
                class="flex-1 outline-none bg-transparent py-1" placeholder="Type a tag then press Enter…">
      </div>
      <datalist id="tagList">
        {% for t in topik %}
        <option value="{{ t.nama }}">{% endfor %}
      </datalist>
      <p class="text-xs text-slate-400 mt-1">Type then press Enter / pick from suggestions to add a tag. Click × on a chip to remove it. New tags are created automatically.</p>
    </div>
    <div class="flex items-center gap-2">
      {{ form.is_headline(class="h-4 w-4 rounded border-slate-300 text-brand-600 focus:ring-brand-500") }}
      {{ form.is_headline.label(class="text-sm text-slate-700") }}
    </div>
    <div class="text-right">{{ form.submit(class="btn-primary") }}</div>
  </div>
</form>
</form>
{{ ckeditor.load(custom_url=url_for('static', filename='ckeditor/ckeditor.js')) }}
{{ ckeditor.config(name='content', id='content') }}
<script nonce="{{ csp_nonce() }}">
  // Kirim token CSRF pada unggah gambar via XHR (drag & drop / tempel) agar
  // endpoint upload yang dilindungi CSRF menerima permintaan plugin uploadimage.
  document.addEventListener('DOMContentLoaded', function () {
    if (window.CKEDITOR) {
      CKEDITOR.on('fileUploadRequest', function (evt) {
        var xhr = evt.data.fileLoader.xhr;
        if (window.CKEDITOR_CSRF_TOKEN) {
          xhr.setRequestHeader('X-CSRFToken', window.CKEDITOR_CSRF_TOKEN);
        }
      });
    }
  });
</script>

<!-- Loading modal: spinner berputar di tengah layar -->
<div id="aiLoading" style="display:none;" class="fixed inset-0 z-50 items-center justify-center bg-slate-900/50 backdrop-blur-sm">
  <div class="flex flex-col items-center gap-4 rounded-2xl bg-white px-10 py-8 shadow-2xl">
    <div class="h-14 w-14 rounded-full border-4 border-brand-200 border-t-brand-600 animate-spin"></div>
    <p class="text-sm font-medium text-slate-600">Generating article with AI…</p>
    <p id="aiLoadingTimer" class="text-xs text-slate-400 tabular-nums">0 detik</p>
  </div>
</div>

<script>
  function formatText(text) {
    text = text.replace(/##/g, '');
    let paragraphs = text.split(/\n+/);
    let formattedText = paragraphs.map(paragraph => {
      if (paragraph.startsWith(' * ')) return `<li>${paragraph.substring(2)}</li>`;
      else return `<p>${paragraph}</p>`;
    }).join('');
    if (formattedText.includes('<li>')) formattedText = `<ul>${formattedText}</ul>`;
    return formattedText;
  }
  // Robustly inject AI text: prefer CKEditor, fall back to raw textarea
  function setArticleContent(html) {
    var ta = document.getElementById('content');
    try {
      if (typeof CKEDITOR !== 'undefined' && CKEDITOR.instances && CKEDITOR.instances['content']) {
        CKEDITOR.instances['content'].setData(html);
        return;
      }
    } catch (e) { /* fall through */ }
    if (ta) ta.value = html.replace(/<[^>]+>/g, '');
  }
  const aiLoading = document.getElementById('aiLoading');
  const aiTimer = document.getElementById('aiLoadingTimer');
  let aiTimerId = null;
  const generateAiBtn = document.getElementById('generate-ai-btn');
  if (generateAiBtn) {
    generateAiBtn.addEventListener('click', function(e) {
    e.preventDefault();
    let judulValue = document.getElementById('judul').value;
    let csrfToken = document.getElementById('csrf_token').value;
    if (!judulValue) { alert("Title tidak boleh kosong! Silakan isi title dahulu."); return; }
    aiLoading.style.display = 'flex';
    let secs = 0;
    aiTimer.textContent = '0 detik';
    aiTimerId = setInterval(function () {
      secs += 1;
      aiTimer.textContent = secs + ' detik';
    }, 1000);
    fetch("/administrator/generateai", {
      method: "POST",
      headers: { "Content-Type": "application/json", "X-CSRFToken": csrfToken },
      body: JSON.stringify({ text: judulValue })
    })
    .then(response => response.json())
    .then(data => {
      if (data.text) { setArticleContent(formatText(data.text)); }
      else if (data.error) { alert("Error: " + data.error); }
    })
    .catch(error => console.error("Error:", error))
    .finally(() => {
      if (aiTimerId) clearInterval(aiTimerId);
      aiLoading.style.display = 'none';
    });
  });
  }

  // ---- Tags as chips (multi-select with autocomplete) ----
  (function () {
    var input = document.getElementById('tagInput');
    var wrap = document.getElementById('tagWrap');
    var chips = document.getElementById('tagChips');
    var hidden = document.getElementById('tagValue');
    if (!input || !hidden) return;
    var tags = [];
    function sync() { hidden.value = tags.join(', '); }
    function render() {
      chips.innerHTML = '';
      tags.forEach(function (t, i) {
        var s = document.createElement('span');
        s.className = 'inline-flex items-center gap-1 rounded-full bg-brand-100 text-brand-700 text-xs font-medium px-2.5 py-1';
        s.textContent = t;
        var x = document.createElement('button');
        x.type = 'button';
        x.setAttribute('aria-label', 'Hapus ' + t);
        x.className = 'text-brand-700 hover:text-red-600 font-bold leading-none';
        x.textContent = '×';
        x.addEventListener('click', function () { tags.splice(i, 1); render(); sync(); input.focus(); });
        s.appendChild(x);
        chips.appendChild(s);
      });
      sync();
    }
    function add(raw) {
      var t = (raw || '').trim();
      if (!t) return;
      if (tags.some(function (e) { return e.toLowerCase() === t.toLowerCase(); })) { input.value = ''; return; }
      tags.push(t);
      input.value = '';
      render();
    }
    input.addEventListener('keydown', function (e) {
      if (e.key === 'Enter' || e.key === ',' || e.key === 'Tab') { e.preventDefault(); add(input.value); }
      else if (e.key === 'Backspace' && !input.value && tags.length) { tags.pop(); render(); }
    });
    // selecting a datalist option fires 'input'/`change` with the chosen value
    input.addEventListener('change', function () { add(input.value); });
    input.addEventListener('blur', function () { if (input.value.trim()) add(input.value); });
    // prefill from existing value (edit page)
    if (hidden.value && hidden.value.trim()) {
      hidden.value.split(',').forEach(function (p) { add(p); });
    }
    // expose for edit-page preload
    window.__tagPrefill = function (str) {
      (str || '').split(',').forEach(function (p) { add(p); });
    };
  })();
</script>
{% endblock content %}