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://nexus.hartmut-noerenberg.com"),
  title: "Nexus — 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: "Nexus",
  },
  openGraph: {
    title: "Nexus — Resource & Capacity Planning",
    description: "Estimates, staffing, chargeability, and timelines in one workspace.",
    images: [{ url: "/og-image.png", width: 1024, height: 1024, alt: "Nexus Logo" }],
    type: "website",
  },
  twitter: {
    card: "summary_large_image",
    title: "Nexus — 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 {
    if (!localStorage.getItem('nexus_migrated_v1')) {
      var underscoreKeys = ['theme','sidebar_collapsed','mfa_prompt_snoozed_until','prefs','pwa_dismiss'];
      underscoreKeys.forEach(function(k){
        var oldK = 'capakraken_' + k, newK = 'nexus_' + k;
        var v = localStorage.getItem(oldK);
        if (v !== null && localStorage.getItem(newK) === null) localStorage.setItem(newK, v);
        localStorage.removeItem(oldK);
      });
      var dashKeys = [];
      for (var i = 0; i < localStorage.length; i++) {
        var lk = localStorage.key(i);
        if (lk && lk.indexOf('capakraken_dashboard_v1_') === 0) dashKeys.push(lk);
      }
      dashKeys.forEach(function(lk){
        var newLk = 'nexus_' + lk.substring('capakraken_'.length);
        var v = localStorage.getItem(lk);
        if (v !== null && localStorage.getItem(newLk) === null) localStorage.setItem(newLk, v);
        localStorage.removeItem(lk);
      });
      ['capakraken-chat-messages','capakraken-chat-conversation-id'].forEach(function(lk){
        var newLk = 'nexus-' + lk.substring('capakraken-'.length);
        var v = localStorage.getItem(lk);
        if (v !== null && localStorage.getItem(newLk) === null) localStorage.setItem(newLk, v);
        localStorage.removeItem(lk);
      });
      var av = localStorage.getItem('capakraken:allocations:viewMode');
      if (av !== null && localStorage.getItem('nexus:allocations:viewMode') === null) {
        localStorage.setItem('nexus:allocations:viewMode', av);
      }
      localStorage.removeItem('capakraken:allocations:viewMode');
      localStorage.setItem('nexus_migrated_v1', '1');
      if (typeof caches !== 'undefined') caches.delete('capakraken-v2');
    }
    var p = JSON.parse(localStorage.getItem('nexus_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>
  );
}
