import Image from "next/image";
import type { ReactNode } from "react";
import { AuthTransitionFrame } from "@/components/auth-transition";
import { translate, type TranslationKey } from "@/lib/i18n-dictionaries";
import type { SupportedLocale } from "@/lib/i18n-config";
import { resolveRequestLocale } from "@/lib/i18n-server";
import { getPublicSiteAbsoluteUrl } from "@/lib/mail-urls";

function AuthMark({
  align = "center",
  locale,
}: {
  align?: "center" | "start";
  locale: SupportedLocale;
}) {
  return (
    <div
      className={`flex items-center gap-2.5 ${
        align === "center" ? "justify-center text-center" : "justify-start"
      }`}
    >
      <span className="flex items-center justify-center text-[#2f6df6]">
        <svg
          viewBox="0 0 24 24"
          fill="none"
          stroke="currentColor"
          strokeWidth="1.8"
          strokeLinecap="round"
          strokeLinejoin="round"
          className="h-[32px] w-[32px] sm:h-[40px] sm:w-[40px]"
          aria-hidden="true"
        >
          <rect x="3.5" y="5.5" width="17" height="13" rx="2.5" />
          <path d="m4.8 7 7.2 5.6L19.2 7" />
        </svg>
      </span>
      <span className="text-[22px] font-extrabold tracking-[-0.08em] text-[#2f6df6]">
        {translate(locale, "public.brand")}
      </span>
    </div>
  );
}

function LoginBrandPanel({ locale }: { locale: SupportedLocale }) {
  const t = (key: Parameters<typeof translate>[1]) => translate(locale, key);

  return (
    <aside className="relative hidden min-h-screen overflow-hidden bg-[linear-gradient(145deg,#1949c8_0%,#2f6df6_48%,#6e9bff_100%)] lg:flex lg:items-center lg:justify-center">
      <div className="pointer-events-none absolute inset-0 opacity-70 [background-image:radial-gradient(circle_at_16%_14%,rgba(255,255,255,0.24),transparent_23%),radial-gradient(circle_at_86%_82%,rgba(160,195,255,0.38),transparent_28%)]" />
      <div className="pointer-events-none absolute -right-24 -top-28 h-96 w-96 rounded-full border border-white/15" />
      <div className="pointer-events-none absolute -bottom-40 -left-28 h-[32rem] w-[32rem] rounded-full border border-white/10" />

      <div className="relative z-10 flex h-full w-full max-w-[760px] flex-col items-center justify-center px-12 py-8 2xl:px-16">
        <Image
          src="/images/auth/officialmail-login-visual.svg"
          alt={t("auth.shell.visualAlt")}
          width={760}
          height={560}
          priority
          className="h-auto max-h-[47vh] w-full max-w-[560px] select-none object-contain"
        />

        <div className="w-full max-w-[560px] text-white">
          <div className="flex flex-wrap items-center gap-2 text-[11px] font-semibold text-white/82 xl:text-[12px]">
            {[
              t("auth.shell.domainChip"),
              t("auth.shell.webmailChip"),
              t("auth.shell.teamChip"),
            ].map((label) => (
              <span
                key={label}
                className="rounded-full border border-white/18 bg-white/12 px-3 py-1.5 backdrop-blur-md"
              >
                {label}
              </span>
            ))}
          </div>
          <h2 className="mt-4 max-w-[540px] text-[24px] font-semibold leading-[1.3] tracking-[-0.05em] xl:text-[28px] 2xl:text-[31px]">
            {t("auth.shell.headlineFirst")}
            <br />
            {t("auth.shell.headlineSecond")}
          </h2>
          <p className="mt-3 max-w-[540px] text-[12px] leading-6 text-white/72 xl:text-[13px]">
            {t("auth.shell.description")}
          </p>
        </div>
      </div>
    </aside>
  );
}

export async function AuthLayoutShell({ children }: { children: ReactNode }) {
  const publicHomeUrl = getPublicSiteAbsoluteUrl("/");
  const locale = await resolveRequestLocale();
  const t = (key: Parameters<typeof translate>[1]) => translate(locale, key);

  return (
    <div className="grid min-h-[100dvh] bg-white lg:grid-cols-2">
      <section className="relative flex min-h-[100dvh] flex-col overflow-hidden bg-white px-5 py-6 sm:px-10 sm:py-8 lg:px-12 xl:px-14 2xl:px-16">
        <div className="pointer-events-none absolute -left-28 top-1/3 h-72 w-72 rounded-full bg-[#eef4ff] blur-3xl lg:hidden" />
        <header className="relative z-10">
          <a
            href={publicHomeUrl}
            className="inline-block"
            aria-label={t("auth.shell.home")}
          >
            <AuthMark align="start" locale={locale} />
          </a>
        </header>

        <main className="relative z-10 flex flex-1 items-center justify-center py-8 sm:py-10 lg:py-5">
          {children}
        </main>

        <footer className="relative z-10 flex flex-wrap items-center gap-x-4 gap-y-2 text-[11px] text-[#9aa5b5] sm:text-[12px]">
          <span>© KAVENIX</span>
          <a
            href={getPublicSiteAbsoluteUrl("/terms")}
            className="transition-colors hover:text-[#2f6df6]"
          >
            {t("auth.shell.terms")}
          </a>
          <a
            href={getPublicSiteAbsoluteUrl("/privacy")}
            className="font-semibold transition-colors hover:text-[#2f6df6]"
          >
            {t("auth.shell.privacy")}
          </a>
        </footer>
      </section>

      <LoginBrandPanel locale={locale} />
    </div>
  );
}

export async function AuthPageShell({
  title,
  description,
  children,
}: {
  title: TranslationKey;
  description: TranslationKey;
  children: ReactNode;
}) {
  const locale = await resolveRequestLocale();

  return (
    <AuthTransitionFrame className="w-full min-w-0 max-w-[408px]">
      <div className="inline-flex items-center gap-2 rounded-full border border-[#dbe7ff] bg-[#f4f8ff] px-3 py-1.5 text-[11px] font-bold tracking-[0.09em] text-[#2f6df6]">
        <span className="h-1.5 w-1.5 rounded-full bg-[#2f6df6] shadow-[0_0_0_4px_rgba(47,109,246,0.1)]" />
        OFFICIAL MAIL
      </div>
      <h1 className="mt-4 text-[27px] font-semibold leading-tight tracking-[-0.055em] text-[#10182c] sm:text-[31px]">
        {translate(locale, title)}
      </h1>
      <p className="mt-2.5 max-w-[400px] text-[12px] leading-[1.75] text-[#748198] sm:text-[13px]">
        {translate(locale, description)}
      </p>

      <div className="mt-6 sm:mt-7">{children}</div>
    </AuthTransitionFrame>
  );
}