export function createSlideLayoutEditor(options) {
  var helpers = window.pulseRegionLayout;
  var stage = options.stage;
  var modal = document.getElementById('slide-layout-modal');
  var workspace = document.getElementById('slide-layout-workspace');
  var regionSelect = document.getElementById('slide-layout-region');
  var hidden = document.getElementById('slide-layouts-json');
  var openButton = document.getElementById('adjust-slide-layout');
  var animationButton = document.getElementById('adjust-slide-animations');
  var undoButton = document.getElementById('slide-layout-undo');
  var redoButton = document.getElementById('slide-layout-redo');
  var resetButton = document.getElementById('slide-layout-reset');
  var snapInput = document.getElementById('slide-layout-snap');
  var sharedButton = document.getElementById('save-layout-to-template');
  var saveStatus = document.getElementById('slide-layout-save-status');
  var sharedSaving = false;
  var sharedBaseline = null;
  var properties = document.getElementById('slide-layout-fields');
  var layer = document.createElement('div');
  layer.className = 'slide-layout-layer';
  layer.hidden = true;
  stage.appendChild(layer);
  var fields = {};
  ['x', 'y', 'width', 'height', 'z_index', 'lock_ratio'].forEach(function (field) {
    fields[field] = properties.querySelector('[name="region_' + (field === 'z_index' ? 'z' : field) + '[]"]');
    fields[field].id = 'slide-layout-' + field;
  });
  var layouts = Object.create(null);
  var selectedKey = '';
  var history = [];
  var historyIndex = 0;
  var baseline = '';
  var home = stage.parentNode;
  var nextSibling = stage.nextSibling;
  var active = false;
  var applied = false;
  var drag = null;
  var guides = [];

  async function readResponse(response) {
    var data;
    try { data = await response.json(); } catch (_error) { throw new Error('Unable to save the shared layout. Check your connection and sign-in status.'); }
    if (!response.ok) throw new Error(data.error || 'Unable to save the shared layout.');
    return data;
  }
  if (sharedButton) sharedButton.addEventListener('click', async function () {
    if (sharedSaving) return;
    if (Object.keys(fields).some(function (field) { return !fields[field].reportValidity(); })) return;
    sharedSaving = true;
    modal.setAttribute('aria-busy', 'true');
    var controls = Array.from(modal.querySelectorAll('button, input, select')).map(function (input) {
      var state = { input: input, disabled: input.disabled };
      input.disabled = true;
      return state;
    });
    saveStatus.classList.remove('text-danger');
    saveStatus.textContent = 'Checking shared template...';
    try {
      var url = '/templates/' + encodeURIComponent(template().id) + '/layout';
      var current = await readResponse(await fetch(url, { headers: { Accept: 'application/json' } }));
      if (JSON.stringify(helpers.getTemplateLayoutSnapshot(current.template)) !== JSON.stringify(sharedBaseline)) {
        throw new Error('The shared template layout has changed. Reload the slide before saving to the template.');
      }
      var count = Number(current.slideCount) || 0;
      if (!window.confirm('Save this layout to "' + current.template.name + '"? It is used by ' + count + ' slide' + (count === 1 ? '' : 's') + '. Other slides keep their explicit overrides. Unsaved slide content is not saved.')) {
        saveStatus.textContent = '';
        return;
      }
      saveStatus.textContent = 'Saving shared layout...';
      var result = await readResponse(await fetch(url, {
        method: 'POST', headers: { 'Content-Type': 'application/json', Accept: 'application/json' },
        body: JSON.stringify({ slideId: options.slideId || null, baseline: sharedBaseline, regions: helpers.getTemplateLayoutSnapshot(Object.assign({}, template(), { regions: allRegions().map(effective) })).regions })
      }));
      options.updateTemplate(result.template);
      var inheritedLayouts = Object.create(null);
      Object.keys(layouts).forEach(function (key) {
        var animation = helpers.retainLayoutAnimation(layouts[key]);
        if (animation) inheritedLayouts[key] = animation;
      });
      layouts = inheritedLayouts;
      baseline = snapshot();
      sharedBaseline = helpers.getTemplateLayoutSnapshot(template());
      history = [baseline];
      historyIndex = 0;
      applied = true;
      options.markEdited();
      hidden.value = baseline;
      sharedSaving = false;
      saveStatus.textContent = '';
      options.requestPreviewRender();
      window.pulseModal.hide(modal);
      if (typeof window.showToast === 'function') window.showToast('Shared template layout saved.', 'success');
    } catch (error) {
      saveStatus.textContent = error.message;
      saveStatus.classList.add('text-danger');
    } finally {
      sharedSaving = false;
      modal.removeAttribute('aria-busy');
      controls.forEach(function (state) { state.input.disabled = state.disabled; });
      render();
    }
  });
  modal.addEventListener('hide.bs.modal', function (event) {
    if (sharedSaving) event.preventDefault();
  });

  function template() { return options.getTemplate(); }
  function canvas() {
    var current = template();
    return { width: Number(current && current.canvas_size_width) || 1920, height: Number(current && current.canvas_size_height) || 1080 };
  }
  function allRegions() { return template() && template().regions || []; }
  function regions() { return allRegions().filter(function (region) { return !(region.read_only === true || Number(region.read_only) === 1); }); }
  function selected() {
    return regions().find(function (region) { return region.region_key === selectedKey; });
  }
  function effective(region) {
    return helpers.applyLayout(region, { layout: layouts[region.region_key] }, canvas());
  }
  function snapshot() { return JSON.stringify(layouts); }
  function commit() {
    var value = snapshot();
    if (history[historyIndex] === value) return;
    history = history.slice(0, historyIndex + 1);
    history.push(value);
    historyIndex = history.length - 1;
  }
  function update() {
    hidden.value = snapshot();
    render();
    options.requestPreviewRender();
  }
  function change(box) {
    if (!selected()) return;
    var geometry = { x: box.x, y: box.y, width: box.width, height: box.height };
    layouts[selectedKey] = helpers.normalizeLayout(Object.assign({}, layouts[selectedKey], geometry), canvas());
    update();
  }
  function changeSettings(patch) {
    if (!selected()) return;
    var box = effective(selected());
    var next = helpers.normalizeLayout(Object.assign({ x: box.x, y: box.y, width: box.width, height: box.height }, layouts[selectedKey], patch), canvas());
    if (!next) return false;
    layouts[selectedKey] = next;
    commit();
    update();
    return true;
  }
  function render() {
    openButton.disabled = active || !regions().length;
    animationButton.disabled = active || !allRegions().length;
    if (!active || sharedSaving) return;
    if (!selected()) selectedKey = regions().length ? regions()[0].region_key : '';
    var region = selected();
    var box = region && effective(region);
    Object.keys(fields).forEach(function (field) {
      fields[field].disabled = !box;
      fields[field].value = box && box[field] !== undefined && box[field] !== null ? box[field] : '';
      fields[field].setCustomValidity('');
      if (field === 'x' || field === 'width') fields[field].max = canvas().width;
      if (field === 'y' || field === 'height') fields[field].max = canvas().height;
    });
    regionSelect.value = selectedKey;
    undoButton.disabled = historyIndex === 0;
    redoButton.disabled = historyIndex >= history.length - 1;
    resetButton.disabled = !Object.hasOwn(layouts, selectedKey);
    document.getElementById('slide-layout-reset-all').disabled = !Object.keys(layouts).length;
    layer.replaceChildren();
    regions().map(effective).sort(function (first, second) {
      return Number(first.z_index || 1) - Number(second.z_index || 1);
    }).forEach(function (item) {
      var itemBox = effective(item);
      var hit = document.createElement('div');
      hit.className = 'designer-rect slide-layout-hit' + (item.region_key === selectedKey ? ' selected' : '');
      hit.dataset.regionKey = item.region_key;
      hit.setAttribute('role', 'button');
      hit.setAttribute('aria-label', item.label || item.region_key);
      hit.setAttribute('aria-pressed', String(item.region_key === selectedKey));
      hit.tabIndex = 0;
      hit.style.left = itemBox.x / canvas().width * 100 + '%';
      hit.style.top = itemBox.y / canvas().height * 100 + '%';
      hit.style.width = itemBox.width / canvas().width * 100 + '%';
      hit.style.height = itemBox.height / canvas().height * 100 + '%';
      var label = document.createElement('span');
      label.className = 'designer-rect-label';
      label.textContent = item.label || item.region_key;
      hit.appendChild(label);
      if (item.region_key === selectedKey) {
        ['nw', 'ne', 'sw', 'se'].forEach(function (direction) {
          var handle = document.createElement('span');
          handle.className = 'resize-handle ' + direction;
          handle.dataset.direction = direction;
          hit.appendChild(handle);
        });
      }
      layer.appendChild(hit);
    });
    guides.forEach(function (guide) {
      var line = document.createElement('div');
      line.className = 'layout-alignment-guide layout-alignment-guide--' + guide.axis;
      line.style[guide.axis === 'x' ? 'left' : 'top'] = guide.position / canvas()[guide.axis === 'x' ? 'width' : 'height'] * 100 + '%';
      layer.appendChild(line);
    });
  }

  function open() {
    if (active || !regions().length || !window.pulseModal) return;
    baseline = snapshot();
    sharedBaseline = helpers.getTemplateLayoutSnapshot(template());
    saveStatus.textContent = '';
    saveStatus.classList.remove('text-danger');
    history = [baseline];
    historyIndex = 0;
    applied = false;
    active = true;
    home = stage.parentNode;
    nextSibling = stage.nextSibling;
    regionSelect.replaceChildren();
    regions().forEach(function (region) {
      var option = document.createElement('option');
      option.value = region.region_key;
      option.textContent = region.label || region.region_key;
      regionSelect.appendChild(option);
    });
    workspace.appendChild(stage);
    stage.classList.add('slide-layout-stage');
    stage.tabIndex = 0;
    layer.hidden = false;
    var main = document.querySelector('.app-main');
    var sidebarEdge = window.innerWidth >= 992 && main ? Math.max(0, main.getBoundingClientRect().left) : 0;
    modal.style.setProperty('--slide-layout-left', sidebarEdge + 'px');
    render();
    window.pulseModal.show(modal);
  }

  modal.addEventListener('shown.bs.modal', function () {
    options.requestPreviewRender();
    stage.focus();
  });
  modal.addEventListener('hidden.bs.modal', function () {
    if (!applied) layouts = JSON.parse(baseline);
    active = false;
    drag = null;
    guides = [];
    layer.hidden = true;
    stage.classList.remove('slide-layout-stage');
    stage.removeAttribute('tabindex');
    home.insertBefore(stage, nextSibling);
    update();
    openButton.focus();
  });
  openButton.addEventListener('click', open);
  modal.querySelectorAll('[data-bs-dismiss="modal"]').forEach(function (button) {
    button.removeAttribute('data-bs-dismiss');
    button.addEventListener('click', function () { window.pulseModal.hide(modal); });
  });
  document.getElementById('slide-layout-apply').addEventListener('click', function () {
    applied = true;
    if (snapshot() !== baseline) options.markEdited();
    hidden.value = snapshot();
    window.pulseModal.hide(modal);
  });
  regionSelect.addEventListener('change', function () {
    selectedKey = regionSelect.value;
    guides = [];
    render();
  });
  function restoreHistory(offset) {
    var index = historyIndex + offset;
    if (index < 0 || index >= history.length) return;
    historyIndex = index;
    layouts = JSON.parse(history[index]);
    guides = [];
    update();
  }
  undoButton.addEventListener('click', function () { restoreHistory(-1); });
  redoButton.addEventListener('click', function () { restoreHistory(1); });
  resetButton.addEventListener('click', function () {
    delete layouts[selectedKey];
    commit();
    update();
  });
  document.getElementById('slide-layout-reset-all').addEventListener('click', function () {
    layouts = Object.create(null);
    commit();
    update();
  });
  Object.keys(fields).forEach(function (field) {
    fields[field].addEventListener('keydown', function (event) {
      if (event.key === 'Enter') { event.preventDefault(); fields[field].blur(); }
    });
    fields[field].addEventListener('change', function () {
      if (field === 'lock_ratio') {
        var ratioValue = fields[field].value.trim().replace(/\s+/g, '');
        var parts = ratioValue.split(':').map(Number);
        var patch = { lock_ratio: ratioValue };
        if (/^\d+:\d+$/.test(ratioValue) && parts[0] > 0 && parts[1] > 0) {
          var current = effective(selected());
          var fitted = helpers.fitLayout({ x: current.x, y: current.y, width: current.width, height: current.width * parts[1] / parts[0] }, canvas(), parts[0] / parts[1], 'se');
          Object.assign(patch, fitted);
        }
        if (!changeSettings(patch)) {
          fields[field].setCustomValidity('Enter a positive ratio such as 16:9, or leave blank.');
          fields[field].reportValidity();
        }
        return;
      }
      if (!selected() || fields[field].value === '' || !Number.isFinite(fields[field].valueAsNumber)) {
        render();
        return;
      }
      var box = effective(selected());
      box[field] = fields[field].valueAsNumber;
      if (field === 'z_index') { changeSettings({ z_index: box.z_index }); return; }
      var ratio = String(box.lock_ratio || '').split(':').map(Number);
      if (ratio[0] > 0 && ratio[1] > 0) {
        if (field === 'width') box.height = Math.round(box.width * ratio[1] / ratio[0]);
        if (field === 'height') box.width = Math.round(box.height * ratio[0] / ratio[1]);
      }
      change(helpers.fitLayout(box, canvas(), ratio[0] / ratio[1], 'se'));
      commit();
      render();
    });
  });
  stage.addEventListener('pointerdown', function (event) {
    if (!active || sharedSaving || event.button !== 0) return;
    var hit = event.target.closest('.slide-layout-hit');
    if (!hit) return;
    event.preventDefault();
    selectedKey = hit.dataset.regionKey;
    drag = {
      pointerId: event.pointerId,
      startX: event.clientX, startY: event.clientY,
      box: effective(selected()),
      direction: event.target.dataset.direction || '',
      snapshot: snapshot()
    };
    stage.setPointerCapture(event.pointerId);
    stage.focus({ preventScroll: true });
    render();
  });
  stage.addEventListener('pointermove', function (event) {
    if (sharedSaving || !drag || event.pointerId !== drag.pointerId) return;
    var bounds = stage.getBoundingClientRect();
    var dx = (event.clientX - drag.startX) * canvas().width / bounds.width;
    var dy = (event.clientY - drag.startY) * canvas().height / bounds.height;
    if (Math.abs(event.clientX - drag.startX) + Math.abs(event.clientY - drag.startY) < 2) return;
    var box = Object.assign({}, drag.box);
    var direction = drag.direction;
    var aspect = 0;
    if (direction) {
      if (direction.includes('w')) { box.x += dx; box.width -= dx; }
      if (direction.includes('e')) box.width += dx;
      if (direction.includes('n')) { box.y += dy; box.height -= dy; }
      if (direction.includes('s')) box.height += dy;
      var ratio = String(effective(selected()).lock_ratio || '').split(':').map(Number);
      if (ratio[0] > 0 && ratio[1] > 0) {
        aspect = ratio[0] / ratio[1];
        if (Math.abs(dy * aspect) > Math.abs(dx)) box.width = Math.max(1, box.height * aspect);
        box.height = Math.max(1, box.width / aspect);
        if (direction.includes('w')) box.x = drag.box.x + drag.box.width - box.width;
        if (direction.includes('n')) box.y = drag.box.y + drag.box.height - box.height;
      }
      box = helpers.fitLayout(box, canvas(), aspect, direction);
    } else {
      box.x = Math.max(0, Math.min(canvas().width - box.width, box.x + dx));
      box.y = Math.max(0, Math.min(canvas().height - box.height, box.y + dy));
    }
    var peers = regions().filter(function (region) { return region.region_key !== selectedKey; }).map(effective);
    var snapped = helpers.snapBox(box, peers, canvas(), snapInput.checked && !event.altKey ? 6 * canvas().width / bounds.width : -1, direction, aspect);
    guides = snapped.guides;
    change(snapped.box);
  });
  function endDrag(event) {
    if (!drag || event.pointerId !== drag.pointerId) return;
    if (event.type === 'pointercancel') layouts = JSON.parse(drag.snapshot);
    if (stage.hasPointerCapture(event.pointerId)) stage.releasePointerCapture(event.pointerId);
    drag = null;
    guides = [];
    commit();
    update();
  }
  stage.addEventListener('pointerup', endDrag);
  stage.addEventListener('pointercancel', endDrag);
  stage.addEventListener('keydown', function (event) {
    if (!active || sharedSaving) return;
    if ((event.ctrlKey || event.metaKey) && event.key.toLowerCase() === 'z') {
      event.preventDefault();
      restoreHistory(event.shiftKey ? 1 : -1);
      return;
    }
    var hit = event.target.closest('.slide-layout-hit');
    if (hit) selectedKey = hit.dataset.regionKey;
    if (!selected()) return;
    if (event.key === 'Enter' || event.key === ' ') {
      event.preventDefault();
      stage.focus();
      render();
      return;
    }
    var movements = { ArrowLeft: [-1, 0], ArrowRight: [1, 0], ArrowUp: [0, -1], ArrowDown: [0, 1] };
    var movement = movements[event.key];
    if (!movement) return;
    event.preventDefault();
    var box = effective(selected());
    var step = event.shiftKey ? 10 : 1;
    box.x = Math.max(0, Math.min(canvas().width - box.width, box.x + movement[0] * step));
    box.y = Math.max(0, Math.min(canvas().height - box.height, box.y + movement[1] * step));
    change(box);
    commit();
    render();
    stage.focus();
  });
  return {
    apply: effective,
    refresh: render,
    getAnimationOverrides: function () {
      var overrides = Object.create(null);
      Object.keys(layouts).forEach(function (key) {
        if (layouts[key] && layouts[key].animation_json !== undefined) overrides[key] = layouts[key].animation_json;
      });
      return overrides;
    },
    getAnimation: function (regionKey) {
      var region = regions().find(function (item) { return item.region_key === regionKey; });
      var override = layouts[regionKey] && layouts[regionKey].animation_json;
      return override !== undefined ? override : String(region && region.animation_json || '{}');
    },
    setAnimationOverrides: function (overrides) {
      regions().forEach(function (region) {
        var key = region.region_key;
        var current = layouts[key] ? Object.assign({}, layouts[key]) : {};
        delete current.animation_json;
        if (Object.prototype.hasOwnProperty.call(overrides, key)) current.animation_json = overrides[key];
        if (Object.keys(current).length) layouts[key] = helpers.normalizeLayout(current, canvas());
        else delete layouts[key];
      });
      commit();
      update();
    },
    reset: function (content) {
      layouts = Object.create(null);
      regions().forEach(function (region) {
        var layout = helpers.normalizeLayout(content && content[region.region_key] && content[region.region_key].layout, canvas());
        if (layout) layouts[region.region_key] = layout;
      });
      hidden.value = snapshot();
      render();
    }
  };
}