import type { Metadata } from "next";
import NextLink from "next/link";
import { redirect } from "next/navigation";
import { Link } from "@unlocalhosted/metalui";
import { TwoFactorLoginForm } from "@/components/auth-forms";
import { ShieldLockIcon } from "@/components/icons";
import { Box } from "@/components/ui";
import { getViewer, hasSignInChallenge, safeNext } from "@/lib/auth";

export const metadata: Metadata = { title: "Two-factor authentication" };

export default async function TwoFactorLoginPage({ searchParams }: PageProps<"/login/two-factor">) {
  const next = safeNext((await searchParams).next);
  if (await getViewer()) redirect(next);
  const login = `/login${next !== "/" ? `?next=${encodeURIComponent(next)}` : ""}`;
  if (!(await hasSignInChallenge())) redirect(login);

  return (
    <main className="relative flex flex-1 flex-col items-center justify-center overflow-hidden px-4 py-16">
      <div className="aurora pointer-events-none absolute inset-0" aria-hidden />
      <div className="dot-grid pointer-events-none absolute inset-0" aria-hidden />
      <div className="animate-fade-up relative w-full max-w-[380px]">
        <div className="text-center">
          <span className="mx-auto flex size-16 items-center justify-center rounded-hero material-cap [&_svg]:size-8">
            <ShieldLockIcon />
          </span>
          <h1 className="mt-6 text-[22px] leading-7 font-semibold tracking-[-0.025em] text-ink">Two-factor authentication</h1>
          <p className="mt-1 type-lead text-ink2">Enter the code from your authenticator app</p>
        </div>
        <Box className="mt-8 p-6">
          <TwoFactorLoginForm next={next} />
        </Box>
        <p className="mt-6 text-center type-body text-ink2">
          Not you? <Link render={<NextLink href={login} />}>Sign in with another account</Link>
        </p>
      </div>
    </main>
  );
}