import { Metadata, Viewport } from "next";
import "./globals.css";
import { ReactQueryProvider } from "@/features/providers/ReactQueryProvider";
import { notFound } from "next/navigation";
import i18nConfig from "../../i18nConfig";
import initTranslations from '@/lib/i18n';
import TranslationsProvider from "@/components/utils/TranslationsProdiver";
import ToastContainer from "@/components/Toast";

export const metadata: Metadata = {
  title: 'Dashboard',
  description: 'Webapp dashboard',
  manifest: '/manifest.json',
}

export const viewport: Viewport = {
  themeColor: '#F4F5F9',
  width: 'device-width',
  initialScale: 1,
  maximumScale: 1,
  minimumScale: 1,
  userScalable: false,
}

const i18nNamespaces = ['settings', 'common', 'menu', 'orders', 'auth', "rating", "chat", "notifications", 'parallels'];

export default async function RootLayout({
  children,
}: Readonly<{
  children: React.ReactNode;
}>) {
  const locale = "fa";
  if (!i18nConfig.locales.includes(locale)) {
    notFound();
  }
  const { resources } = await initTranslations(locale, i18nNamespaces);

  return (

    <html
      lang='fa'
      dir='rtl'
      className="h-svh overflow-hidden"
      data-theme="light" >
      <head>
        <script
          dangerouslySetInnerHTML={{
            __html: `
              (function() {
                try {
                  const savedColor = localStorage.getItem('theme-primary-color');
                  if (savedColor) {
                    const hex = savedColor.replace('#', '');
                    const r = parseInt(hex.substring(0, 2), 16) / 255;
                    const g = parseInt(hex.substring(2, 4), 16) / 255;
                    const b = parseInt(hex.substring(4, 6), 16) / 255;
                    
                    const lightness = 0.2126 * r + 0.7152 * g + 0.0722 * b;
                    const max = Math.max(r, g, b);
                    const min = Math.min(r, g, b);
                    const chroma = (max - min) * 0.15;
                    
                    let hue = 0;
                    if (chroma !== 0) {
                      if (max === r) {
                        hue = ((g - b) / (max - min) + (g < b ? 6 : 0)) * 60;
                      } else if (max === g) {
                        hue = ((b - r) / (max - min) + 2) * 60;
                      } else {
                        hue = ((r - g) / (max - min) + 4) * 60;
                      }
                    }
                    
                    const oklchColor = 'oklch(' + lightness.toFixed(3) + ' ' + chroma.toFixed(3) + ' ' + hue.toFixed(1) + ')';
                    document.documentElement.style.setProperty('--primary', oklchColor);
                    
                    const brightness = (r * 299 + g * 587 + b * 114) / 1000;
                    const foregroundOklch = brightness > 0.5 ? 'oklch(0 0 0)' : 'oklch(1 0 0)';
                    document.documentElement.style.setProperty('--primary-foreground', foregroundOklch);
                  }
                } catch (e) {}
              })();
            `,
          }}
        />
      </head>
      <body

        className={`antialiased bg-background h-svh overflow-hidden`}
      >
        <ReactQueryProvider>
          <TranslationsProvider
            namespaces={i18nNamespaces}
            locale={locale}
            resources={resources}>
            <div id="root" className="h-svh overflow-hidden">
              {children}
            </div>
          </TranslationsProvider>
          <ToastContainer />
        </ReactQueryProvider>
      </body>
    </html >
  );
}
