import type { Metadata } from "next";
import NextLink from "next/link";
import { Link } from "@unlocalhosted/metalui";
import { ResetPasswordForm } from "@/components/auth-forms";
import { KeyIcon } from "@/components/icons";
import { Alert, Box } from "@/components/ui";
import { passwordResetUser } from "@/lib/emails";

export const metadata: Metadata = { title: "Choose a new password" };

/** Where the link in a password reset email (lib/emails.ts) leads. */
export default async function ResetPasswordPage({ searchParams }: PageProps<"/login/reset-password">) {
  const token = (await searchParams).token;
  const user = typeof token === "string" ? await passwordResetUser(token) : null;

  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">
            <KeyIcon />
          </span>
          <h1 className="mt-6 text-[22px] leading-7 font-semibold tracking-[-0.025em] text-ink">Choose a new password</h1>
          {user && <p className="mt-1 type-lead text-ink2">For @{user.username}</p>}
        </div>
        <Box className="mt-8 p-6">
          {user && typeof token === "string" ? (
            <ResetPasswordForm token={token} username={user.username} />
          ) : (
            <Alert>This link has expired or was already used.</Alert>
          )}
        </Box>
        <p className="mt-6 text-center type-body text-ink2">
          {user ? (
            <Link render={<NextLink href="/login" />}>Back to sign in</Link>
          ) : (
            <Link render={<NextLink href="/login/forgot-password" />}>Ask for a new link</Link>
          )}
        </p>
      </div>
    </main>
  );
}