import { createFileRoute } from '@tanstack/react-router'
import { tournamentQueries } from '@/features/tournaments/queries';
import Profile from '@/features/tournaments/components/profile';
import { isAdminRole } from '@/features/core/utils/roles';
import { z } from "zod";
import { prefetchServerQuery } from '@/lib/tanstack-query/utils/prefetch';
import { Suspense } from 'react';
import ProfileSkeleton from '@/features/tournaments/components/profile/skeleton';

const searchSchema = z.object({
  tab: z.string().optional(),
});

export const Route = createFileRoute('/_authed/tournaments/$tournamentId')({
  validateSearch: searchSchema,
  beforeLoad: ({ context, params }) => {
    const { queryClient } = context;
    prefetchServerQuery(queryClient, tournamentQueries.details(params.tournamentId))
  },
  loader: ({ params, context }) => ({
    header: {
      collapsed: true,
      withBackButton: true,
      settingsLink: isAdminRole(context.auth.roles) ? `/admin/tournaments/${params.tournamentId}` : undefined
    },
    refresh: [tournamentQueries.details(params.tournamentId).queryKey],
    withPadding: false
  }),
  component: RouteComponent,
})

function RouteComponent() {
  const tournamentId = Route.useParams().tournamentId;
  return <Suspense fallback={<ProfileSkeleton />}>
    <Profile id={tournamentId} />
  </Suspense>
}