import type { Metadata } from "next";
import { Geist, Geist_Mono } from "next/font/google";
import Script from "next/script";
import { Toaster } from "sonner";
import "./globals.css";

const geistSans = Geist({ variable: "--font-geist-sans", subsets: ["latin"] });
const geistMono = Geist_Mono({ variable: "--font-geist-mono", subsets: ["latin"] });

import { ThemeProvider } from "@/components/theme-provider";

export const metadata: Metadata = {
  title: { default: "WhatsApp CRM", template: "%s · WhatsApp CRM" },
  description: "Self-hosted WhatsApp CRM — shared inbox, contacts, pipelines, broadcasts and automations.",
};

export default function RootLayout({ children }: LayoutProps<"/">) {
  return (
    <html lang="en" className={`${geistSans.variable} ${geistMono.variable} h-full antialiased`} suppressHydrationWarning>
      <head>
        <Script
          id="theme-initializer"
          dangerouslySetInnerHTML={{
          __html: `
            try {
              var hex = localStorage.getItem("custom-theme-color");
              if (hex) {
                var c = hex.substring(1);
                if (c.length === 3) c = c.split('').map(x => x + x).join('');
                var r = parseInt(c.substr(0, 2), 16);
                var g = parseInt(c.substr(2, 2), 16);
                var b = parseInt(c.substr(4, 2), 16);
                var a = [r, g, b].map(function (v) {
                  v /= 255;
                  return v <= 0.03928 ? v / 12.92 : Math.pow((v + 0.055) / 1.055, 2.4);
                });
                var luminance = a[0] * 0.2126 + a[1] * 0.7152 + a[2] * 0.0722;
                var isLight = luminance > 0.179;
                var root = document.documentElement;
                root.style.setProperty("--background", hex);
                if (isLight) {
                  root.style.setProperty("--foreground", "#18181b");
                  root.style.setProperty("--card", "rgba(255, 255, 255, 0.6)");
                  root.style.setProperty("--card-foreground", "#18181b");
                  root.style.setProperty("--border", "rgba(0, 0, 0, 0.1)");
                  root.style.setProperty("--muted", "rgba(0, 0, 0, 0.05)");
                  root.style.setProperty("--muted-foreground", "rgba(0, 0, 0, 0.6)");
                } else {
                  root.style.setProperty("--foreground", "#fafafa");
                  root.style.setProperty("--card", "rgba(255, 255, 255, 0.05)");
                  root.style.setProperty("--card-foreground", "#fafafa");
                  root.style.setProperty("--border", "rgba(255, 255, 255, 0.1)");
                  root.style.setProperty("--muted", "rgba(255, 255, 255, 0.1)");
                  root.style.setProperty("--muted-foreground", "rgba(255, 255, 255, 0.6)");
                }
              }
            } catch (e) {}
          `
        }} />
      </head>
      <body className="min-h-full">
        <ThemeProvider attribute="class" defaultTheme="system" enableSystem>
          {children}
          <Toaster richColors position="top-right" />
        </ThemeProvider>
      </body>
    </html>
  );
}
