"use client";

import { useEffect, useRef } from "react";
import { usePathname } from "next/navigation";
import gsap from "gsap";

export default function CustomCursor() {
    const cursorDotRef = useRef<HTMLDivElement>(null);
    const cursorRingRef = useRef<HTMLDivElement>(null);
    const pathname = usePathname();

    useEffect(() => {
        const dot = cursorDotRef.current;
        const ring = cursorRingRef.current;
        if (!dot || !ring) return;

        // Reset cursor to default state on route change
        gsap.to(ring, { scale: 1, backgroundColor: "transparent", borderColor: "rgba(0, 0, 0, 0.3)", opacity: 1, duration: 0.3 });
        gsap.to(dot, { scale: 1, opacity: 1, duration: 0.3 });
    }, [pathname]);

    useEffect(() => {
        const dot = cursorDotRef.current;
        const ring = cursorRingRef.current;
        if (!dot || !ring) return;

        // Check if device is touch-capable
        const isTouchDevice = 'ontouchstart' in window || navigator.maxTouchPoints > 0;
        if (isTouchDevice) return;

        // Show default cursor as requested
        document.body.style.cursor = "auto";

        const moveCursor = (e: MouseEvent) => {
            const { clientX, clientY } = e;

            // Immediate dot move
            gsap.to(dot, {
                x: clientX,
                y: clientY,
                duration: 0,
            });

            // Lagging ring move
            gsap.to(ring, {
                x: clientX,
                y: clientY,
                duration: 0.2, // Faster follow
                ease: "power2.out",
            });
        };

        const handleHover = () => {
            gsap.to(ring, { scale: 1.2, backgroundColor: "transparent", borderColor: "rgba(0, 0, 0, 0.1)", duration: 0.3 });
            gsap.to(dot, { scale: 4, opacity: 0.1, duration: 0.3 }); // Large faint dot
        };

        const handleLeave = () => {
            gsap.to(ring, { scale: 1, backgroundColor: "transparent", borderColor: "rgba(0, 0, 0, 0.3)", duration: 0.3 });
            gsap.to(dot, { scale: 1, opacity: 1, duration: 0.3 });
        };

        const handleMouseDown = () => {
            gsap.to([dot, ring], { scale: 0.8, duration: 0.1 });
        };

        const handleMouseUp = () => {
            gsap.to([dot, ring], { scale: 1, duration: 0.1 });
        };

        // Event Delegation for Hover effects
        const onMouseOver = (e: MouseEvent) => {
            const target = e.target as HTMLElement;
            if (target && target.closest('[data-no-global-cursor]')) {
                gsap.to([dot, ring], { opacity: 0, scale: 0, duration: 0.2 });
                return;
            }
            if (target && target.closest('button, a, input, [role="button"]')) {
                handleHover();
            }
        };

        const onMouseOut = (e: MouseEvent) => {
            const target = e.target as HTMLElement;
            if (target && target.closest('[data-no-global-cursor]')) {
                gsap.to(ring, { scale: 1, backgroundColor: "transparent", borderColor: "rgba(0, 0, 0, 0.3)", opacity: 1, duration: 0.3 });
                gsap.to(dot, { scale: 1, opacity: 1, duration: 0.3 });
                return;
            }
            if (target && target.closest('button, a, input, [role="button"]')) {
                handleLeave();
            }
        };

        window.addEventListener("mousemove", moveCursor);
        window.addEventListener("mousedown", handleMouseDown);
        window.addEventListener("mouseup", handleMouseUp);
        window.addEventListener("mouseover", onMouseOver);
        window.addEventListener("mouseout", onMouseOut);

        // Cleanup
        return () => {
            document.body.style.cursor = "auto";
            window.removeEventListener("mousemove", moveCursor);
            window.removeEventListener("mousedown", handleMouseDown);
            window.removeEventListener("mouseup", handleMouseUp);
            window.removeEventListener("mouseover", onMouseOver);
            window.removeEventListener("mouseout", onMouseOut);
        };
    }, []);

    return (
        <div className="hidden md:block">
            {/* Outer Ring */}
            <div
                ref={cursorRingRef}
                className="fixed top-0 left-0 w-8 h-8 border border-black/30 rounded-full pointer-events-none -translate-x-1/2 -translate-y-1/2 z-[100] transition-colors duration-300"
            />
            {/* Center Dot */}
            <div
                ref={cursorDotRef}
                className="fixed top-0 left-0 w-1.5 h-1.5 bg-red-700 rounded-full pointer-events-none -translate-x-1/2 -translate-y-1/2 z-[100]"
            />
        </div>
    );
}