Confirm Sheet

"use client";

import { useState, type ReactNode } from "react";
import { Dialog } from "radix-ui";
import { cn } from "@/lib/utils";

export interface ConfirmSheetProps {
  trigger: ReactNode;
  title?: string;
  description?: string;
  confirmLabel?: string;
  cancelLabel?: string;
  /** Resolve to close; throw to keep it open. */
  onConfirm?: () => void | Promise<void>;
  emoji?: string;
  da?: string;
}

/** Destructive confirmation as a bottom sheet on mobile (centered card on desktop): big emoji, gentle copy, soft cancel and red confirm with pending state. */
export function ConfirmSheet({
  trigger,
  title = "Delete “Team retreat”?",
  description = "All 12 tasks and their comments will be moved to the trash for 30 days. You can restore them from Settings.",
  confirmLabel = "Yes, delete board",
  cancelLabel = "Keep it",
  onConfirm,
  emoji = "🗑️",
  da = "soft-flat",
}: ConfirmSheetProps) {
  const [open, setOpen] = useState(false);
  const [pending, setPending] = useState(false);
  return (
    <Dialog.Root open={open} onOpenChange={(o) => !pending && setOpen(o)}>
      <Dialog.Trigger asChild>{trigger}</Dialog.Trigger>
      <Dialog.Portal>
        <Dialog.Overlay data-da={da} className="fixed inset-0 z-50 bg-da-overlay transition-opacity duration-(--da-duration) starting:opacity-0" />
        <Dialog.Content
          data-da={da}
          role="alertdialog"
          className={cn(
            "fixed inset-x-0 bottom-0 z-50 rounded-t-[32px] bg-da-surface px-6 pt-3 pb-8 text-center text-da-surface-fg shadow-da-lg outline-none",
            "transition-[translate,opacity] duration-(--da-duration-slow) ease-da-emphasized starting:translate-y-full motion-reduce:transition-none",
            "sm:bottom-auto sm:top-1/2 sm:left-1/2 sm:w-full sm:max-w-sm sm:-translate-x-1/2 sm:-translate-y-1/2 sm:rounded-[28px] sm:pt-8 sm:starting:translate-y-[calc(-50%+2rem)] sm:starting:opacity-0",
          )}
        >
          <div aria-hidden className="mx-auto mb-5 h-1.5 w-10 rounded-full bg-da-muted sm:hidden" />
          <span aria-hidden className="mx-auto grid size-16 place-items-center rounded-full bg-da-danger/12 text-3xl">
            {emoji}
          </span>
          <Dialog.Title className="mt-4 font-da-display text-2xl font-extrabold tracking-da-display">{title}</Dialog.Title>
          <Dialog.Description className="mt-2 text-da-muted-fg">{description}</Dialog.Description>
          <div className="mt-7 grid gap-2">
            <button
              type="button"
              disabled={pending}
              onClick={async () => {
                setPending(true);
                try {
                  await onConfirm?.();
                  setOpen(false);
                } finally {
                  setPending(false);
                }
              }}
              className="da-focus inline-flex h-12 items-center justify-center rounded-da-pill bg-da-danger font-semibold text-da-danger-fg disabled:opacity-60"
            >
              {pending ? "Deleting…" : confirmLabel}
            </button>
            <Dialog.Close asChild>
              <button
                type="button"
                disabled={pending}
                className="da-focus inline-flex h-12 items-center justify-center rounded-da-pill bg-da-surface-2 font-semibold hover:bg-da-muted"
              >
                {cancelLabel}
              </button>
            </Dialog.Close>
          </div>
        </Dialog.Content>
      </Dialog.Portal>
    </Dialog.Root>
  );
}

export default ConfirmSheet;