import { createFileRoute } from "@tanstack/react-router";
import { Suspense } from "react";
import { prefetchServerQuery } from "@/lib/tanstack-query/utils/prefetch";
import { ActivitiesTable, activityQueries } from "@/features/activities";
import { playerQueries } from "@/features/players";
import { ListSkeleton } from "@/components/skeletons";

export const Route = createFileRoute("/_authed/admin/telemetry/functions")({
  component: FunctionsTab,
  beforeLoad: ({ context }) => {
    const queryClient = context.queryClient;
    prefetchServerQuery(queryClient, activityQueries.search());
    prefetchServerQuery(queryClient, playerQueries.list());
  },
  loader: () => ({
    withPadding: false,
    fullWidth: true,
    refresh: [activityQueries.search().queryKey],
  }),
});

function FunctionsTab() {
  return (
    <Suspense fallback={<ListSkeleton rows={8} withSearch withSubtitle withTrailing="text" />}>
      <ActivitiesTable />
    </Suspense>
  );
}