user-id

export const Route = createFileRoute("/dashboard/$id")({
  loader: ({ params }) => ({ id: params.id }),
  component: UserDetails,
});

function UserDetails() {
  const navigate = useNavigate();
  const { id } = Route.useParams();
  const queryClient = useQueryClient();

  const {
    data: user,
    isLoading,
    isError,
    error,
  } = useQuery<UserType | null>({
    queryKey: ["user", id],
    queryFn: async () => {
      const response = await fetch(`${ADMIN_USER_DETAIL}?userId=${id}`, {
        credentials: "include",
      });
      if (!response.ok) {
        throw new Error("Network response was not ok");
      }
      const data = await response.json();
      return data || null;
    },
  });

  const toggleUserStatus = useMutation({
    mutationFn: (isActive: boolean) =>
      fetch(
        `${isActive ? ADMIN_INACTIVE_USER : ADMIN_ACTIVE_USER}?userId=${id}`,
        {
          method: "PUT",
          headers: { "Content-Type": "application/json" },
          credentials: "include",
        },
      ),
    onSuccess: () => {
      queryClient.invalidateQueries({ queryKey: ["user", id] });
    },
  });

  if (isLoading) return <div>Laddar...</div>;
  if (isError) return <div>Ett fel uppstod: {(error as Error).message}</div>;
  if (!user) return <div>Användare hittades inte</div>;

  const handleToggleStatus = () => {
    toggleUserStatus.mutate(user.isActive);
  };

  return (
          <div>
            <h3 className="font-semibold">Aktiv</h3>
            <div className="flex items-center space-x-2">
              <Switch
                id="user-active"
                checked={user.isActive}
                onCheckedChange={handleToggleStatus}
                disabled={toggleUserStatus.isLoading}
              />
              <Label htmlFor="user-active">
                {user.isActive ? "Aktiv" : "Inaktiv"}
              </Label>
            </div>
          </div>
        </div>
  );
}