import type { Metadata } from "next";
import { Geist, Geist_Mono } from "next/font/google";
import ClientLayout from "@/components/ClientLayout";
import "./globals.css";

const geistSans = Geist({
  variable: "--font-geist-sans",
  subsets: ["latin"],
});

const geistMono = Geist_Mono({
  variable: "--font-geist-mono",
  subsets: ["latin"],
});

export const metadata: Metadata = {
  title: "Prayer App",
  description: "A personal prayer and praise journaling app",
  manifest: "/manifest.json",
  icons: {
    icon: "/icon-192x192.png",
    apple: "/icon-192x192.png",
  },
};

// Add global CSS variable definitions
const themeStylesheet = `
  :root {
    --bg-primary: #f8fafc;
    --bg-secondary: #f1f5f9;
    --text-primary: #1e293b;
    --text-secondary: #64748b;
    --border-color: #e2e8f0;
  }
  
  html.dark {
    --bg-primary: #0f172a;
    --bg-secondary: #1e293b;
    --text-primary: #f1f5f9;
    --text-secondary: #cbd5e1;
    --border-color: #334155;
  }
`;

export default function RootLayout({
  children,
}: Readonly<{
  children: React.ReactNode;
}>) {
  return (
    <html lang="en" suppressHydrationWarning={true}>
      <head>
        <script dangerouslySetInnerHTML={{
          __html: `
            (function() {
              const theme = localStorage.getItem('theme-mode') || 'dark';
              const html = document.documentElement;
              
              function injectThemeStyles(t) {
                let styleTag = document.getElementById('theme-override-styles');
                if (!styleTag) {
                  styleTag = document.createElement('style');
                  styleTag.id = 'theme-override-styles';
                  document.head.appendChild(styleTag);
                }
                
                if (t === 'dark') {
                  styleTag.textContent = \`
                    * { color-scheme: dark !important; }
                    html, body { background-color: #0f172a !important; color: #f1f5f9 !important; }
                    .bg-gradient-to-b { background: linear-gradient(to bottom, #0f172a, #1e293b) !important; }
                    div, section, main { background-color: inherit !important; }
                    p, span, h1, h2, h3, h4, h5, h6 { color: #f1f5f9 !important; }
                    input, textarea, button { background-color: #1e293b !important; color: #f1f5f9 !important; border-color: #334155 !important; }
                  \`;
                } else if (t === 'light') {
                  styleTag.textContent = \`
                    * { color-scheme: light !important; }
                    html, body { background-color: #f8fafc !important; color: #1e293b !important; }
                    .bg-gradient-to-b { background: linear-gradient(to bottom, #f8fafc, #f1f5f9) !important; }
                    div, section, main { background-color: inherit !important; }
                    p, span, h1, h2, h3, h4, h5, h6 { color: #1e293b !important; }
                    input, textarea, button { background-color: #e2e8f0 !important; color: #1e293b !important; border-color: #cbd5e1 !important; }
                  \`;
                }
              }
              
              html.classList.add(theme);
              html.setAttribute('data-theme', theme);
              injectThemeStyles(theme);
            })();
          `
        }} />
      </head>
      <body
        className={`${geistSans.variable} ${geistMono.variable} antialiased`}
      >
        <ClientLayout>
          {children}
        </ClientLayout>
      </body>
    </html>
  );
}