import { notFound, redirect } from "next/navigation";
import { Navbar } from "@/components/layout/Navbar";
import { Footer } from "@/components/layout/Footer";
import { apiFetch, ApiError } from "@/lib/api";
import RegisterForm from "./RegisterForm";

export const revalidate = 60;

export default async function RegisterPage({ params }: { params: Promise<{ eventId: string }> }) {
  const { eventId } = await params;
  let event: any;
  try {
    // Fetched server-side (same pattern as /events/[id]) so the form's content is part of
    // the initial HTML instead of showing a loading skeleton after a client-side fetch.
    event = await apiFetch<any>(`/api/events/${eventId}`, { nextOptions: { next: { revalidate } } });
  } catch (e) {
    if (e instanceof ApiError && e.status === 404) notFound();
    throw e;
  }

  // Contact-only events (e.g. baptism) have no registration flow — bounce a stale/direct
  // link back to the event detail page, which renders the Contact affordance instead.
  if (event.requiresRegistration === false) {
    redirect(`/events/${eventId}`);
  }

  return (
    <div className="min-h-screen flex flex-col">
      <Navbar />
      <main className="flex-1 p-6 max-w-2xl mx-auto w-full">
        <RegisterForm event={event} />
      </main>
      <Footer />
    </div>
  );
}