/**
 * Front-submit TinyMCE tools matching the reference article editor.
 *
 * @package AKSRT
 */
(function (window, document) {
  'use strict';

  if (!window.tinymce || !window.tinymce.PluginManager) {
    return;
  }

  var cfg = window.aksrtSubmitData || {};
  var editorCfg = cfg.editor || {};
  var i18n = cfg.i18n || {};
  var activeModal = null;

  function notify(message, type, duration, id) {
    if (typeof window.notyf === 'function') {
      window.notyf(
        message,
        type,
        duration === undefined ? 5 : duration,
        id || 'aksrt-front-submit-editor-image-toast'
      );
    }
  }

  function escapeAttr(value) {
    return String(value)
      .replace(/&/g, '&')
      .replace(/"/g, '"')
      .replace(/</g, '&lt;')
      .replace(/>/g, '&gt;');
  }

  function validImageUrl(value) {
    var raw = String(value).trim();
    if (!/^https?:\/\//i.test(raw)) {
      return '';
    }
    try {
      var url = new URL(raw);
      return url.protocol === 'http:' || url.protocol === 'https:' ? url.href : '';
    } catch (error) {
      return '';
    }
  }

  function imageMarkup(url, attachmentId, alt) {
    var safeUrl = validImageUrl(url);
    if (!safeUrl) {
      return '';
    }
    var idAttr = attachmentId ? ' data-edit-file-id="' + Number(attachmentId) + '"' : '';
    var altAttr = alt ? ' alt="' + escapeAttr(alt) + '"' : ' alt=""';
    return '<p><img src="' + escapeAttr(safeUrl) + '"' + idAttr + altAttr + '></p>';
  }

  function closeImageModal() {
    if (!activeModal) {
      return;
    }
    document.removeEventListener('keydown', activeModal.onKeydown);
    activeModal.root.remove();
    activeModal = null;
    document.body.classList.remove('aksrt-editor-media-open');
  }

  function uploadImage(file) {
    var upload = (cfg.uploads || {}).image || null;
    if (!upload || !upload.url) {
      return Promise.reject(new Error(i18n.uploadUnavailable || '当前账号不能上传图片'));
    }
    if (!file || !/^image\//.test(file.type || '')) {
      return Promise.reject(new Error(i18n.invalidImage || '请选择有效的图片文件'));
    }
    if (upload.maxSize && file.size > upload.maxSize) {
      return Promise.reject(new Error(i18n.fileTooLarge || '文件大小超过限制'));
    }

    var body = new FormData();
    body.append('file', file);
    return fetch(upload.url, {
      method: 'POST',
      credentials: 'same-origin',
      headers: { 'X-WP-Nonce': cfg.restNonce || '' },
      body: body,
    }).then(function (response) {
      return response.json().catch(function () {
        return {};
      }).then(function (payload) {
        if (!response.ok || !payload || !payload.success || !payload.url) {
          throw new Error((payload && payload.message) || i18n.error || '图片上传失败');
        }
        return payload;
      });
    });
  }

  function createImageModal(editor) {
    closeImageModal();

    var canUpload = !!editorCfg.canUploadImage && !!((cfg.uploads || {}).image);
    var root = document.createElement('div');
    root.className = 'aksrt-editor-media';
    root.setAttribute('role', 'dialog');
    root.setAttribute('aria-modal', 'true');
    root.setAttribute('aria-labelledby', 'aksrt-editor-media-title');
    root.innerHTML =
      '<button type="button" class="aksrt-editor-media__backdrop" data-editor-media-close tabindex="-1" aria-label="' +
        escapeAttr(i18n.close || '关闭') + '"></button>' +
      '<div class="aksrt-editor-media__dialog">' +
        '<button type="button" class="aksrt-editor-media__close" data-editor-media-close aria-label="' +
          escapeAttr(i18n.close || '关闭') + '">&times;</button>' +
        '<h3 id="aksrt-editor-media-title" class="aksrt-editor-media__title">' +
          escapeAttr(i18n.insertImage || '插入图片') + '</h3>' +
        '<div class="aksrt-editor-media__tabs" role="tablist">' +
          (canUpload
            ? '<button type="button" class="is-active" role="tab" aria-selected="true" data-editor-media-tab="upload">' +
                escapeAttr(i18n.uploadImage || '上传图片') + '</button>'
            : '') +
          '<button type="button" class="' + (canUpload ? '' : 'is-active') + '" role="tab" aria-selected="' +
            (canUpload ? 'false' : 'true') + '" data-editor-media-tab="external">' +
            escapeAttr(i18n.externalImage || '外链图片') + '</button>' +
        '</div>' +
        '<div class="aksrt-editor-media__panels">' +
          (canUpload
            ? '<section class="aksrt-editor-media__panel is-active" data-editor-media-panel="upload">' +
                '<label class="aksrt-editor-media__drop">' +
                  '<input type="file" accept="image/gif,image/jpeg,image/png,image/webp" multiple data-editor-media-files>' +
                  '<i class="fa fas fa-cloud-upload-alt" aria-hidden="true"></i>' +
                  '<strong>' + escapeAttr(i18n.selectImages || '选择或拖入图片') + '</strong>' +
                  '<span>' + escapeAttr(i18n.imageUploadHint || '可批量选择，上传完成后自动插入正文') + '</span>' +
                '</label>' +
                '<div class="aksrt-editor-media__selection" data-editor-media-selection></div>' +
                '<button type="button" class="but c-blue aksrt-editor-media__submit" data-editor-media-upload disabled>' +
                  escapeAttr(i18n.confirmUpload || '确认上传') + '</button>' +
              '</section>'
            : '') +
          '<section class="aksrt-editor-media__panel ' + (canUpload ? '' : 'is-active') + '" data-editor-media-panel="external">' +
            '<p>' + escapeAttr(i18n.externalImageHint || '每行填写一个图片地址：') + '</p>' +
            '<textarea class="form-control" rows="5" placeholder="https://..." data-editor-media-urls></textarea>' +
            '<button type="button" class="but c-blue aksrt-editor-media__submit" data-editor-media-external>' +
              escapeAttr(i18n.confirmInsert || '确认插入') + '</button>' +
          '</section>' +
        '</div>' +
      '</div>';

    document.body.appendChild(root);
    document.body.classList.add('aksrt-editor-media-open');

    var fileInput = root.querySelector('[data-editor-media-files]');
    var uploadButton = root.querySelector('[data-editor-media-upload]');
    var selection = root.querySelector('[data-editor-media-selection]');
    var drop = root.querySelector('.aksrt-editor-media__drop');
    var files = [];

    function showSelection() {
      if (!selection || !uploadButton) {
        return;
      }
      selection.textContent = files.length
        ? (i18n.selectedImages || '已选择 %d 张图片').replace('%d', String(files.length))
        : '';
      uploadButton.disabled = files.length === 0;
    }

    function setFiles(nextFiles) {
      files = Array.prototype.filter.call(nextFiles || [], function (file) {
        return /^image\//.test(file.type || '');
      });
      showSelection();
    }

    root.addEventListener('click', function (event) {
      var close = event.target.closest('[data-editor-media-close]');
      if (close) {
        event.preventDefault();
        closeImageModal();
        return;
      }

      var tab = event.target.closest('[data-editor-media-tab]');
      if (tab) {
        var name = tab.getAttribute('data-editor-media-tab');
        root.querySelectorAll('[data-editor-media-tab]').forEach(function (item) {
          var active = item === tab;
          item.classList.toggle('is-active', active);
          item.setAttribute('aria-selected', active ? 'true' : 'false');
        });
        root.querySelectorAll('[data-editor-media-panel]').forEach(function (panel) {
          panel.classList.toggle('is-active', panel.getAttribute('data-editor-media-panel') === name);
        });
        return;
      }

      if (event.target.closest('[data-editor-media-external]')) {
        var textarea = root.querySelector('[data-editor-media-urls]');
        var urls = String(textarea ? textarea.value : '').split(/\r?\n/);
        var html = urls.map(function (url) {
          return imageMarkup(url, 0, '');
        }).join('');
        if (!html) {
          notify(i18n.invalidImageUrl || '请填写有效的图片地址', 'warning');
          return;
        }
        editor.insertContent(html + '<p></p>');
        editor.nodeChanged();
        closeImageModal();
        return;
      }

      if (event.target.closest('[data-editor-media-upload]')) {
        if (!files.length || !uploadButton) {
          return;
        }
        uploadButton.disabled = true;
        uploadButton.textContent = i18n.uploading || '正在上传…';
        notify(i18n.uploading || '正在上传正文图片…', 'load', '');
        Promise.all(files.map(uploadImage)).then(function (items) {
          var html = items.map(function (item) {
            return imageMarkup(item.url, item.attachment_id, item.name || '');
          }).join('');
          if (!html) {
            throw new Error(i18n.error || '图片上传失败');
          }
          editor.insertContent(html + '<p></p>');
          editor.nodeChanged();
          notify(i18n.uploaded || '正文图片上传成功', 'success');
          closeImageModal();
        }).catch(function (error) {
          notify(error.message || i18n.error || '正文图片上传失败', 'danger');
          uploadButton.disabled = false;
          uploadButton.textContent = i18n.confirmUpload || '确认上传';
        });
      }
    });

    if (fileInput) {
      fileInput.addEventListener('change', function () {
        setFiles(fileInput.files);
      });
    }

    if (drop) {
      ['dragenter', 'dragover'].forEach(function (name) {
        drop.addEventListener(name, function (event) {
          event.preventDefault();
          drop.classList.add('is-dragging');
        });
      });
      ['dragleave', 'drop'].forEach(function (name) {
        drop.addEventListener(name, function (event) {
          event.preventDefault();
          drop.classList.remove('is-dragging');
        });
      });
      drop.addEventListener('drop', function (event) {
        setFiles(event.dataTransfer && event.dataTransfer.files);
      });
    }

    var onKeydown = function (event) {
      if (event.key === 'Escape') {
        closeImageModal();
      }
    };
    activeModal = { root: root, onKeydown: onKeydown };
    document.addEventListener('keydown', onKeydown);
    var focusTarget = root.querySelector('[data-editor-media-tab].is-active');
    if (focusTarget) {
      focusTarget.focus();
    }
  }

  function selectedContent(editor) {
    var content = String(editor.selection.getContent() || '').trim();
    return content ? '<p>' + content + '</p>' : '<p>' + escapeAttr(i18n.hiddenPlaceholder || '隐藏内容') + '</p>';
  }

  function insertHiddenContent(editor, item) {
    var node = editor.selection.getNode();
    var content = selectedContent(editor);
    var suffix = '<p></p>';
    if (node && editor.dom.hasClass(node, 'tinymce-hide')) {
      var editable = node.querySelector('[contenteditable="true"]');
      content = editable ? editable.innerHTML : content;
      editor.dom.remove(node);
      suffix = '';
    }

    editor.insertContent(
      '<div class="tinymce-hide" data-aksrt-hide-type="' + escapeAttr(item.type) + '" contenteditable="false">' +
        '<p class="hide-before">' + escapeAttr(item.open) + '</p>' +
        '<div contenteditable="true">' + content + '</div>' +
        '<p class="hide-after">' + escapeAttr(item.close) + '</p>' +
      '</div>' + suffix
    );
    editor.nodeChanged();
  }

  window.tinymce.PluginManager.add('aksrt_editor_tools', function (editor) {
    if (editorCfg.canUploadImage) {
      editor.addButton('aksrt_image', {
        text: '',
        icon: 'image',
        tooltip: i18n.insertImage || '插入图片',
        onclick: function () {
          createImageModal(editor);
        },
      });
    }

    if (editorCfg.canHide) {
      var menu = [
        {
          text: i18n.replyVisible || '回复可见',
          type: 'reply',
          open: '[reply]',
          close: '[/reply]',
        },
        {
          text: i18n.loginVisible || '登录可见',
          type: 'login',
          open: '[aksrt_hide mode="login"]',
          close: '[/aksrt_hide]',
        },
        {
          text: i18n.vipVisible || 'VIP 可见',
          type: 'vip',
          open: '[vip]',
          close: '[/vip]',
        },
      ];
      if (editorCfg.canPay) {
        menu.push({
          text: i18n.payVisible || '付费可见',
          type: 'payshow',
          open: '[payshow]',
          close: '[/payshow]',
        });
      }
      menu = menu.map(function (item) {
        return {
          text: item.text,
          onclick: function () {
            insertHiddenContent(editor, item);
          },
        };
      });
      editor.addButton('aksrt_hide', {
        text: '',
        icon: 'preview',
        tooltip: i18n.hiddenContent || '隐藏内容',
        type: 'menubutton',
        stateSelector: '.tinymce-hide',
        menu: menu,
      });
    }
  });
})(window, document);