"use client";
import BackgroundGradients from "@/components/BackgroundGradients";
import ContactHero from "@/components/ContactHero";
import Footer from "@/components/Footer";
import SignupComponent from "@/components/SignupComponent";
import LoginComponent from "@/components/LoginComponent";
import PageLoading from "@/components/PageLoading";
import { useEffect, useState } from "react";
import { getStoredLocale, getStoredLocaleRaw, LOCALE_CHANGE_EVENT } from "@/i18n/localeSwitcher";

const REGISTER_ZIGZAG_COUNT = 2;
type SeoMeta = {
  title: string;
  description: string;
  keywords: string[];
};

function getRegisterSeoMeta(data: any): SeoMeta {
  const seoSection = data?.page?.sections?.find((section: any) => section.key === "seo");
  const seoComponent = seoSection?.components?.find(
    (component: any) => component?.type?.name === "seo_meta"
  );
  const seoItem = seoComponent?.instance?.data ?? {};

  const title = typeof seoItem?.title === "string" ? seoItem.title : "";
  const description = typeof seoItem?.description === "string" ? seoItem.description : "";
  const keywordsRaw = typeof seoItem?.keywords === "string" ? seoItem.keywords : "";
  const keywords = keywordsRaw
    .split(",")
    .map((keyword: string) => keyword.trim())
    .filter(Boolean);

  return { title, description, keywords };
}

export default function Register() {
  const [pageData, setPageData] = useState<any>(null);
  const [isLoading, setIsLoading] = useState(true);
  const [seo, setSeo] = useState<SeoMeta>({
    title: "Biomket",
    description: "Biomket marketplace",
    keywords: [],
  });
  useEffect(() => {
    let isMounted = true;

    const loadServicesPage = async () => {
      setIsLoading(true);
      const xMedusaLocale = (getStoredLocaleRaw() ?? getStoredLocale()).trim();
      try {
        const res = await fetch(
          `${process.env.NEXT_PUBLIC_MEDUSA_BACKEND_URL}/store/pages/register`,
          {
            method: "GET",
            headers: {
              "x-publishable-api-key": process.env.NEXT_PUBLIC_MEDUSA_PUBLISHABLE_API_KEY || "",
              "x-medusa-locale": xMedusaLocale,
            },
            cache: "no-store"
          }
        );

        if (!res.ok) return;
        if (isMounted) {
          const registerPageJson = await res.json();
          setPageData(registerPageJson);
          setSeo(getRegisterSeoMeta(registerPageJson));
        }
      } catch {
      } finally {
        if (isMounted) setIsLoading(false);
      }
    };

    loadServicesPage();

    const onLocaleChange = () => {
      void loadServicesPage();
    };
    if (typeof window !== "undefined") {
      window.addEventListener(LOCALE_CHANGE_EVENT, onLocaleChange);
    }
    return () => {
      isMounted = false;
      if (typeof window !== "undefined") {
        window.removeEventListener(LOCALE_CHANGE_EVENT, onLocaleChange);
      }
    };
  }, []);

  useEffect(() => {
    document.title = seo.title || "Biomket";

    const descriptionContent = seo.description || "Biomket marketplace";
    let descriptionMeta = document.querySelector('meta[name="description"]');
    if (!descriptionMeta) {
      descriptionMeta = document.createElement("meta");
      descriptionMeta.setAttribute("name", "description");
      document.head.appendChild(descriptionMeta);
    }
    descriptionMeta.setAttribute("content", descriptionContent);

    const keywordsContent = seo.keywords.length > 0 ? seo.keywords.join(", ") : "";
    let keywordsMeta = document.querySelector('meta[name="keywords"]');
    if (!keywordsMeta) {
      keywordsMeta = document.createElement("meta");
      keywordsMeta.setAttribute("name", "keywords");
      document.head.appendChild(keywordsMeta);
    }
    if (keywordsContent) {
      keywordsMeta.setAttribute("content", keywordsContent);
    } else {
      keywordsMeta.removeAttribute("content");
    }
  }, [seo]);

  const sections = pageData?.page?.sections ?? [];
  const findSectionData = (...keys: string[]) => {
    const section = sections.find((s: any) =>
      keys.some((k) => String(s?.key ?? "").toLowerCase().includes(k.toLowerCase()))
    );
    const data = section?.components?.[0]?.instance?.data?.items?.[0];
    return data?.items?.[0] ?? data ?? null;
  };

  const bannerData = findSectionData("banner-section");
  const registerData = findSectionData("register-as-buyer");
  const heroTitle = bannerData?.title ?? "";
  const heroDescription = bannerData?.description ?? "";
  const heroBg = bannerData?.bg_image?.items?.[0] ?? {};
  const heroBgMobile =
    heroBg?.image_mobile ?? "";
  const heroBgDesktop =
    heroBg?.image_desktop ?? "";
  const heroBgMobileAlt =
    heroBg?.mobile_image_alt_tag ?? "";
  const heroBgDesktopAlt =
    heroBg?.desktop_image_alt_tag ?? "";

  if (isLoading) {
    return <PageLoading />;
  }

  return (
    <>
      <main className="min-h-screen px-[20px] md:px-[40px] xl:px-[60px] font-outfit">
        <ContactHero
          headline={
            <h1 className="font-lexend font-extralight text-[#ffffff] max-w-[782px]">
            {(() => {
              const words = heroTitle.trim().split(/\s+/);
              return (
                <>
                  {words.slice(0, 2).join(" ")}{" "}
                  {words.length > 2 ? (
                    <span className="font-medium">{words.slice(2).join(" ")}</span>
                  ) : null}
                </>
              );
            })()}
          </h1>
          }
          description={heroDescription}
          showSearch={false}
          backgroundImageMobile={heroBgMobile || undefined}
          backgroundImageDesktop={heroBgDesktop || undefined}
          backgroundImageMobileAlt={heroBgMobileAlt || undefined}
          backgroundImageDesktopAlt={heroBgDesktopAlt || undefined}
        />
        <BackgroundGradients count={REGISTER_ZIGZAG_COUNT} />
        <div className="md:flex xl:gap-30 lg:gap-10 sm:gap-5 space-y-5 md:space-y-0 justify-center items-center mb-[50px] xl:mb-[70px]">
          <SignupComponent data={registerData} />
          <LoginComponent />
        </div>
        <Footer />
      </main>
    </>
  );
}