import type { Metadata } from 'next';
import { Geist, Geist_Mono } from 'next/font/google';
import '@/styles/globals.css';
import { ConvexAuthNextjsServerProvider } from '@convex-dev/auth/nextjs/server';
import {
  ConvexClientProvider,
  LunchReminder,
  NotificationsPermission,
  ThemeProvider,
  TVModeProvider,
} from '@/components/providers';
import PlausibleProvider from 'next-plausible';
import { generateMetadata } from '@/lib/metadata';
import { Toaster } from '@/components/ui';
import Header from '@/components/layout/header';

const geistSans = Geist({
  variable: '--font-geist-sans',
  subsets: ['latin'],
});
const geistMono = Geist_Mono({
  variable: '--font-geist-mono',
  subsets: ['latin'],
});
export const metadata: Metadata = generateMetadata();

const RootLayout = async ({
  children,
}: Readonly<{
  children: React.ReactNode;
}>) => {
  return (
    <ConvexAuthNextjsServerProvider>
      <PlausibleProvider
        domain='techtracker.gbrown.org'
        customDomain='https://plausible.gbrown.org'
      >
        <html lang='en'>
          <body
            className={`${geistSans.variable} ${geistMono.variable} antialiased`}
          >
            <ThemeProvider
              attribute='class'
              defaultTheme='system'
              enableSystem
              disableTransitionOnChange
            >
              <ConvexClientProvider>
                <TVModeProvider>
                  <Header />
                  {children}
                  <Toaster />
                  <NotificationsPermission />
                  <LunchReminder />
                </TVModeProvider>
              </ConvexClientProvider>
            </ThemeProvider>
          </body>
        </html>
      </PlausibleProvider>
    </ConvexAuthNextjsServerProvider>
  );
};
export default RootLayout;
