"use client"

import * as React from "react"
import * as DialogPrimitive from "@radix-ui/react-dialog"
import { motion, AnimatePresence } from "framer-motion"
import { X } from "lucide-react"
import { cn } from "../../lib/utils"

const Dialog = DialogPrimitive.Root
const DialogTrigger = DialogPrimitive.Trigger
const DialogPortal = DialogPrimitive.Portal
const DialogClose = DialogPrimitive.Close

interface DialogProOverlayProps
  extends React.ComponentPropsWithoutRef<typeof DialogPrimitive.Overlay> {
  blur?: "none" | "sm" | "md" | "lg" | "xl"
  variant?: "default" | "dark" | "light" | "gradient"
}

const DialogProOverlay = React.forwardRef<
  React.ElementRef<typeof DialogPrimitive.Overlay>,
  DialogProOverlayProps
>(({ className, blur = "md", variant = "default", ...props }, ref) => {
  const blurClasses = {
    none: "",
    sm: "backdrop-blur-sm",
    md: "backdrop-blur-md",
    lg: "backdrop-blur-lg",
    xl: "backdrop-blur-xl",
  }

  const variantClasses = {
    default: "bg-black/80",
    dark: "bg-black/90",
    light: "bg-white/80",
    gradient: "bg-gradient-to-br from-black/80 via-gray-900/80 to-black/80",
  }

  return (
    <DialogPrimitive.Overlay
      ref={ref}
      className={cn(
        "fixed inset-0 z-50",
        blurClasses[blur],
        variantClasses[variant],
        className
      )}
      {...props}
    />
  )
})
DialogProOverlay.displayName = DialogPrimitive.Overlay.displayName

interface DialogProContentProps
  extends React.ComponentPropsWithoutRef<typeof DialogPrimitive.Content> {
  animation?: "fade" | "scale" | "slide" | "rotate" | "bounce"
  animationDuration?: number
  overlay?: boolean
  overlayProps?: DialogProOverlayProps
}

const DialogProContent = React.forwardRef<
  React.ElementRef<typeof DialogPrimitive.Content>,
  DialogProContentProps
>(({ 
  className, 
  children, 
  animation = "scale",
  animationDuration = 0.3,
  overlay = true,
  overlayProps = {},
  ...props 
}, ref) => {
  const animationVariants = {
    fade: {
      initial: { opacity: 0 },
      animate: { opacity: 1 },
      exit: { opacity: 0 }
    },
    scale: {
      initial: { opacity: 0, scale: 0.9, y: 20 },
      animate: { opacity: 1, scale: 1, y: 0 },
      exit: { opacity: 0, scale: 0.9, y: 20 }
    },
    slide: {
      initial: { opacity: 0, y: 100 },
      animate: { opacity: 1, y: 0 },
      exit: { opacity: 0, y: 100 }
    },
    rotate: {
      initial: { opacity: 0, scale: 0.9, rotate: -10 },
      animate: { opacity: 1, scale: 1, rotate: 0 },
      exit: { opacity: 0, scale: 0.9, rotate: 10 }
    },
    bounce: {
      initial: { opacity: 0, scale: 0.3, y: -100 },
      animate: { 
        opacity: 1, 
        scale: 1, 
        y: 0,
        transition: {
          type: "spring",
          duration: animationDuration,
          bounce: 0.5
        }
      },
      exit: { opacity: 0, scale: 0.5, y: -50 }
    }
  }

  return (
    <AnimatePresence>
      <DialogPortal>
        {overlay && (
          <motion.div
            initial={{ opacity: 0 }}
            animate={{ opacity: 1 }}
            exit={{ opacity: 0 }}
            transition={{ duration: animationDuration * 0.8 }}
          >
            <DialogProOverlay {...overlayProps} />
          </motion.div>
        )}
        <motion.div
          className="fixed inset-0 z-50 flex items-center justify-center p-4"
          initial={{ opacity: 0 }}
          animate={{ opacity: 1 }}
          exit={{ opacity: 0 }}
        >
          <DialogPrimitive.Content
            ref={ref}
            asChild
            className={cn(
              "relative w-full max-w-lg",
              className
            )}
            {...props}
          >
            <motion.div
              variants={animationVariants[animation]}
              initial="initial"
              animate="animate"
              exit="exit"
              transition={{ 
                duration: animationDuration,
                ease: "easeInOut"
              }}
              className={cn(
                "relative bg-background rounded-lg shadow-2xl",
                "border border-border",
                "w-full max-w-lg",
                "max-h-[90vh] overflow-auto",
                className
              )}
            >
              {/* Glass effect overlay */}
              <div className="absolute inset-0 rounded-lg bg-gradient-to-br from-white/5 to-white/0 pointer-events-none" />
              
              {/* Content wrapper with padding */}
              <div className="relative p-6">
                {children}
              </div>

              {/* Close button with enhanced styling */}
              <DialogPrimitive.Close className="absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-all hover:opacity-100 hover:rotate-90 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-accent data-[state=open]:text-muted-foreground">
                <X className="h-4 w-4" />
                <span className="sr-only">Close</span>
              </DialogPrimitive.Close>
            </motion.div>
          </DialogPrimitive.Content>
        </motion.div>
      </DialogPortal>
    </AnimatePresence>
  )
})
DialogProContent.displayName = DialogPrimitive.Content.displayName

const DialogProHeader = ({
  className,
  ...props
}: React.HTMLAttributes<HTMLDivElement>) => (
  <motion.div
    className={cn(
      "flex flex-col space-y-1.5 text-center sm:text-left",
      className
    )}
    initial={{ opacity: 0, y: -10 }}
    animate={{ opacity: 1, y: 0 }}
    transition={{ delay: 0.1, duration: 0.3 }}
  />
)
DialogProHeader.displayName = "DialogProHeader"

const DialogProFooter = ({
  className,
  ...props
}: React.HTMLAttributes<HTMLDivElement>) => (
  <motion.div
    className={cn(
      "flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2",
      className
    )}
    initial={{ opacity: 0, y: 10 }}
    animate={{ opacity: 1, y: 0 }}
    transition={{ delay: 0.2, duration: 0.3 }}
  />
)
DialogProFooter.displayName = "DialogProFooter"

const DialogProTitle = React.forwardRef<
  React.ElementRef<typeof DialogPrimitive.Title>,
  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Title>
>(({ className, ...props }, ref) => (
  <DialogPrimitive.Title
    ref={ref}
    className={cn(
      "text-lg font-semibold leading-none tracking-tight",
      className
    )}
    {...props}
  />
))
DialogProTitle.displayName = DialogPrimitive.Title.displayName

const DialogProDescription = React.forwardRef<
  React.ElementRef<typeof DialogPrimitive.Description>,
  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Description>
>(({ className, ...props }, ref) => (
  <DialogPrimitive.Description
    ref={ref}
    className={cn("text-sm text-muted-foreground", className)}
    {...props}
  />
))
DialogProDescription.displayName = DialogPrimitive.Description.displayName

export {
  Dialog as DialogPro,
  DialogTrigger as DialogProTrigger,
  DialogProContent,
  DialogProHeader,
  DialogProFooter,
  DialogProTitle,
  DialogProDescription,
  DialogClose as DialogProClose,
}