import Link from "next/link";
import { headers } from "next/headers";
import { createPageMetadata } from "@/lib/seo";
import { getThankYouFlow, resolveThankYouFlowKey } from "@/lib/thank-you-flows";

export const dynamic = "force-dynamic";

export const metadata = createPageMetadata({
  title: "Thank You",
  description: "Thank you for contacting Marloth Park Central. Continue with the right next planning step for your enquiry.",
  path: "/thank-you",
  noIndex: true,
});

export default async function ThankYouPage({ searchParams }: { searchParams?: Promise<{ type?: string; ref?: string }> }) {
  const params = searchParams ? await searchParams : {};
  const flow = getThankYouFlow(params.type);
  const resolvedKey = resolveThankYouFlowKey(params.type);
  const reference = typeof params.ref === "string" ? params.ref : "";
  const nonce = (await headers()).get("x-nonce") || undefined;

  return (
    <main className="section thank-you-flow-page">
      <div className="container thank-you-flow-shell">
        <section className="thank-you-flow-hero">
          <p className="eyebrow">{flow.eyebrow}</p>
          <h1 className="page-title">{flow.title}</h1>
          <p>{flow.description}</p>
          {reference && <p className="thank-you-reference">Reference: <strong>{reference}</strong></p>}
          <div className="hero-actions center-actions">
            <Link className="btn btn-gold" href={flow.primaryCta.href}>{flow.primaryCta.label}</Link>
            <Link className="btn btn-dark" href={flow.secondaryCta.href}>{flow.secondaryCta.label}</Link>
            {flow.tertiaryCta && <Link className="btn btn-outline dark-text" href={flow.tertiaryCta.href}>{flow.tertiaryCta.label}</Link>}
          </div>
        </section>
        <section className="thank-you-next-card" aria-labelledby="thank-you-next-heading">
          <span>{flow.statusLabel}</span>
          <h2 id="thank-you-next-heading">What happens next?</h2>
          <ol>{flow.nextSteps.map((step) => <li key={step}>{step}</li>)}</ol>
        </section>
        <section className="thank-you-soft-grid" aria-label="Useful MPC links">
          <Link href="/free-guides"><strong>Guide Set</strong><span>Immediate planning help while waiting for a reply.</span></Link>
          <Link href="/route-packs"><strong>Route help</strong><span>Kruger planning support from Marloth Park.</span></Link>
          <Link href="/accommodation"><strong>Accommodation</strong><span>Compare stay options and enquiry paths.</span></Link>
        </section>
        <script
          nonce={nonce}
          id="mpc-thank-you-conversion-context"
          dangerouslySetInnerHTML={{
            __html: `window.dataLayer=window.dataLayer||[];window.dataLayer.push({event:'mpc_thank_you_view',thank_you_type:${JSON.stringify(resolvedKey)},lead_reference:${JSON.stringify(reference)},conversion_kind:${JSON.stringify(flow.conversionKind)}});`,
          }}
        />
      </div>
    </main>
  );
}