import type { Metadata } from "next";
import Script from "next/script";
import "bootstrap/dist/css/bootstrap.min.css";
import "./globals.css";
import { AppShell } from "../frontend/components/AppShell";

export const metadata: Metadata = {
  title: "Leistungsbilanz",
  description: "Leistungsbilanz für elektrische Verbraucher und Stromkreislisten",
};

// Keep this key literal in sync with THEME_STORAGE_KEY in ThemeToggle.tsx.
// It must stay inline (not imported) so it runs before hydration and never
// flashes the wrong theme on load.
const THEME_INIT_SCRIPT = `
(function () {
  try {
    var stored = localStorage.getItem("leistungsbilanz:theme");
    var theme =
      stored === "dark" || stored === "light"
        ? stored
        : window.matchMedia("(prefers-color-scheme: dark)").matches
          ? "dark"
          : "light";
    document.documentElement.setAttribute("data-bs-theme", theme);
  } catch (error) {
    // Storage/matchMedia unavailable: fall back to the default light theme.
  }
})();
`;

export default function RootLayout({ children }: Readonly<{ children: React.ReactNode }>) {
  return (
    <html lang="de" suppressHydrationWarning>
      <body>
        <Script id="theme-init" strategy="beforeInteractive">
          {THEME_INIT_SCRIPT}
        </Script>
        <AppShell>{children}</AppShell>
      </body>
    </html>
  );
}