'use client'

import dynamic from 'next/dynamic'
import { useParams } from 'next/navigation'

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

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

const AdminEventEditPage = () => {
  const eventId = useParams<{ id: string }>().id

  if (!eventId) return <p className="p-4 text-sm text-fourth-900">{texts.events.invalidEventId}</p>

  const detailHref = APP_ROUTES.MANAGE_EVENT_DETAIL(eventId)

  return (
    <section className="h-full w-full">
      <PageNavbar pageTitle={texts.events.editEventTitle} />
      <div className="admin-page-container">
        <EventEditForm
          accessMode="admin"
          cancelHref={detailHref}
          eventId={eventId}
          layout="admin"
          successHref={detailHref}
        />
      </div>
    </section>
  )
}

export default AdminEventEditPage