import type { Metadata, Viewport } from "next";
import { Inter } from "next/font/google";
import "./globals.css";
import { Toaster } from "@/components/ui/toast";
import { LabelProvider } from "@/context/LabelContext";
import { NoteRefreshProvider } from "@/context/NoteRefreshContext";
import { SessionProviderWrapper } from "@/components/session-provider-wrapper";
import { LanguageProvider } from "@/lib/i18n/LanguageProvider";
import { detectUserLanguage } from "@/lib/i18n/detect-user-language";
import { NotebooksProvider } from "@/context/notebooks-context";
import { NotebookDragProvider } from "@/context/notebook-drag-context";

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

export const metadata: Metadata = {
  title: "Memento - Your Digital Notepad",
  description: "A beautiful note-taking app inspired by Google Keep, built with Next.js 16",
  manifest: "/manifest.json",
  icons: {
    icon: "/icons/icon-512.svg",
    apple: "/icons/icon-512.svg",
  },
  appleWebApp: {
    capable: true,
    statusBarStyle: "default",
    title: "Memento",
  },
};

export const viewport: Viewport = {
  themeColor: "#f59e0b",
};

export const dynamic = "force-dynamic";

export default async function RootLayout({
  children,
}: Readonly<{
  children: React.ReactNode;
}>) {
  // Detect initial language for user
  const initialLanguage = await detectUserLanguage()

  return (
    <html lang={initialLanguage} suppressHydrationWarning>
      <body className={inter.className}>
        <SessionProviderWrapper>
          <NoteRefreshProvider>
            <LabelProvider>
              <NotebooksProvider>
                <NotebookDragProvider>
                  <LanguageProvider initialLanguage={initialLanguage}>
                    {children}
                  </LanguageProvider>
                </NotebookDragProvider>
              </NotebooksProvider>
            </LabelProvider>
          </NoteRefreshProvider>
          <Toaster />
        </SessionProviderWrapper>
      </body>
    </html>
  );
}
