import type { Metadata } from "next";
import Link from "next/link";
import { redirect } from "next/navigation";
import { Suspense } from "react";

import { AuthForm } from "@/components/auth/auth-form";
import { AuthShell } from "@/components/auth/auth-shell";
import { getSession } from "@/lib/auth/session";

export const metadata: Metadata = {
  title: "Create an account",
  description: "Create a free FlixTV account to build your watchlist and keep your progress in sync.",
  robots: { index: false, follow: true },
};

export default async function RegisterPage() {
  if (await getSession()) redirect("/");

  return (
    <AuthShell
      eyebrow="Join FlixTV"
      title="Create your account"
      description="One account for your watchlist, continue-watching row and history — synced everywhere."
      asideLink={
        <>
          Already have an account?{" "}
          <Link href="/login" className="font-semibold text-ink underline-offset-4 hover:underline">
            Sign in
          </Link>
        </>
      }
    >
      <Suspense fallback={null}>
        <AuthForm mode="register" />
      </Suspense>
    </AuthShell>
  );
}