import AuthProvider from "@/context/AuthProvider";

import Favicons from "@/components/common/Favicon";
import SettingContextProvider from "@/context/SettingProvider";
import TanstackProvider from "@/context/TanstackProvider";
import { getPublicData } from "@/utils/fetch";
import { Flowbite, ThemeModeScript } from "flowbite-react";
import type { Metadata } from "next";
import { Inter } from "next/font/google";
import { headers } from "next/headers";
import { type PropsWithChildren } from "react";
import { ToastContainer } from "react-toastify";
import { twMerge } from "tailwind-merge";
import Clarity from "./clarity";
import "./globals.css";
import { customTheme } from "./theme";
const inter = Inter({ subsets: ["latin"], display: "swap" });

export async function fetchHostName() {
  const requestHeaders = headers();
  let host = requestHeaders.get("x-forwarded-host");
  if (!host) {
    host = requestHeaders.get("host");
  }
  if (host?.includes(":")) {
    host = host.split(":")[0];
  }
  return host;
}

async function getCompany() {
  let host = await fetchHostName();
  const data = await getPublicData(`/api/company-data?host=${host}`);
  return data?.data ?? [];
}

export async function generateMetadata(): Promise<Metadata> {
  const settings = await getCompany();

  return {
    title: {
      template: `%s | ${settings?.name ?? "ISP Management"}`,
      default: settings?.name ?? "ISP Management",
    },
    description: settings?.address ?? "Total ISP management company",
  };
}

export default async function RootLayout({ children }: PropsWithChildren) {
  let host = await fetchHostName();
  const settings = await getCompany();
  return (
    <html lang="en" data-domain={host}>
      <head>
        <link
          href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap"
          rel="stylesheet preload"
          type="text/css"
          as="style"
        />
        <Favicons favicon={settings?.favicon} />
        <ThemeModeScript />
      </head>
      <body className={twMerge("bg-gray-50 dark:bg-gray-900", inter.className)}>
        <Flowbite theme={{ theme: customTheme }}>
          <AuthProvider>
            <TanstackProvider>
              <SettingContextProvider settings={settings}>
                {children}
                <Clarity />
                <ToastContainer
                  position="bottom-right"
                  pauseOnFocusLoss={false}
                  pauseOnHover={false}
                />
              </SettingContextProvider>
            </TanstackProvider>
          </AuthProvider>
        </Flowbite>
      </body>
    </html>
  );
}
