'use client'

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

const STORAGE_KEY = 'bp_native_language'

/**
 * Hook for native language state + translations.
 * Persists to localStorage. Can be changed at any time (e.g. parent switches language).
 */
export function useNativeLanguage() {
  const [nativeLang, setNativeLangState] = useState('de')

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

  /** Change native language (persists to localStorage) */
  const setNativeLang = useCallback((lang: string) => {
    setNativeLangState(lang)
    localStorage.setItem(STORAGE_KEY, lang)
  }, [])

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

  /** Get translated exercise UI text */
  const t = (key: ExerciseKey): string => {
    const entry = exerciseT[key]
    if (!entry) return key
    return (entry as Record<string, string>)[nativeLang] || entry.de || key
  }

  /** Get native translation of a vocab word from translations JSONB */
  const wordInNative = (translations?: Record<string, any>): string => {
    if (!translations || !isThirdLanguage) return ''
    const entry = translations[nativeLang]
    if (!entry) return ''
    return typeof entry === 'string' ? entry : entry.text || ''
  }

  return { nativeLang, setNativeLang, isThirdLanguage, t, wordInNative }
}