// src/directives/draggable.js
// 用法：在 Modal 外層加 v-draggable="{ handle: '[data-drag-handle]', target: '.modal-box' }"
// - handle：只在這個節點按下才可拖動
// - target：實際被拖動的 DOM（預設用 el 本身）

function createDraggable(el, options = {}) {
  const cancelSelector =
    'input, textarea, select, button, [contenteditable="true"], [data-drag-cancel]';

  const target =
    (options.target && el.querySelector(options.target)) ||
    el.querySelector('.modal-box') ||
    el;

  const handle =
    (options.handle && el.querySelector(options.handle)) || target;

  let startX = 0,
    startY = 0,
    originLeft = 0,
    originTop = 0,
    dragging = false;

  // 只在「左鍵」且「不是表單控制項」時啟動拖曳
  function onMouseDown(e) {
    if (e.button !== 0) return;

    // 點到可互動元件就不要拖（也不要 preventDefault，讓它能聚焦）
    if (e.target.matches(cancelSelector) || e.target.closest(cancelSelector)) {
      return;
    }

    // 這裡才開始準備拖曳
    dragging = true;
    const rect = target.getBoundingClientRect();
    originLeft = rect.left;
    originTop = rect.top;
    startX = e.clientX;
    startY = e.clientY;

    // 只有在真的要拖時才阻止預設，避免選字/圖片拖移
    e.preventDefault();

    // 以視窗為座標系比較直觀
    target.style.position = 'fixed';
    target.style.left = '0px';
    target.style.top = '0px';
    target.style.transform = `translate(${originLeft}px, ${originTop}px)`;

    window.addEventListener('mousemove', onMouseMove, { passive: false });
    window.addEventListener('mouseup', onMouseUp, { passive: true });
  }

  function onMouseMove(e) {
    if (!dragging) return;
    const dx = e.clientX - startX;
    const dy = e.clientY - startY;
    target.style.transform = `translate(${originLeft + dx}px, ${originTop + dy}px)`;
  }

  function onMouseUp() {
    dragging = false;
    window.removeEventListener('mousemove', onMouseMove);
    window.removeEventListener('mouseup', onMouseUp);
  }

  handle.style.cursor = 'move';
  handle.addEventListener('mousedown', onMouseDown, { passive: false });

  // 提供清理函式給 unmounted 用
  return () => {
    handle.removeEventListener('mousedown', onMouseDown);
    window.removeEventListener('mousemove', onMouseMove);
    window.removeEventListener('mouseup', onMouseUp);
  };
}

export const draggable = {
  install(app) {
    app.directive('draggable', {
      mounted(el, binding) {
        // 允許 v-draggable 或 v-draggable="true" 或 v-draggable="{ handle, target }"
        const enabled =
          binding.value === '' || binding.value === true || typeof binding.value === 'object';
        if (!enabled) return;

        // 以前用 jQuery UI 的判斷會在沒有 $ 或 .draggable 時噴錯，直接移除
        const options = typeof binding.value === 'object' ? binding.value : {};
        el.__dragCleanup__ = createDraggable(el, options);
      },
      unmounted(el) {
        if (el.__dragCleanup__) {
          el.__dragCleanup__();
          delete el.__dragCleanup__;
        }
      },
    });
  },
};
