"use client"

import * as React from "react"
import * as DialogPrimitive from "@radix-ui/react-dialog"
import { cva, type VariantProps } from "class-variance-authority"
import { InfoIcon, TriangleAlertIcon, XIcon } from "lucide-react"

import { Button, type ButtonProps } from "@/components/ui/button"
import { Checkbox, type CheckboxProps } from "@/components/ui/checkbox"
import { Spinner } from "@/components/ui/spinner"
import { cn } from "@/lib/utils"

type ModalSize = "sm" | "default" | "lg"
type ModalIntent = "default" | "warning" | "danger"

const modalSurfaceBaseClassName = [
  "flex max-h-[calc(100vh-(var(--bh-space-8xl-48)*2))] w-[var(--bh-modal-width)] max-w-[calc(100vw-(var(--bh-space-4xl-20)*2))] flex-col overflow-hidden rounded-[var(--bh-radius-2xl-12)] bg-[var(--bh-bg-raised)] text-[var(--bh-content-default)] shadow-[var(--shadow-modal)] outline-none",
  "[--bh-modal-border:var(--bh-border-subtle)] [--shadow-modal:inset_0px_0px_0px_var(--bh-border-width-default)_var(--bh-modal-border),var(--shadow-component-default)]",
]

const modalSizeVariants = {
  sm: "[--bh-modal-width:calc(var(--bh-space-19xl-384)+var(--bh-space-8xl-48)+var(--bh-space-md-8))]",
  default:
    "[--bh-modal-width:calc(var(--bh-space-19xl-384)+var(--bh-space-12xl-128)+var(--bh-space-8xl-48))]",
  lg: "[--bh-modal-width:calc(var(--bh-space-19xl-384)+var(--bh-space-16xl-256)+var(--bh-space-9xl-64)-var(--bh-space-xs-4))]",
} as const

const modalSurfaceVariants = cva(modalSurfaceBaseClassName, {
  variants: {
    size: modalSizeVariants,
  },
  defaultVariants: {
    size: "sm",
  },
})

const modalContentVariants = cva(
  [
    "fixed left-1/2 top-1/2 z-[var(--bh-z-overlay)] -translate-x-1/2 -translate-y-1/2",
    ...modalSurfaceBaseClassName,
  ],
  {
    variants: {
      size: modalSizeVariants,
    },
    defaultVariants: {
      size: "sm",
    },
  }
)

const modalHeaderIconIntentClassNames: Record<ModalIntent, string> = {
  default: "text-[var(--bh-content-subtle)]",
  danger:
    "rounded-[var(--bh-radius-full)] bg-[var(--bh-bg-danger-subtle)] text-[var(--bh-content-danger-default)]",
  warning:
    "rounded-[var(--bh-radius-full)] bg-[var(--bh-bg-warning-subtle)] text-[var(--bh-content-warning-default)]",
}

type ModalRootProps = React.ComponentProps<typeof DialogPrimitive.Root>
type ModalContentProps = React.ComponentPropsWithoutRef<
  typeof DialogPrimitive.Content
> &
  VariantProps<typeof modalContentVariants> & {
    overlayClassName?: string
  }
type ModalOverlayProps = React.ComponentPropsWithoutRef<
  typeof DialogPrimitive.Overlay
>
type ModalSurfaceProps = React.ComponentProps<"section"> &
  VariantProps<typeof modalSurfaceVariants>
type ModalHeaderProps = React.ComponentProps<"header">
type ModalBodyProps = React.ComponentProps<"div">
type ModalFooterProps = React.ComponentProps<"footer">
type ModalActionsProps = React.ComponentProps<"div">
type ModalHeaderIconProps = React.ComponentProps<"span"> & {
  intent?: ModalIntent
}
type ModalCloseButtonProps = React.ComponentProps<"button"> & {
  label?: string
}
type ModalFooterCheckboxProps = Omit<React.ComponentProps<"div">, "children"> & {
  checked?: CheckboxProps["checked"]
  defaultChecked?: CheckboxProps["defaultChecked"]
  disabled?: CheckboxProps["disabled"]
  label?: React.ReactNode
  onCheckedChange?: CheckboxProps["onCheckedChange"]
}
type ModalActionButtonProps = ButtonProps

type ModalProps = Omit<ModalRootProps, "children"> &
  VariantProps<typeof modalContentVariants> & {
    checkboxLabel?: React.ReactNode
    children?: React.ReactNode
    className?: string
    description?: React.ReactNode
    dir?: "ltr" | "rtl"
    footer?: React.ReactNode
    overlayClassName?: string
    primaryActionLabel?: React.ReactNode
    secondaryActionLabel?: React.ReactNode
    showCheckbox?: boolean
    showCloseButton?: boolean
    showDivider?: boolean
    showFooter?: boolean
    showIcon?: boolean
    title?: React.ReactNode
  }

type ConfirmModalProps = Omit<
  ModalProps,
  | "checkboxLabel"
  | "footer"
  | "primaryActionLabel"
  | "secondaryActionLabel"
  | "showCheckbox"
> & {
  cancelButtonProps?: ModalActionButtonProps
  cancelLabel?: React.ReactNode
  closeOnCancel?: boolean
  closeOnConfirm?: boolean
  confirmButtonProps?: ModalActionButtonProps
  confirmDisabled?: boolean
  confirmLabel?: React.ReactNode
  confirmLoading?: boolean
  confirmLoadingLabel?: React.ReactNode
  confirmVariant?: ModalActionButtonProps["variant"]
  intent?: ModalIntent
  onCancel?: React.MouseEventHandler<HTMLButtonElement>
  onConfirm?: React.MouseEventHandler<HTMLButtonElement>
  onEscapeKeyDown?: ModalContentProps["onEscapeKeyDown"]
  onInteractOutside?: ModalContentProps["onInteractOutside"]
  onOpenAutoFocus?: ModalContentProps["onOpenAutoFocus"]
  onPointerDownOutside?: ModalContentProps["onPointerDownOutside"]
  preventEscapeDismiss?: boolean
  preventOutsideDismiss?: boolean
  showCancelButton?: boolean
}

const defaultModalTitle = "Modal Title"
const defaultModalDescription =
  "Are you sure you want to proceed with this action? Please review your choices before confirming."
const defaultModalCheckboxLabel = "Don't show me again"
const defaultConfirmTitle = "Confirm action"
const defaultConfirmDescription =
  "This action may affect saved data. Review the details before confirming."
const defaultConfirmCancelLabel = "Cancel"
const defaultConfirmActionLabel = "Confirm"
const defaultConfirmLoadingLabel = "Confirming"
const defaultRtlModalTitle = "\u0639\u0646\u0648\u0627\u0646 \u0627\u0644\u0646\u0645\u0648\u0630\u062c"
const defaultRtlModalDescription =
  "\u0647\u0644 \u0623\u0646\u062a \u0645\u062a\u0623\u0643\u062f \u0623\u0646\u0643 \u062a\u0631\u064a\u062f \u0627\u0644\u0645\u062a\u0627\u0628\u0639\u0629 \u0645\u0639 \u0647\u0630\u0627 \u0627\u0644\u0625\u062c\u0631\u0627\u0621\u061f \u064a\u0631\u062c\u0649 \u0645\u0631\u0627\u062c\u0639\u0629 \u062e\u064a\u0627\u0631\u0627\u062a\u0643 \u0642\u0628\u0644 \u0627\u0644\u062a\u0623\u0643\u064a\u062f."
const defaultRtlModalCheckboxLabel = "\u0627\u0644\u062a\u0633\u0645\u064a\u0629"
const defaultRtlActionLabel = "\u0627\u0646\u0642\u0631 \u0647\u0646\u0627"
const defaultRtlConfirmTitle = "\u062a\u0623\u0643\u064a\u062f \u0627\u0644\u0625\u062c\u0631\u0627\u0621"
const defaultRtlConfirmDescription =
  "\u0642\u062f \u064a\u0624\u062b\u0631 \u0647\u0630\u0627 \u0627\u0644\u0625\u062c\u0631\u0627\u0621 \u0639\u0644\u0649 \u0627\u0644\u0628\u064a\u0627\u0646\u0627\u062a \u0627\u0644\u0645\u062d\u0641\u0648\u0638\u0629. \u0631\u0627\u062c\u0639 \u0627\u0644\u062a\u0641\u0627\u0635\u064a\u0644 \u0642\u0628\u0644 \u0627\u0644\u062a\u0623\u0643\u064a\u062f."
const defaultRtlConfirmCancelLabel = "\u0625\u0644\u063a\u0627\u0621"
const defaultRtlConfirmActionLabel = "\u062a\u0623\u0643\u064a\u062f"
const defaultRtlConfirmLoadingLabel = "\u062c\u0627\u0631\u064a \u0627\u0644\u062a\u0623\u0643\u064a\u062f"

const ModalRoot = DialogPrimitive.Root
const ModalTrigger = DialogPrimitive.Trigger
const ModalPortal = DialogPrimitive.Portal
const ModalClose = DialogPrimitive.Close

const ModalOverlay = React.forwardRef<
  React.ElementRef<typeof DialogPrimitive.Overlay>,
  ModalOverlayProps
>(function ModalOverlay({ className, ...props }, ref) {
  return (
    <DialogPrimitive.Overlay
      data-slot="modal-overlay"
      ref={ref}
      className={cn("fixed inset-0 z-[var(--bh-z-overlay)] bg-[var(--bh-bg-backdrop)]", className)}
      {...props}
    />
  )
})

const ModalContent = React.forwardRef<
  React.ElementRef<typeof DialogPrimitive.Content>,
  ModalContentProps
>(function ModalContent(
  { children, className, overlayClassName, size, ...props },
  ref
) {
  return (
    <ModalPortal>
      <ModalOverlay className={overlayClassName} />
      <DialogPrimitive.Content
        data-size={size ?? "sm"}
        data-slot="modal-content"
        ref={ref}
        className={cn(modalContentVariants({ size, className }))}
        {...props}
      >
        {children}
      </DialogPrimitive.Content>
    </ModalPortal>
  )
})

const ModalSurface = React.forwardRef<HTMLElement, ModalSurfaceProps>(
  function ModalSurface({ className, size, ...props }, ref) {
    return (
      <section
        data-size={size ?? "sm"}
        data-slot="modal-surface"
        ref={ref}
        className={cn(modalSurfaceVariants({ size, className }))}
        {...props}
      />
    )
  }
)

const ModalHeader = React.forwardRef<HTMLElement, ModalHeaderProps>(function ModalHeader({
  className,
  ...props
}, ref) {
  return (
    <header
      data-slot="modal-header"
      ref={ref}
      className={cn(
        "relative flex w-full shrink-0 items-center gap-[var(--bh-space-sm-6)] px-[var(--bh-space-4xl-20)] pb-[var(--bh-space-md-8)] pe-[var(--bh-space-9xl-64)] pt-[var(--bh-space-4xl-20)] text-start",
        className
      )}
      {...props}
    />
  )
})

const ModalTitle = React.forwardRef<
  React.ElementRef<typeof DialogPrimitive.Title>,
  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Title>
>(function ModalTitle({ className, dir = "auto", ...props }, ref) {
  return (
    <DialogPrimitive.Title
      data-slot="modal-title"
      dir={dir}
      ref={ref}
      className={cn(
        "min-w-0 flex-1 text-start text-[length:var(--bh-text-heading-sm-semibold-font-size)] font-[var(--bh-text-heading-sm-semibold-font-weight)] leading-[var(--bh-text-heading-sm-semibold-line-height)] tracking-[var(--bh-text-heading-sm-semibold-letter-spacing)] text-[var(--bh-content-default)]",
        className
      )}
      {...props}
    />
  )
})

const ModalDescription = React.forwardRef<
  React.ElementRef<typeof DialogPrimitive.Description>,
  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Description>
>(function ModalDescription({ className, dir = "auto", ...props }, ref) {
  return (
    <DialogPrimitive.Description
      data-slot="modal-description"
      dir={dir}
      ref={ref}
      className={cn(
        "min-w-0 flex-1 text-start text-[length:var(--bh-text-body-md-regular-font-size)] font-[var(--bh-text-body-md-regular-font-weight)] leading-[var(--bh-text-body-md-regular-line-height)] tracking-[var(--bh-text-body-md-regular-letter-spacing)] text-[var(--bh-content-subtle)]",
        className
      )}
      {...props}
    />
  )
})

const ModalBody = React.forwardRef<HTMLDivElement, ModalBodyProps>(function ModalBody({
  className,
  ...props
}, ref) {
  return (
    <div
      data-slot="modal-body"
      ref={ref}
      className={cn(
        "flex w-full shrink-0 items-start px-[var(--bh-space-4xl-20)] pb-[var(--bh-space-4xl-20)] pt-[var(--bh-space-lg-10)]",
        className
      )}
      {...props}
    />
  )
})

const ModalDivider = React.forwardRef<HTMLDivElement, React.ComponentProps<"div">>(
  function ModalDivider({ className, role = "separator", ...props }, ref) {
    return (
      <div
        data-slot="modal-divider"
        ref={ref}
        role={role}
        className={cn("w-full border-t border-[var(--bh-border-subtle)]", className)}
        {...props}
      />
    )
  }
)

const ModalFooter = React.forwardRef<HTMLElement, ModalFooterProps>(function ModalFooter({
  className,
  ...props
}, ref) {
  return (
    <footer
      data-slot="modal-footer"
      ref={ref}
      className={cn(
        "flex w-full shrink-0 items-center justify-end gap-[var(--bh-space-lg-10)] px-[var(--bh-space-4xl-20)] py-[var(--bh-space-3xl-16)]",
        className
      )}
      {...props}
    />
  )
})

function ModalHeaderIcon({
  children,
  className,
  intent = "default",
  ...props
}: ModalHeaderIconProps) {
  return (
    <span
      aria-hidden="true"
      data-intent={intent}
      data-slot="modal-header-icon"
      className={cn(
        "inline-flex size-[var(--bh-space-5xl-24)] shrink-0 items-center justify-center",
        modalHeaderIconIntentClassNames[intent],
        className
      )}
      {...props}
    >
      {children ?? (
        <InfoIcon className="size-[var(--bh-space-3xl-16)]" strokeWidth={2} />
      )}
    </span>
  )
}

const ModalCloseButton = React.forwardRef<HTMLButtonElement, ModalCloseButtonProps>(
  function ModalCloseButton(
    { children, className, label = "Close modal", type = "button", ...props },
    ref
  ) {
    return (
      <ModalClose asChild>
        <button
          aria-label={label}
          data-slot="modal-close"
          ref={ref}
          type={type}
          className={cn(
            "absolute end-[var(--bh-space-3xl-16)] top-1/2 inline-flex size-[var(--bh-space-6xl-32)] -translate-y-1/2 items-center justify-center rounded-[var(--bh-radius-full)] border-0 bg-transparent p-0 text-[var(--bh-content-subtle)] outline-none transition-[background-color,box-shadow,color] hover:bg-[var(--bh-interactive-ghost-hover)] hover:text-[var(--bh-content-default)] focus-visible:shadow-[var(--shadow-button-focus)]",
            className
          )}
          {...props}
        >
          {children ?? (
            <XIcon
              aria-hidden="true"
              className="size-[var(--bh-space-5xl-24)]"
              strokeWidth={2}
            />
          )}
        </button>
      </ModalClose>
    )
  }
)

function ModalFooterCheckbox({
  checked,
  className,
  defaultChecked,
  disabled,
  label = defaultModalCheckboxLabel,
  onCheckedChange,
  ...props
}: ModalFooterCheckboxProps) {
  const generatedId = React.useId()
  const labelId = `${generatedId}-label`

  return (
    <div
      data-slot="modal-checkbox"
      className={cn(
        "flex min-w-0 flex-1 items-center gap-[var(--bh-space-md-8)] text-start",
        className
      )}
      {...props}
    >
      <Checkbox
        aria-labelledby={labelId}
        checked={checked}
        defaultChecked={defaultChecked}
        disabled={disabled}
        onCheckedChange={onCheckedChange}
      />
      <span
        data-slot="modal-checkbox-label"
        dir="auto"
        id={labelId}
        className="min-w-0 flex-1 text-[length:var(--bh-text-body-md-regular-font-size)] font-[var(--bh-text-body-md-regular-font-weight)] leading-[var(--bh-text-body-md-regular-line-height)] tracking-[var(--bh-text-body-md-regular-letter-spacing)] text-[var(--bh-content-default)]"
      >
        {label}
      </span>
    </div>
  )
}

function ModalActions({ className, ...props }: ModalActionsProps) {
  return (
    <div
      data-slot="modal-actions"
      className={cn(
        "flex shrink-0 items-center justify-end gap-[var(--bh-space-xs-4)]",
        className
      )}
      {...props}
    />
  )
}

const ModalActionButton = React.forwardRef<HTMLButtonElement, ModalActionButtonProps>(
  function ModalActionButton(
    { children = "Action", size = "sm", type = "button", variant = "default", ...props },
    ref
  ) {
    return (
      <Button
        data-slot="modal-action"
        ref={ref}
        size={size}
        type={type}
        variant={variant}
        {...props}
      >
        {children}
      </Button>
    )
  }
)

function Modal({
  checkboxLabel,
  children,
  className,
  defaultOpen = true,
  description,
  dir,
  footer,
  modal = true,
  onOpenChange,
  open,
  overlayClassName,
  primaryActionLabel,
  secondaryActionLabel,
  showCheckbox = true,
  showCloseButton = true,
  showDivider = true,
  showFooter = true,
  showIcon = true,
  size = "sm",
  title,
  ...props
}: ModalProps) {
  const isRtl = dir === "rtl"
  const rootProps =
    open === undefined
      ? { defaultOpen, modal, onOpenChange }
      : { modal, onOpenChange, open }
  const resolvedTitle = title ?? (isRtl ? defaultRtlModalTitle : defaultModalTitle)
  const resolvedDescription =
    description ?? (isRtl ? defaultRtlModalDescription : defaultModalDescription)
  const resolvedCheckboxLabel =
    checkboxLabel ?? (isRtl ? defaultRtlModalCheckboxLabel : defaultModalCheckboxLabel)
  const resolvedPrimaryAction =
    primaryActionLabel ?? (isRtl ? defaultRtlActionLabel : "Action")
  const resolvedSecondaryAction =
    secondaryActionLabel ?? (isRtl ? defaultRtlActionLabel : "Action")

  return (
    <ModalRoot {...rootProps}>
      <ModalContent
        data-slot="modal"
        dir={dir}
        overlayClassName={overlayClassName}
        size={size}
        className={className}
        {...props}
      >
        <ModalHeader>
          {showIcon ? <ModalHeaderIcon /> : null}
          <ModalTitle>{resolvedTitle}</ModalTitle>
          {showCloseButton ? <ModalCloseButton /> : null}
        </ModalHeader>
        <ModalBody>
          {children ?? <ModalDescription>{resolvedDescription}</ModalDescription>}
        </ModalBody>
        {showDivider ? <ModalDivider /> : null}
        {showFooter ? (
          footer ?? (
            <ModalFooter>
              {showCheckbox ? (
                <ModalFooterCheckbox label={resolvedCheckboxLabel} />
              ) : null}
              <ModalActions>
                <ModalActionButton variant="soft">
                  {resolvedSecondaryAction}
                </ModalActionButton>
                <ModalActionButton>{resolvedPrimaryAction}</ModalActionButton>
              </ModalActions>
            </ModalFooter>
          )
        ) : null}
      </ModalContent>
    </ModalRoot>
  )
}

function ConfirmModal({
  cancelButtonProps,
  cancelLabel,
  children,
  className,
  closeOnCancel = true,
  closeOnConfirm = true,
  confirmButtonProps,
  confirmDisabled = false,
  confirmLabel,
  confirmLoading = false,
  confirmLoadingLabel,
  confirmVariant,
  defaultOpen = true,
  description,
  dir,
  intent = "danger",
  modal = true,
  onCancel,
  onConfirm,
  onEscapeKeyDown,
  onInteractOutside,
  onOpenAutoFocus,
  onOpenChange,
  onPointerDownOutside,
  open,
  overlayClassName,
  preventEscapeDismiss = false,
  preventOutsideDismiss = true,
  showCancelButton = true,
  showCloseButton = false,
  showDivider = true,
  showFooter = true,
  showIcon = true,
  size = "sm",
  title,
  ...props
}: ConfirmModalProps) {
  const cancelButtonRef = React.useRef<HTMLButtonElement>(null)
  const confirmButtonRef = React.useRef<HTMLButtonElement>(null)
  const isRtl = dir === "rtl"
  const rootProps =
    open === undefined
      ? { defaultOpen, modal, onOpenChange }
      : { modal, onOpenChange, open }
  const resolvedTitle = title ?? (isRtl ? defaultRtlConfirmTitle : defaultConfirmTitle)
  const resolvedDescription =
    description ?? (isRtl ? defaultRtlConfirmDescription : defaultConfirmDescription)
  const resolvedCancelLabel =
    cancelLabel ?? (isRtl ? defaultRtlConfirmCancelLabel : defaultConfirmCancelLabel)
  const resolvedConfirmLabel =
    confirmLabel ?? (isRtl ? defaultRtlConfirmActionLabel : defaultConfirmActionLabel)
  const resolvedConfirmLoadingLabel =
    confirmLoadingLabel ??
    (isRtl ? defaultRtlConfirmLoadingLabel : defaultConfirmLoadingLabel)
  const {
    children: cancelButtonChildren,
    onClick: cancelButtonOnClick,
    variant: cancelButtonVariant = "soft",
    ...cancelActionProps
  } = cancelButtonProps ?? {}
  const {
    children: confirmButtonChildren,
    disabled: confirmButtonDisabled,
    onClick: confirmButtonOnClick,
    variant: confirmButtonVariant = confirmVariant ?? getConfirmActionVariant(intent),
    ...confirmActionProps
  } = confirmButtonProps ?? {}
  const isConfirmDisabled = confirmDisabled || confirmLoading || confirmButtonDisabled

  const handleOpenAutoFocus: NonNullable<ModalContentProps["onOpenAutoFocus"]> =
    React.useCallback(
      (event) => {
        onOpenAutoFocus?.(event)
        if (event.defaultPrevented) return

        const focusTarget = showCancelButton
          ? cancelButtonRef.current
          : confirmButtonRef.current
        if (!focusTarget) return

        event.preventDefault()
        focusTarget.focus()
      },
      [onOpenAutoFocus, showCancelButton]
    )

  const handlePointerDownOutside: NonNullable<
    ModalContentProps["onPointerDownOutside"]
  > = React.useCallback(
    (event) => {
      onPointerDownOutside?.(event)
      if (!event.defaultPrevented && preventOutsideDismiss) {
        event.preventDefault()
      }
    },
    [onPointerDownOutside, preventOutsideDismiss]
  )

  const handleInteractOutside: NonNullable<ModalContentProps["onInteractOutside"]> =
    React.useCallback(
      (event) => {
        onInteractOutside?.(event)
        if (!event.defaultPrevented && preventOutsideDismiss) {
          event.preventDefault()
        }
      },
      [onInteractOutside, preventOutsideDismiss]
    )

  const handleEscapeKeyDown: NonNullable<ModalContentProps["onEscapeKeyDown"]> =
    React.useCallback(
      (event) => {
        onEscapeKeyDown?.(event)
        if (!event.defaultPrevented && preventEscapeDismiss) {
          event.preventDefault()
        }
      },
      [onEscapeKeyDown, preventEscapeDismiss]
    )

  const handleCancel: React.MouseEventHandler<HTMLButtonElement> = (event) => {
    cancelButtonOnClick?.(event)
    if (!event.defaultPrevented) {
      onCancel?.(event)
    }
  }

  const handleConfirm: React.MouseEventHandler<HTMLButtonElement> = (event) => {
    confirmButtonOnClick?.(event)
    if (!event.defaultPrevented) {
      onConfirm?.(event)
    }
  }

  const cancelAction = showCancelButton ? (
    <ModalActionButton
      ref={cancelButtonRef}
      variant={cancelButtonVariant}
      onClick={handleCancel}
      {...cancelActionProps}
    >
      {cancelButtonChildren ?? resolvedCancelLabel}
    </ModalActionButton>
  ) : null
  const confirmAction = (
    <ModalActionButton
      aria-busy={confirmLoading || undefined}
      disabled={isConfirmDisabled}
      ref={confirmButtonRef}
      variant={confirmButtonVariant}
      onClick={handleConfirm}
      {...confirmActionProps}
    >
      {confirmButtonChildren ??
        (confirmLoading ? (
          <>
            <Spinner className="size-[var(--bh-space-3xl-16)]" />
            <span data-slot="button-label" dir="auto" className="min-w-0 px-[var(--bh-modal-action-label-padding-x)]">
              {resolvedConfirmLoadingLabel}
            </span>
          </>
        ) : (
          resolvedConfirmLabel
        ))}
    </ModalActionButton>
  )

  return (
    <ModalRoot {...rootProps}>
      <ModalContent
        data-intent={intent}
        data-slot="confirm-modal"
        dir={dir}
        overlayClassName={overlayClassName}
        role="alertdialog"
        size={size}
        className={className}
        onEscapeKeyDown={handleEscapeKeyDown}
        onInteractOutside={handleInteractOutside}
        onOpenAutoFocus={handleOpenAutoFocus}
        onPointerDownOutside={handlePointerDownOutside}
        {...props}
      >
        <ModalHeader>
          {showIcon ? (
            <ModalHeaderIcon intent={intent}>
              {intent === "default" ? (
                <InfoIcon className="size-[var(--bh-space-3xl-16)]" strokeWidth={2} />
              ) : (
                <TriangleAlertIcon
                  className="size-[var(--bh-space-3xl-16)]"
                  strokeWidth={2}
                />
              )}
            </ModalHeaderIcon>
          ) : null}
          <ModalTitle>{resolvedTitle}</ModalTitle>
          {showCloseButton ? <ModalCloseButton /> : null}
        </ModalHeader>
        <ModalBody>
          {children ?? <ModalDescription>{resolvedDescription}</ModalDescription>}
        </ModalBody>
        {showDivider ? <ModalDivider /> : null}
        {showFooter ? (
          <ModalFooter>
            <ModalActions>
              {cancelAction && closeOnCancel ? (
                <ModalClose asChild>{cancelAction}</ModalClose>
              ) : (
                cancelAction
              )}
              {closeOnConfirm ? (
                <ModalClose asChild>{confirmAction}</ModalClose>
              ) : (
                confirmAction
              )}
            </ModalActions>
          </ModalFooter>
        ) : null}
      </ModalContent>
    </ModalRoot>
  )
}

function getConfirmActionVariant(
  intent: ModalIntent
): ModalActionButtonProps["variant"] {
  if (intent === "danger") return "danger"
  if (intent === "warning") return "warning"
  return "default"
}

export {
  ConfirmModal,
  Modal,
  ModalActionButton,
  ModalActions,
  ModalBody,
  ModalClose,
  ModalCloseButton,
  ModalContent,
  ModalDescription,
  ModalDivider,
  ModalFooter,
  ModalFooterCheckbox,
  ModalHeader,
  ModalHeaderIcon,
  ModalOverlay,
  ModalPortal,
  ModalRoot,
  ModalSurface,
  ModalTitle,
  ModalTrigger,
  modalContentVariants,
  modalSurfaceVariants,
}
export type {
  ConfirmModalProps,
  ModalActionButtonProps,
  ModalActionsProps,
  ModalBodyProps,
  ModalCloseButtonProps,
  ModalContentProps,
  ModalFooterCheckboxProps,
  ModalFooterProps,
  ModalHeaderIconProps,
  ModalHeaderProps,
  ModalIntent,
  ModalOverlayProps,
  ModalProps,
  ModalRootProps,
  ModalSize,
  ModalSurfaceProps,
}
