import { createFileRoute } from "@tanstack/react-router";
import { Suspense } from "react";
import { prefetchServerQuery } from "@/lib/tanstack-query/utils/prefetch";
import { telemetryQueries, lastNDays, ErrorBrowser } from "@/features/telemetry";
import { ListSkeleton } from "@/components/skeletons";

const errorGroupParams = () => ({ ...lastNDays(30), includeResolved: false });

export const Route = createFileRoute("/_authed/admin/telemetry/errors")({
  component: ErrorsTab,
  beforeLoad: ({ context }) => {
    prefetchServerQuery(context.queryClient, telemetryQueries.errorGroups(errorGroupParams()));
  },
  loader: () => ({
    withPadding: false,
    fullWidth: true,
    refresh: [telemetryQueries.errorGroups(errorGroupParams()).queryKey],
  }),
});

function ErrorsTab() {
  return (
    <Suspense fallback={<ListSkeleton rows={6} withSubtitle />}>
      <ErrorBrowser />
    </Suspense>
  );
}