import type { Metadata, Viewport } from "next";
import { headers } from "next/headers";
import { Manrope, Source_Sans_3 } from "next/font/google";
import { TRPCProvider } from "~/lib/trpc/provider.js";
import { ServiceWorkerRegistration } from "~/components/layout/ServiceWorkerRegistration.js";
import { InstallPrompt } from "~/components/layout/InstallPrompt.js";
import "./globals.css";

const uiFont = Source_Sans_3({
  subsets: ["latin"],
  variable: "--font-ui",
  display: "swap",
});

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

export const metadata: Metadata = {
  metadataBase: new URL("https://capakraken.hartmut-noerenberg.com"),
  title: "CapaKraken — Resource & Capacity Planning",
  description: "Interactive resource planning and project staffing tool",
  manifest: "/manifest.json",
  icons: {
    icon: [
      { url: "/favicon.svg", type: "image/svg+xml" },
      { url: "/favicon-32x32.png", sizes: "32x32", type: "image/png" },
      { url: "/favicon-16x16.png", sizes: "16x16", type: "image/png" },
      { url: "/favicon.ico" },
    ],
    apple: [{ url: "/apple-touch-icon.png", sizes: "180x180" }],
  },
  appleWebApp: {
    capable: true,
    statusBarStyle: "default",
    title: "CapaKraken",
  },
  openGraph: {
    title: "CapaKraken — Resource & Capacity Planning",
    description: "Estimates, staffing, chargeability, and timelines in one workspace.",
    images: [{ url: "/og-image.png", width: 1024, height: 1024, alt: "CapaKraken Logo" }],
    type: "website",
  },
  twitter: {
    card: "summary_large_image",
    title: "CapaKraken — Resource & Capacity Planning",
    description: "Estimates, staffing, chargeability, and timelines in one workspace.",
    images: ["/og-image.png"],
  },
};

export const viewport: Viewport = {
  themeColor: "#0284c7",
};

export default async function RootLayout({ children }: { children: React.ReactNode }) {
  const nonce = (await headers()).get("x-nonce") ?? undefined;
  return (
    <html lang="en" suppressHydrationWarning>
      <head>
        <script nonce={nonce} suppressHydrationWarning dangerouslySetInnerHTML={{__html: `
  try {
    var p = JSON.parse(localStorage.getItem('capakraken_theme') || '{}');
    if (p.mode === 'dark') document.documentElement.classList.add('dark');
    if (p.accent) document.documentElement.setAttribute('data-accent', p.accent);
  } catch(e) {}
`}} />
      </head>
      <body className={`${uiFont.variable} ${displayFont.variable} min-h-screen bg-gray-50 font-sans antialiased`}>
        <TRPCProvider>{children}</TRPCProvider>
        <ServiceWorkerRegistration />
        <InstallPrompt />
      </body>
    </html>
  );
}
