import type { Metadata } from "next";
import { Suspense } from "react";
import { LoaderCircle } from "lucide-react";
import { AuthCard } from "@/features/auth/auth-shell";
import { OtpVerification } from "@/features/auth/otp-verification";
import { getServerSession } from "@/lib/auth/server-session";
import { isMonetizationApiConfigured } from "@/lib/auth/server-config";

export const metadata: Metadata = {
  title: "Verify Sign In",
  referrer: "no-referrer",
  robots: { index: false, follow: false },
};
export const dynamic = "force-dynamic";

export default async function Page() {
  const apiEnabled = isMonetizationApiConfigured();
  let session:
    | Awaited<ReturnType<typeof getServerSession>>
    | null = null;
  let sessionCheckFailed = false;
  if (apiEnabled) {
    try {
      session = await getServerSession();
    } catch {
      sessionCheckFailed = true;
    }
  }

  return (
    <AuthCard
      title="Verify your email"
      description="Enter your one-time code or open the verification link sent to your email."
    >
      <Suspense
        fallback={
          <p role="status" className="flex items-center gap-2 text-sm text-muted-foreground">
            <LoaderCircle
              aria-hidden="true"
              className="size-4 animate-spin motion-reduce:animate-none"
            />
            Opening your verification link…
          </p>
        }
      >
        <OtpVerification
          apiEnabled={apiEnabled}
          signedInEmail={session?.email}
          signedInDestination={session?.passwordSetupRequired ? "/set-password" : "/"}
          sessionCheckFailed={sessionCheckFailed}
        />
      </Suspense>
    </AuthCard>
  );
}