import Link from "next/link";
import { PublicLanguageMenu } from "@/components/public-language-controls";
import { PublicLocaleSuggestionForRequest } from "@/components/public-locale-suggestion-server";
import { translate } from "@/lib/i18n-dictionaries";
import { resolveRequestLocale } from "@/lib/i18n-server";
import { getLocalizedPublicPath } from "@/lib/i18n-urls";
import type { SupportedLocale } from "@/lib/i18n-config";

function PublicLogo({ locale }: { locale: SupportedLocale }) {
  return (
    <Link
      href={getLocalizedPublicPath("/", locale)}
      aria-label={translate(locale, "public.brand")}
      className="flex shrink-0 items-center text-[#2f6df6]"
    >
      <svg
        viewBox="0 0 24 24"
        fill="none"
        stroke="currentColor"
        strokeWidth="1.8"
        strokeLinecap="round"
        strokeLinejoin="round"
        className="h-7 w-7 sm:h-8 sm:w-8"
        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 className="text-[18px] font-extrabold tracking-[-0.07em]">
        {translate(locale, "public.brand")}
      </span>
    </Link>
  );
}

export async function PublicBlogHeader({
  active = "blog",
  pathname,
}: {
  active?: "blog" | "partner" | "tool";
  pathname?: string;
}) {
  const locale = await resolveRequestLocale();
  const localizedPath = (pathname: string) => getLocalizedPublicPath(pathname, locale);
  const t = (key: Parameters<typeof translate>[1]) => translate(locale, key);
  const bannerLabel = active === "partner" ? "PARTNER" : "BLOG";
  const bannerCopy =
    active === "partner"
      ? t("public.banner.partner")
      : t("public.banner.blog");
  const currentPathname =
    pathname ??
    (active === "partner"
      ? "/partner"
      : active === "tool"
        ? "/domain-mail-check"
        : "/blog");

  return (
    <>
      <div className="relative z-50 bg-gradient-to-r from-[#2563eb] to-[#1d4ed8] px-3 py-2 text-center text-[11px] font-medium text-white sm:px-4 sm:text-sm">
        <div className="mx-auto flex max-w-[1420px] items-center justify-center gap-2">
          <span className="rounded-full bg-yellow-400 px-2 py-0.5 text-[10px] font-bold uppercase text-slate-900">{bannerLabel}</span>
          <span className="leading-[1.3] sm:leading-normal">{bannerCopy}</span>
        </div>
      </div>
      <div className="sticky top-0 z-40">
        <PublicLocaleSuggestionForRequest pathname={currentPathname} />
        <div className="border-b border-black/5 bg-white/65 shadow-sm backdrop-blur-xl backdrop-saturate-150">
        <header className="mx-auto flex h-[62px] w-full max-w-[1420px] items-center justify-between px-4 sm:h-20 sm:px-8 xl:px-10">
          <PublicLogo locale={locale} />
          <nav className="hidden min-w-0 flex-1 items-center justify-center gap-7 text-[15px] font-medium text-[#5a6882] lg:flex xl:gap-10 xl:text-[16px]">
            <Link href={localizedPath("/business-email")} className="transition-colors hover:text-[#2f6df6]">{t("public.nav.businessEmail")}</Link>
            <Link href={localizedPath("/domain-email")} className="transition-colors hover:text-[#2f6df6]">{t("public.nav.domainEmail")}</Link>
            <Link href={localizedPath("/ai-email-summary")} className="transition-colors hover:text-[#2f6df6]">{t("public.nav.aiSummary")}</Link>
            <Link href={localizedPath("/faq")} className="transition-colors hover:text-[#2f6df6]">{t("public.nav.faq")}</Link>
            <Link
              href={localizedPath("/domain-mail-check")}
              className={`transition-colors hover:text-[#2f6df6] ${active === "tool" ? "font-semibold text-[#2f6df6]" : ""}`}
            >
              {t("public.nav.freeCheck")}
            </Link>
            <Link
              href={localizedPath("/blog")}
              className={`transition-colors hover:text-[#2f6df6] ${active === "blog" ? "font-semibold text-[#2f6df6]" : ""}`}
            >
              {t("public.nav.blog")}
            </Link>
            <Link
              href={localizedPath("/partner")}
              className={`transition-colors hover:text-[#2f6df6] ${active === "partner" ? "font-semibold text-[#2f6df6]" : ""}`}
            >
              {t("public.nav.partner")}
            </Link>
          </nav>
          <div className="flex items-center gap-2 sm:gap-3">
            <PublicLanguageMenu currentLocale={locale} pathname={currentPathname} />
            <Link href="/login" className="om-btn-secondary hidden h-10 rounded-[12px] px-3.5 text-[13px] sm:inline-flex sm:h-11 sm:px-5 sm:text-base">
              {t("public.nav.login")}
            </Link>
            <Link href="/login" className="om-btn-primary h-10 rounded-[12px] px-3.5 text-[13px] sm:h-11 sm:px-5 sm:text-base">
              <span className="sm:hidden">{t("public.nav.startShort")}</span>
              <span className="hidden sm:inline">{t("public.nav.start")}</span>
            </Link>
          </div>
        </header>
        </div>
      </div>
    </>
  );
}