'use client'

import React, { createContext, useContext, useState, useEffect, useCallback } from 'react'
import { exerciseT, type ExerciseKey } from './exerciseTranslations'

const STORAGE_KEY = 'bp_native_language'

interface NativeLanguageState {
  nativeLang: string
  setNativeLang: (lang: string) => void
  isThirdLanguage: boolean
  t: (key: ExerciseKey) => string
  wordInNative: (translations?: Record<string, any>) => string
}

const NativeLanguageContext = createContext<NativeLanguageState>({
  nativeLang: 'de',
  setNativeLang: () => {},
  isThirdLanguage: false,
  t: (key) => key,
  wordInNative: () => '',
})

export function NativeLanguageProvider({ children }: { children: React.ReactNode }) {
  const [nativeLang, setNativeLangState] = useState('de')

  useEffect(() => {
    const stored = localStorage.getItem(STORAGE_KEY)
    if (stored) setNativeLangState(stored)
  }, [])

  const setNativeLang = useCallback((lang: string) => {
    setNativeLangState(lang)
    localStorage.setItem(STORAGE_KEY, lang)
  }, [])

  const isThirdLanguage = nativeLang !== 'de' && nativeLang !== 'en'

  const t = useCallback((key: ExerciseKey): string => {
    const entry = exerciseT[key]
    if (!entry) return key
    const e = entry as Record<string, string>
    return e[nativeLang] || e['en'] || e['de'] || key
  }, [nativeLang])

  const wordInNative = useCallback((translations?: Record<string, any>): string => {
    if (!translations || !isThirdLanguage) return ''
    const entry = translations[nativeLang]
    if (!entry) return ''
    return typeof entry === 'string' ? entry : entry.text || ''
  }, [nativeLang, isThirdLanguage])

  return (
    <NativeLanguageContext.Provider value={{ nativeLang, setNativeLang, isThirdLanguage, t, wordInNative }}>
      {children}
    </NativeLanguageContext.Provider>
  )
}

export function useNativeLanguage() {
  return useContext(NativeLanguageContext)
}