import { createFileRoute } from '@tanstack/react-router'
import { tournamentQueries } from '@/features/tournaments/queries'
import { useQuery } from '@tanstack/react-query'
import { useAuth } from '@/contexts/auth-context'
import EditTournament from '@/features/admin/components/edit-tournament'
import Page from '@/components/page'
import { Loader } from '@mantine/core'

export const Route = createFileRoute('/_authed/admin/tournaments/$id')({
  beforeLoad: async ({ context, params }) => {
    const { queryClient } = context;
    await queryClient.ensureQueryData(tournamentQueries.details(params.id))
  },
  loader: () => ({
    header: {
      withBackButton: true,
      title: 'Edit Tournament',
    },
  }),
  component: RouteComponent,
})

function RouteComponent() {
  const { id } = Route.useParams()
  const { data: tournament } = useQuery(tournamentQueries.details(id))
  if (!tournament) throw new Error("Tournament not found.")

  return (
    <Page>
      <EditTournament tournament={tournament} />
    </Page>
  )
}