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

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

function getLoginSeoMeta(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 LoginPage() {

  const [pageData, setPageData] = useState<any>(null);
  const [registerPageData, setRegisterPageData] = useState<any>(null);
  const [cmsLoading, setCmsLoading] = useState(true);
  const [seo, setSeo] = useState<SeoMeta>({
    title: "Biomket",
    description: "Biomket marketplace",
    keywords: [],
  });

  useEffect(() => {
    let isMounted = true;
    let loadSeq = 0;

    const loadCms = async () => {
      const seq = ++loadSeq;
      setCmsLoading(true);
      try {
        const base = process.env.NEXT_PUBLIC_MEDUSA_BACKEND_URL;
        if (!base) return;
        const xMedusaLocale = (getStoredLocaleRaw() ?? getStoredLocale()).trim();
        const headers = {
          "x-publishable-api-key": process.env.NEXT_PUBLIC_MEDUSA_PUBLISHABLE_API_KEY || "",
          "x-medusa-locale": xMedusaLocale,
        };
        const [resLogin, resRegister] = await Promise.all([
          fetch(`${base}/store/pages/login`, {
            method: "GET",
            headers,
            cache: "no-store",
          }),
          fetch(`${base}/store/pages/register`, {
            method: "GET",
            headers,
            cache: "no-store",
          }),
        ]);
        if (!isMounted || seq !== loadSeq) return;
        if (resLogin.ok) {
          const loginPageJson = await resLogin.json();
          if (!isMounted || seq !== loadSeq) return;
          setPageData(loginPageJson);
          setSeo(getLoginSeoMeta(loginPageJson));
        }
        if (resRegister.ok) {
          const registerJson = await resRegister.json();
          if (!isMounted || seq !== loadSeq) return;
          setRegisterPageData(registerJson);
        }
      } catch {
      } finally {
        if (isMounted && seq === loadSeq) setCmsLoading(false);
      }
    };

    loadCms();

    const onLocaleChange = () => {
      void loadCms();
    };
    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 regsections = registerPageData?.page?.sections ?? [];
  const findRegisterSectionData = (...keys: string[]) => {
    const section = regsections.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 = findRegisterSectionData("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 (cmsLoading) {
    return <PageLoading />;
  }

  return (
    <>
      <main className="px-[20px] md:px-[40px] xl:px-[60px]">
        <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={LOGIN_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]">
          <LoginComponent />
          <SignupComponent data={registerData} />
        </div>

        <Footer />
      </main>
    </>
  );
}