{% 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">Kategori</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="Ketik tag lalu Enter…">
      </div>
      <datalist id="tagList">
        {% for t in topik %}
        <option value="{{ t.nama }}">{% endfor %}
      </datalist>
      <p class="text-xs text-slate-400 mt-1">Ketik lalu tekan Enter / pilih dari saran untuk menambah tag. Klik × pada chip untuk menghapus. Tag baru akan dibuat otomatis.</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>
{{ ckeditor_scripts() }}
<style nonce="{{ csp_nonce() }}">
.ck-editor__editable_inline{
    min-height:520px;
}

.ck-content{
    min-height:520px;
}
</style>
<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); });

  // PENTING: CKEditor 5 tidak menyalin isi editor ke <textarea> saat submit.
  // Tanpa sync ini, form.content.data kosong -> validasi DataRequired gagal ->
  // "tombol Kirim tidak berjalan / data tidak masuk". Salin sebelum submit.
  (function () {
    var form = document.querySelector('form');
    if (!form) return;
    form.addEventListener('submit', function () {
      var ta = document.getElementById('content');
      try {
        if (typeof ClassicEditor !== 'undefined' && window.editorContent) {
          ta.value = window.editorContent.getData();
        }
      } catch (e) { /* biarkan textarea apa adanya */ }
    });
  })();
</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">Sedang membuat artikel dengan AI…</p>
    <p id="aiLoadingTimer" class="text-xs text-slate-400 tabular-nums">0 detik</p>
  </div>
</div>

<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;
  }
  // Robustly inject AI text: prefer CKEditor 5, fall back to raw textarea
  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');
  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 %}