import type { Metadata } from 'next'
import { JetBrains_Mono } from 'next/font/google'
import './globals.css'
import { ThemeProvider } from '@/providers/providers'
import '@/lib/env-validation' // Validate environment variables

const jetbrainsMono = JetBrains_Mono({ subsets: ['latin'], variable: '--font-mono' })

export const metadata: Metadata = {
  title: {
    template: '%s | Terminal Blog',
    default: 'Terminal Blog - Build. Write. Share.',
  },
  description: 'Explorează idei despre dezvoltare, design și tehnologie',
  metadataBase: new URL(process.env.NEXT_PUBLIC_SITE_URL || 'http://localhost:3030'),
  authors: [{ name: 'Terminal User' }],
  keywords: ['blog', 'dezvoltare web', 'nextjs', 'react', 'typescript', 'terminal'],
  openGraph: {
    type: 'website',
    locale: 'ro_RO',
    siteName: 'Terminal Blog',
  },
  robots: {
    index: true,
    follow: true,
  },
  icons: {
    icon: '/favicon.ico',
  },
}

export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <html lang="ro" suppressHydrationWarning className={jetbrainsMono.variable}>
      <body className="font-mono bg-zinc-50 text-slate-900 dark:bg-zinc-900 dark:text-slate-100 transition-colors duration-300">
        <ThemeProvider
          attribute="class"
          defaultTheme="dark"
          enableSystem={false}
          storageKey="blog-theme"
          disableTransitionOnChange={false}
        >
          <div className="flex flex-col min-h-screen">
            <div className="flex-1">{children}</div>

            {/* Footer - from worktree-agent-1 */}
            <footer className="mt-auto border-t-4 border-slate-300 dark:border-slate-800 bg-zinc-100 dark:bg-slate-900 transition-colors duration-300">
              <div className="container mx-auto px-4 py-8">
                <div className="border-2 border-slate-300 dark:border-slate-800 p-6">
                  <p className="text-center text-slate-500 dark:text-slate-500 font-mono text-xs uppercase tracking-wider">
                    © 2025 <span style={{ color: 'var(--neon-cyan)' }}>//</span> BLOG &{' '}
                    <span style={{ color: 'var(--neon-pink)' }}>PORTOFOLIU</span>{' '}
                    <span style={{ color: 'var(--neon-cyan)' }}>//</span> ALL RIGHTS RESERVED
                  </p>
                </div>
              </div>
            </footer>
          </div>
        </ThemeProvider>
      </body>
    </html>
  )
}
