import type { Metadata, Viewport } from 'next';
import { Geist, Geist_Mono } from 'next/font/google';
import './globals.css';
import { SpeedInsights } from '@vercel/speed-insights/next';
import { Analytics } from '@vercel/analytics/next';
import { ToastContainer } from 'react-toastify';
import 'react-toastify/dist/ReactToastify.css';
import Script from 'next/script';
import { ThemeProvider } from '@/lib/themeContext';
import ErrorBoundary from '@/components/error/ErrorBoundary';
import GlobalErrorHandler from '@/components/error/GlobalErrorHandler';

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

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

export const metadata: Metadata = {
  title: 'OpenSource Fiesta',
  description: 'Compare and chat with multiple open models',
};

export const viewport: Viewport = {
  width: 'device-width',
  initialScale: 1,
  viewportFit: 'cover',
};

export default function RootLayout({
  children,
}: Readonly<{
  children: React.ReactNode;
}>) {
  return (
    <html lang="en" className="dark">
      <body className={`${geistSans.variable} ${geistMono.variable} antialiased`}>
        <ErrorBoundary>
          <GlobalErrorHandler>
            <ThemeProvider>{children}</ThemeProvider>
          </GlobalErrorHandler>
        </ErrorBoundary>

        <ToastContainer
          position="top-right"
          autoClose={3000}
          hideProgressBar={false}
          closeOnClick
          pauseOnHover
          draggable
          theme="colored"
        />

        {process.env.NEXT_PUBLIC_VERCEL_ANALYTICS === '1' && (
          <>
            <SpeedInsights />
            <Analytics />
          </>
        )}
        <Script
          src="https://scripts.simpleanalyticscdn.com/latest.js"
          strategy="afterInteractive"
        />

        {/* Production debugging script */}
        {process.env.NODE_ENV === 'production' && (
          <Script id="production-debug" strategy="afterInteractive">
            {`
              console.log('🚀 App loaded in production mode');
              window.addEventListener('error', function(e) {
                console.error('Production error:', e.error);
              });
              window.addEventListener('unhandledrejection', function(e) {
                console.error('Production unhandled rejection:', e.reason);
              });
            `}
          </Script>
        )}
      </body>
    </html>
  );
}
