edr-platform/apps/edr-freight-web/backoffice/src/super-admin/components/externalUsers/UserStatusToggleConfirm.tsx

import {
  AlertDialog,
  AlertDialogTrigger,
  AlertDialogContent,
  AlertDialogHeader,
  AlertDialogTitle,
  AlertDialogDescription,
  AlertDialogFooter,
  AlertDialogCancel,
  AlertDialogAction,
} from "@/shared/common/ui/alert-dialog";
import { Button } from "@/shared/common/ui/button";
import { useApproveExternalUser } from "@/super-admin/hooks/useExternalUsers";
import { toast } from "sonner";
import { useTranslation } from "react-i18next";
import { useErrorHandler } from "@/shared/hooks/useErrorHandler";
import { UserStatus } from "@/super-admin/dto/ExternalUsersDto";

interface Props {
  userId: string;
  userStatus: UserStatus;
}

export const UserStatusToggleConfirm = ({ userId, userStatus }: Props) => {
  const approve = useApproveExternalUser();
  const { t } = useTranslation();
  const { handleError } = useErrorHandler(t);

  const isLoading = approve.isPending;

  const onConfirm = (nextStatus: UserStatus) => {
    approve.mutate(
      { id: userId, status: nextStatus },
      {
        onSuccess: () => {
          toast.success(
            nextStatus === "accepted"
              ? "User successfully approved"
              : "User successfully rejected"
          );
        },
        onError: (error) => {
          handleError(error);
        },
      }
    );
  };

  return (
    <div className="flex gap-2">
      {/* Approve Dialog - Only show for pending users */}
      {userStatus === "pending" && (
        <AlertDialog>
          <AlertDialogTrigger asChild>
            <Button
              className="bg-primary-600 text-white hover:bg-primary-700"
              size="sm"
              disabled={isLoading}>
              {t("statusBar.Approve")}
            </Button>
          </AlertDialogTrigger>
          <AlertDialogContent>
            <AlertDialogHeader>
              <AlertDialogTitle>
                {t("organization.approveUserPrompt")}
              </AlertDialogTitle>
              <AlertDialogDescription>
                {t("organization.approveUserDescription")}
              </AlertDialogDescription>
            </AlertDialogHeader>
            <AlertDialogFooter>
              <AlertDialogCancel disabled={isLoading}>
                {t("common.Cancel")}
              </AlertDialogCancel>
              <AlertDialogAction
                onClick={() => onConfirm("accepted")}
                disabled={isLoading}>
                {isLoading
                  ? t("organization.approving")
                  : t("organization.yesApprove")}
              </AlertDialogAction>
            </AlertDialogFooter>
          </AlertDialogContent>
        </AlertDialog>
      )}

      {/* Reject Dialog - Only show for pending users */}
      {userStatus === "pending" && (
        <AlertDialog>
          <AlertDialogTrigger asChild>
            <Button
              className="bg-red-600 text-white hover:bg-red-700"
              size="sm"
              disabled={isLoading}>
              {t("statusBar.Reject")}
            </Button>
          </AlertDialogTrigger>
          <AlertDialogContent>
            <AlertDialogHeader>
              <AlertDialogTitle>
                {t("organization.rejectUserPrompt")}
              </AlertDialogTitle>
              <AlertDialogDescription>
                {t("organization.rejectUserDescription")}
              </AlertDialogDescription>
            </AlertDialogHeader>
            <AlertDialogFooter>
              <AlertDialogCancel disabled={isLoading}>
                {t("common.Cancel")}
              </AlertDialogCancel>
              <AlertDialogAction
                onClick={() => onConfirm("rejected")}
                disabled={isLoading}>
                {isLoading
                  ? t("organization.rejecting")
                  : t("organization.yesReject")}
              </AlertDialogAction>
            </AlertDialogFooter>
          </AlertDialogContent>
        </AlertDialog>
      )}
    </div>
  );
};