'use client'

import dynamic from 'next/dynamic'
import { useSearchParams } from 'next/navigation'
import { Suspense } from 'react'

import PageNavbar from '@/components/layouts/PageNavbar'
import { DetailSkeleton } from '@/components/feedback/LoadingState'
import { APP_ROUTES } from '@/constants/routes'
import { texts } from '@/texts'

const EventCreateForm = dynamic(() => import('@/features/events/create/EventCreateForm'), {
  ssr: false,
  loading: () => <DetailSkeleton />,
})

const AdminEventCreatePageInner = () => {
  const searchParams = useSearchParams()
  const initialOrganizerId = searchParams.get('organizerId')

  return (
    <section className="h-full w-full">
      <PageNavbar pageTitle={texts.events.createEventTitle} />
      <div className="admin-page-container">
        <EventCreateForm
          cancelHref={APP_ROUTES.MANAGE_EVENTS}
          initialOrganizerId={initialOrganizerId}
          successHrefFor={APP_ROUTES.MANAGE_EVENT_DETAIL}
        />
      </div>
    </section>
  )
}

const AdminEventCreatePage = () => (
  <Suspense fallback={<DetailSkeleton />}>
    <AdminEventCreatePageInner />
  </Suspense>
)

export default AdminEventCreatePage