import type { Metadata, Viewport } from "next";
import { Inter, JetBrains_Mono } from "next/font/google";
import "./globals.css";

// BoardUI's theme reads --font-inter (sans) and --font-mono-source (mono).
const inter = Inter({ variable: "--font-inter", subsets: ["latin"], axes: ["opsz"] });
const jetbrainsMono = JetBrains_Mono({ variable: "--font-mono-source", subsets: ["latin"] });

export const metadata: Metadata = {
  // Pages set just their own name ("Recipes"); the template adds the app name.
  title: { default: "Plan my Meals: Budget Meal Planner", template: "%s · Plan my Meals" },
  description: "Plan a week of meals around your grocery budget and the appliances you actually own.",
};

export const viewport: Viewport = {
  themeColor: [
    { media: "(prefers-color-scheme: light)", color: "#ffffff" },
    { media: "(prefers-color-scheme: dark)", color: "#0d1219" },
  ],
};

// Runs before paint so the BoardUI `.dark` class is set without a flash. Carries over the
// pre-BoardUI "plan-my-meals:theme" choice once so returning users keep their theme.
const THEME_INIT_SCRIPT = `(function(){try{var s=localStorage,t=s.getItem("boardui:theme");if(!t){t=s.getItem("plan-my-meals:theme");if(t)s.setItem("boardui:theme",t);}if(t==="dark")document.documentElement.classList.add("dark");}catch(e){}})();`;

export default function RootLayout({ children }: LayoutProps<"/">) {
  return (
    <html lang="en" suppressHydrationWarning className={`${inter.variable} ${jetbrainsMono.variable} antialiased`}>
      <head>
        <script dangerouslySetInnerHTML={{ __html: THEME_INIT_SCRIPT }} />
      </head>
      <body className="min-h-dvh bg-background-full font-sans text-text-primary">{children}</body>
    </html>
  );
}