"use client";
import * as React from 'react';
import { cva } from 'class-variance-authority';
import { cn } from '@hanzo/ui/lib/utils';
import { jsx, jsxs } from 'react/jsx-runtime';

var button3DVariants = cva(
  [
    "relative inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium",
    "transition-all duration-150 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
    "disabled:pointer-events-none disabled:opacity-50 cursor-pointer select-none",
    "transform-gpu will-change-transform active:scale-95",
    "before:absolute before:inset-0 before:rounded-md before:transition-all before:duration-150",
    "after:absolute after:inset-0 after:rounded-md after:transition-all after:duration-150"
  ],
  {
    variants: {
      variant: {
        default: [
          "bg-primary text-primary-foreground shadow-md hover:bg-primary/90",
          "before:bg-gradient-to-t before:from-primary/80 before:to-primary before:translate-y-1 before:shadow-lg",
          "hover:before:translate-y-0.5 active:before:translate-y-0",
          "after:bg-gradient-to-b after:from-white/20 after:to-transparent after:opacity-0",
          "hover:after:opacity-100"
        ],
        destructive: [
          "bg-destructive text-destructive-foreground shadow-md hover:bg-destructive/90",
          "before:bg-gradient-to-t before:from-destructive/80 before:to-destructive before:translate-y-1 before:shadow-lg",
          "hover:before:translate-y-0.5 active:before:translate-y-0",
          "after:bg-gradient-to-b after:from-white/20 after:to-transparent after:opacity-0",
          "hover:after:opacity-100"
        ],
        outline: [
          "border border-input bg-background text-foreground shadow-sm hover:bg-accent hover:text-accent-foreground",
          "before:bg-gradient-to-t before:from-muted/50 before:to-background before:translate-y-1 before:border before:border-input",
          "hover:before:translate-y-0.5 active:before:translate-y-0",
          "after:bg-gradient-to-b after:from-white/10 after:to-transparent after:opacity-0",
          "hover:after:opacity-100"
        ],
        secondary: [
          "bg-secondary text-secondary-foreground shadow-md hover:bg-secondary/80",
          "before:bg-gradient-to-t before:from-secondary/80 before:to-secondary before:translate-y-1 before:shadow-lg",
          "hover:before:translate-y-0.5 active:before:translate-y-0",
          "after:bg-gradient-to-b after:from-white/20 after:to-transparent after:opacity-0",
          "hover:after:opacity-100"
        ],
        ghost: [
          "text-foreground hover:bg-accent hover:text-accent-foreground",
          "before:bg-gradient-to-t before:from-accent/30 before:to-accent/10 before:translate-y-1 before:opacity-0",
          "hover:before:opacity-100 hover:before:translate-y-0.5 active:before:translate-y-0",
          "after:bg-gradient-to-b after:from-white/10 after:to-transparent after:opacity-0",
          "hover:after:opacity-50"
        ],
        link: [
          "text-primary underline-offset-4 hover:underline",
          "before:hidden after:hidden"
        ],
        neon: [
          "bg-gradient-to-r from-purple-500 to-pink-500 text-white shadow-lg",
          "before:bg-gradient-to-t before:from-purple-600 before:to-pink-600 before:translate-y-1 before:shadow-lg",
          "hover:before:translate-y-0.5 active:before:translate-y-0",
          "after:bg-gradient-to-b after:from-white/30 after:to-transparent after:opacity-0",
          "hover:after:opacity-100",
          "hover:shadow-purple-500/25 hover:shadow-2xl"
        ],
        glass: [
          "bg-white/10 backdrop-blur-md border border-white/20 text-foreground shadow-lg",
          "before:bg-gradient-to-t before:from-white/5 before:to-white/20 before:translate-y-1 before:backdrop-blur-md before:border before:border-white/20",
          "hover:before:translate-y-0.5 active:before:translate-y-0",
          "after:bg-gradient-to-b after:from-white/30 after:to-transparent after:opacity-0",
          "hover:after:opacity-100"
        ],
        gradient: [
          "bg-gradient-to-r from-blue-500 via-purple-500 to-pink-500 text-white shadow-lg",
          "before:bg-gradient-to-t before:from-blue-600 before:via-purple-600 before:to-pink-600 before:translate-y-1 before:shadow-lg",
          "hover:before:translate-y-0.5 active:before:translate-y-0",
          "after:bg-gradient-to-b after:from-white/20 after:to-transparent after:opacity-0",
          "hover:after:opacity-100",
          "hover:bg-gradient-to-r hover:from-blue-400 hover:via-purple-400 hover:to-pink-400"
        ]
      },
      size: {
        default: "h-10 px-4 py-2",
        sm: "h-9 rounded-md px-3",
        lg: "h-11 rounded-md px-8",
        xl: "h-12 rounded-lg px-10 text-base",
        icon: "h-10 w-10"
      },
      depth: {
        none: "before:translate-y-0",
        sm: "before:translate-y-0.5 hover:before:translate-y-0 active:before:translate-y-0",
        default: "before:translate-y-1 hover:before:translate-y-0.5 active:before:translate-y-0",
        lg: "before:translate-y-1.5 hover:before:translate-y-0.5 active:before:translate-y-0",
        xl: "before:translate-y-2 hover:before:translate-y-1 active:before:translate-y-0"
      }
    },
    defaultVariants: {
      variant: "default",
      size: "default",
      depth: "default"
    }
  }
);
var Button3D = React.forwardRef(
  ({
    className,
    variant,
    size,
    depth,
    tiltOnHover = false,
    glowIntensity = 0,
    shadowColor,
    pressAnimation = true,
    children,
    onMouseEnter,
    onMouseLeave,
    onMouseMove,
    onMouseDown,
    onMouseUp,
    style,
    ...props
  }, ref) => {
    const buttonRef = React.useRef(null);
    const [isHovered, setIsHovered] = React.useState(false);
    const [isPressed, setIsPressed] = React.useState(false);
    const [tiltTransform, setTiltTransform] = React.useState({ x: 0, y: 0 });
    const updateTilt = React.useCallback(
      (e) => {
        if (!tiltOnHover || !buttonRef.current) return;
        const rect = buttonRef.current.getBoundingClientRect();
        const centerX = rect.left + rect.width / 2;
        const centerY = rect.top + rect.height / 2;
        const deltaX = (e.clientX - centerX) / (rect.width / 2);
        const deltaY = (e.clientY - centerY) / (rect.height / 2);
        setTiltTransform({
          x: deltaY * -10,
          // Inverted for more natural feel
          y: deltaX * 10
        });
      },
      [tiltOnHover]
    );
    const resetTilt = React.useCallback(() => {
      setTiltTransform({ x: 0, y: 0 });
    }, []);
    const handleMouseEnter = React.useCallback(
      (e) => {
        setIsHovered(true);
        onMouseEnter?.(e);
      },
      [onMouseEnter]
    );
    const handleMouseLeave = React.useCallback(
      (e) => {
        setIsHovered(false);
        resetTilt();
        onMouseLeave?.(e);
      },
      [onMouseLeave, resetTilt]
    );
    const handleMouseMove = React.useCallback(
      (e) => {
        if (tiltOnHover) {
          updateTilt(e);
        }
        onMouseMove?.(e);
      },
      [onMouseMove, tiltOnHover, updateTilt]
    );
    const handleMouseDown = React.useCallback(
      (e) => {
        if (pressAnimation) {
          setIsPressed(true);
        }
        onMouseDown?.(e);
      },
      [onMouseDown, pressAnimation]
    );
    const handleMouseUp = React.useCallback(
      (e) => {
        setIsPressed(false);
        onMouseUp?.(e);
      },
      [onMouseUp]
    );
    React.useImperativeHandle(ref, () => buttonRef.current);
    const buttonStyle = {
      ...style,
      transform: tiltOnHover ? `perspective(1000px) rotateX(${tiltTransform.x}deg) rotateY(${tiltTransform.y}deg) ${isPressed ? "translateY(1px)" : ""}` : isPressed ? "translateY(1px)" : void 0,
      filter: glowIntensity > 0 ? `drop-shadow(0 0 ${glowIntensity * 4}px ${shadowColor || "currentColor"})` : void 0,
      transition: "all 150ms cubic-bezier(0.4, 0, 0.2, 1)"
    };
    return /* @__PURE__ */ jsx(
      "button",
      {
        ref: buttonRef,
        className: cn(button3DVariants({ variant, size, depth }), className),
        style: buttonStyle,
        onMouseEnter: handleMouseEnter,
        onMouseLeave: handleMouseLeave,
        onMouseMove: handleMouseMove,
        onMouseDown: handleMouseDown,
        onMouseUp: handleMouseUp,
        ...props,
        children: /* @__PURE__ */ jsx("span", { className: "relative z-10 flex items-center justify-center gap-2", children })
      }
    );
  }
);
Button3D.displayName = "Button3D";
var Button3DPreset = {
  Hero: React.forwardRef((props, ref) => /* @__PURE__ */ jsx(
    Button3D,
    {
      ref,
      variant: "gradient",
      size: "xl",
      depth: "lg",
      tiltOnHover: true,
      glowIntensity: 2,
      ...props
    }
  )),
  CTA: React.forwardRef((props, ref) => /* @__PURE__ */ jsx(
    Button3D,
    {
      ref,
      variant: "neon",
      size: "lg",
      depth: "default",
      tiltOnHover: true,
      glowIntensity: 1,
      ...props
    }
  )),
  Glass: React.forwardRef((props, ref) => /* @__PURE__ */ jsx(
    Button3D,
    {
      ref,
      variant: "glass",
      size: "default",
      depth: "sm",
      tiltOnHover: true,
      ...props
    }
  )),
  Minimal: React.forwardRef((props, ref) => /* @__PURE__ */ jsx(Button3D, { ref, variant: "ghost", size: "default", depth: "sm", ...props })),
  Danger: React.forwardRef((props, ref) => /* @__PURE__ */ jsx(
    Button3D,
    {
      ref,
      variant: "destructive",
      size: "default",
      depth: "default",
      shadowColor: "rgb(239 68 68)",
      ...props
    }
  ))
};
Button3DPreset.Hero.displayName = "Button3DPreset.Hero";
Button3DPreset.CTA.displayName = "Button3DPreset.CTA";
Button3DPreset.Glass.displayName = "Button3DPreset.Glass";
Button3DPreset.Minimal.displayName = "Button3DPreset.Minimal";
Button3DPreset.Danger.displayName = "Button3DPreset.Danger";
var Button3DLoading = React.forwardRef(({ loading = false, children, disabled, ...props }, ref) => {
  return /* @__PURE__ */ jsxs(Button3D, { ref, disabled: disabled || loading, ...props, children: [
    loading && /* @__PURE__ */ jsx("div", { className: "animate-spin rounded-full h-4 w-4 border-2 border-current border-t-transparent" }),
    !loading && children
  ] });
});
Button3DLoading.displayName = "Button3DLoading";

export { Button3D, Button3DLoading, Button3DPreset, button3DVariants };
