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/actions/form";
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";

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: any) => {
        setDeleting(false);
        return err.message || "Failed to delete form.";
      },
    });
  };

  return (
    <Dialog open={open} onOpenChange={setOpen}>
      <DialogTrigger asChild>
        <Button variant="ghost" size="icon">
          <Trash2 className="w-4 h-4" />
        </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 className="w-4 h-4 mr-2 animate-spin" />
                Deleting...
              </>
            ) : (
              "Delete"
            )}
          </Button>
        </DialogFooter>
      </DialogContent>
    </Dialog>
  );
}

export function DeleteSubmissionButton({ id, redirectUrl }: { id: string, redirectUrl?: string }) {
  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: any) => {
        setLoading(false);
        return err.message || "Failed to delete submission";
      },
    });
  };

  return (
    <AlertDialog>
      <AlertDialogTrigger asChild>
        <Button size="sm" variant="destructive" disabled={loading}>
          {loading ? <Spinner /> : <Trash2 className="w-3.5 h-3.5" />}
          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} className="bg-destructive text-destructive-foreground hover:bg-destructive/90">
            Delete
          </AlertDialogAction>
        </AlertDialogFooter>
      </AlertDialogContent>
    </AlertDialog>
  );
}

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

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

  return (
    <AlertDialog>
      <AlertDialogTrigger asChild>
        <Button variant="destructive" disabled={loading}>
          {loading ? <Spinner /> : <Trash2 className="w-4 h-4" />}
          Delete All Submissions
        </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}>
            Delete All
          </AlertDialogAction>
        </AlertDialogFooter>
      </AlertDialogContent>
    </AlertDialog>
  );
}