import type { App, Directive } from 'vue';

interface ResizableElement extends HTMLElement {
  __modal_resizable__?: {
    handleEl: HTMLElement;
    initialHeight?: number;
    initialWidth?: number;
    onMousedown: (e: MouseEvent) => void;
    styleObserver: MutationObserver;
  };
}

const RESIZABLE_KEY = '__modal_resizable__' as const;

function resetModalSize(modalWrap: ResizableElement) {
  const dragDom = modalWrap.querySelector('.ant-modal') as HTMLElement;
  const modalContent = modalWrap.querySelector('.ant-modal-content') as HTMLElement;
  if (dragDom) {
    dragDom.style.width = '';
    dragDom.style.left = '';
    dragDom.style.top = '';
  }
  if (modalContent) {
    modalContent.style.height = '';
    modalContent.classList.remove('is-modal-resized');
  }
  const resizeData = modalWrap[RESIZABLE_KEY];
  if (resizeData) {
    resizeData.initialWidth = undefined;
    resizeData.initialHeight = undefined;
  }
}

function setupResize(modalWrap: ResizableElement) {
  const dragDom = modalWrap.querySelector('.ant-modal') as HTMLElement;
  const modalContent = modalWrap.querySelector('.ant-modal-content') as HTMLElement;

  if (!dragDom || !modalContent) return;
  if (modalWrap[RESIZABLE_KEY]) return;
  if (modalWrap.classList.contains('fullscreen-modal')) return;
  if (dragDom.classList.contains('ant-modal-confirm')) return;

  const handleEl = document.createElement('div');
  handleEl.className = 'modal-resize-handle';
  modalContent.append(handleEl);

  const styleObserver = new MutationObserver(() => {
    if (modalWrap.style.display === 'none') {
      resetModalSize(modalWrap);
    }
  });
  styleObserver.observe(modalWrap, { attributes: true, attributeFilter: ['style'] });

  const onMousedown = (e: MouseEvent) => {
    if (!e) return;
    e.preventDefault();
    e.stopPropagation();

    const resizeData = modalWrap[RESIZABLE_KEY];
    if (!resizeData) return;
    if (!resizeData.initialWidth || !resizeData.initialHeight) {
      resizeData.initialWidth = dragDom.offsetWidth;
      resizeData.initialHeight = dragDom.offsetHeight;
    }

    const startX = e.clientX;
    const startY = e.clientY;
    const startWidth = dragDom.offsetWidth;
    const startHeight = dragDom.offsetHeight;
    const minWidth = resizeData.initialWidth;
    const minHeight = resizeData.initialHeight;
    const startLeft = dragDom.getBoundingClientRect().left;
    const startTop = dragDom.getBoundingClientRect().top;

    const screenWidth = document.body.clientWidth;
    const screenHeight = document.documentElement.clientHeight;

    document.body.style.cursor = 'nwse-resize';
    document.body.style.userSelect = 'none';

    const onMousemove = (e: MouseEvent) => {
      const deltaX = e.clientX - startX;
      const deltaY = e.clientY - startY;

      let newWidth = Math.max(minWidth, startWidth + deltaX);
      let newHeight = Math.max(minHeight, startHeight + deltaY);

      newWidth = Math.min(newWidth, screenWidth - startLeft);
      newHeight = Math.min(newHeight, screenHeight - startTop);

      modalContent.classList.add('is-modal-resized');
      dragDom.style.width = `${newWidth}px`;
      modalContent.style.height = `${newHeight}px`;

      const currentLeft = dragDom.getBoundingClientRect().left;
      if (currentLeft !== startLeft) {
        const offset = currentLeft - startLeft;
        const currentStyleLeft = Number.parseFloat(getComputedStyle(dragDom).left) || 0;
        dragDom.style.left = `${currentStyleLeft - offset}px`;
      }

      const currentTop = dragDom.getBoundingClientRect().top;
      if (currentTop !== startTop) {
        const offset = currentTop - startTop;
        const currentStyleTop = Number.parseFloat(getComputedStyle(dragDom).top) || 0;
        dragDom.style.top = `${currentStyleTop - offset}px`;
      }
    };

    const onMouseup = () => {
      document.body.style.cursor = '';
      document.body.style.userSelect = '';
      document.removeEventListener('mousemove', onMousemove);
      document.removeEventListener('mouseup', onMouseup);
    };

    document.addEventListener('mousemove', onMousemove);
    document.addEventListener('mouseup', onMouseup);
  };

  handleEl.addEventListener('mousedown', onMousedown);
  (modalWrap as ResizableElement)[RESIZABLE_KEY] = { handleEl, onMousedown, styleObserver };
}

function cleanupResize(modalWrap: ResizableElement) {
  const resizeData = modalWrap[RESIZABLE_KEY];
  if (resizeData) {
    resizeData.handleEl.removeEventListener('mousedown', resizeData.onMousedown);
    resizeData.handleEl.remove();
    resizeData.styleObserver.disconnect();
    resetModalSize(modalWrap);
    delete modalWrap[RESIZABLE_KEY];
  }
}

/** 自动为所有 .ant-modal-wrap 添加 resize 支持 */
export function setupGlobalResizeObserver() {
  const observer = new MutationObserver((mutations) => {
    for (const mutation of mutations) {
      for (const node of mutation.addedNodes) {
        if (node instanceof HTMLElement) {
          if (node.classList.contains('ant-modal-wrap')) {
            setTimeout(() => setupResize(node as ResizableElement), 50);
          }
          const wraps = node.querySelectorAll?.('.ant-modal-wrap');
          wraps?.forEach((wrap) => {
            setTimeout(() => setupResize(wrap as ResizableElement), 50);
          });
        }
      }
      for (const node of mutation.removedNodes) {
        if (node instanceof HTMLElement) {
          if (node.classList.contains('ant-modal-wrap')) {
            cleanupResize(node as ResizableElement);
          }
          const wraps = node.querySelectorAll?.('.ant-modal-wrap');
          wraps?.forEach((wrap) => cleanupResize(wrap as ResizableElement));
        }
      }
    }
  });

  observer.observe(document.body, { childList: true, subtree: true });
  return observer;
}

/** v-resizable 指令，用于显式标记需要 resize 的 modal */
export const vResizable: Directive = {
  mounted(el: HTMLElement) {
    const modalWrap = (el.classList.contains('ant-modal-wrap') ? el : el.closest('.ant-modal-wrap')) as ResizableElement;
    if (!modalWrap) return;

    const observer = new MutationObserver(() => {
      const dragDom = modalWrap.querySelector('.ant-modal');
      if (dragDom) {
        observer.disconnect();
        setupResize(modalWrap);
      }
    });

    observer.observe(modalWrap, { childList: true, subtree: true });

    if (modalWrap.querySelector('.ant-modal')) {
      observer.disconnect();
      setupResize(modalWrap);
    }
  },

  unmounted(el: HTMLElement) {
    const modalWrap = (el.classList.contains('ant-modal-wrap') ? el : el.closest('.ant-modal-wrap')) as ResizableElement;
    if (!modalWrap) return;
    cleanupResize(modalWrap);
  },
};

/** 全局注册指令和自动 resize */
export function registerResizable(app: App) {
  app.directive('resizable', vResizable);
  setupGlobalResizeObserver();
}