export const dynamic = 'force-dynamic';

import type { Metadata, Viewport } from 'next';
import { Roboto } from 'next/font/google';
import './globals.css';
import { cn } from '@/lib/utils';
import Sidebar from '@/components/Sidebar';
import { Toaster } from 'sonner';
import ThemeProvider from '@/components/theme/Provider';
import { LocalizationProvider } from '@/lib/localization/context';
import { ChatProvider } from '@/lib/hooks/useChat';
import { ClientOnly } from '@/components/ClientOnly';
import GuestWarningBanner from '@/components/GuestWarningBanner';
import GuestMigration from '@/components/GuestMigration';

const roboto = Roboto({
  weight: ['300', '400', '500', '700'],
  subsets: ['latin'],
  display: 'swap',
  fallback: ['Arial', 'sans-serif'],
});

const APP_NAME = 'GooSeek';
const APP_DEFAULT_TITLE = 'GooSeek - Chat with the internet';
const APP_DESCRIPTION =
  'GooSeek is an AI powered chatbot that is connected to the internet.';

export const metadata: Metadata = {
  applicationName: APP_NAME,
  title: {
    default: APP_DEFAULT_TITLE,
    template: `%s - ${APP_NAME}`,
  },
  description: APP_DESCRIPTION,
  manifest: '/manifest.webmanifest',
  appleWebApp: {
    capable: true,
    statusBarStyle: 'default',
    title: APP_DEFAULT_TITLE,
  },
  formatDetection: {
    telephone: false,
  },
  openGraph: {
    type: 'website',
    siteName: APP_NAME,
    title: { default: APP_DEFAULT_TITLE, template: `%s - ${APP_NAME}` },
    description: APP_DESCRIPTION,
  },
  twitter: {
    card: 'summary',
    title: { default: APP_DEFAULT_TITLE, template: `%s - ${APP_NAME}` },
    description: APP_DESCRIPTION,
  },
};

export const viewport: Viewport = {
  themeColor: '#0a0a0a',
};

export default async function RootLayout({
  children,
}: Readonly<{
  children: React.ReactNode;
}>) {
  return (
    <html className="h-full" lang="ru" suppressHydrationWarning>
      <body className={cn('h-full antialiased', roboto.className)}>
        <ThemeProvider>
          <LocalizationProvider>
            <ClientOnly
              fallback={
                <div className="min-h-screen bg-light-primary dark:bg-dark-primary" />
              }
            >
              <ChatProvider>
                <Sidebar>{children}</Sidebar>
                <GuestWarningBanner />
                <GuestMigration />
                <Toaster
                  toastOptions={{
                    unstyled: true,
                    classNames: {
                      toast:
                        'bg-light-secondary dark:bg-dark-secondary dark:text-white/70 text-black/70 rounded-lg p-4 flex flex-row items-center space-x-2',
                    },
                  }}
                />
              </ChatProvider>
            </ClientOnly>
          </LocalizationProvider>
        </ThemeProvider>
      </body>
    </html>
  );
}
