import ManageTournaments from "@/features/admin/components/manage-tournaments";
import { tournamentQueries } from "@/features/tournaments/queries";
import { prefetchServerQuery } from "@/lib/tanstack-query/utils/prefetch";
import { Divider, Group, Skeleton, Stack } from "@mantine/core";
import { createFileRoute } from "@tanstack/react-router";
import { Suspense } from "react";
import { msg } from "@lingui/core/macro";

export const Route = createFileRoute("/_authed/admin/tournaments/")({
  beforeLoad: ({ context }) => {
    const { queryClient } = context;
    prefetchServerQuery(queryClient, tournamentQueries.list());
  },
  loader: () => ({
    header: {
      withBackButton: true,
      title: msg`Manage Tournaments`,
    },
    refresh: tournamentQueries.list().queryKey,
    withPadding: false,
  }),
  component: RouteComponent,
});

function TournamentListSkeleton() {
  return (
    <Stack gap={0}>
      {Array.from({ length: 6 }).map((_, index) => (
        <div key={`manage-tournaments-skeleton-${index}`} style={{ opacity: Math.max(1 - index * 0.12, 0.4) }}>
          <Group p="md" wrap="nowrap" w="100%">
            <Skeleton height={16} width="55%" radius="sm" />
            <Skeleton ml="auto" height={20} width={20} radius="sm" />
          </Group>
          <Divider />
        </div>
      ))}
    </Stack>
  );
}

function RouteComponent() {
  return (
    <Suspense fallback={<TournamentListSkeleton />}>
      <ManageTournaments />
    </Suspense>
  );
}
