import sharedLang from '~/assets/langs/shared.js'

/**
 * Composable for handling translations across the application
 * Uses shared.js as the translation source and reads language preference from cookie/localStorage
 *
 * Usage:
 * const { t, lang, setLang } = useTranslation()
 *
 * In template:
 * {{ t.dashboard }}
 * {{ t.business_partners }}
 */
export const useTranslation = () => {
  // Use the same cookie name as the rest of the app
  const languageCookie = useCookie('logship_language', { default: () => 'en_US', watch: 'shallow' })

  // Internal reactive language state
  const language = ref('en-US')

  // Convert iDempiere format (en_US) to standard format (en-US) and vice versa
  const convertToStandard = (lang: string) => {
    if (!lang) return 'en-US'
    // Convert en_US to en-US format
    return lang.replace('_', '-')
  }

  const convertToIdempiere = (lang: string) => {
    if (!lang) return 'en_US'
    // Convert en-US to en_US format
    return lang.replace('-', '_')
  }

  // Initialize language from localStorage or cookie on client side
  if (import.meta.client) {
    const storedLang = localStorage.getItem('logship_lang')
    if (storedLang) {
      language.value = convertToStandard(storedLang)
    } else if (languageCookie.value) {
      language.value = convertToStandard(languageCookie.value)
    }

    // Watch for changes to localStorage (from other components)
    watch(() => languageCookie.value, (newVal) => {
      if (newVal) {
        language.value = convertToStandard(newVal)
      }
    })
  } else {
    // On server, use cookie value
    language.value = convertToStandard(languageCookie.value || 'en_US')
  }

  const lang = computed(() => language.value || 'en-US')

  const t = computed(() => sharedLang(lang.value) || sharedLang('en-US'))

  const setLang = (newLang: string) => {
    language.value = newLang
    languageCookie.value = convertToIdempiere(newLang)
    if (import.meta.client) {
      localStorage.setItem('logship_lang', newLang)
    }
  }

  const isGerman = computed(() => lang.value === 'de-DE')
  const isEnglish = computed(() => lang.value === 'en-US')
  const isSpanish = computed(() => lang.value === 'es-ES')

  return {
    t,
    lang,
    setLang,
    isGerman,
    isEnglish,
    isSpanish
  }
}