import { TanstackQueryInitializer } from '@/context/query-client';
import cn from '@/utils/classnames';
import type { Viewport } from 'next';
import { ThemeProvider } from 'next-themes';
import { Instrument_Serif } from 'next/font/google';
import './styles/globals.css';
import './styles/markdown.scss';
import BrowserInitializer from '@/components/browser-initializer';
import RoutePrefixHandle from '@/components/routePrefixHandle';

export const viewport: Viewport = {
  width: 'device-width',
  initialScale: 1,
  maximumScale: 1,
  viewportFit: 'cover',
  userScalable: false,
};

const instrumentSerif = Instrument_Serif({
  weight: ['400'],
  style: ['normal', 'italic'],
  subsets: ['latin'],
  variable: '--font-instrument-serif',
});

const LocaleLayout = async ({ children }: { children: React.ReactNode }) => {
  const locale = await getLocaleOnServer();

  return (
    <html
      lang={locale ?? 'en'}
      className={cn('h-full', instrumentSerif.variable)}
      suppressHydrationWarning
    >
      <head>
        <link rel="manifest" href="/manifest.json" />
        <meta name="theme-color" content="#1C64F2" />
        <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="Dify" />
        <link rel="apple-touch-icon" href="/apple-touch-icon.png" />
        <link
          rel="icon"
          type="image/png"
          sizes="32x32"
          href="/icon-192x192.png"
        />
        <link
          rel="icon"
          type="image/png"
          sizes="16x16"
          href="/icon-192x192.png"
        />
        <meta name="msapplication-TileColor" content="#1C64F2" />
        <meta name="msapplication-config" content="/browserconfig.xml" />
      </head>
      <body className="color-scheme h-full select-auto" {...datasetMap}>
        <ThemeProvider
          attribute="data-theme"
          defaultTheme="system"
          enableSystem
          disableTransitionOnChange
          enableColorScheme={false}
        >
          <BrowserInitializer>
            <TanstackQueryInitializer>
              <I18nServer>
                <GlobalPublicStoreProvider>
                  {children}
                </GlobalPublicStoreProvider>
              </I18nServer>
            </TanstackQueryInitializer>
          </BrowserInitializer>
        </ThemeProvider>
        <RoutePrefixHandle />
      </body>
    </html>
  );
};

export default LocaleLayout;
