iboard/src/components/checkin/useHabitDrag.js

import { useCallback, useEffect, useRef, useState } from 'react'

// 打卡项组内拖动排序 (MergedView 分组列表)
//   触发路径:
//   1. 把手 (bindHandle, 推荐): 卡片左侧 ⠿ 把手 touch-action:none +
//      非 passive touchstart preventDefault —— 浏览器按规范完全不接管该
//      触摸, 指针流不会被滚动抢占取消, Android WebView 上可靠;
//   2. 长按 (bind): 长按 400ms 激活。pan-y 下列表可滚时手指纵向抖动会
//      触发滚动接管 (pointercancel), 仅作补充入口。
//   拖动: 激活时克隆原卡片作为跟手浮层 (淡化), 原位保留虚线占位;
//   elementFromPoint 命中同组 [data-habit-row] 作为落点 (data-habit-period
//   必须一致, 即只在 每天/每周/每月 组内排序), 按指针在目标卡上半/下半
//   决定插到其前/后, 松手提交。
export default function useHabitDrag({ onDrop }) {
  const [dragItem, setDragItem] = useState(null)       // 拖动中的打卡项 (视觉态)
  const [over, setOver] = useState(null)               // { id, after } 落点
  const st = useRef({ timer: null, active: false, startX: 0, startY: 0, item: null, over: null, srcEl: null, ghost: null })
  const lastEnd = useRef(0)

  // onDrop 取"最新一次渲染"的闭包: bind/bindHandle 是空依赖 useCallback,
  // 若直接捕获 onDrop, 会固化首次渲染(数据未加载, groups=[])的落位函数,
  // 松手时静默早退。用 ref 桥接到实时实现。
  const onDropRef = useRef(onDrop)
  onDropRef.current = onDrop

  // 跟手浮层: 激活时克隆原卡片挂到 body (脱离页签滑动容器的 transform),
  // 移动时直接改 transform, 不经 React 渲染
  const moveGhost = (x, y) => {
    const g = st.current.ghost
    if (g) g.style.transform = `translate(${x}px, ${y}px) translate(-50%, -60%)`
  }
  const mountGhost = (x, y) => {
    const src = st.current.srcEl
    if (!src) return
    const clone = src.cloneNode(true)
    clone.classList.remove('dragging', 'dragover', 'after', 'before')
    clone.style.width = `${src.offsetWidth}px`
    const g = document.createElement('div')
    g.className = 'drag-ghost'
    g.appendChild(clone)
    document.body.appendChild(g)
    st.current.ghost = g
    moveGhost(x, y)
  }

  const cleanup = useCallback(() => {
    if (st.current.timer) { clearTimeout(st.current.timer); st.current.timer = null }
    st.current.active = false
    st.current.over = null
    st.current.srcEl = null
    if (st.current.ghost) { st.current.ghost.remove(); st.current.ghost = null }
    setDragItem(null)
    setOver(null)
  }, [])

  useEffect(() => () => cleanup(), [cleanup])

  /** 拖动刚结束 (350ms 内): 抑制松手合成的 click 误触打卡 */
  const justEnded = useCallback(() => Date.now() - lastEnd.current < 350, [])

  const hitRow = (x, y) => {
    const el = document.elementFromPoint(x, y)
    const rowEl = el?.closest?.('[data-habit-row]')
    if (!rowEl) return null
    const r = rowEl.getBoundingClientRect()
    const id = Number(rowEl.dataset.habitId)
    if (id === st.current.item.id) return null
    // 允许跨组: 落到其他周期组的目标卡上 = 同时改周期 + 落位 (由 onDrop 处理)
    const period = rowEl.dataset.habitPeriod
    return { id, period, after: y > r.top + r.height / 2 }
  }

  const onMove = (ev) => {
    const s = st.current
    if (!s.active) {
      if (s.timer && (Math.abs(ev.clientX - s.startX) > 10 || Math.abs(ev.clientY - s.startY) > 10)) {
        clearTimeout(s.timer); s.timer = null
      }
      return
    }
    ev.preventDefault()
    moveGhost(ev.clientX, ev.clientY)
    const hit = hitRow(ev.clientX, ev.clientY)
    if (hit) { s.over = hit; setOver(hit) }
    else if (s.over) { s.over = null; setOver(null) }
  }

  const onUp = () => {
    const s = st.current
    if (s.active && s.item) {
      lastEnd.current = Date.now()
      if (s.over && s.over.id !== s.item.id) onDropRef.current?.(s.item, s.over.id, s.over.after, s.over.period)
    }
    cleanup()
  }

  // 指针监听装配: instant=true 时按下即激活 (把手路径), 否则长按 400ms 激活
  const armListeners = (ev, instant, item) => {
    try { ev.currentTarget.setPointerCapture(ev.pointerId) } catch { /* ignore */ }
    const el = ev.currentTarget
    const move = (e2) => onMove(e2)
    const tm = (e2) => { if (st.current.active) e2.preventDefault() }
    const ts = (e2) => e2.preventDefault()
    const up = () => { onUp(); detach() }
    const cancel = () => {
      if (st.current.active) lastEnd.current = Date.now()
      cleanup()
      detach()
    }
    const detach = () => {
      el.removeEventListener('pointermove', move)
      el.removeEventListener('pointerup', up)
      el.removeEventListener('pointercancel', cancel)
      el.removeEventListener('touchmove', tm)
      el.removeEventListener('touchstart', ts)
    }
    el.addEventListener('pointermove', move)
    el.addEventListener('pointerup', up)
    el.addEventListener('pointercancel', cancel)
    el.addEventListener('touchmove', tm, { passive: false })
    if (instant) el.addEventListener('touchstart', ts, { passive: false })

    const activate = () => {
      st.current.active = true
      setDragItem(item)
      mountGhost(st.current.startX, st.current.startY)
      if (navigator.vibrate) navigator.vibrate(15)
    }
    if (instant) activate()
    else st.current.timer = setTimeout(activate, 400)
  }

  /** 绑定到卡片: 卡片需 touch-action: pan-y (长按路径) */
  const bind = useCallback((item) => ({
    onPointerDown: (ev) => {
      if (ev.button !== undefined && ev.button !== 0) return
      st.current = {
        ...st.current, startX: ev.clientX, startY: ev.clientY, item, active: false, over: null,
        srcEl: ev.currentTarget.closest('[data-habit-row]'),
      }
      armListeners(ev, false, item)
    },
    onContextMenu: (ev) => ev.preventDefault(),
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }), [])

  /** 绑定到拖动把手: 把手需 touch-action: none, 按下即拖 */
  const bindHandle = useCallback((item) => ({
    onPointerDown: (ev) => {
      if (ev.button !== undefined && ev.button !== 0) return
      ev.stopPropagation() // 不触发卡片自身的长按路径
      st.current = {
        ...st.current, startX: ev.clientX, startY: ev.clientY, item, active: false, over: null,
        srcEl: ev.currentTarget.closest('[data-habit-row]'),
      }
      armListeners(ev, true, item)
    },
    onContextMenu: (ev) => ev.preventDefault(),
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }), [])

  return { dragItem, over, bind, bindHandle, cancel: cleanup, justEnded }
}