import type { Metadata, Viewport } from "next";
import { Inter, JetBrains_Mono } from "next/font/google";
import "./globals.css";
import { ThemeProvider } from "@/components/providers/ThemeProvider";
import { QueryProvider } from "@/providers/QueryProvider";
import { RegistryProvider } from "./registry-provider";
import { Toaster } from "@/components/ui/sonner";

const inter = Inter({
  subsets: ["latin"],
  variable: "--font-inter",
  display: "swap",
});

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

export const metadata: Metadata = {
  title: "WACE 솔루션 - WACE",
  description: "제품 수명 주기 관리(PLM) 솔루션",
  keywords: ["WACE", "PLM", "Product Lifecycle Management", "WACE", "제품관리"],
  authors: [{ name: "WACE" }],
  icons: {
    icon: "/favicon.ico",
  },
};

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

export default function RootLayout({
  children,
}: Readonly<{
  children: React.ReactNode;
}>) {
  return (
    <html lang="ko" className="h-full" suppressHydrationWarning>
      <body className={`${inter.variable} ${jetbrainsMono.variable} bg-background h-full font-sans antialiased`}>
        <div id="root" className="h-full">
          <ThemeProvider>
            <QueryProvider>
              <RegistryProvider>{children}</RegistryProvider>
              <Toaster />
            </QueryProvider>
          </ThemeProvider>
          {/* Portal 컨테이너 */}
          <div id="portal-root" data-radix-portal="true" />
        </div>
      </body>
    </html>
  );
}
