"use client";

import { useEffect, useRef } from "react";

export default function CustomCursor() {
  const dotRef = useRef<HTMLDivElement>(null);
  const circleRef = useRef<HTMLDivElement>(null);
  const cardHoverRef = useRef(false);

  useEffect(() => {
    let mouseX = 0;
    let mouseY = 0;

    let circleX = 0;
    let circleY = 0;

    const handleMouseMove = (e: MouseEvent) => {
      mouseX = e.clientX;
      mouseY = e.clientY;

      if (dotRef.current) {
        dotRef.current.style.transform = `
          translate3d(${mouseX}px, ${mouseY}px, 0)
          translate(-50%, -50%)
        `;
      }
    };

    const animate = () => {
          const speed = 0.14;

          circleX += (mouseX - circleX) * speed;
          circleY += (mouseY - circleY) * speed;

          if (dotRef.current) {
              dotRef.current.style.backgroundColor = cardHoverRef.current
                  ? "#8B2FC9"
                  : "#ec008c";
          }

          if (circleRef.current) {
          const isCardHover = cardHoverRef.current;

          const scale = isCardHover ? 1.35 : 1;

          circleRef.current.style.transform =
            `translate3d(${circleX}px, ${circleY}px, 0) translate(-50%, -50%) scale(${scale})`;

          circleRef.current.style.backgroundColor = isCardHover
              ? "rgba(220, 10, 165, 0.16)"
              : "transparent";

          circleRef.current.style.borderColor = isCardHover
              ? "transparent"
              : "#daa6fd";

          circleRef.current.style.boxShadow = isCardHover
              ? "0 0 24px rgba(220, 10, 165, 0.22)"
              : "none";
      }

          requestAnimationFrame(animate);
      };

    window.addEventListener("mousemove", handleMouseMove);

    const handleCardEnter = () => {
        cardHoverRef.current = true;
    };

    const handleCardLeave = () => {
        cardHoverRef.current = false;
    };

    window.addEventListener("card-cursor-enter", handleCardEnter);
    window.addEventListener("card-cursor-leave", handleCardLeave);

    const animationId = requestAnimationFrame(animate);

    return () => {
      window.removeEventListener("mousemove", handleMouseMove);
      window.removeEventListener("card-cursor-enter", handleCardEnter);
      window.removeEventListener("card-cursor-leave", handleCardLeave);
      cancelAnimationFrame(animationId);
  };
  }, []);

  return (
    <>
      {/* Pink Dot */}
      <div
        ref={dotRef}
        className="
          pointer-events-none
          fixed
          left-0
          top-0
          z-[9999]
          hidden
          h-[7px]
          w-[7px]
          rounded-full
          bg-[#ec008c]
          lg:block
        "
      />

      {/* Outer Circle */}
      <div
          ref={circleRef}
          className="
              pointer-events-none
              fixed
              left-0
              top-0
              z-[9998]
              hidden
              h-[38px]
              w-[38px]
              rounded-full
              border
              border-[#c56cff]
              bg-transparent
              shadow-none
              lg:block
          "
      />
    </>
  );
}