import type { Metadata } from 'next';
import { Inter } from 'next/font/google';
import { ThemeRegistry } from '@/components/ThemeRegistry';
import { ErrorBoundary } from '@/components/common/ErrorBoundary';
import { ReduxProvider } from '@/components/providers/ReduxProvider';
import { ApolloProvider } from '@/components/providers/ApolloProvider';
import { AxeProvider } from '@/components/providers/AxeProvider';
import { SkipNavigation } from '@/components/common/SkipNavigation';
import { VoiceFloatingButton } from '@/components/voice/VoiceFloatingButton';
import { FocusManagementProvider } from '@/components/providers/FocusManagementProvider';
// import { PerformanceMonitor } from '@/components/common/PerformanceMonitor'; // Temporarily disabled
import './globals.css';

const inter = Inter({ subsets: ['latin'] });

export const metadata: Metadata = {
  title: 'Maternal - AI-Powered Child Care Assistant',
  description: 'Track, analyze, and get AI-powered insights for your child\'s development, sleep, feeding, and more.',
  manifest: '/manifest.json',
  themeColor: '#FFB6C1',
  viewport: {
    width: 'device-width',
    initialScale: 1,
    maximumScale: 1,
    userScalable: false,
  },
  appleWebApp: {
    capable: true,
    statusBarStyle: 'default',
    title: 'Maternal',
  },
};

export default function RootLayout({
  children,
}: Readonly<{
  children: React.ReactNode;
}>) {
  return (
    <html lang="en">
      <head>
        <link rel="manifest" href="/manifest.json" />
        <meta name="theme-color" content="#FFB6C1" />
        <link rel="apple-touch-icon" href="/icon-192x192.png" />
      </head>
      <body className={inter.className}>
        <AxeProvider>
          <ErrorBoundary>
            <ReduxProvider>
              <ApolloProvider>
                <ThemeRegistry>
                  <FocusManagementProvider>
                    <SkipNavigation />
                    {/* <PerformanceMonitor /> */}
                    <main id="main-content" tabIndex={-1}>
                      {children}
                    </main>
                    <VoiceFloatingButton />
                  </FocusManagementProvider>
                </ThemeRegistry>
              </ApolloProvider>
            </ReduxProvider>
          </ErrorBoundary>
        </AxeProvider>
      </body>
    </html>
  );
}
