{% extends "admin/layout.html" %}
{% block content %}
<h2 class="text-xl font-bold text-slate-800 mb-4">{{ title }}</h2>
<form method="POST" action="">
  {{ 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") }}
      {% else %}{{ form.title(class="input-field") }}{% endif %}
      {% for error in form.title.errors %}<p class="text-xs text-red-500 mt-1">{{ error }}</p>{% endfor %}
    </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 class="flex items-center gap-2">
      {{ form.is_active(class="h-4 w-4 rounded border-slate-300 text-brand-600 focus:ring-brand-500") }}
      {{ form.is_active.label(class="text-sm text-slate-700") }}
    </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 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>
{% if gemini_enabled %}
<script nonce="{{ csp_nonce() }}">
  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;
  }
  function setArticleContent(html) {
    var ta = document.getElementById('content');
    try {
      if (window.CKEDITOR && 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');
  const aiTitle = document.querySelector('#judul, #title');
  if (generateAiBtn) {
    generateAiBtn.addEventListener('click', function(e) {
      e.preventDefault();
      let judulValue = aiTitle ? aiTitle.value : '';
      let csrfToken = document.getElementById('csrf_token').value;
      if (!judulValue) { alert("Title must not be empty! Please fill in the title first."); return; }
      if (aiLoading) aiLoading.style.display = 'flex';
      let secs = 0;
      if (aiTimer) aiTimer.textContent = '0 detik';
      aiTimerId = setInterval(function () { secs += 1; if (aiTimer) 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); if (aiLoading) aiLoading.style.display = 'none'; });
    });
  }
</script>
{% endif %}

<!-- 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>
{% endblock content %}