import { ActionPanel, useNavigate } from "@tailor-platform/app-shell";
import { Pencil, ArrowLeft, ShieldOff, ShieldCheck } from "lucide-react";
import { useMutation } from "urql";
import { graphql, type FragmentOf, readFragment } from "@/graphql";
import { useToast } from "@/hooks/use-toast";

const DeactivateRoleMutation = graphql(`
  mutation DeactivateRole($roleId: ID!) {
    deactivateRole(roleId: $roleId) {
      id
      status
    }
  }
`);

const ReactivateRoleMutation = graphql(`
  mutation ReactivateRole($roleId: ID!) {
    reactivateRole(roleId: $roleId) {
      id
      status
    }
  }
`);

export const RoleActionsFragment = graphql(`
  fragment RoleActions on Role {
    id
    status
  }
`);

interface RoleActionsProps {
  role: FragmentOf<typeof RoleActionsFragment>;
}

export const RoleActions = ({ role: roleFragment }: RoleActionsProps) => {
  const role = readFragment(RoleActionsFragment, roleFragment);
  const navigate = useNavigate();
  const toast = useToast();
  const [{ fetching: deactivating }, deactivateRole] = useMutation(DeactivateRoleMutation);
  const [{ fetching: reactivating }, reactivateRole] = useMutation(ReactivateRoleMutation);

  return (
    <ActionPanel
      title="Actions"
      actions={[
        ...(role.status === "ACTIVE"
          ? [
              {
                key: "edit",
                label: "Edit Role",
                icon: <Pencil />,
                onClick: () => navigate("edit"),
              },
              {
                key: "deactivate",
                label: "Deactivate Role",
                icon: <ShieldOff />,
                variant: "destructive" as const,
                loading: deactivating,
                onClick: () =>
                  void deactivateRole({ roleId: role.id }, { additionalTypenames: ["Role"] }).then(
                    (result) => {
                      if (result.error) {
                        toast.error(result.error);
                        return;
                      }
                      toast.success("Role deactivated successfully");
                    },
                  ),
              },
            ]
          : []),
        ...(role.status === "INACTIVE"
          ? [
              {
                key: "reactivate",
                label: "Reactivate Role",
                icon: <ShieldCheck />,
                loading: reactivating,
                onClick: () =>
                  void reactivateRole({ roleId: role.id }, { additionalTypenames: ["Role"] }).then(
                    (result) => {
                      if (result.error) {
                        toast.error(result.error);
                        return;
                      }
                      toast.success("Role reactivated successfully");
                    },
                  ),
              },
            ]
          : []),
        {
          key: "back",
          label: "Back to Role List",
          icon: <ArrowLeft />,
          onClick: () => navigate("/user-management/role"),
        },
      ]}
    />
  );
};
