import type { Metadata, Viewport } from "next";
import { GeistSans } from "geist/font/sans";
import { GeistMono } from "geist/font/mono";
import { ThemeProvider } from "next-themes";
import { APP_URL } from "@/lib/env";
import { Toaster } from "@/components/ui/toast";
import { TooltipProvider } from "@/components/ui/tooltip";
import "./globals.css";

export const metadata: Metadata = {
  metadataBase: new URL(APP_URL),
  title: { default: "PolyLLM — One interface. Every model.", template: "%s · PolyLLM" },
  description:
    "PolyLLM is a universal control center for AI models. Bring your own API keys for OpenAI, Anthropic, Gemini and xAI, discover the latest models, configure them precisely and chat through one premium interface.",
  applicationName: "PolyLLM",
  keywords: ["LLM", "AI chat", "BYOK", "OpenAI", "Anthropic", "Gemini", "xAI", "Grok", "Claude", "GPT", "model comparison", "arena"],
  openGraph: {
    type: "website",
    siteName: "PolyLLM",
    title: "PolyLLM — Your models. Your keys. One workspace.",
    description: "A universal control center for AI models. Bring your own keys.",
    url: APP_URL,
    images: [{ url: "/og.png", width: 1200, height: 630, alt: "PolyLLM" }],
  },
  twitter: { card: "summary_large_image", title: "PolyLLM", description: "One interface. Every model. Bring your own keys." },
  icons: { icon: [{ url: "/icon.svg", type: "image/svg+xml" }], apple: "/apple-icon.png" },
  robots: { index: true, follow: true },
};

export const viewport: Viewport = {
  themeColor: [
    { media: "(prefers-color-scheme: light)", color: "#fafaf9" },
    { media: "(prefers-color-scheme: dark)", color: "#0b0c10" },
  ],
  width: "device-width",
  initialScale: 1,
  viewportFit: "cover",
};

export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <html lang="en" suppressHydrationWarning className={`${GeistSans.variable} ${GeistMono.variable}`}>
      <body className="min-h-dvh bg-bg text-fg antialiased">
        <ThemeProvider attribute="class" defaultTheme="system" enableSystem disableTransitionOnChange>
          <TooltipProvider delayDuration={250}>
            {children}
            <Toaster />
          </TooltipProvider>
        </ThemeProvider>
      </body>
    </html>
  );
}