import { createContext, useContext, useState, useEffect, type ReactNode } from 'react'
import { translations, type Lang } from '../i18n/translations'

interface LangContextValue {
  lang: Lang
  setLang: (l: Lang) => void
  t: typeof translations.en
}

const LangContext = createContext<LangContextValue | null>(null)

// A stored choice wins; otherwise the browser decides: German for de-*, English for everything else.
function initialLang(): Lang {
  try {
    const stored = localStorage.getItem('lang')
    if (stored === 'de' || stored === 'en') return stored
  } catch {
    // storage blocked: fall through to the browser language
  }
  const preferred = navigator.languages?.[0] ?? navigator.language ?? 'en'
  return preferred.toLowerCase().startsWith('de') ? 'de' : 'en'
}

export function LangProvider({ children }: { children: ReactNode }) {
  const [lang, setLangState] = useState<Lang>(initialLang)

  // <html lang> drives hyphenation and screen readers.
  useEffect(() => {
    document.documentElement.lang = lang
  }, [lang])

  // Only an explicit switch is remembered, so the browser keeps deciding until someone chooses.
  function setLang(l: Lang) {
    setLangState(l)
    try {
      localStorage.setItem('lang', l)
    } catch {
      // storage blocked: the choice lasts for this visit
    }
  }

  return (
    <LangContext.Provider value={{ lang, setLang, t: translations[lang] }}>
      {children}
    </LangContext.Provider>
  )
}

export function useLang() {
  const ctx = useContext(LangContext)
  if (!ctx) throw new Error('useLang must be used inside LangProvider')
  return ctx
}