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

var Card3D = React.forwardRef(
  ({
    children,
    maxTilt = 15,
    perspective = 1e3,
    scale = 1.05,
    speed = 400,
    glare = true,
    glareMaxOpacity = 0.7,
    className,
    ...props
  }, ref) => {
    const cardRef = React.useRef(null);
    const glareRef = React.useRef(null);
    const [isHovered, setIsHovered] = React.useState(false);
    const [transforms, setTransforms] = React.useState({
      rotateX: 0,
      rotateY: 0,
      scale: 1,
      glareX: 50,
      glareY: 50,
      glareOpacity: 0
    });
    const updateTransforms = React.useCallback(
      (point, rect) => {
        if (!point || !rect) {
          setTransforms({
            rotateX: 0,
            rotateY: 0,
            scale: 1,
            glareX: 50,
            glareY: 50,
            glareOpacity: 0
          });
          return;
        }
        const centerX = rect.left + rect.width / 2;
        const centerY = rect.top + rect.height / 2;
        const deltaX = (point.x - centerX) / (rect.width / 2);
        const deltaY = (point.y - centerY) / (rect.height / 2);
        const rotateX = -deltaY * maxTilt;
        const rotateY = deltaX * maxTilt;
        const glareX = (point.x - rect.left) / rect.width * 100;
        const glareY = (point.y - rect.top) / rect.height * 100;
        setTransforms({
          rotateX,
          rotateY,
          scale,
          glareX,
          glareY,
          glareOpacity: glare ? glareMaxOpacity : 0
        });
      },
      [maxTilt, scale, glare, glareMaxOpacity]
    );
    const handleMouseMove = React.useCallback(
      (e) => {
        if (!cardRef.current) return;
        const rect = cardRef.current.getBoundingClientRect();
        const point = { x: e.clientX, y: e.clientY };
        updateTransforms(point, rect);
      },
      [updateTransforms]
    );
    const handleTouchMove = React.useCallback(
      (e) => {
        if (!cardRef.current || e.touches.length === 0) return;
        e.preventDefault();
        const rect = cardRef.current.getBoundingClientRect();
        const touch = e.touches[0];
        const point = { x: touch.clientX, y: touch.clientY };
        updateTransforms(point, rect);
      },
      [updateTransforms]
    );
    const handleMouseEnter = React.useCallback(() => {
      setIsHovered(true);
    }, []);
    const handleMouseLeave = React.useCallback(() => {
      setIsHovered(false);
      updateTransforms(null, null);
    }, [updateTransforms]);
    const handleTouchStart = React.useCallback(() => {
      setIsHovered(true);
    }, []);
    const handleTouchEnd = React.useCallback(() => {
      setIsHovered(false);
      updateTransforms(null, null);
    }, [updateTransforms]);
    const cardStyle = {
      transform: `perspective(${perspective}px) rotateX(${transforms.rotateX}deg) rotateY(${transforms.rotateY}deg) scale(${transforms.scale})`,
      transition: isHovered ? "none" : `transform ${speed}ms cubic-bezier(0.03, 0.98, 0.52, 0.99)`,
      transformStyle: "preserve-3d"
    };
    const glareStyle = {
      background: `radial-gradient(circle at ${transforms.glareX}% ${transforms.glareY}%, rgba(255,255,255,${transforms.glareOpacity}) 0%, transparent 50%)`,
      transition: isHovered ? "none" : `opacity ${speed}ms ease-out`
    };
    React.useImperativeHandle(ref, () => cardRef.current);
    return /* @__PURE__ */ jsxs(
      "div",
      {
        ref: cardRef,
        className: cn(
          "relative rounded-lg border bg-card text-card-foreground shadow-lg cursor-pointer",
          "transform-gpu will-change-transform",
          className
        ),
        style: cardStyle,
        onMouseMove: handleMouseMove,
        onMouseEnter: handleMouseEnter,
        onMouseLeave: handleMouseLeave,
        onTouchStart: handleTouchStart,
        onTouchMove: handleTouchMove,
        onTouchEnd: handleTouchEnd,
        ...props,
        children: [
          /* @__PURE__ */ jsx("div", { className: "relative z-10", children }),
          glare && /* @__PURE__ */ jsx(
            "div",
            {
              ref: glareRef,
              className: "absolute inset-0 rounded-lg pointer-events-none z-20",
              style: glareStyle
            }
          )
        ]
      }
    );
  }
);
Card3D.displayName = "Card3D";
var Card3DHeader = React.forwardRef(({ className, depth = 20, style, ...props }, ref) => /* @__PURE__ */ jsx(
  "div",
  {
    ref,
    className: cn("flex flex-col space-y-1.5 p-6", className),
    style: {
      transform: `translateZ(${depth}px)`,
      ...style
    },
    ...props
  }
));
Card3DHeader.displayName = "Card3DHeader";
var Card3DTitle = React.forwardRef(({ className, depth = 30, style, ...props }, ref) => /* @__PURE__ */ jsx(
  "h3",
  {
    ref,
    className: cn(
      "text-2xl font-semibold leading-none tracking-tight",
      className
    ),
    style: {
      transform: `translateZ(${depth}px)`,
      ...style
    },
    ...props
  }
));
Card3DTitle.displayName = "Card3DTitle";
var Card3DDescription = React.forwardRef(({ className, depth = 10, style, ...props }, ref) => /* @__PURE__ */ jsx(
  "p",
  {
    ref,
    className: cn("text-sm text-muted-foreground", className),
    style: {
      transform: `translateZ(${depth}px)`,
      ...style
    },
    ...props
  }
));
Card3DDescription.displayName = "Card3DDescription";
var Card3DContent = React.forwardRef(({ className, depth = 25, style, ...props }, ref) => /* @__PURE__ */ jsx(
  "div",
  {
    ref,
    className: cn("p-6 pt-0", className),
    style: {
      transform: `translateZ(${depth}px)`,
      ...style
    },
    ...props
  }
));
Card3DContent.displayName = "Card3DContent";
var Card3DFooter = React.forwardRef(({ className, depth = 15, style, ...props }, ref) => /* @__PURE__ */ jsx(
  "div",
  {
    ref,
    className: cn("flex items-center p-6 pt-0", className),
    style: {
      transform: `translateZ(${depth}px)`,
      ...style
    },
    ...props
  }
));
Card3DFooter.displayName = "Card3DFooter";

export { Card3D, Card3DContent, Card3DDescription, Card3DFooter, Card3DHeader, Card3DTitle };
