'use client';

import * as DialogPrimitive from '@radix-ui/react-dialog';
import * as React from 'react';

import { cn } from '@/shared/lib/utils';

/**
 * EN: Dialog component - Modal dialog using Radix UI
 * VI: Component Dialog - Modal dialog sử dụng Radix UI
 */
const Dialog = DialogPrimitive.Root;

const DialogTrigger = DialogPrimitive.Trigger;

const DialogPortal = DialogPrimitive.Portal;

const DialogClose = DialogPrimitive.Close;

/**
 * EN: DialogOverlay component - Backdrop overlay with blur effect
 * VI: Component DialogOverlay - Backdrop overlay với hiệu ứng blur
 */
const DialogOverlay = React.forwardRef<
  React.ElementRef<typeof DialogPrimitive.Overlay>,
  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Overlay>
>(({ className, ...props }, ref) => (
  <DialogPrimitive.Overlay
    ref={ref}
    className={cn(
      // EN: Base overlay styles with backdrop blur / VI: Style overlay cơ bản với backdrop blur
      'fixed inset-0 z-50 bg-black/60 backdrop-blur-[8px]',
      // EN: Animation - fade in / VI: Animation - fade in
      'data-[state=open]:opacity-100 data-[state=closed]:opacity-0',
      'transition-opacity duration-normal ease-out',
      className
    )}
    {...props}
  />
));
DialogOverlay.displayName = DialogPrimitive.Overlay.displayName;

/**
 * EN: DialogContent component - Main dialog content container
 * VI: Component DialogContent - Container nội dung dialog chính
 */
const DialogContent = React.forwardRef<
  React.ElementRef<typeof DialogPrimitive.Content>,
  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Content>
>(({ className, children, ...props }, ref) => (
  <DialogPortal>
    <DialogOverlay />
    <DialogPrimitive.Content
      ref={ref}
      className={cn(
        // EN: Base dialog styles / VI: Style dialog cơ bản
        'fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg',
        'bg-bg-elevated border border-border-primary rounded-2xl shadow-xl',
        'p-6',
        // EN: Animation - scale and fade / VI: Animation - scale và fade
        'data-[state=open]:opacity-100 data-[state=closed]:opacity-0',
        'data-[state=open]:scale-100 data-[state=closed]:scale-[0.96]',
        'data-[state=closed]:translate-x-[-50%] data-[state=closed]:translate-y-[-48%]',
        'data-[state=open]:translate-x-[-50%] data-[state=open]:translate-y-[-50%]',
        'transition-all duration-[250ms] ease-[cubic-bezier(0.34,1.56,0.64,1)]',
        className
      )}
      {...props}
    >
      {children}
      <DialogPrimitive.Close
        className={cn(
          // EN: Close button styles / VI: Style nút đóng
          'absolute right-4 top-4 rounded-sm opacity-70',
          'ring-offset-bg-elevated transition-opacity hover:opacity-100',
          'focus:outline-none focus:ring-2 focus:ring-accent-primary focus:ring-offset-2',
          'disabled:pointer-events-none',
          // EN: Close icon / VI: Icon đóng
          'text-text-tertiary hover:text-text-primary'
        )}
      >
        <svg
          width="15"
          height="15"
          viewBox="0 0 15 15"
          fill="none"
          xmlns="http://www.w3.org/2000/svg"
          className="h-4 w-4"
        >
          <path
            d="M11.7816 4.03157C12.0062 3.80702 12.0062 3.44295 11.7816 3.2184C11.5571 2.99385 11.193 2.99385 10.9685 3.2184L7.50005 6.68682L4.03164 3.2184C3.80708 2.99385 3.44301 2.99385 3.21846 3.2184C2.99391 3.44295 2.99391 3.80702 3.21846 4.03157L6.68688 7.49999L3.21846 10.9684C2.99391 11.193 2.99391 11.557 3.21846 11.7816C3.44301 12.0061 3.80708 12.0061 4.03164 11.7816L7.50005 8.31316L10.9685 11.7816C11.193 12.0061 11.5571 12.0061 11.7816 11.7816C12.0062 11.557 12.0062 11.193 11.7816 10.9684L8.31322 7.49999L11.7816 4.03157Z"
            fill="currentColor"
            fillRule="evenodd"
            clipRule="evenodd"
          />
        </svg>
        <span className="sr-only">Close / Đóng</span>
      </DialogPrimitive.Close>
    </DialogPrimitive.Content>
  </DialogPortal>
));
DialogContent.displayName = DialogPrimitive.Content.displayName;

/**
 * EN: DialogHeader component - Header section of the dialog
 * VI: Component DialogHeader - Phần header của dialog
 */
const DialogHeader = ({
  className,
  ...props
}: React.HTMLAttributes<HTMLDivElement>) => (
  <div
    className={cn(
      'flex flex-col space-y-1.5 text-center sm:text-left mb-4',
      className
    )}
    {...props}
  />
);
DialogHeader.displayName = 'DialogHeader';

/**
 * EN: DialogFooter component - Footer section of the dialog
 * VI: Component DialogFooter - Phần footer của dialog
 */
const DialogFooter = ({
  className,
  ...props
}: React.HTMLAttributes<HTMLDivElement>) => (
  <div
    className={cn(
      'flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2 mt-4',
      className
    )}
    {...props}
  />
);
DialogFooter.displayName = 'DialogFooter';

/**
 * EN: DialogTitle component - Title text in dialog header
 * VI: Component DialogTitle - Text tiêu đề trong dialog header
 */
const DialogTitle = React.forwardRef<
  React.ElementRef<typeof DialogPrimitive.Title>,
  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Title>
>(({ className, ...props }, ref) => (
  <DialogPrimitive.Title
    ref={ref}
    className={cn(
      'text-xl font-semibold leading-none tracking-tight text-text-primary',
      className
    )}
    {...props}
  />
));
DialogTitle.displayName = DialogPrimitive.Title.displayName;

/**
 * EN: DialogDescription component - Descriptive text in dialog header
 * VI: Component DialogDescription - Text mô tả trong dialog header
 */
const DialogDescription = React.forwardRef<
  React.ElementRef<typeof DialogPrimitive.Description>,
  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Description>
>(({ className, ...props }, ref) => (
  <DialogPrimitive.Description
    ref={ref}
    className={cn('text-sm text-text-secondary mt-1', className)}
    {...props}
  />
));
DialogDescription.displayName = DialogPrimitive.Description.displayName;

export {
  Dialog,
  DialogPortal,
  DialogOverlay,
  DialogClose,
  DialogTrigger,
  DialogContent,
  DialogHeader,
  DialogFooter,
  DialogTitle,
  DialogDescription,
};