import type { Metadata } from "next";
import Link from "next/link";
import { redirect } from "next/navigation";
import { LogoMark } from "@/components/artwork";
import { LoginForm } from "@/components/admin/LoginForm";
import { getSession } from "@/lib/auth";
import { getSettings } from "@/lib/cms";

export const metadata: Metadata = {
  title: "Admin sign in",
  robots: { index: false, follow: false },
};

export default async function AdminLoginPage() {
  const session = await getSession();
  if (session) redirect("/admin");

  const settings = await getSettings();

  return (
    <div className="flex min-h-screen items-center justify-center bg-mint px-6 py-16">
      <div className="grid w-full max-w-4xl overflow-hidden rounded-3xl bg-white shadow-[0_40px_80px_-40px_rgba(14,59,59,0.4)] lg:grid-cols-2">
        {/* Brand panel */}
        <div className="relative hidden flex-col justify-between bg-teal-deep p-10 lg:flex">
          <div className="topo-wash opacity-20" aria-hidden="true" />
          <Link href="/" className="relative flex items-center gap-2.5">
            <LogoMark className="h-9 w-9 text-amber" />
            <span className="font-display text-2xl font-bold text-white">
              {settings.brandName}
            </span>
          </Link>
          <div className="relative">
            <h1 className="display-2 text-white">Welcome back.</h1>
            <p className="mt-3 text-white/70">
              Sign in to manage your website content, publish journal articles
              and fine-tune your SEO.
            </p>
          </div>
          <p className="relative text-xs text-white/50">
            {settings.tagline}
          </p>
        </div>

        {/* Form panel */}
        <div className="p-8 sm:p-12">
          <div className="lg:hidden">
            <Link href="/" className="mb-8 inline-flex items-center gap-2.5">
              <LogoMark className="h-8 w-8 text-teal" />
              <span className="font-display text-xl font-bold text-ink">
                {settings.brandName}
              </span>
            </Link>
          </div>
          <h2 className="display-3">Admin sign in</h2>
          <p className="mt-2 text-sm text-ink-mute">
            Use the credentials configured in your environment variables.
          </p>
          <div className="mt-8">
            <LoginForm />
          </div>
          <Link
            href="/"
            className="mt-8 inline-block text-sm font-medium text-teal link-sweep"
          >
            ← Back to website
          </Link>
        </div>
      </div>
    </div>
  );
}