import type { Metadata, Viewport } from "next";
import { Inter } from "next/font/google";
import "./globals.css";
import { QueryClientProvider } from "./providers";
import { Toaster } from "@/components/ui/toaster";
import { ThemeProvider } from "@/components/layout/theme-provider";

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

export const metadata: Metadata = {
  title: {
    default: "AI Software Factory",
    template: "%s — AI Software Factory",
  },
  description: "Notion-like workspace: pages, databases, realtime collaboration.",
};

/**
 * TASK-0128 (mobile behavior, DoD): without this, mobile browsers render the
 * app at a 640px layout viewport zoomed out to the device width — the
 * `sm:`/`md:` breakpoints and the product's "Mobile < 640 px" rules
 * (docs/product/ux-requirements.md, Mobile row) were silently inoperative on
 * real devices, and the mobile E2E project (375px visual viewport) hit
 * layout/visual-viewport coordinate desyncs (Playwright hit-tests resolving
 * onto the wrong element). `device-width` makes the layout viewport track
 * the device, so responsive rules apply as designed.
 */
export const viewport: Viewport = {
  width: "device-width",
  initialScale: 1,
};

/**
 * Root layout (server component). Providers live in ./providers (a client
 * component boundary) so the QueryClient instance never leaks across SSR
 * requests.
 */
export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <html lang="en" suppressHydrationWarning className={inter.variable}>
      <body className="min-h-screen bg-background font-sans text-foreground antialiased">
        <QueryClientProvider>
          <ThemeProvider>
            {children}
            <Toaster />
          </ThemeProvider>
        </QueryClientProvider>
      </body>
    </html>
  );
}