import "swiper/css";
import "remixicon/fonts/remixicon.css";
import "./fonts.css";
import "./globals.css";
import "@/components/logo-intro/logo-intro.css";
import { Metadata } from "next";
import { parseSettings } from "@/utils/parse-settings";
import { cookies } from "next/headers";
import { globalService } from "@/services/global";
import NextTopLoader from "nextjs-toploader";
import { cityService, countryService } from "@/services/country";
import {
  DEFAULT_LANGUAGE_CODE,
  DEFAULT_PRIMARY_BUTTON_FONT_COLOR,
  DEFAULT_PRIMARY_COLOR,
} from "@/config/global";
import { translationService } from "@/services/translation";
import { ReactNode } from "react";
import ThemeProvider from "./theme-provider";
import Providers from "./providers";
import TranslationsProvider from "./translations-provider";
import { ClientOnly } from "@/components/client-only/client-only";
import { LogoIntro } from "@/components/logo-intro/logo-intro";
import { GenderSelect } from "@/components/gender-select/gender-select";
import dynamic from "next/dynamic";
import Script from "next/script";

const CountrySelect = dynamic(() =>
  import("@/components/country-select").then((mod) => mod.CountrySelect)
);
const LanguageSelect = dynamic(() =>
  import("@/components/language-select").then((mod) => mod.LanguageSelect)
);
const CurrencySelect = dynamic(() =>
  import("@/components/currency-select").then((mod) => mod.CurrencySelect)
);

export const generateMetadata = async (): Promise<Metadata> => {
  const settings = await globalService.settings().catch((e) => console.log(e));
  const parsedSettings = parseSettings(settings?.data);
  return {
    metadataBase: new URL(process.env.NEXT_PUBLIC_WEBSITE_URL),
    title: {
      template: `%s | ${parsedSettings.title}`,
      default: parsedSettings.title,
    },
    icons: parsedSettings.favicon,
    description: "ونتو — جریان هوشمند کسب و کار | رزرو آنلاین خدمات سالن زیبایی",
    openGraph: {
      images: [
        {
          url: parsedSettings.logo,
          width: 200,
          height: 200,
        },
      ],
      title: parsedSettings.title,
      description: "ونتو — جریان هوشمند کسب و کار | رزرو آنلاین خدمات سالن زیبایی",
      siteName: parsedSettings.title,
    },
  };
};

const RootLayout = async ({ children }: { children: ReactNode }) => {
  const languages = await globalService.languages().catch((e) => console.log("language error", e));
  const currencies = await globalService
    .currencies()
    .catch((e) => console.log("currency error", e));
  const selectedLocale = (await cookies()).get("lang")?.value || DEFAULT_LANGUAGE_CODE || "fa";
  const selectedDirection = (await cookies()).get("dir")?.value;

  const defaultLanguage = languages?.data?.find((lang) => Boolean(lang?.default));
  const lang = (selectedLocale || defaultLanguage?.locale || DEFAULT_LANGUAGE_CODE) as string;
  const defaultCurrency = currencies?.data?.find((currency) => Boolean(currency?.default));
  const settings = await globalService
    .settings()
    .then((res) => res.data)
    .catch((e) => console.log("settings error", e));
  const parsedSettings = parseSettings(typeof settings === "object" ? settings : []);
  if (process.env.NEXT_PUBLIC_UI_TYPE) {
    parsedSettings.ui_type = process.env.NEXT_PUBLIC_UI_TYPE;
  }
  let defaultCountry;
  if (parsedSettings?.default_country_id?.length) {
    defaultCountry = await countryService
      .get(Number(parsedSettings.default_country_id))
      .then(async (res) => {
        if (parsedSettings?.default_city_id?.length) {
          try {
            const city = await cityService.get(Number(parsedSettings.default_city_id));
            res.data.city = city.data;
          } catch {
            // شهر پیش‌فرض در دیتابیس نیست
          }
        }
        return res.data;
      })
      .catch(() => undefined);
  }
  const translation = await translationService.getAll(lang).catch((error) => {
    console.log(error);
  });

  const primaryColor = parsedSettings?.primary_color || DEFAULT_PRIMARY_COLOR;
  const primaryButtonFontColor =
    parsedSettings?.primary_button_font_color || DEFAULT_PRIMARY_BUTTON_FONT_COLOR;

  const css = `:root {
  --primary: ${primaryColor};
  --primary-button-font-color: ${primaryButtonFontColor};
  }`;

  return (
    <html
      lang={selectedLocale || defaultLanguage?.locale || "fa"}
      dir={selectedDirection || (defaultLanguage?.backward ? "rtl" : "ltr")}
      suppressHydrationWarning
    >
      <head>
        <style>{css}</style>
        <Script src="/runtime-config.js" strategy="beforeInteractive" />
        <script
          dangerouslySetInnerHTML={{
            __html: `try{if(location.pathname==="/")document.documentElement.classList.add("logo-intro-pending")}catch(e){}`,
          }}
        />
      </head>
      <body className="font-vazirmatn" suppressHydrationWarning>
        <div id="portal" />
        <LogoIntro />
        <TranslationsProvider
          locale={lang}
          translation={translation?.data}
          languages={languages?.data}
        >
          <ThemeProvider attribute="class" defaultTheme="light" enableSystem={false}>
            <Providers
              currencies={currencies?.data}
              defaultCurrency={defaultCurrency}
              settings={parsedSettings}
              defaultCountry={defaultCountry}
            >
              {children}
              <ClientOnly>
                <GenderSelect />
                <CountrySelect
                  defaultOpen={(await cookies()).get("showCountryDialog")?.value !== "false"}
                  settings={parsedSettings}
                />
                <LanguageSelect />
                <CurrencySelect />
              </ClientOnly>
            </Providers>
            <ClientOnly>
              <NextTopLoader color="#BB9B6A" showSpinner={false} />
            </ClientOnly>
          </ThemeProvider>
        </TranslationsProvider>
      </body>
    </html>
  );
};

export default RootLayout;
