import type { Metadata } from 'next';
import type { ReactNode } from 'react';
import { Inter, JetBrains_Mono } from 'next/font/google';

import '../styles/theme.css';
import '../styles/animations.css';
import '../app/globals.css';
import { ThemeProvider } from '@/components/theme-provider';
import { SocketProvider } from '@/context/SocketContext';
import { LiveToast } from '@/components/socket/LiveToast';
import { PriorityBoundary } from '@/components/priority/PriorityBoundary';
import { LoadingProvider } from '@/components/priority/LoadingProvider';
import DynamicTitle from '@/components/DynamicTitle';

const inter = Inter({
  subsets: ['latin'],
  variable: '--font-inter',
  display: 'swap',
});

const jetbrains = JetBrains_Mono({
  subsets: ['latin'],
  variable: '--font-jetbrains',
  display: 'swap',
});

export const metadata: Metadata = {
  title: {
    default: 'Fasecmo',
    template: '%s · Fasecmo',
  },
  description: 'Enterprise-grade fintech wallet platform',
  applicationName: 'Fasecmo',
};

export default function RootLayout({ children }: { children: ReactNode }) {
  return (
    <html lang="en" suppressHydrationWarning className={`${inter.variable} ${jetbrains.variable}`}>
      <body className="min-h-screen bg-background text-foreground antialiased">
        <ThemeProvider>
          <SocketProvider>
            <LoadingProvider>
              <PriorityBoundary priority={0} name="root-shell">
                {children}
              </PriorityBoundary>
              <LiveToast />
              <DynamicTitle />
            </LoadingProvider>
          </SocketProvider>
        </ThemeProvider>
      </body>
    </html>
  );
}
