import type { Metadata } from 'next'
import { Geist, Geist_Mono, Lora } from 'next/font/google'
import { ThemeProvider } from '@/components/providers/theme-provider'
import { I18nProvider } from '@/components/providers/i18n-provider'
import { PRESET_THEMES, DEFAULT_THEME_ID, ACCENT_STORAGE_KEY } from '@/lib/preset-themes'
import './globals.css'

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

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

const lora = Lora({
  subsets: ['latin'],
  variable: '--font-heading',
  display: 'swap',
})

export const metadata: Metadata = {
  title: 'Forge — Local AI Agent',
  description: 'Local AI Agent Desktop — Chat, IM Bridge, Scheduled Tasks. Powered by Claude Agent SDK.',
}

/**
 * Inline script run before hydration to apply the persisted light/dark mode +
 * preset color theme, avoiding FOUC. Mirrors theme-provider.applyPresetTheme.
 */
const themeInitScript = `(function(){try{var T=${JSON.stringify(
  PRESET_THEMES.map((t) => ({ id: t.id, dark: t.dark, light: t.light }))
)};var tid=localStorage.getItem(${JSON.stringify(ACCENT_STORAGE_KEY)})||${JSON.stringify(DEFAULT_THEME_ID)};var m=localStorage.getItem('forge-theme')||'dark';if(m==='system')m=matchMedia('(prefers-color-scheme: dark)').matches?'dark':'light';var d=m!=='light';document.documentElement.setAttribute('data-theme',d?'dark':'light');var th=T.find(function(x){return x.id===tid})||T[0];var c=d?th.dark:th.light;var s=document.documentElement.style;s.setProperty('--bg-page',c.background);s.setProperty('--text-primary',c.foreground);s.setProperty('--accent-indigo',c.accent);s.setProperty('--accent-green',c.success);s.setProperty('--accent-amber',c.info);s.setProperty('--accent-coral',c.destructive);var mx=c.foreground.match(/^#?([a-f\\d]{2})([a-f\\d]{2})([a-f\\d]{2})$/i);if(mx)s.setProperty('--foreground-rgb',parseInt(mx[1],16)+', '+parseInt(mx[2],16)+', '+parseInt(mx[3],16));}catch(e){}})();`

export default function RootLayout({
  children,
}: {
  children: React.ReactNode
}) {
  return (
    <html lang="zh" className={`${geist.variable} ${geistMono.variable} ${lora.variable}`} suppressHydrationWarning>
      <head>
        <script dangerouslySetInnerHTML={{ __html: themeInitScript }} />
      </head>
      <body>
        <ThemeProvider>
          <I18nProvider>
            <a href="#main-content" className="skip-link">Skip to content</a>
            {children}
          </I18nProvider>
        </ThemeProvider>
      </body>
    </html>
  )
}
