window.createFlowDetailView = function createFlowDetailView(options) {
  const {
    elements,
    getEditMode,
    setEditMode,
    flowEditorCore,
    flowEditorMedia,
    renderAll
  } = options || {};

  const { editModeBtnEl } = elements || {};

  function applyEditModeUI() {
    const editMode = Boolean(getEditMode && getEditMode());
    if (editModeBtnEl) {
      editModeBtnEl.classList.toggle('active', editMode);
      editModeBtnEl.textContent = '편집';
    }
    if (flowEditorCore && typeof flowEditorCore.applyEditMode === 'function') {
      flowEditorCore.applyEditMode(editMode);
    }
    if (flowEditorMedia && typeof flowEditorMedia.applyEditMode === 'function') {
      flowEditorMedia.applyEditMode(editMode);
    }
  }

  function toggleEditMode() {
    const nextMode = !Boolean(getEditMode && getEditMode());
    if (typeof setEditMode === 'function') {
      setEditMode(nextMode);
    }
    applyEditModeUI();
    if (typeof renderAll === 'function') {
      renderAll();
    }
  }

  function bind() {
    applyEditModeUI();
    if (editModeBtnEl) {
      editModeBtnEl.addEventListener('click', toggleEditMode);
    }
  }

  return {
    bind,
    applyEditModeUI,
    toggleEditMode
  };
};