import type { Metadata } from "next";
import NextLink from "next/link";
import { Link } from "@unlocalhosted/metalui";
import { MailIcon } from "@/components/icons";
import { Alert, Box } from "@/components/ui";
import { getViewer } from "@/lib/auth";
import { confirmEmail } from "@/lib/emails";

export const metadata: Metadata = { title: "Confirm your email address" };

/** Where the link in a verification email (lib/emails.ts) leads. Opening it confirms the address. */
export default async function VerifyEmailPage({ searchParams }: PageProps<"/login/verify-email">) {
  const token = (await searchParams).token;
  const [user, viewer] = await Promise.all([typeof token === "string" ? confirmEmail(token) : null, getViewer()]);

  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">
            <MailIcon />
          </span>
          <h1 className="mt-6 text-[22px] leading-7 font-semibold tracking-[-0.025em] text-ink">Confirm your email address</h1>
        </div>
        <Box className="mt-8 p-6">
          {user ? (
            <Alert kind="success">
              {user.email} is confirmed as the address of @{user.username}.
            </Alert>
          ) : (
            <Alert>
              This link has expired, or the account’s email address has changed since. Send a new one from your profile settings.
            </Alert>
          )}
        </Box>
        <p className="mt-6 text-center type-body text-ink2">
          {viewer ? (
            <Link render={<NextLink href={user ? "/" : "/settings/profile"} />}>{user ? "Go to your dashboard" : "Open profile settings"}</Link>
          ) : (
            <Link render={<NextLink href={user ? "/login" : "/login?next=%2Fsettings%2Fprofile"} />}>Sign in</Link>
          )}
        </p>
      </div>
    </main>
  );
}