import { Cairo, Tajawal, Inter } from "next/font/google";
import { NextIntlClientProvider } from "next-intl";
import { getMessages } from "next-intl/server";
import { HeaderBalmy, FooterBalmy } from "@/components/balmy";
import ReduxProvider from "@/store/redux-provider";
import Providers from "@/components/providers";
import AuthInitializer from "@/components/auth/auth-initializer";
import ToTop from "@/components/layout/to-top/to-top";
import WhatsAppIcon from "@/components/layout/whats-app/whats-app-icon";
import { DISABLE_BACKEND_FETCH } from "@/lib/dev-config";
import { SearchProvider } from "@/contexts/search-context";

const cairo = Cairo({
  variable: "--font-cairo",
  subsets: ["arabic", "latin"],
  display: "swap",
  weight: ["400", "500", "600", "700"],
  preload: true,
});

const tajawal = Tajawal({
  variable: "--font-tajawal",
  subsets: ["arabic", "latin"],
  display: "swap",
  weight: ["300", "400", "500", "700", "800"],
  preload: true,
});

const inter = Inter({
  variable: "--font-inter",
  subsets: ["latin"],
  display: "swap",
  weight: ["400", "500", "600", "700"],
  preload: true,
});

const API_URL = process.env.NEXT_PUBLIC_API_URL;

function toAbsoluteUrl(maybeUrl: string | undefined | null) {
  if (!maybeUrl) return undefined;
  if (maybeUrl.startsWith("http://") || maybeUrl.startsWith("https://")) {
    return maybeUrl;
  }
  if (!API_URL) return maybeUrl; // fallback (keeps behavior predictable)
  try {
    return new URL(maybeUrl, API_URL).toString();
  } catch {
    return maybeUrl;
  }
}

export default async function RootLayout({
  children,
  params,
}: Readonly<{
  children: React.ReactNode;
  params: Promise<{ locale: string }>;
}>) {
  const { locale = "ar" } = await params;
  const messages = await getMessages({ locale });

  return (
    <div
      dir={locale === "ar" ? "rtl" : "ltr"}
      className={`${cairo.variable} ${tajawal.variable} ${inter.variable} ${locale === "ar" ? "font-cairo rtl" : "font-inter ltr"} min-h-screen flex flex-col`}
      suppressHydrationWarning
    >
      <ReduxProvider>
        <NextIntlClientProvider locale={locale} messages={messages}>
          <SearchProvider>
            <HeaderBalmy />
            <AuthInitializer />
            <main className="flex-grow">
              <Providers>{children}</Providers>
            </main>
          </SearchProvider>
          <FooterBalmy />
          <ToTop />
          <WhatsAppIcon />
        </NextIntlClientProvider>
      </ReduxProvider>
    </div>
  );
}