"use client";

import React, { useRef, useCallback } from "react";
import { ArrowRight } from "lucide-react";
import { motion, type HTMLMotionProps } from "framer-motion";
import { gsap } from "gsap";
import { cn } from "@/lib/utils";
import { playClickTick } from "@/lib/click-tick";
import { SPRING_COMPRESS, SPRING_RELEASE } from "@/lib/motion";

interface InteractiveHoverButtonProps extends Omit<HTMLMotionProps<"button">, "ref"> {
  text?: string;
  // invert=true: white border/text on dark backgrounds (e.g. header over dark section)
  invert?: boolean;
}

const InteractiveHoverButton = React.forwardRef<
  HTMLButtonElement,
  InteractiveHoverButtonProps
>(({ text = "Button", className, disabled, onClick, invert = false, ...props }, ref) => {
  const zoneRef = useRef<HTMLDivElement>(null);
  const gsapRef = useRef<HTMLDivElement>(null);

  const handleClick: React.MouseEventHandler<HTMLButtonElement> = (e) => {
    if (!disabled) playClickTick();
    onClick?.(e);
  };

  const handleMouseMove = useCallback((e: React.MouseEvent<HTMLDivElement>) => {
    const el = gsapRef.current;
    const zone = zoneRef.current;
    if (!el || !zone || disabled) return;
    const rect = zone.getBoundingClientRect();
    const dx = (e.clientX - (rect.left + rect.width  / 2)) * 0.28;
    const dy = (e.clientY - (rect.top  + rect.height / 2)) * 0.28;
    gsap.to(el, { x: dx, y: dy, duration: 0.35, ease: "power2.out", overwrite: "auto" });
  }, [disabled]);

  const handleMouseLeave = useCallback(() => {
    const el = gsapRef.current;
    if (!el) return;
    gsap.to(el, { x: 0, y: 0, duration: 0.65, ease: "elastic.out(1, 0.5)", overwrite: "auto" });
  }, []);

  return (
    <div
      ref={zoneRef}
      onMouseMove={handleMouseMove}
      onMouseLeave={handleMouseLeave}
      style={{ display: "inline-flex", padding: "2rem", margin: "-2rem" }}
    >
      <div ref={gsapRef} style={{ display: "inline-flex" }}>
        <motion.button
          ref={ref}
          disabled={disabled}
          onClick={handleClick}
          whileTap={!disabled ? { scaleX: 1.08, scaleY: 0.92, transition: SPRING_COMPRESS } : undefined}
          transition={SPRING_RELEASE}
          className={cn(
            "group relative inline-flex min-w-[9rem] items-center justify-center gap-2 overflow-hidden rounded-md bg-transparent px-7 py-3.5 text-xs font-bold uppercase tracking-[0.15em] transition-colors duration-300 disabled:cursor-not-allowed disabled:opacity-40",
            invert
              ? "border border-[#f2f0ec] text-[#f2f0ec] hover:text-[#0d0d0d]"
              : "border border-black dark:border-white text-black dark:text-white hover:text-white dark:hover:text-black",
            className,
          )}
          {...props}
        >
          <span
            aria-hidden
            className={cn(
              "absolute inset-0 -translate-x-full transition-transform duration-300 ease-out group-hover:translate-x-0",
              invert ? "bg-[#f2f0ec]" : "bg-black dark:bg-white",
            )}
          />
          <span className="relative z-10">{text}</span>
          <ArrowRight className="relative z-10 h-3.5 w-3.5 transition-all duration-300 group-hover:translate-x-1 group-hover:text-[#FF6520]" />
        </motion.button>
      </div>
    </div>
  );
});

InteractiveHoverButton.displayName = "InteractiveHoverButton";

export { InteractiveHoverButton };