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

export default function CustomCursor() {
  const [hovering, setHovering] = useState(false);
  const [visible, setVisible] = useState(false);
  const [isTouch, setIsTouch] = useState<boolean | null>(null);

  const x = useMotionValue(-100);
  const y = useMotionValue(-100);
  const sx = useSpring(x, { stiffness: 400, damping: 30, mass: 0.6 });
  const sy = useSpring(y, { stiffness: 400, damping: 30, mass: 0.6 });

  useEffect(() => {
    const touch = window.matchMedia("(pointer: coarse)").matches || "ontouchstart" in window;
    // defer to avoid cascading render lint
    queueMicrotask(() => setIsTouch(touch));
    if (touch) return;
    const reduced = window.matchMedia("(prefers-reduced-motion: reduce)").matches;
    if (reduced) return;

    const move = (e: MouseEvent) => {
      x.set(e.clientX);
      y.set(e.clientY);
      if (!visible) setVisible(true);
    };
    const enter = () => setVisible(true);
    const leave = () => setVisible(false);

    const over = (e: Event) => {
      const t = e.target as HTMLElement;
      if (t.closest("a, button, [role='button']")) setHovering(true);
      else setHovering(false);
    };
    const out = (e: Event) => {
      const t = e.target as HTMLElement;
      if (t.closest("a, button")) setHovering(false);
    };

    window.addEventListener("mousemove", move);
    window.addEventListener("mouseenter", enter);
    window.addEventListener("mouseleave", leave);
    document.addEventListener("mouseover", over);
    document.addEventListener("mouseout", out);
    return () => {
      window.removeEventListener("mousemove", move);
      window.removeEventListener("mouseenter", enter);
      window.removeEventListener("mouseleave", leave);
      document.removeEventListener("mouseover", over);
      document.removeEventListener("mouseout", out);
    };
  }, [x, y, visible]);

  if (isTouch !== false) return null;

  return (
    <>
      <motion.div
        style={{ x: sx, y: sy }}
        className="fixed top-0 left-0 w-2 h-2 rounded-full bg-white pointer-events-none z-[9999] -translate-x-1/2 -translate-y-1/2 mix-blend-difference hidden lg:block"
        animate={{ opacity: visible ? 1 : 0, scale: hovering ? 0.6 : 1 }}
        transition={{ duration: 0.15 }}
      />
      <motion.div
        style={{ x: sx, y: sy }}
        className="fixed top-0 left-0 rounded-full border border-white/40 pointer-events-none z-[9998] -translate-x-1/2 -translate-y-1/2 hidden lg:block"
        animate={{
          opacity: visible ? 1 : 0,
          width: hovering ? 44 : 28,
          height: hovering ? 44 : 28,
          borderColor: hovering ? "rgba(96,165,250,0.6)" : "rgba(255,255,255,0.25)",
        }}
        transition={{ duration: 0.18 }}
      />
      <style>{`@media (pointer: fine) { * { cursor: none !important; } }`}</style>
    </>
  );
}