import type { Metadata, Viewport } from "next";
import { Geist } from "next/font/google";
import "./globals.css";
import GlobalUserBadge from "@/components/GlobalUserBadge";

import PageTransition from "@/components/PageTransition";
import ToastProvider from "@/components/ToastProvider";

const geistSans = Geist({
  variable: "--font-geist-sans",
  subsets: ["latin"],
});

export const metadata: Metadata = {
  metadataBase: new URL(process.env.NEXT_PUBLIC_BASE_URL || "https://nowhatever.app"),
  title: "NoWhatever — 别说随便",
  description: "像 Tinder 一样滑卡片，和朋友一起决定去哪吃！",
  referrer: "no-referrer",
  openGraph: {
    title: "NoWhatever — 别说随便",
    description: "像 Tinder 一样滑卡片，和朋友一起决定去哪吃！",
    images: [{ url: "/og-image.png", width: 1200, height: 630 }],
  },
  twitter: {
    card: "summary_large_image",
    title: "NoWhatever — 别说随便",
    description: "像 Tinder 一样滑卡片，和朋友一起决定去哪吃！",
    images: ["/og-image.png"],
  },
};

export const viewport: Viewport = {
  width: "device-width",
  initialScale: 1,
  maximumScale: 1,
  userScalable: false,
  viewportFit: "cover",
  themeColor: "#10b981",
};

const themeScript = `(function(){try{var t=localStorage.getItem("nowhatever-theme")||"system";var r=t;if(t==="system")r=window.matchMedia("(prefers-color-scheme:light)").matches?"light":"dark";document.documentElement.setAttribute("data-theme",r)}catch(e){}})()`;

export default function RootLayout({
  children,
}: Readonly<{
  children: React.ReactNode;
}>) {
  return (
    <html lang="zh-CN" suppressHydrationWarning>
      <head>
        <script dangerouslySetInnerHTML={{ __html: themeScript }} />
        <link rel="apple-touch-icon" href="/apple-touch-icon.png" />
      </head>
      <body className={`${geistSans.variable} font-sans antialiased`}>
        <ToastProvider>
          <PageTransition>{children}</PageTransition>
          <GlobalUserBadge />
        </ToastProvider>
      </body>
    </html>
  );
}
