import type { Metadata } from "next";
import NextLink from "next/link";
import { notFound } from "next/navigation";
import { Link } from "@unlocalhosted/metalui";
import { ForgotPasswordForm } from "@/components/auth-forms";
import { KeyIcon } from "@/components/icons";
import { Box } from "@/components/ui";
import { MAIL_ENABLED } from "@/lib/mail";

export const metadata: Metadata = { title: "Forgot your password?" };

export default function ForgotPasswordPage() {
  if (!MAIL_ENABLED) notFound();
  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">Forgot your password?</h1>
          <p className="mt-1 type-lead text-ink2">We’ll email you a link to choose a new one</p>
        </div>
        <Box className="mt-8 p-6">
          <ForgotPasswordForm />
        </Box>
        <p className="mt-6 text-center type-body text-ink2">
          Remembered it? <Link render={<NextLink href="/login" />}>Sign in</Link>
        </p>
      </div>
    </main>
  );
}