"use client"

import * as React from "react"
import { AlertDialog as AlertDialogPrimitive } from "@base-ui/react/alert-dialog"
import { AnimatePresence, motion, useReducedMotion } from "framer-motion"
import { Loader2Icon } from "lucide-react"

import { Button } from "@/components/ui/button"

type ConfirmVariant = "default" | "destructive"

export interface ConfirmationDialogProps {
  open: boolean
  onOpenChange: (open: boolean) => void
  title: string
  description?: React.ReactNode
  confirmText?: string
  cancelText?: string
  variant?: ConfirmVariant
  loading?: boolean
  onConfirm?: () => void
}

export function ConfirmationDialog({
  open,
  onOpenChange,
  title,
  description,
  confirmText = "Confirm",
  cancelText = "Cancel",
  variant = "default",
  loading = false,
  onConfirm,
}: ConfirmationDialogProps) {
  return (
    <AlertDialogPrimitive.Root
      open={open}
      onOpenChange={(next) => {
        if (loading) return
        onOpenChange(next)
      }}
    >
      <AlertDialogPrimitive.Portal>
        <AlertDialogPrimitive.Backdrop
          className="fixed inset-0 isolate z-50 bg-black/10 duration-100 supports-backdrop-filter:backdrop-blur-xs data-open:animate-in data-open:fade-in-0 data-closed:animate-out data-closed:fade-out-0"
        />
        <AlertDialogPrimitive.Popup
          className="fixed top-1/2 left-1/2 z-50 grid w-full max-w-[calc(100%-2rem)] -translate-x-1/2 -translate-y-1/2 gap-2 rounded-xl bg-popover p-6 text-sm text-popover-foreground ring-1 ring-foreground/10 duration-100 outline-none sm:max-w-sm data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95"
        >
          <AlertDialogPrimitive.Title className="font-heading text-base leading-none font-medium">
            {title}
          </AlertDialogPrimitive.Title>
          {description ? (
            <AlertDialogPrimitive.Description className="text-sm leading-relaxed text-muted-foreground">
              {description}
            </AlertDialogPrimitive.Description>
          ) : null}
          <div className="mt-4 flex flex-col-reverse gap-2 sm:flex-row sm:justify-end">
            <AlertDialogPrimitive.Close
              render={<Button variant="outline" disabled={loading} />}
            >
              {cancelText}
            </AlertDialogPrimitive.Close>
            <Button
              variant={variant === "destructive" ? "destructive" : "default"}
              disabled={loading}
              onClick={onConfirm}
            >
              <ConfirmLabel loading={loading}>{confirmText}</ConfirmLabel>
            </Button>
          </div>
        </AlertDialogPrimitive.Popup>
      </AlertDialogPrimitive.Portal>
    </AlertDialogPrimitive.Root>
  )
}

function ConfirmLabel({
  loading,
  children,
}: {
  loading: boolean
  children: React.ReactNode
}) {
  const reduce = useReducedMotion()
  return (
    <span className="inline-flex items-center gap-1.5">
      <AnimatePresence initial={false}>
        {loading ? (
          <motion.span
            key="spinner"
            initial={reduce ? false : { opacity: 0, scale: 0.6 }}
            animate={{ opacity: 1, scale: 1 }}
            exit={reduce ? { opacity: 0 } : { opacity: 0, scale: 0.6 }}
            transition={{ duration: 0.15, ease: [0.22, 1, 0.36, 1] }}
            className="inline-flex"
          >
            <Loader2Icon className="size-3.5 animate-spin" />
          </motion.span>
        ) : null}
      </AnimatePresence>
      {children}
    </span>
  )
}

type ConfirmOptions = Omit<
  ConfirmationDialogProps,
  "open" | "onOpenChange" | "loading" | "onConfirm"
> & {
  /** Async work to run while the dialog stays open with a loading state. */
  action?: () => Promise<void> | void
}

/**
 * Imperative, promise-based confirmation. `confirm(opts)` resolves to the
 * user's choice; pass `action` to run async work with a loading state before
 * the dialog closes.
 */
export function useConfirmationDialog() {
  const [state, setState] = React.useState<ConfirmOptions | null>(null)
  const [open, setOpen] = React.useState(false)
  const [loading, setLoading] = React.useState(false)
  const resolver = React.useRef<((value: boolean) => void) | null>(null)

  const confirm = React.useCallback((options: ConfirmOptions) => {
    setState(options)
    setOpen(true)
    return new Promise<boolean>((resolve) => {
      resolver.current = resolve
    })
  }, [])

  const settle = React.useCallback((value: boolean) => {
    resolver.current?.(value)
    resolver.current = null
    setOpen(false)
  }, [])

  const handleConfirm = React.useCallback(async () => {
    if (!state?.action) {
      settle(true)
      return
    }
    try {
      setLoading(true)
      await state.action()
      settle(true)
    } finally {
      setLoading(false)
    }
  }, [state, settle])

  const dialog = state ? (
    <ConfirmationDialog
      {...state}
      open={open}
      loading={loading}
      onOpenChange={(next) => {
        if (!next) settle(false)
      }}
      onConfirm={handleConfirm}
    />
  ) : null

  return { confirm, dialog }
}
Installation
