import type { Metadata, Viewport } from "next";
import Script from "next/script";
import "./globals.css";
import { GlobalIncomingCallWatcher } from "../components/GlobalIncomingCallWatcher";
import { FlashToastHost } from "../components/FlashToastHost";
import { RealtimeProvider } from "../components/RealtimeProvider";

const basePath = process.env.NEXT_PUBLIC_BASE_PATH || "";

export const metadata: Metadata = {
  title: "connectHUB",
  description: "Team chat, calls, and collaboration — clear, calm, and connected.",
  manifest: `${basePath}/manifest.json`,
};

export const viewport: Viewport = {
  themeColor: "#5b5ce6",
};

export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    // suppressHydrationWarning: extensions + font/link injection often tweak
    // <html>/<body> before React hydrates (React minified error #418).
    <html lang="en" suppressHydrationWarning>
      <head>
        <link rel="preconnect" href="https://fonts.googleapis.com" />
        <link rel="preconnect" href="https://fonts.gstatic.com" crossOrigin="anonymous" />
        <link
          rel="stylesheet"
          href="https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,400;0,14..32,500;0,14..32,600;0,14..32,700;1,14..32,400;1,14..32,500&display=swap"
        />
        {/* Must run before client JS so getApiUrl()/getGatewayUrl() see production hosts. */}
        <Script src={`${basePath}/runtime-config.js`} strategy="beforeInteractive" />
      </head>
      <body suppressHydrationWarning style={{ background: "#f7f8fa" }}>
        <RealtimeProvider>
          {children}
          <GlobalIncomingCallWatcher />
          <FlashToastHost />
        </RealtimeProvider>
        <script
          dangerouslySetInnerHTML={{
            __html: `(function(){var h=location.hostname;var tauri=h==='tauri.localhost'||location.protocol==='tauri:'||'__TAURI_INTERNALS__' in window;if(!tauri&&'serviceWorker' in navigator){window.addEventListener('load',function(){navigator.serviceWorker.register('${basePath}/sw.js');});}})();`,
          }}
        />
      </body>
    </html>
  );
}
