"use client";

import { motion, useMotionValue, useSpring } from "framer-motion";
import { useEffect, useState } from "react";

export function CustomCursor() {
  const cursorX = useMotionValue(-100);
  const cursorY = useMotionValue(-100);
  const springX = useSpring(cursorX, { damping: 25, stiffness: 300, mass: 0.4 });
  const springY = useSpring(cursorY, { damping: 25, stiffness: 300, mass: 0.4 });

  const [isPointer, setIsPointer] = useState(false);
  const [isVisible, setIsVisible] = useState(false);

  useEffect(() => {
    // Only enable on devices that support hover (i.e. desktop w/ mouse)
    const mq = window.matchMedia("(hover: hover) and (pointer: fine)");
    if (!mq.matches) return;

    const moveHandler = (e: MouseEvent) => {
      cursorX.set(e.clientX);
      cursorY.set(e.clientY);
      if (!isVisible) setIsVisible(true);

      const target = e.target as HTMLElement | null;
      if (!target) return;
      const hoverable =
        target.closest(
          "a, button, [role='button'], input, textarea, select, [data-cursor-hover]"
        ) !== null;
      setIsPointer(hoverable);
    };

    const leaveHandler = () => setIsVisible(false);

    window.addEventListener("mousemove", moveHandler);
    document.addEventListener("mouseleave", leaveHandler);
    return () => {
      window.removeEventListener("mousemove", moveHandler);
      document.removeEventListener("mouseleave", leaveHandler);
    };
  }, [cursorX, cursorY, isVisible]);

  if (!isVisible) return null;

  return (
    <>
      {/* Outer ring */}
      <motion.div
        aria-hidden
        className="pointer-events-none fixed top-0 left-0 z-[9999] h-10 w-10 rounded-full border border-white/30 mix-blend-difference"
        style={{
          translateX: springX,
          translateY: springY,
          x: "-50%",
          y: "-50%",
        }}
        animate={{
          scale: isPointer ? 1.6 : 1,
          borderColor: isPointer
            ? "rgba(168, 85, 247, 0.9)"
            : "rgba(255,255,255,0.3)",
        }}
        transition={{ type: "spring", stiffness: 300, damping: 20 }}
      />
      {/* Inner dot */}
      <motion.div
        aria-hidden
        className="pointer-events-none fixed top-0 left-0 z-[9999] h-1.5 w-1.5 rounded-full bg-white mix-blend-difference"
        style={{
          translateX: cursorX,
          translateY: cursorY,
          x: "-50%",
          y: "-50%",
        }}
      />
    </>
  );
}