"use client";
import * as React from "react";
import * as A from "@radix-ui/react-alert-dialog";
import { AnimatePresence, motion } from "motion/react";
import { springs } from "@/lib/motion";
import { cn } from "@/lib/utils";
import { buttonVariants } from "@/components/ui/button";

const AlertCtx = React.createContext(false);

/** Same API as Radix AlertDialog. Tracks open state so content can animate out. */
export function AlertDialog({ open, defaultOpen, onOpenChange, ...p }: React.ComponentProps<typeof A.Root>) {
  const [inner, setInner] = React.useState(defaultOpen ?? false);
  const current = open ?? inner;
  return (
    <AlertCtx.Provider value={current}>
      <A.Root
        open={current}
        onOpenChange={(v) => {
          setInner(v);
          onOpenChange?.(v);
        }}
        {...p}
      />
    </AlertCtx.Provider>
  );
}
export const AlertDialogTrigger = A.Trigger;

export function AlertDialogContent({ className, children, ...p }: React.ComponentProps<typeof A.Content>) {
  const open = React.useContext(AlertCtx);
  return (
    <AnimatePresence>
      {open && (
        <A.Portal forceMount>
          <A.Overlay asChild forceMount>
            <motion.div
              className="fixed inset-0 z-50 bg-overlay backdrop-blur-sm"
              initial={{ opacity: 0 }}
              animate={{ opacity: 1 }}
              exit={{ opacity: 0 }}
              transition={{ duration: 0.2 }}
            />
          </A.Overlay>
          <div className="pointer-events-none fixed inset-0 z-50 grid place-items-center p-4">
            <A.Content asChild forceMount {...p}>
              <motion.div
                className={cn("pointer-events-auto relative w-full max-w-md rounded-xl bg-surface p-6 text-on-surface shadow-clay", className)}
                initial={{ opacity: 0, scale: 0.8, y: 30, rotate: -2 }}
                animate={{ opacity: 1, scale: 1, y: 0, rotate: 0 }}
                exit={{ opacity: 0, scale: 0.9, y: 16, transition: { duration: 0.15 } }}
                transition={springs.bouncy}
              >
                {children}
              </motion.div>
            </A.Content>
          </div>
        </A.Portal>
      )}
    </AnimatePresence>
  );
}
export function AlertDialogHeader({ className, ...p }: React.ComponentProps<"div">) {
  return <div className={cn("flex flex-col gap-1", className)} {...p} />;
}
export function AlertDialogFooter({ className, ...p }: React.ComponentProps<"div">) {
  return <div className={cn("mt-6 flex flex-col-reverse gap-2 sm:flex-row sm:justify-end", className)} {...p} />;
}
export function AlertDialogTitle({ className, ...p }: React.ComponentProps<typeof A.Title>) {
  return <A.Title className={cn("text-xl font-extrabold tracking-tight", className)} {...p} />;
}
export function AlertDialogDescription({ className, ...p }: React.ComponentProps<typeof A.Description>) {
  return <A.Description className={cn("text-sm font-medium text-on-surface-muted", className)} {...p} />;
}
/** Plain Radix Action. Use `asChild` with a Button to pick a colour, or it gets the default primary button style. */
export function AlertDialogAction({ className, asChild, ...p }: React.ComponentProps<typeof A.Action>) {
  return <A.Action asChild={asChild} className={asChild ? className : cn(buttonVariants(), className)} {...p} />;
}
export function AlertDialogCancel({ className, asChild, ...p }: React.ComponentProps<typeof A.Cancel>) {
  return <A.Cancel asChild={asChild} className={asChild ? className : cn(buttonVariants({ variant: "soft", color: "neutral" }), className)} {...p} />;
}
Installation
