{% load static %}
{% comment %}
Auto-upgrade every <textarea class="js-quill"> on the page to a Quill Snow
editor. Quill is served from local static so reliability does not depend
on CDN reachability. Falls back to a styled native textarea on any error.
{% endcomment %}
<script src="{% static 'js/vendor/quill.min.js' %}"></script>
<script>
(function () {
  const FULL_TOOLBAR = [
    [{ header: [2, 3, false] }],
    ['bold', 'italic', 'underline'],
    [{ list: 'ordered' }, { list: 'bullet' }],
    ['blockquote', 'link'],
    ['clean'],
  ];
  const COMPACT_TOOLBAR = [
    ['bold', 'italic'],
    [{ list: 'ordered' }, { list: 'bullet' }],
    ['link', 'clean'],
  ];

  function mount(textarea) {
    if (textarea.dataset.quillMounted === '1') return;
    if (!window.Quill) return;
    try {
      const variant = (textarea.dataset.quillToolbar || 'full').toLowerCase();
      const toolbar = variant === 'compact' ? COMPACT_TOOLBAR : FULL_TOOLBAR;
      const placeholder = textarea.getAttribute('placeholder') || '';
      const editor = document.createElement('div');
      const wrap = document.createElement('div');
      wrap.className = 'js-quill-wrap' + (variant === 'compact' ? ' js-quill-wrap--sm' : '');
      wrap.appendChild(editor);
      textarea.parentNode.insertBefore(wrap, textarea);

      const quill = new Quill(editor, {
        theme: 'snow',
        placeholder: placeholder,
        modules: { toolbar: toolbar },
      });
      if (textarea.value) {
        quill.root.innerHTML = textarea.value;
      }
      quill.on('text-change', function () {
        const html = quill.root.innerHTML;
        textarea.value = (html === '<p><br></p>') ? '' : html;
      });
      const form = textarea.closest('form');
      if (form && !form.dataset.quillSubmitBound) {
        form.dataset.quillSubmitBound = '1';
        form.addEventListener('submit', function () {
          form.querySelectorAll('textarea.js-quill[data-quill-mounted="1"]').forEach(function (t) {
            const w = t.previousElementSibling;
            if (w && w.classList && w.classList.contains('js-quill-wrap')) {
              const ed = w.querySelector('.ql-editor');
              if (ed) t.value = (ed.innerHTML === '<p><br></p>') ? '' : ed.innerHTML;
            }
          });
        });
      }
      // Mark only AFTER success so the CSS hiding rule applies and fallback clears.
      textarea.setAttribute('data-quill-mounted', '1');
    } catch (err) {
      // If Quill throws, leave the textarea visible as a fallback and log.
      if (window.console) console.warn('[quill_auto_init] mount failed', err);
    }
  }

  function upgradeAll(root) {
    (root || document).querySelectorAll('textarea.js-quill').forEach(mount);
  }

  // Poll briefly for Quill if it hasn't loaded yet (CDN latency, etc.).
  let attempts = 0;
  function tryUpgrade() {
    if (window.Quill) {
      upgradeAll();
      return;
    }
    if (attempts++ < 40) {
      setTimeout(tryUpgrade, 75);
    } else if (window.console) {
      console.warn('[quill_auto_init] Quill did not load; falling back to native textareas.');
    }
  }

  if (document.readyState === 'loading') {
    document.addEventListener('DOMContentLoaded', tryUpgrade);
  } else {
    tryUpgrade();
  }
  // Re-run after HTMX swaps (formset rows added, tab reveals, etc.).
  document.body.addEventListener('htmx:afterSwap', function (e) { upgradeAll(e.target); });
  // Also re-run when our formset-repeater appends a new row to the DOM.
  document.body.addEventListener('formset:row-added', function (e) {
    if (e.detail && e.detail.row) upgradeAll(e.detail.row);
  });
})();
</script>