"use client";

import { Button as BaseButton } from "@base-ui/react/button";
import { CaretLeft } from "@phosphor-icons/react";
import {
  m,
  useMotionValue,
  useReducedMotion,
  useSpring,
  useTransform,
} from "motion/react";
import { ReactNode, useCallback, useEffect, useRef } from "react";

// Magnetic button: partial displacement (0.3×) = "attracted but anchored" feel.
// Slightly underdamped (damping < 2√(k·m) ≈ 7.7) for characteristic snap-back.
const MAGNET_SPRING = { stiffness: 150, damping: 12, mass: 0.1 };
const MAGNET_PULL = 0.3;

// Cursor position: tight spring — near-instant tracking.
const CURSOR_POS_SPRING = { stiffness: 600, damping: 30, mass: 0.1 };

// Cursor morph (scale + borderRadius): slower settle so the blob feels organic.
const CURSOR_MORPH_SPRING = { stiffness: 200, damping: 20, mass: 0.5 };

// Cursor base size = size-5 = 20px. Scale applies from center (50% 50%).
// To keep visual center at P: div top-left must be at P - HALF_BASE.
const BASE = 20;
const HALF_BASE = BASE / 2;

interface MagnetProps {
  children: ReactNode;
  stiffness?: number;
  damping?: number;
  mass?: number;
  pull?: number;
}

function Magnet({
  children,
  stiffness = MAGNET_SPRING.stiffness,
  damping = MAGNET_SPRING.damping,
  mass = MAGNET_SPRING.mass,
  pull = MAGNET_PULL,
}: MagnetProps) {
  const ref = useRef<HTMLDivElement>(null);
  const x = useMotionValue(0);
  const y = useMotionValue(0);
  const xSpring = useSpring(x, { stiffness, damping, mass });
  const ySpring = useSpring(y, { stiffness, damping, mass });

  const handleMouse = (e: React.MouseEvent<HTMLDivElement>) => {
    if (!ref.current) return;
    const { width, height, left, top } = ref.current.getBoundingClientRect();
    x.set((e.clientX - (left + width / 2)) * pull);
    y.set((e.clientY - (top + height / 2)) * pull);
  };

  return (
    <m.div
      ref={ref}
      onMouseMove={handleMouse}
      onMouseLeave={() => { x.set(0); y.set(0); }}
      style={{ x: xSpring, y: ySpring, willChange: "transform" }}
      className="z-20"
    >
      {children}
    </m.div>
  );
}

const Cursor = () => {
  const buttonRef = useRef<HTMLButtonElement>(null);
  const containerRef = useRef<HTMLDivElement>(null);

  return (
    <div
      ref={containerRef}
      className="relative flex size-full min-h-[400px] items-center justify-center overflow-hidden rounded-xl"
    >
      <CustomCursor buttonRef={buttonRef} containerRef={containerRef} />
      <Magnet>
        <BaseButton
          ref={buttonRef}
          className="relative z-20 flex items-center gap-2 rounded-xl px-6 py-3 text-xl font-semibold text-blue-500"
        >
          <CaretLeft />
          <span>Appearance</span>
        </BaseButton>
      </Magnet>
    </div>
  );
};

interface CustomCursorProps {
  buttonRef: React.RefObject<HTMLButtonElement | null>;
  containerRef: React.RefObject<HTMLDivElement | null>;
}

const CustomCursor = ({ buttonRef, containerRef }: CustomCursorProps) => {
  const reduce = useReducedMotion();

  const posX = useMotionValue(-100);
  const posY = useMotionValue(-100);
  const cursorWidth = useMotionValue(BASE);
  const cursorHeight = useMotionValue(BASE);

  // Position: tight spring
  const x = useSpring(posX, CURSOR_POS_SPRING);
  const y = useSpring(posY, CURSOR_POS_SPRING);

  // Scale: organic morph spring
  const rawScaleX = useTransform(cursorWidth, (w) => w / BASE);
  const rawScaleY = useTransform(cursorHeight, (h) => h / BASE);
  const scaleX = useSpring(rawScaleX, CURSOR_MORPH_SPRING);
  const scaleY = useSpring(rawScaleY, CURSOR_MORPH_SPRING);

  // Border radius: spring-animated dot→pill transition
  const rawRadius = useTransform(cursorWidth, (w) => (w > BASE ? 12 : BASE * 2));
  const borderRadius = useSpring(rawRadius, CURSOR_MORPH_SPRING);

  const handleMouseMove = useCallback(
    (e: MouseEvent) => {
      if (!containerRef.current) return;
      const rect = containerRef.current.getBoundingClientRect();
      posX.set(e.clientX - rect.left - HALF_BASE);
      posY.set(e.clientY - rect.top - HALF_BASE);
    },
    [containerRef, posX, posY],
  );

  const handleButtonEnter = useCallback(() => {
    if (!buttonRef.current || !containerRef.current) return;
    const { width, height, left, top } = buttonRef.current.getBoundingClientRect();
    const rect = containerRef.current.getBoundingClientRect();
    cursorWidth.set(width);
    cursorHeight.set(height);
    posX.set(left - rect.left + width / 2 - HALF_BASE);
    posY.set(top - rect.top + height / 2 - HALF_BASE);
  }, [buttonRef, containerRef, cursorWidth, cursorHeight, posX, posY]);

  const handleButtonLeave = useCallback(() => {
    cursorWidth.set(BASE);
    cursorHeight.set(BASE);
  }, [cursorWidth, cursorHeight]);

  useEffect(() => {
    const container = containerRef.current;
    const button = buttonRef.current;
    if (!container || !button) return;
    container.addEventListener("mousemove", handleMouseMove);
    button.addEventListener("mouseenter", handleButtonEnter);
    button.addEventListener("mouseleave", handleButtonLeave);
    return () => {
      container.removeEventListener("mousemove", handleMouseMove);
      button.removeEventListener("mouseenter", handleButtonEnter);
      button.removeEventListener("mouseleave", handleButtonLeave);
    };
  }, [handleMouseMove, handleButtonEnter, handleButtonLeave]);

  if (reduce) return null;

  return (
    <m.div
      style={{ x, y, scaleX, scaleY, borderRadius, willChange: "transform" }}
      className="pointer-events-none absolute left-0 top-0 z-10 hidden size-5 bg-gray-200 [@media(hover:hover)]:block"
    />
  );
};

export default Cursor;
Magnetic Cursor
