import type { Metadata } from "next";
import { Noto_Sans_TC } from "next/font/google";
import { ThemeProvider } from "@/components/theme-provider";
import { BRAND_ASSETS, BRAND_FULL_TITLE, BRAND_NAME } from "@/lib/brand";
import { DEFAULT_THEME } from "@/lib/theme";
import "./globals.css";

const notoSansTc = Noto_Sans_TC({
  weight: ["400", "500", "600", "700"],
  subsets: ["latin"],
  variable: "--font-readable",
  display: "swap",
  preload: true,
});

const themeInitScript = `(function(){try{var k="xunlou-theme";var t=localStorage.getItem(k);var m=t==="light"||t==="dark"?t:"${DEFAULT_THEME}";document.documentElement.setAttribute("data-theme",m);document.documentElement.style.colorScheme=m;}catch(e){document.documentElement.setAttribute("data-theme","${DEFAULT_THEME}");}})();`;

export const viewport = {
  width: "device-width",
  initialScale: 1,
  viewportFit: "cover",
};

export const metadata: Metadata = {
  title: BRAND_FULL_TITLE,
  description: `${BRAND_NAME}：Threads AI 經營工作台`,
  icons: {
    icon: BRAND_ASSETS.logo,
    apple: BRAND_ASSETS.logo,
  },
};

export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <html lang="zh-Hant" className={notoSansTc.variable} suppressHydrationWarning>
      <head>
        <script dangerouslySetInnerHTML={{ __html: themeInitScript }} />
      </head>
      <body>
        <ThemeProvider>{children}</ThemeProvider>
      </body>
    </html>
  );
}