org-id

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

function OrganizationDetails() {
  const navigate = useNavigate();
  const { organizationId } = Route.useParams();
  const queryClient = useQueryClient();

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

  const toggleOrganizationStatus = useMutation({
    mutationFn: (isActive: boolean) =>
      fetch(
        `${isActive ? ADMIN_INACTIVE_ORG : ADMIN_ACTIVE_ORG}?organizationId=${organizationId}`,
        {
          method: "PUT",
          headers: { "Content-Type": "application/json" },
          credentials: "include",
        },
      ),
    onSuccess: async () => {
      await queryClient.invalidateQueries({
        queryKey: ["organizations", organizationId],
      });
    },
  });

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

  const { users, ...organization } = organizationData;

  const handleToggleStatus = () => {
    toggleOrganizationStatus.mutate(organization.isActive);
  };

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