import type { Metadata } from "next";
import NextLink from "next/link";
import { redirect } from "next/navigation";
import { Link } from "@unlocalhosted/metalui";
import { LoginForm } from "@/components/auth-forms";
import { BRAND, LogoMark } from "@/components/brand";
import { Alert, Box } from "@/components/ui";
import { getViewer, safeNext } from "@/lib/auth";
import { SIGNUPS_ENABLED } from "@/lib/signups";

export const metadata: Metadata = { title: "Sign in" };

export default async function LoginPage({ searchParams }: PageProps<"/login">) {
  const params = await searchParams;
  const next = safeNext(params.next);
  if (await getViewer()) redirect(next);

  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">
            <LogoMark size={36} />
          </span>
          <h1 className="mt-6 text-[22px] leading-7 font-semibold tracking-[-0.025em] text-ink">Welcome back</h1>
          <p className="mt-1 type-lead text-ink2">Sign in to continue to {BRAND.name}</p>
        </div>
        {params.expired && (
          <div className="mt-8">
            <Alert kind="info">Your sign-in timed out. Enter your password again.</Alert>
          </div>
        )}
        <Box className="mt-8 p-6">
          <LoginForm next={next} />
        </Box>
        {SIGNUPS_ENABLED && (
          <p className="mt-6 text-center type-body text-ink2">
            New to {BRAND.name}?{" "}
            <Link render={<NextLink href={`/signup${next !== "/" ? `?next=${encodeURIComponent(next)}` : ""}`} />}>Create an account</Link>
          </p>
        )}
      </div>
    </main>
  );
}