import Image from "next/image";
import Link from "next/link";
import { ArrowLeft, CheckCircle2, ShieldCheck } from "lucide-react";

import AuthForm from "@/components/auth/AuthForm";
import { authCopy } from "@/components/auth/auth-copy";
import { Brand } from "@/components/home/Brand";
import ProductArtwork from "@/components/home/ProductArtwork";
import { productThemes } from "@/components/products/product-theme";
import type { Product } from "@/data/products.data";
import { getProductLinks, getProductPageCopy } from "@/data/products.data";
import type { Locale } from "@/lib/locales";
import { localizedPath } from "@/lib/routes";

const productLoginImages: Record<Product["slug"], Product["images"]["hero"]> = {
  pureestate: {
    src: "/images/pureestate-login.png",
    alt: "PureEstate login screen",
    width: 1536,
    height: 1024,
  },
  buildpro: {
    src: "/images/buildpro-login.png",
    alt: "BuildPro login screen",
    width: 1536,
    height: 1024,
  },
  societypro: {
    src: "/images/societypro-login.png",
    alt: "SocietyPro login screen",
    width: 1536,
    height: 1024,
  },
};

export default function AuthPage({
  locale,
  mode,
  product,
}: {
  locale: Locale;
  mode: "login" | "register";
  product?: Product;
}) {
  const copy = authCopy[locale];
  const productCopy = getProductPageCopy(locale);
  const productLinks = product ? getProductLinks(locale, product) : null;
  const links = {
    login: productLinks?.login ?? localizedPath(locale, "/login"),
    register: productLinks?.register ?? localizedPath(locale, "/register"),
    home: productLinks?.productHome ?? localizedPath(locale),
  };
  const theme = productThemes[product?.tone ?? "violet"];
  const isLogin = mode === "login";
  const title = product
    ? isLogin
      ? productCopy.access.loginTitle
      : productCopy.access.registerTitle
    : isLogin
      ? copy.loginTitle
      : copy.registerTitle;
  const description = product
    ? isLogin
      ? productCopy.access.loginDescription
      : productCopy.access.registerDescription
    : isLogin
      ? copy.loginDescription
      : copy.registerDescription;
  const visual = product ? productLoginImages[product.slug] : undefined;

  return (
    <section className="relative overflow-hidden bg-[#f7faff]">
      <div className="relative mx-auto grid min-h-[720px] max-w-[1180px] items-center gap-8 px-6 py-12 lg:grid-cols-[0.95fr_1.05fr]">
        <div className="min-w-0">
          {!product ? <Brand /> : null}
          <span
            className={`mt-6 inline-flex items-center gap-2 rounded-full border px-3 py-2 text-[11px] font-extrabold uppercase tracking-[0.15em] ${theme.badge}`}
          >
            <ShieldCheck size={14} />
            {product?.name ??
              (isLogin ? copy.loginEyebrow : copy.registerEyebrow)}
          </span>
          <h1 className="mt-5 text-4xl font-extrabold text-[#101a3d] sm:text-5xl">
            {title}
          </h1>
          <p className="mt-5 max-w-xl text-[15px] leading-7 text-[#69758e]">
            {description}
          </p>
          <div className="mt-5 grid gap-2.5">
            {[copy.trustAccess, copy.trustHandling, copy.trustSupport].map(
              (item) => (
                <p
                  key={item}
                  className="flex items-center gap-2 text-[13px] font-bold text-[#68748c]"
                >
                  <CheckCircle2 size={16} className={theme.accentText} />
                  {item}
                </p>
              ),
            )}
          </div>
          <Link
            href={links.home}
            className="mt-7 inline-flex items-center gap-2 text-[12px] font-extrabold text-[#5d68df]"
          >
            <ArrowLeft size={15} />
            {product ? productCopy.access.backToProduct : copy.backHome}
          </Link>

          <div
            className={`mt-8 overflow-hidden rounded-2xl border bg-gradient-to-br shadow-[0_18px_44px_rgba(45,61,108,0.12)] ${theme.border} ${theme.soft}`}
          >
            {visual ? (
              <Image
                src={visual.src}
                alt={visual.alt}
                width={visual.width}
                height={visual.height}
                sizes="(max-width: 1024px) 90vw, 520px"
                className="h-[260px] w-full object-contain object-center p-3"
                priority={isLogin}
              />
            ) : (
              <div className="h-[230px] p-8">
                <ProductArtwork type="estate" />
              </div>
            )}
            {product ? (
              <div className="grid grid-cols-[76px_1fr] items-center gap-4 bg-white/82 p-4">
                <div className={`h-16 rounded-xl p-2 ${theme.icon}`}>
                  <ProductArtwork type={product.artwork} />
                </div>
                <div>
                  <p className="text-[13px] font-extrabold text-[#101a3d]">
                    {product.name}
                  </p>
                  <p className="mt-1 text-[12px] leading-5 text-[#68748c]">
                    {product.short}
                  </p>
                </div>
              </div>
            ) : null}
          </div>
        </div>
        <AuthForm
          locale={locale}
          loginHref={links.login}
          mode={mode}
          productSlug={product?.slug}
          registerHref={links.register}
        />
      </div>
    </section>
  );
}