erika/components/delete-buttons.tsx

"use client";

import { useState } from "react";
import { Button } from "@/components/ui/button";
import { Trash2, Loader2 } from "lucide-react";
import { deleteForm } from "@/app/admin/form/actions";
import { deleteSubmission, deleteAllSubmissions } from "@/app/actions/submissions";
import { toast } from "sonner";
import { useRouter } from "next/navigation";
import {
  Dialog,
  DialogContent,
  DialogDescription,
  DialogFooter,
  DialogHeader,
  DialogTitle,
  DialogTrigger,
} from "@/components/ui/dialog";
import {
  AlertDialog,
  AlertDialogAction,
  AlertDialogCancel,
  AlertDialogContent,
  AlertDialogDescription,
  AlertDialogFooter,
  AlertDialogHeader,
  AlertDialogTitle,
  AlertDialogTrigger,
} from "@/components/ui/alert-dialog";
import { Spinner } from "@/components/ui/spinner";
import { getErrorMessage } from "@/lib/utils";

interface DeleteFormButtonProps {
  formId: string;
}

export function DeleteFormButton({ formId }: DeleteFormButtonProps) {
  const [open, setOpen] = useState(false);
  const [deleting, setDeleting] = useState(false);

  const handleDelete = () => {
    setDeleting(true);
    toast.promise(deleteForm(formId), {
      loading: "Deleting form...",
      success: () => {
        setOpen(false);
        setDeleting(false);
        return "Form deleted successfully!";
      },
      error: (err: unknown) => {
        setDeleting(false);
        return getErrorMessage(err, "Failed to delete form.");
      },
    });
  };

  return (
    <Dialog open={open} onOpenChange={setOpen}>
      <DialogTrigger asChild>
        <Button variant="ghost" size="icon" aria-label="Delete form">
          <Trash2 />
        </Button>
      </DialogTrigger>
      <DialogContent>
        <DialogHeader>
          <DialogTitle>Are you absolutely sure?</DialogTitle>
          <DialogDescription>
            This action cannot be undone. This will permanently delete the form, all of its questions, and all submissions/answers.
          </DialogDescription>
        </DialogHeader>
        <DialogFooter>
          <Button variant="ghost" disabled={deleting} onClick={() => setOpen(false)}>
            Cancel
          </Button>
          <Button variant="destructive" disabled={deleting} onClick={handleDelete}>
            {deleting ? (
              <>
                <Loader2 data-icon="inline-start" className="animate-spin" />
                Deleting...
              </>
            ) : (
              "Delete"
            )}
          </Button>
        </DialogFooter>
      </DialogContent>
    </Dialog>
  );
}

export function DeleteSubmissionButton({
  id,
  redirectUrl,
  compact = false,
}: {
  id: string;
  redirectUrl?: string;
  compact?: boolean;
}) {
  const [loading, setLoading] = useState(false);
  const router = useRouter();

  const handleDelete = () => {
    setLoading(true);
    toast.promise(deleteSubmission(id), {
      loading: "Deleting submission...",
      success: () => {
        if (redirectUrl) {
          router.push(redirectUrl);
        }
        setLoading(false);
        return "Submission deleted";
      },
      error: (err: unknown) => {
        setLoading(false);
        return getErrorMessage(err, "Failed to delete submission");
      },
    });
  };

  return (
    <AlertDialog>
      <AlertDialogTrigger asChild>
        <Button
          size={compact ? "icon-sm" : "sm"}
          variant={compact ? "ghost" : "destructive"}
          disabled={loading}
          aria-label="Delete response"
          className={compact ? "text-destructive" : undefined}
        >
          {loading ? <Spinner /> : <Trash2 />}
          {!compact && "Delete"}
        </Button>
      </AlertDialogTrigger>
      <AlertDialogContent>
        <AlertDialogHeader>
          <AlertDialogTitle>Are you sure?</AlertDialogTitle>
          <AlertDialogDescription>
            This action cannot be undone. This will permanently delete this submission and remove its data from our servers.
          </AlertDialogDescription>
        </AlertDialogHeader>
        <AlertDialogFooter>
          <AlertDialogCancel>Cancel</AlertDialogCancel>
          <AlertDialogAction onClick={handleDelete} variant="destructive">
            Delete
          </AlertDialogAction>
        </AlertDialogFooter>
      </AlertDialogContent>
    </AlertDialog>
  );
}

export function DeleteAllSubmissionsButton({ formId }: { formId: string }) {
  const [loading, setLoading] = useState(false);

  const handleDeleteAll = () => {
    setLoading(true);
    toast.promise(deleteAllSubmissions(formId), {
      loading: "Deleting all submissions...",
      success: () => {
        setLoading(false);
        return "All submissions deleted";
      },
      error: (err: unknown) => {
        setLoading(false);
        return getErrorMessage(err, "Failed to delete submissions");
      },
    });
  };

  return (
    <AlertDialog>
      <AlertDialogTrigger asChild>
        <Button variant="destructive" disabled={loading}>
          {loading ? <Spinner data-icon="inline-start" /> : <Trash2 data-icon="inline-start" />}
          Delete all responses
        </Button>
      </AlertDialogTrigger>
      <AlertDialogContent>
        <AlertDialogHeader>
          <AlertDialogTitle>Are you absolutely sure?</AlertDialogTitle>
          <AlertDialogDescription>
            This action cannot be undone. This will permanently delete <strong>ALL</strong> submissions and remove their data from our servers.
          </AlertDialogDescription>
        </AlertDialogHeader>
        <AlertDialogFooter>
          <AlertDialogCancel>Cancel</AlertDialogCancel>
          <AlertDialogAction onClick={handleDeleteAll} variant="destructive">
            Delete all responses
          </AlertDialogAction>
        </AlertDialogFooter>
      </AlertDialogContent>
    </AlertDialog>
  );
}