import type { Metadata } from "next";
import { Manrope, Fraunces, JetBrains_Mono, Newsreader } from "next/font/google";
import "./globals.css";
import { loadActiveSkin } from "@/lib/theme";

const manrope = Manrope({
  subsets: ["vietnamese", "latin"],
  weight: ["400", "500", "600", "700"],
  variable: "--font-manrope",
  display: "swap",
});

const fraunces = Fraunces({
  subsets: ["latin"],
  weight: "variable",
  style: ["normal", "italic"],
  variable: "--font-fraunces",
  display: "swap",
  axes: ["opsz", "SOFT", "WONK"],
});

const newsreader = Newsreader({
  subsets: ["vietnamese", "latin"],
  weight: ["400", "500", "600", "700"],
  style: ["normal", "italic"],
  variable: "--font-newsreader",
  display: "swap",
});

const jetbrains = JetBrains_Mono({
  subsets: ["latin"],
  weight: ["400", "500"],
  variable: "--font-jetbrains-mono",
  display: "swap",
});

export const metadata: Metadata = {
  metadataBase: new URL(process.env.NEXT_PUBLIC_SITE_URL ?? "https://new.finzone.io.vn"),
  title: {
    default: "Finzone Network — Trang tin tài chính kinh tế",
    template: "%s | Finzone Network",
  },
  description:
    "Trang tin tài chính kinh tế cho nhà đầu tư Việt Nam. Crypto, chứng khoán, vàng, forex và phân tích chuyên sâu.",
  alternates: { canonical: "/" },
  openGraph: {
    type: "website",
    locale: "vi_VN",
    siteName: "Finzone Network",
  },
  robots: { index: true, follow: true },
};

export default async function RootLayout({ children }: { children: React.ReactNode }) {
  const skin = await loadActiveSkin();
  return (
    <html
      lang="vi"
      data-skin={skin}
      data-theme="dark"
      suppressHydrationWarning
      className={`${manrope.variable} ${fraunces.variable} ${newsreader.variable} ${jetbrains.variable}`}
    >
      <head>
        <script
          dangerouslySetInnerHTML={{
            __html: `(function(){try{var t=localStorage.getItem('finzone-theme');if(!t){t='dark';}document.documentElement.setAttribute('data-theme',t);}catch(e){document.documentElement.setAttribute('data-theme','dark');}})();`,
          }}
        />
      </head>
      <body>
        <a
          href="#main"
          className="sr-only focus:not-sr-only focus:absolute focus:top-3 focus:left-3 focus:z-[100] focus:px-4 focus:py-2 focus:rounded focus:bg-[var(--accent)] focus:text-white focus:font-semibold focus:text-sm"
        >
          Bỏ qua tới nội dung
        </a>
        {children}
      </body>
    </html>
  );
}
