import '@/styles/globals.css'
import type { AppProps } from 'next/app'
import { useI18n } from '@/hooks/useI18n'
import React from 'react'

function I18nProvider({ children }: { children: React.ReactNode }) {
  // Get saved locale from IndexedDB or default to French
  const getInitialLocale = async (): Promise<'fr' | 'en'> => {
    if (typeof window === 'undefined') {
      return 'fr'
    }
    try {
      const { storageService } = await import('@/lib/storage/indexedDB')
      const savedLocale = await storageService.get<'fr' | 'en'>('zapwall-locale', 'app_storage')
      if (savedLocale === 'fr' || savedLocale === 'en') {
        return savedLocale
      }
    } catch {
      // Fallback to browser locale detection
    }
    // Try to detect browser locale
    const browserLocale = navigator.language.split('-')[0]
    return browserLocale === 'en' ? 'en' : 'fr'
  }

  const [initialLocale, setInitialLocale] = React.useState<'fr' | 'en'>('fr')
  const [localeLoaded, setLocaleLoaded] = React.useState(false)

  React.useEffect(() => {
    getInitialLocale().then((locale) => {
      setInitialLocale(locale)
      setLocaleLoaded(true)
    })
  }, [])

  const { loaded } = useI18n(initialLocale)

  if (!localeLoaded || !loaded) {
    return <div className="min-h-screen bg-cyber-darker flex items-center justify-center text-neon-cyan">Loading...</div>
  }

  return <>{children}</>
}

export default function App({ Component, pageProps }: AppProps) {
  return (
    <I18nProvider>
      <Component {...pageProps} />
    </I18nProvider>
  )
}