import type { Metadata, Viewport } from "next";
import { Inter } from "next/font/google";
import "./globals.css";
import { Toaster } from "@/components/ui/toast";
import { SessionProviderWrapper } from "@/components/session-provider-wrapper";
import { getAISettings } from "@/app/actions/ai-settings";
import { getUserSettings } from "@/app/actions/user-settings";
import { ThemeInitializer } from "@/components/theme-initializer";
import { DirectionInitializer } from "@/components/direction-initializer";
import { ErrorReporter } from "@/components/error-reporter";
import { auth } from "@/auth";

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

export const metadata: Metadata = {
  title: "Memento - Your Digital Notepad",
  description: "A beautiful note-taking app 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: "#3A7CA5",
};

function getHtmlClass(theme?: string): string {
  if (theme === 'dark') return 'dark';
  if (theme === 'midnight') return 'dark';
  return '';
}

/**
 * Inline script that runs BEFORE React hydrates.
 * Reads the user's saved language from localStorage and sets
 * `dir` on <html> immediately — prevents RTL/LTR flash.
 */
const directionScript = `
(function(){
  try {
    var lang = localStorage.getItem('user-language');
    if (lang === 'fa' || lang === 'ar') {
      document.documentElement.dir = 'rtl';
      document.documentElement.lang = lang;
    }
  } catch(e) {}
})();
`;

export default async function RootLayout({
  children,
}: Readonly<{
  children: React.ReactNode;
}>) {
  const session = await auth();
  const userId = session?.user?.id;

  const [aiSettings, userSettings] = await Promise.all([
    getAISettings(userId),
    getUserSettings(userId),
  ])

  return (
    <html suppressHydrationWarning className={getHtmlClass(userSettings.theme)}>
      <head>
        <script dangerouslySetInnerHTML={{ __html: `if('serviceWorker' in navigator){navigator.serviceWorker.getRegistrations().then(function(rs){rs.forEach(function(r){r.unregister()})})}` }} />
      </head>
      <body className={inter.className}>
        <SessionProviderWrapper>
          <ErrorReporter />
          <DirectionInitializer />
          <ThemeInitializer theme={userSettings.theme} fontSize={aiSettings.fontSize} />
          {children}
          <Toaster />
        </SessionProviderWrapper>
      </body>
    </html>
  );
}
