{% extends "base.html" %}
{% block title %}{{ 'New element' if is_new else 'Edit element' }} — Waikiki{% endblock %}
{% block content %}
  <div class="article-head">
    <h1>{{ 'New element' if is_new else 'Edit element' }}</h1>
    <a class="btn" href="/elements">← All elements</a>
  </div>

  {# Describe it instead of writing it. The draft lands in the form below rather
     than being saved: an element ships arbitrary HTML and JS into every page
     that uses it, so a human reads it here and saves deliberately. #}
  <section class="draftbox">
    <label for="draft-desc"><strong>Describe it and let an agent draft it</strong></label>
    <textarea id="draft-desc" rows="2"
      placeholder="An infobox for a character: portrait, home, factions, and a stat list"></textarea>
    <div class="draftbox-actions">
      <span class="draft-mic-slot"></span>
      <button type="button" class="btn" id="draft-go">Draft it</button>
      <span class="draft-status muted"></span>
    </div>
    <p class="muted note">It fills the form below — nothing is saved until you
      press Save, so read it first.</p>
  </section>

  <form method="post" action="/elements/save" class="settings element-editor" id="element-form">
    <div class="el-grid">
      <label>Name
        <input type="text" name="name" value="{{ el.name }}" placeholder="Infobox" required>
      </label>
      <label>Slug <span class="muted">(the ```fence name)</span>
        <input type="text" name="slug" value="{{ el.slug }}" placeholder="infobox"
               {{ 'readonly' if not is_new }}>
      </label>
    </div>

    <label>Fields <span class="muted">(one per line; <code>name*</code> = required;
        <code>name* | Label</code>)</span>
      <textarea name="fields" id="ed-fields" rows="4"
                style="width:100%;font-family:var(--mono)"
                placeholder="title*&#10;image&#10;publisher">{{ fields_text }}</textarea>
    </label>

    <div class="el-code">
      <div class="el-pane">
        <div class="el-pane-head">HTML <span class="muted">(shadow DOM · <code>{{ '{{field}}' }}</code>)</span>
          <button type="button" class="btn small" data-fmt="html">Format</button></div>
        <textarea name="html" id="ed-html">{{ el.html }}</textarea>
      </div>
      <div class="el-pane">
        <div class="el-pane-head">CSS <span class="muted">(scoped)</span>
          <button type="button" class="btn small" data-fmt="css">Format</button></div>
        <textarea name="css" id="ed-css">{{ el.css }}</textarea>
      </div>
      <div class="el-pane">
        <div class="el-pane-head">JS <span class="muted">(<code>root, props, host</code>)</span>
          <button type="button" class="btn small" data-fmt="js">Format</button></div>
        <textarea name="js" id="ed-js">{{ el.js }}</textarea>
      </div>
    </div>

    <p class="muted note">HTML/CSS/JS render inside a <strong>Shadow DOM</strong> — CSS
      is scoped and JS is encapsulated. Field values interpolate as
      <code>{{ '{{field}}' }}</code> (escaped); the JS runs with <code>root</code>
      (shadow root), <code>props</code>, and <code>host</code>. Theme CSS variables
      (e.g. <code>var(--accent)</code>) pierce into the shadow DOM. Templates and
      pages invoke the element with <code>```{{ el.slug or 'slug' }}</code> and must
      supply its required fields.</p>

    <div class="editor-actions">
      <button class="btn primary" type="submit">{{ 'Create element' if is_new else 'Save element' }}</button>
      <button class="btn" type="button" id="el-preview-btn">Preview ↻</button>
      <a class="btn" href="/elements">Cancel</a>
    </div>
  </form>

  <h3>Preview <span class="muted">(sample data)</span></h3>
  <div id="el-preview" class="el-preview"><em class="muted">Click Preview to render with sample field values.</em></div>
{% endblock %}
{% block scripts %}
<script src="/static/element_editor.js"></script>
<script>
  (function () {
    var go = document.getElementById('draft-go');
    var desc = document.getElementById('draft-desc');
    var status = document.querySelector('.draft-status');
    if (!go || !desc) return;
    if (window.wkDictate && window.wkDictate.supported) {
      var mic = window.wkDictate.button('Describe it out loud');
      document.querySelector('.draft-mic-slot').appendChild(mic);
      window.wkDictate.attach(desc, mic);
    }
    function setField(sel, value) {
      var el = document.querySelector(sel);
      if (!el || value == null || value === '') return;
      el.value = value;
      // The element editor swaps textareas for CodeMirror; write through it or
      // the change is invisible and lost on save.
      var wrap = el.nextElementSibling;
      if (wrap && wrap.classList && wrap.classList.contains('CodeMirror') && wrap.CodeMirror) {
        wrap.CodeMirror.setValue(value);
      }
    }
    go.addEventListener('click', function () {
      var text = desc.value.trim();
      if (!text) { desc.focus(); return; }
      go.disabled = true;
      status.className = 'draft-status muted';
      status.textContent = 'Drafting\u2026 this can take a minute.';
      fetch('/api/draft', {
        method: 'POST', headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ kind: 'element', description: text })
      }).then(function (r) { return r.json(); }).then(function (res) {
        go.disabled = false;
        if (!res.ok) {
          // Keep the description so it can be adjusted and retried.
          status.className = 'draft-status err';
          status.textContent = (res.error || 'Drafting failed') + ' Adjust and try again.';
          return;
        }
        setField('input[name=name]', res.name);
        setField('#ed-fields', res.fields);
        setField('#ed-html', res.html);
        setField('#ed-css', res.css);
        setField('#ed-js', res.js);
        if (window.wkElementPreview) window.wkElementPreview();
        status.className = 'draft-status ok';
        status.textContent = 'Filled in below — read it, then Save.';
      }).catch(function (err) {
        go.disabled = false;
        status.className = 'draft-status err';
        status.textContent = 'Drafting failed: ' + err + '. Adjust and try again.';
      });
    });
  })();
</script>

{% endblock %}