<section class="project-form-shell">
  <div class="admin-header">
    <h1><%= page ? 'Edit Page' : 'New Page' %></h1>
    <% if (page) { %><a class="button button-secondary" href="/<%= page.slug %>" target="_blank" rel="noopener">Preview &rarr;</a><% } %>
  </div>

  <form method="POST" action="<%= page ? '/admin/pages/' + page.id + '?_method=PUT' : '/admin/pages' %>">
    <div class="form-grid">
      <div class="form-main">

        <div class="form-section">
          <h3 class="form-section-title">Page details</h3>
          <label>
            Title
            <input type="text" name="title" value="<%= page ? page.title : '' %>" required>
          </label>
          <label>
            Slug
            <input type="text" name="slug" value="<%= page ? page.slug : '' %>" required>
          </label>
        </div>

        <div class="form-section">
          <h3 class="form-section-title">Featured image</h3>
          <%- include('./_upload-field', { key: 'featuredImage', value: page && page.featuredImage ? page.featuredImage : '' }) %>
        </div>

        <% if (page) { %>
          <div class="form-section">
            <h3 class="form-section-title">Content blocks</h3>
            <p class="hint">Build this page from sections you can add, edit, and reorder without touching any code. This is what visitors see.</p>

            <% if (blocks && blocks.length) { %>
              <div class="reorder-list" id="page-blocks-list" data-reorder-list data-reorder-url="/admin/pages/<%= page.id %>/blocks/reorder">
                <% blocks.forEach(function(block) { %>
                  <% var meta = blockTypes.find(function(t) { return t.type === block.type; }); %>
                  <div class="reorder-item" data-reorder-item data-id="<%= block.id %>" draggable="true">
                    <span class="reorder-handle" aria-hidden="true">
                      <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="4" y1="8" x2="20" y2="8"></line><line x1="4" y1="16" x2="20" y2="16"></line></svg>
                    </span>
                    <span class="reorder-body">
                      <strong><%= meta ? meta.label : block.type %></strong>
                    </span>
                    <span class="reorder-actions">
                      <a href="/admin/pages/<%= page.id %>/blocks/<%= block.id %>/edit">Edit</a>
                    </span>
                  </div>
                <% }) %>
              </div>
            <% } else { %>
              <p class="hint">No blocks yet &mdash; pick one below to start building this page.</p>
            <% } %>

            <div class="block-picker">
              <% blockTypes.forEach(function(bt) { %>
                <a class="block-picker-item" href="/admin/pages/<%= page.id %>/blocks/new?type=<%= bt.type %>">
                  <strong>+ <%= bt.label %></strong>
                  <span><%= bt.description %></span>
                </a>
              <% }) %>
            </div>
          </div>
        <% } %>

        <% if (!blocks || !blocks.length) { %>
          <div class="form-section">
            <h3 class="form-section-title">Content</h3>
            <% if (page) { %><p class="hint">Add a block above any time for richer layout options &mdash; this simple editor disappears once you do.</p><% } %>
            <div id="editor-body" class="rich-editor"><%- page ? page.body : '' %></div>
            <textarea name="body" id="input-body" hidden></textarea>
          </div>
        <% } %>

      </div>

      <div class="form-sidebar">
        <div class="form-section">
          <h3 class="form-section-title">Publishing</h3>
          <label>
            Status
            <select name="status">
              <option value="draft" <%= page && page.status === 'draft' ? 'selected' : '' %>>Draft</option>
              <option value="published" <%= page && page.status === 'published' ? 'selected' : '' %>>Published</option>
            </select>
          </label>
          <button type="submit" class="button button-primary form-save-button">Save page</button>
        </div>
      </div>
    </div>
  </form>
</section>

<script src="/js/drag-reorder.js"></script>
<script src="/js/media-picker.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/quill/1.3.7/quill.min.js"></script>
<script>
  (function () {
    var container = document.getElementById('editor-body');
    if (container) {
      var hidden = document.getElementById('input-body');
      var quill = new Quill(container, {
        theme: 'snow',
        modules: {
          toolbar: {
            container: [['bold', 'italic', 'underline'], [{ header: [2, 3, false] }], [{ list: 'ordered' }, { list: 'bullet' }], ['blockquote', 'link', 'image'], ['clean']],
            // Quill's default image button embeds the picked file straight into
            // the page body as a giant base64 data: URI, which easily balloons
            // past the server's request-size limit and makes saving fail
            // silently. Uploading the file and inserting its URL instead keeps
            // the saved body small, the same way featured images already work.
            handlers: {
              image: function () {
                var range = this.quill.getSelection(true);
                var input = document.createElement('input');
                input.setAttribute('type', 'file');
                input.setAttribute('accept', 'image/*');
                input.click();
                input.onchange = function () {
                  var file = input.files[0];
                  if (!file) return;
                  var formData = new FormData();
                  formData.append('file', file);
                  quill.insertText(range.index, 'Uploading image…', 'italic', true);
                  fetch('/admin/uploads/image', { method: 'POST', body: formData })
                    .then(function (res) { return res.json(); })
                    .then(function (data) {
                      quill.deleteText(range.index, 'Uploading image…'.length);
                      if (data.url) {
                        quill.insertEmbed(range.index, 'image', data.url, 'user');
                        quill.setSelection(range.index + 1);
                      } else {
                        alert(data.error || 'Upload failed.');
                      }
                    })
                    .catch(function () {
                      quill.deleteText(range.index, 'Uploading image…'.length);
                      alert('Upload failed. Please try again.');
                    });
                };
              },
            },
          },
        },
      });
      hidden.value = quill.root.innerHTML;
      quill.on('text-change', function () { hidden.value = quill.root.innerHTML; });
    }

    function setupUploadField(key) {
      var fileInput = document.getElementById('file-' + key);
      var hiddenInput = document.getElementById('input-' + key);
      var preview = document.getElementById('preview-' + key);
      var removeBtn = document.querySelector('.upload-remove[data-target="' + key + '"]');
      var browseBtn = document.querySelector('.upload-browse[data-target="' + key + '"]');
      if (!fileInput || !hiddenInput || !preview) return;

      function refresh() {
        if (hiddenInput.value) {
          preview.innerHTML = '<img src="' + hiddenInput.value + '" alt="">';
          if (removeBtn) removeBtn.hidden = false;
        } else {
          preview.innerHTML = '<span class="upload-empty">No image yet</span>';
          if (removeBtn) removeBtn.hidden = true;
        }
      }

      fileInput.addEventListener('change', function () {
        if (!fileInput.files.length) return;
        var formData = new FormData();
        formData.append('file', fileInput.files[0]);
        preview.innerHTML = '<span class="upload-empty">Uploading&hellip;</span>';
        fetch('/admin/uploads/image', { method: 'POST', body: formData })
          .then(function (res) { return res.json(); })
          .then(function (data) { if (data.url) { hiddenInput.value = data.url; } else { alert(data.error || 'Upload failed.'); } refresh(); })
          .catch(function () { alert('Upload failed. Please try again.'); refresh(); })
          .finally(function () { fileInput.value = ''; });
      });

      if (browseBtn) {
        browseBtn.addEventListener('click', function () {
          window.openMediaPicker({
            uploadUrl: '/admin/uploads/image',
            onSelect: function (url) { hiddenInput.value = url; refresh(); },
          });
        });
      }

      if (removeBtn) removeBtn.addEventListener('click', function () { hiddenInput.value = ''; refresh(); });
      refresh();
    }
    ['featuredImage'].forEach(setupUploadField);
  })();
</script>
