import type { Metadata, Viewport } from "next";
import localFont from "next/font/local";
import "./globals.css";
import ThemeProvider from "@/components/theme/ThemeProvider";
import { DynamicToaster } from "@/components/theme/DynamicToaster";

const geist = localFont({
  src: "./fonts/GeistVF.woff",
  variable: "--font-geist",
  weight: "100 900",
  display: "swap",
});

const geistMono = localFont({
  src: "./fonts/GeistMonoVF.woff",
  variable: "--font-geist-mono",
  weight: "100 900",
  display: "swap",
});

export const metadata: Metadata = {
  title: { default: "SPB Cloud", template: "%s · SPB Cloud" },
  description: "Cloud personnel privé, chiffré et local-first.",
  applicationName: "SPB Cloud",
  manifest: "/manifest.webmanifest",
  appleWebApp: {
    capable: true,
    title: "SPB Cloud",
    statusBarStyle: "black-translucent",
  },
  icons: {
    icon: [{ url: "/icons/icon-192.png", sizes: "192x192", type: "image/png" }],
    apple: [{ url: "/icons/apple-touch-icon.png", sizes: "180x180" }],
  },
  formatDetection: { telephone: false },
};

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

// Appliqué avant le premier rendu : thème, accent, densité, mouvement.
// ⚠️ Garder synchronisé avec lib/prefs.ts (clés) et ThemeProvider.
const PREPAINT = `(function(){try{
var d=document.documentElement,ls=localStorage;
var t=ls.getItem('spb-theme');
var dark=t==='dark'||(t==='system'&&window.matchMedia('(prefers-color-scheme: dark)').matches);
d.classList.toggle('dark',dark);d.classList.toggle('light',!dark);d.style.colorScheme=dark?'dark':'light';
var a=ls.getItem('spb-accent');d.setAttribute('data-accent',a||'aurore');
var de=ls.getItem('spb-density');d.setAttribute('data-density',de==='compact'?'compact':'comfortable');
var m=ls.getItem('spb-motion');d.setAttribute('data-motion',m==='reduced'?'reduced':'normal');
}catch(e){}})();`;

export default function RootLayout({
  children,
}: Readonly<{
  children: React.ReactNode;
}>) {
  return (
    <html
      lang="fr"
      className={`light ${geist.variable} ${geistMono.variable}`}
      data-accent="aurore"
      data-density="comfortable"
      data-motion="normal"
      suppressHydrationWarning
    >
      <head>
        <script dangerouslySetInnerHTML={{ __html: PREPAINT }} />
      </head>
      <body className="antialiased font-sans">
        <ThemeProvider>
          {children}
          <DynamicToaster />
        </ThemeProvider>
      </body>
    </html>
  );
}