import { Suspense } from "react";
import { EngagementForm } from "@/components/EngagementForm";
import { SiteHeader, SiteFooter } from "@/components/SiteChrome";
import { formConfig } from "@/config/form";

interface PageProps {
  searchParams: Promise<{ cid?: string; cs?: string }>;
}

export default async function Page({ searchParams }: PageProps) {
  const { cid, cs } = await searchParams;

  return (
    <>
      <SiteHeader />
      <main id="main" className="flex-1 bg-stone-50">
        <a
          href="#main"
          className="sr-only focus:not-sr-only focus:absolute focus:left-4 focus:top-4 focus:rounded focus:bg-white focus:px-3 focus:py-2 focus:shadow"
        >
          Skip to content
        </a>
        <div className="mx-auto max-w-3xl px-4 py-8 sm:px-6 sm:py-12">
          <header className="mb-8">
            <h1 className="text-2xl font-semibold text-stone-900 sm:text-3xl">
              {formConfig.title}
            </h1>
            {formConfig.subtitle && (
              <p className="mt-2 text-stone-700 leading-relaxed">{formConfig.subtitle}</p>
            )}
          </header>

          {!cid || !cs ? (
            <MissingLinkParams />
          ) : (
            <Suspense fallback={null}>
              <EngagementForm config={formConfig} cid={cid} cs={cs} />
            </Suspense>
          )}
        </div>
      </main>
      <SiteFooter />
    </>
  );
}

function MissingLinkParams() {
  return (
    <div
      role="alert"
      className="rounded-xl border border-amber-200 bg-amber-50 px-6 py-6 text-amber-900"
    >
      <h2 className="text-lg font-semibold">This link is missing required information.</h2>
      <p className="mt-2 leading-relaxed">
        Open the form using the personalized link from your email. If you no longer have it,
        please contact your engagement coordinator and ask for a fresh link.
      </p>
    </div>
  );
}