import { useEffect, useRef, type PointerEvent, type ReactNode } from 'react';
import { prefersReducedMotion } from '~/lib/motion';

interface Props {
  children: ReactNode;
  /** 位移 = 指针到中心的距离 × strength */
  strength?: number;
  /** 位移上限（px） */
  maxOffset?: number;
  /** 隐形感应区半径（px）：靠 padding + 负 margin 扩大，不改布局 */
  radius?: number;
  className?: string;
}

const clamp = (v: number, max: number) => Math.max(-max, Math.min(max, v));

const canHover = () =>
  typeof window !== 'undefined' &&
  window.matchMedia('(hover: hover) and (pointer: fine)').matches;

/**
 * 磁吸：指针靠近时元素朝指针偏移，光标保持原生。
 * 只在精确指针 + 允许 hover 时生效；键盘焦点与回车不受影响，离开用 --ease-settle 回位。
 */
export function Magnetic({
  children,
  strength = 0.3,
  maxOffset = 12,
  radius = 12,
  className = '',
}: Props) {
  const wrapRef = useRef<HTMLDivElement>(null);
  const innerRef = useRef<HTMLDivElement>(null);
  const rafRef = useRef(0);

  useEffect(() => () => cancelAnimationFrame(rafRef.current), []);

  const onPointerMove = (e: PointerEvent<HTMLDivElement>) => {
    if (e.pointerType !== 'mouse' || prefersReducedMotion() || !canHover()) return;
    const x = e.clientX;
    const y = e.clientY;
    cancelAnimationFrame(rafRef.current);
    rafRef.current = requestAnimationFrame(() => {
      const wrap = wrapRef.current;
      const inner = innerRef.current;
      if (!wrap || !inner) return;
      const r = wrap.getBoundingClientRect();
      const tx = clamp((x - (r.left + r.width / 2)) * strength, maxOffset);
      const ty = clamp((y - (r.top + r.height / 2)) * strength, maxOffset);
      inner.style.transition = 'none';
      inner.style.transform = `translate3d(${tx}px, ${ty}px, 0)`;
    });
  };

  const onPointerLeave = () => {
    cancelAnimationFrame(rafRef.current);
    const inner = innerRef.current;
    if (!inner) return;
    inner.style.transition = 'transform var(--dur-slow) var(--ease-settle)';
    inner.style.transform = 'translate3d(0, 0, 0)';
  };

  return (
    <div
      ref={wrapRef}
      data-magnetic
      onPointerMove={onPointerMove}
      onPointerLeave={onPointerLeave}
      className={`inline-flex ${className}`}
      style={{ padding: radius, margin: -radius }}
    >
      <div ref={innerRef} data-magnetic-inner className="inline-flex">
        {children}
      </div>
    </div>
  );
}