'use client'

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

/**
 * NativeLanguageContext — unified with LanguageContext.
 *
 * Reads/writes the SAME language as the central LanguageContext (bp_language).
 * No separate localStorage key — one language setting for the entire app.
 */

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 { language, setLanguage } = useLanguage()

  // Sync: nativeLang = the central language setting
  const nativeLang = language

  const setNativeLang = useCallback((lang: string) => {
    setLanguage(lang)
  }, [setLanguage])

  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)
}