import { PwaRegister } from "@/components/pwa/pwa-register";
import { getAppMetadata } from "@/lib/site-metadata";
import type { Metadata, Viewport } from "next";
import { getLocale } from "next-intl/server";
import "./[locale]/globals.css";

export async function generateMetadata(): Promise<Metadata> {
  return getAppMetadata();
}

export const viewport: Viewport = {
  themeColor: "#0f172a",
};

export default async function RootLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  const locale = await getLocale();
  const dir = locale === "ar" ? "rtl" : "ltr";

  return (
    <html lang={locale} dir={dir} suppressHydrationWarning>
      <head>
        {/* Google Fonts - Almarai & Inter */}
        <link rel="preconnect" href="https://fonts.googleapis.com" />
        <link rel="preconnect" href="https://fonts.gstatic.com" crossOrigin="anonymous" />
        <link
          href="https://fonts.googleapis.com/css2?family=Almarai:wght@300;400;700;800&family=Inter:wght@100..900&display=swap"
          rel="stylesheet"
        />
        {/* Blocking script to apply colors from localStorage before hydration */}
        <script
          dangerouslySetInnerHTML={{
            __html: `
              (function() {
                try {
                  var root = document.documentElement;
                  var primaryColor = localStorage.getItem('dashboard_primary_color');
                  var secondaryColor = localStorage.getItem('dashboard_secondary_color');
                  var logoUrl = localStorage.getItem('dashboard_logo');

                  if (primaryColor) {
                    root.style.setProperty('--primary', primaryColor);
                    root.style.setProperty('--accent', primaryColor);
                    root.style.setProperty('--sidebar-primary', primaryColor);
                    root.style.setProperty('--sidebar-ring', primaryColor);
                    root.style.setProperty('--ring', primaryColor);
                    root.style.setProperty('--chart-1', primaryColor);
                  }

                  if (secondaryColor) {
                    root.style.setProperty('--secondary', secondaryColor);
                    root.style.setProperty('--sidebar', secondaryColor);
                    root.style.setProperty('--sidebar-accent', secondaryColor);
                  }

                  // Preload cached logo so it's ready before sidebar mounts
                  if (logoUrl) {
                    var link = document.createElement('link');
                    link.rel = 'preload';
                    link.as = 'image';
                    link.href = logoUrl;
                    document.head.appendChild(link);
                  }
                } catch (e) {}
              })();
            `,
          }}
        />
      </head>
      <body className="antialiased">
        <PwaRegister />
        {children}
      </body>
    </html>
  );
}
