import type { Metadata } from 'next';
import type { Viewport } from 'next';
import './globals.css';
import { Toaster } from '@/components/ui/toaster';
import { AuthLogoutHandler } from '@/components/auth/AuthLogoutHandler';
import { ErrorBoundary } from '@/components/error/ErrorBoundary';

export const viewport: Viewport = {
  width: 'device-width',
  initialScale: 1,
  maximumScale: 5,
  themeColor: [
    { media: '(prefers-color-scheme: light)', color: '#ffffff' },
    { media: '(prefers-color-scheme: dark)', color: '#09090b' },
  ],
};

export const metadata: Metadata = {
  title: 'Math Platform - Álgebra Lineal',
  description: 'Plataforma interactiva para el estudio de Álgebra Lineal con ejercicios, ejemplos y ranking',
  keywords: ['matemáticas', 'álgebra lineal', 'vectores', 'matrices', 'educación'],
  authors: [{ name: 'Math Platform Team' }],
  creator: 'Math Platform',
  publisher: 'Math Platform',
  formatDetection: {
    email: false,
    address: false,
    telephone: false,
  },
  metadataBase: new URL(process.env['NEXT_PUBLIC_APP_URL'] ?? 'http://localhost:3000'),
  openGraph: {
    type: 'website',
    locale: 'es_ES',
    url: process.env['NEXT_PUBLIC_APP_URL'] ?? 'http://localhost:3000',
    title: 'Math Platform - Álgebra Lineal',
    description: 'Plataforma interactiva para el estudio de Álgebra Lineal',
    siteName: 'Math Platform',
  },
  twitter: {
    card: 'summary_large_image',
    title: 'Math Platform - Álgebra Lineal',
    description: 'Plataforma interactiva para el estudio de Álgebra Lineal',
  },
  robots: {
    index: true,
    follow: true,
    googleBot: {
      index: true,
      follow: true,
      'max-video-preview': -1,
      'max-image-preview': 'large',
      'max-snippet': -1,
    },
  },
};

export default function RootLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  return (
    <html lang="es" suppressHydrationWarning>
      <body className="min-h-screen bg-background font-sans antialiased">
        <AuthLogoutHandler />
        <ErrorBoundary>
          <div className="relative flex min-h-screen flex-col">
            <div className="flex-1">{children}</div>
          </div>
        </ErrorBoundary>
        <Toaster />
      </body>
    </html>
  );
}
