import type { Metadata } from "next";
import { Inter, Noto_Sans_Arabic } from "next/font/google";
import { headers } from "next/headers";
import "./globals.css";
import { cn } from "@/lib/utils";
import { TooltipProvider } from "@/components/ui/tooltip";
import { Toaster } from "@/components/ui/sonner";
import { QueryProvider } from "@/lib/api/query-provider";
import { I18nProvider } from "@/lib/i18n/provider";
import { getLanguageFromHeaders } from "@/lib/i18n/cookie";
import {
  DEFAULT_LANGUAGE,
  SUPPORTED_LANGUAGES,
  type Language,
} from "@/lib/i18n/config";

const inter = Inter({ subsets: ["latin"], variable: "--font-inter" });

const notoSansArabic = Noto_Sans_Arabic({
  subsets: ["arabic"],
  variable: "--font-noto-sans-arabic",
});

export const metadata: Metadata = {
  title: "Washy",
  description: "Washy App",
  manifest: "/manifest.json",
  appleWebApp: {
    capable: true,
    statusBarStyle: "default",
    title: "Washy",
  },
  formatDetection: {
    telephone: false,
  },
};

export default async function RootLayout({
  children,
}: Readonly<{
  children: React.ReactNode;
}>) {
  const headersList = await headers();
  const languageHeader = getLanguageFromHeaders(headersList);

  const language: Language = SUPPORTED_LANGUAGES.includes(
    languageHeader as Language,
  )
    ? (languageHeader as Language)
    : DEFAULT_LANGUAGE;

  return (
    <html
      lang={language}
      dir={language === "ar" ? "rtl" : "ltr"}
      className={cn(
        "h-full",
        "antialiased",
        "font-sans",
        inter.variable,
        notoSansArabic.variable,
      )}
    >
      <head>
        <meta name="mobile-web-app-capable" content="yes" />
        <meta name="apple-mobile-web-app-capable" content="yes" />
        <meta name="apple-mobile-web-app-status-bar-style" content="default" />
        <meta name="apple-mobile-web-app-title" content="Washy" />
        <meta name="theme-color" content="#ffffff" />
        <link rel="apple-touch-icon" href="/icon/icon-192x192.png" />
      </head>
      <body className="min-h-full flex flex-col">
        <QueryProvider>
          <I18nProvider initialLanguage={language}>
            <TooltipProvider>{children}</TooltipProvider>
            <Toaster />
          </I18nProvider>
        </QueryProvider>
      </body>
    </html>
  );
}
