import { fetchHeaderFooterHomeData } from "../../../lib/serverFetch";
import Footer from "../../../components/layout/Footer";
import SmoothScrollToForm from "../../../components/ui/SmoothScrollToForm";
import { fetchGroupDetailAction } from "../../../lib/actions/groupDetailAction";
import { ClassDetailsProvider } from "@/src/lib/context/ClassDetailsContext";
import { notFound } from "next/navigation";
import RegisterProgramForm from "../../../components/layout/form/RegisterProgramForm";
import { fetchStripeConnectContextAction } from "../../../lib/actions/stripeConnectAction";

export default async function ClassRegistrationDetails({
  params,
  searchParams,
}: {
  params: Promise<{ id?: string }>;
  searchParams: Promise<Record<string, string | string[]>>;
}) {
  const resolvedParams = await params;
  const sParams = await searchParams;
  const headerFooterHomeData = await fetchHeaderFooterHomeData(sParams);

  const classId = resolvedParams?.id;
  const franchiseeId = sParams.franchiseeId as string;

  if (!classId) {
    return <div className="p-8 text-center text-red-600">Class ID not found in URL</div>;
  }

  const [groupDetailResponse, stripeAccountId] = await Promise.all([
    fetchGroupDetailAction(classId, franchiseeId),
    fetchStripeConnectContextAction(),
  ]);

  const classDetails = groupDetailResponse.success ? groupDetailResponse.data : null;

  if (!classDetails) {
    notFound();
  }

  return (
    <ClassDetailsProvider classDetails={classDetails}>
      {/* page-fill: when the form is short (e.g. the "payment not configured"
          notice) the page stopped well above the fold and left blank space under
          the footer. The class opts this page into the sticky-footer rule in
          globals.css, which stretches this first section so the footer lands at
          the bottom of the viewport. */}
      <main className="overflow-x-hidden page-fill">
        {/* md:pt-[120px]: the header is fixed, and from `md` up nothing in the
            layout reserves its height (the 70px spacer in layout.tsx is phones
            only). At 24px the "Back to Classes" link sat underneath the header
            on tablet and desktop. 120px is where it was before the spacing was
            tightened on 2026-10-10; phones keep 24px below their spacer. */}
        <section className="relative w-full overflow-visible z-[999] pt-[24px] md:pt-[120px] page-fill-grow">
          <RegisterProgramForm
            zohoFranchiseId={headerFooterHomeData?.tenant?.zoho_franchise_id}
            stripeAccountId={stripeAccountId}
          />
        </section>

        <section className="relative w-full overflow-hidden mt-[-45px] xl:mt-0 pt-[40px] xl:pt-[80px] max-[767px]:pt-[0px]">
          <Footer footerData={headerFooterHomeData} />
        </section>

        <SmoothScrollToForm />
      </main>
    </ClassDetailsProvider>
  );
}