{% extends "admin/layout.html" %}
{% block content %}
<form method="POST" action="">
  {{ form.hidden_tag() }}
  <div class="space-y-4 max-w-2xl">
    <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>
{{ ckeditor_scripts() }}
<script nonce="{{ csp_nonce() }}">
  const CSRFToken = '{{ csrf_token() }}';
  // Custom upload adapter untuk CKEditor 5 (tanpa dependensi CDN eksternal).
  class CmsUploadAdapter {
    constructor(loader) { this.loader = loader; }
    upload() {
      return this.loader.file
        .then(file => new Promise((resolve, reject) => {
          const data = new FormData();
          data.append('upload', file);
          const xhr = new XMLHttpRequest();
          xhr.open('POST', '/administrator/upload', true);
          xhr.setRequestHeader('X-CSRFToken', CSRFToken);
          xhr.responseType = 'json';
          xhr.onload = () => {
            const res = xhr.response || {};
            if (xhr.status === 200 && res.uploaded) resolve({ default: res.url });
            else reject(res.error && res.error.message ? res.error.message : 'Upload gagal');
          };
          xhr.onerror = () => reject('Upload gagal (jaringan)');
          xhr.send(data);
        }));
    }
    abort() {}
  }
  function CmsUploadAdapterPlugin(editor) {
    editor.plugins.get('FileRepository').createUploadAdapter = (loader) => new CmsUploadAdapter(loader);
  }
  ClassicEditor
    .create(document.querySelector('#content'), {
      extraPlugins: [CmsUploadAdapterPlugin],
      height: 520,
      toolbar: {
        items: [
          'heading', '|', 'bold', 'italic', '|',
          'link', 'blockQuote', 'insertTable', '|',
          'bulletedList', 'numberedList', '|',
          'outdent', 'indent', '|',
          'undo', 'redo'
        ]
      }
    })
    .then(editor => { window.editorContent = editor; })
    .catch(error => { console.error('CKEditor init error:', error); });
</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 (typeof ClassicEditor !== 'undefined' && window.editorContent) {
        window.editorContent.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 tidak boleh kosong! Silakan isi title dahulu."); 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">Sedang membuat artikel dengan AI…</p>
    <p id="aiLoadingTimer" class="text-xs text-slate-400 tabular-nums">0 detik</p>
  </div>
</div>
{% endblock content %}