"use client";

import React, {
  useRef,
  useState,
  useCallback,
  type ButtonHTMLAttributes,
} from "react";
import { motion, useMotionValue, useSpring } from "motion/react";

export interface TiltButtonProps
  extends Omit<
    ButtonHTMLAttributes<HTMLButtonElement>,
    "onDrag" | "onDragStart" | "onDragEnd" | "onAnimationStart" | "onAnimationEnd"
  > {
  children: React.ReactNode;
  variant?: "default" | "accent";
  maxTilt?: number;
  perspective?: number;
}

export function TiltButton({
  children,
  variant = "default",
  maxTilt = 12,
  perspective = 700,
  className,
  style,
  disabled,
  onMouseMove,
  onMouseLeave,
  onMouseDown,
  onMouseUp,
  ...props
}: TiltButtonProps) {
  const ref = useRef<HTMLButtonElement>(null);
  const [pressed, setPressed] = useState(false);

  const rotX = useMotionValue(0);
  const rotY = useMotionValue(0);
  const sc = useMotionValue(1);

  const springCfg = { stiffness: 350, damping: 28, mass: 0.6 };
  const springRotX = useSpring(rotX, springCfg);
  const springRotY = useSpring(rotY, springCfg);
  const springScale = useSpring(sc, { stiffness: 400, damping: 30 });

  const handleMouseMove = useCallback(
    (e: React.MouseEvent<HTMLButtonElement>) => {
      if (!ref.current || pressed) return;
      const rect = ref.current.getBoundingClientRect();
      const nx = (e.clientX - rect.left - rect.width / 2) / (rect.width / 2);
      const ny = (e.clientY - rect.top - rect.height / 2) / (rect.height / 2);
      rotY.set(nx * maxTilt);
      rotX.set(-ny * maxTilt);
      onMouseMove?.(e);
    },
    [pressed, maxTilt, rotX, rotY, onMouseMove]
  );

  const handleMouseLeave = useCallback(
    (e: React.MouseEvent<HTMLButtonElement>) => {
      rotX.set(0);
      rotY.set(0);
      sc.set(1);
      setPressed(false);
      onMouseLeave?.(e);
    },
    [rotX, rotY, sc, onMouseLeave]
  );

  const handleMouseDown = useCallback(
    (e: React.MouseEvent<HTMLButtonElement>) => {
      rotX.set(0);
      rotY.set(0);
      sc.set(0.95);
      setPressed(true);
      onMouseDown?.(e);
    },
    [rotX, rotY, sc, onMouseDown]
  );

  const handleMouseUp = useCallback(
    (e: React.MouseEvent<HTMLButtonElement>) => {
      sc.set(1);
      setPressed(false);
      onMouseUp?.(e);
    },
    [sc, onMouseUp]
  );

  const isAccent = variant === "accent";

  return (
    <div className="inline-flex" style={{ perspective: `${perspective}px` }}>
      <motion.button
        ref={ref}
        disabled={disabled}
        className={[
          "relative inline-flex items-center justify-center gap-2 px-5 py-[0.6rem] rounded-[8px]",
          "[font-family:var(--font-sans)] text-sm font-medium tracking-[-0.01em]",
          "select-none [transform-style:preserve-3d] transition-shadow duration-200",
          disabled ? "cursor-not-allowed opacity-50" : "cursor-pointer",
          isAccent
            ? "border border-[oklch(0.62_0.25_250/0.6)] bg-[oklch(0.50_0.22_250)] text-white"
            : "border border-[rgba(var(--ink-rgb),0.12)] bg-[rgba(var(--ink-rgb),0.07)] text-[var(--ink)]",
          className,
        ].filter(Boolean).join(" ")}
        style={{
          rotateX: springRotX,
          rotateY: springRotY,
          scale: springScale,
          ...(style as object),
        }}
        onMouseMove={handleMouseMove}
        onMouseLeave={handleMouseLeave}
        onMouseDown={handleMouseDown}
        onMouseUp={handleMouseUp}
        {...props}
      >
        <span
          aria-hidden="true"
          className="absolute left-[2px] right-[2px] bottom-0 h-2 rounded-b-[6px] bg-[rgba(var(--ink-rgb),0.04)]"
          style={{
            transform: "translateY(100%) rotateX(-90deg)",
            transformOrigin: "top center",
          }}
        />
        <span
          aria-hidden="true"
          className="pointer-events-none absolute inset-0 rounded-[inherit] bg-gradient-to-b from-white/10 to-transparent"
          style={{ transform: "translateZ(0)" }}
        />
        {/* Safari skips painting untransformed text siblings inside preserve-3d
            once any child (the lip) has a 3D transform. translateZ puts the
            label on its own layer in front of the overlay. */}
        <span
          className={["relative", isAccent ? "text-white" : ""].filter(Boolean).join(" ")}
          style={{ transform: "translateZ(1px)", backfaceVisibility: "hidden" }}
        >
          {children}
        </span>
      </motion.button>
    </div>
  );
}

export default TiltButton;