import * as React from "react";
import { cva, type VariantProps } from "class-variance-authority";
import { motion } from "framer-motion";
import { cn } from "../../lib/utils";
import { microInteractionVariants, hoverAnimations, tapAnimations } from "../../lib/micro-interactions";

const moonUICardVariantsPro = cva(
  "rounded-lg border bg-card text-card-foreground shadow-sm transition-all duration-200",
  {
    variants: {
      variant: {
        default: "border-border dark:border-border",
        outline: "border border-border shadow-none bg-transparent dark:border-border",
        filled: "border-none bg-secondary dark:bg-secondary shadow-inner",
        elevated: "border-none shadow-lg dark:shadow-xl dark:shadow-black/20",
        gradient: "border-none bg-gradient-to-br from-primary/5 to-primary/10 dark:from-primary/10 dark:to-primary/20",
        glass: "border border-white/20 bg-white/10 backdrop-blur-md dark:border-white/10 dark:bg-black/10",
        neon: "border-2 border-primary/50 shadow-[0_0_15px_rgba(var(--primary),0.5)] dark:shadow-[0_0_20px_rgba(var(--primary),0.7)]",
        glow: "border border-border shadow-[0_0_30px_rgba(var(--primary),0.15)] dark:shadow-[0_0_40px_rgba(var(--primary),0.25)]",
      },
      size: {
        default: "p-6",
        sm: "p-4",
        lg: "p-8",
        xl: "p-10",
      },
      radius: {
        default: "rounded-lg",
        sm: "rounded-md",
        lg: "rounded-xl",
        full: "rounded-3xl",
        none: "rounded-none",
      },
      interactive: {
        true: "cursor-pointer hover:shadow-lg hover:border-primary/20 dark:hover:border-primary/30 hover:-translate-y-0.5 active:translate-y-0 active:shadow-sm",
        false: "",
      },
    },
    defaultVariants: {
      variant: "default",
      size: "default",
      radius: "default",
    },
  }
);

export interface MoonUICardProProps
  extends React.HTMLAttributes<HTMLDivElement>,
    VariantProps<typeof moonUICardVariantsPro> {
  asChild?: boolean;
  microInteraction?: "lift" | "glow" | "scale" | "none";
  enableGlassmorphism?: boolean;
  enableParallax?: boolean;
  enableTilt?: boolean;
  tiltMaxAngle?: number;
  parallaxOffset?: number;
}

const MoonUICardPro = React.forwardRef<HTMLDivElement, MoonUICardProProps>(
  ({ 
    className, 
    variant, 
    size, 
    radius, 
    interactive, 
    microInteraction = "lift", 
    enableGlassmorphism,
    enableParallax = false,
    enableTilt = false,
    tiltMaxAngle = 15,
    parallaxOffset = 20,
    children,
    asChild, 
    ...props 
  }, ref) => {
    const [mousePos, setMousePos] = React.useState({ x: 0, y: 0 });
    const [isHovered, setIsHovered] = React.useState(false);
    
    const handleMouseMove = (e: React.MouseEvent<HTMLDivElement>) => {
      if (!enableTilt && !enableParallax) return;
      
      const rect = e.currentTarget.getBoundingClientRect();
      const centerX = rect.left + rect.width / 2;
      const centerY = rect.top + rect.height / 2;
      
      const x = (e.clientX - centerX) / (rect.width / 2);
      const y = (e.clientY - centerY) / (rect.height / 2);
      
      setMousePos({ x, y });
    };
    
    const handleMouseEnter = () => setIsHovered(true);
    const handleMouseLeave = () => {
      setIsHovered(false);
      setMousePos({ x: 0, y: 0 });
    };
    
    // Apply glassmorphism variant if enabled
    const finalVariant = enableGlassmorphism ? "glass" : variant;
    
    // Calculate tilt transforms
    const rotateX = enableTilt ? mousePos.y * -tiltMaxAngle : 0;
    const rotateY = enableTilt ? mousePos.x * tiltMaxAngle : 0;
    
    // Base interaction props
    const interactionProps = interactive && microInteraction !== "none" ? {
      whileHover: microInteraction === "scale" ? hoverAnimations.scale : 
                  microInteraction === "glow" ? hoverAnimations.glow : 
                  hoverAnimations.lift,
      whileTap: tapAnimations.scale,
    } : {};
    
    const { onDrag, onDragStart, onDragEnd, ...divProps } = props as any;
    
    return (
      <motion.div
        ref={ref}
        className={cn(moonUICardVariantsPro({ variant: finalVariant, size, radius, interactive, className }))}
        onMouseMove={handleMouseMove}
        onMouseEnter={handleMouseEnter}
        onMouseLeave={handleMouseLeave}
        style={{
          transformStyle: enableTilt || enableParallax ? "preserve-3d" : undefined,
          perspective: enableTilt || enableParallax ? "1000px" : undefined,
        }}
        animate={{
          rotateX,
          rotateY,
        }}
        transition={{ type: "spring", damping: 20, stiffness: 300 }}
        {...interactionProps}
        {...divProps}
      >
        {/* Parallax content wrapper */}
        {enableParallax ? (
          <motion.div
            style={{ transform: "translateZ(50px)" }}
            animate={{
              x: isHovered ? mousePos.x * parallaxOffset : 0,
              y: isHovered ? mousePos.y * parallaxOffset : 0,
            }}
            transition={{ type: "spring", damping: 20, stiffness: 300 }}
          >
            {children}
          </motion.div>
        ) : (
          children
        )}
      </motion.div>
    );
  }
);
MoonUICardPro.displayName = "MoonUICardPro";

const MoonUICardHeaderPro = React.forwardRef<
  HTMLDivElement,
  React.HTMLAttributes<HTMLDivElement>
>(({ className, ...props }, ref) => (
  <div
    ref={ref}
    className={cn("flex flex-col space-y-1.5", className)}
    {...props}
  />
));
MoonUICardHeaderPro.displayName = "MoonUICardHeaderPro";

const MoonUICardTitlePro = React.forwardRef<
  HTMLHeadingElement,
  React.HTMLAttributes<HTMLHeadingElement>
>(({ className, ...props }, ref) => (
  <h3
    ref={ref}
    className={cn("text-lg font-semibold leading-none tracking-tight", className)}
    {...props}
  />
));
MoonUICardTitlePro.displayName = "MoonUICardTitlePro";

const MoonUICardDescriptionPro = React.forwardRef<
  HTMLParagraphElement,
  React.HTMLAttributes<HTMLParagraphElement>
>(({ className, ...props }, ref) => (
  <p
    ref={ref}
    className={cn("text-sm text-muted-foreground", className)}
    {...props}
  />
));
MoonUICardDescriptionPro.displayName = "MoonUICardDescriptionPro";

const MoonUICardContentPro = React.forwardRef<
  HTMLDivElement,
  React.HTMLAttributes<HTMLDivElement>
>(({ className, ...props }, ref) => (
  <div ref={ref} className={cn("pt-0", className)} {...props} />
));
MoonUICardContentPro.displayName = "MoonUICardContentPro";

const MoonUICardFooterPro = React.forwardRef<
  HTMLDivElement,
  React.HTMLAttributes<HTMLDivElement>
>(({ className, ...props }, ref) => (
  <div
    ref={ref}
    className={cn("flex items-center pt-4", className)}
    {...props}
  />
));
MoonUICardFooterPro.displayName = "MoonUICardFooterPro";

export { MoonUICardPro, MoonUICardHeaderPro, MoonUICardFooterPro, MoonUICardTitlePro, MoonUICardDescriptionPro, MoonUICardContentPro  };

// Backward compatibility exports
export { MoonUICardPro as Card, MoonUICardHeaderPro as CardHeader, MoonUICardFooterPro as CardFooter, MoonUICardTitlePro as CardTitle, MoonUICardDescriptionPro as CardDescription, MoonUICardContentPro as CardContent };