export const dynamic = "force-dynamic";
/**
 * /checkout/success
 *
 * Post-payment landing page.
 *
 * The user arrives here after a successful Stripe Checkout payment.
 * Query params from Stripe: ?templateId=<id>&session_id=<stripe_session_id>
 *
 * Flow:
 *   1. Show payment success confirmation.
 *   2. If already signed in → redirect to /activate/[orderId] immediately.
 *   3. If not signed in → show email + password sign-up form (no phone).
 *   4. After sign-up/sign-in → redirect to /activate/[orderId].
 *
 * The orderId is derived from the Stripe session_id (or templateId as fallback)
 * so the activate page can look up the order.
 */
import { redirect } from "next/navigation";
import { Suspense } from "react";
import { verifyCheckoutSession } from "@/lib/verify-checkout-session";
import { CheckoutSuccessClient } from "./CheckoutSuccessClient";

export const metadata = { title: "Payment successful" };

interface Props {
  searchParams: Promise<{ session_id?: string; templateId?: string }>;
}

export default async function CheckoutSuccessPage({ searchParams }: Props) {
  const params = await searchParams;
  const sessionId = params.session_id ?? "";
  const templateId = params.templateId ?? "";

  const verification = await verifyCheckoutSession(sessionId, templateId);
  if (!verification.ok) {
    redirect("/shop");
  }

  return (
    <Suspense
      fallback={
        <div className="flex min-h-[calc(100vh-4rem)] items-center justify-center px-4">
          <div className="text-center space-y-3">
            <div className="mx-auto size-8 animate-spin rounded-full border-2 border-[var(--brand-accent)] border-t-transparent" />
            <p className="text-sm text-sand-600 dark:text-sand-400">Loading…</p>
          </div>
        </div>
      }
    >
      <CheckoutSuccessClient
        orderId={verification.orderId}
        sessionId={sessionId}
        templateId={templateId}
        purchaserEmail={verification.purchaserEmail}
      />
    </Suspense>
  );
}