import { computed, ref } from 'vue'
import { useFdsI18n } from '../plugin/useFdsI18n'

type MessageTree = {
  [key: string]: string | MessageTree
}

type LocaleMessageApi = {
  getLocaleMessage?: (locale: string) => unknown
  setLocaleMessage?: (locale: string, message: unknown) => void
  availableLocales?: string[]
}

const cloneMessages = <T>(messages: T): T => JSON.parse(JSON.stringify(messages)) as T

const buildKeyMessages = (node: MessageTree, parentPath: string = ''): MessageTree => {
  const result: MessageTree = {}

  Object.entries(node).forEach(([key, value]) => {
    const currentPath = parentPath ? `${parentPath}.${key}` : key
    result[key] = typeof value === 'string' ? currentPath : buildKeyMessages(value, currentPath)
  })

  return result
}

const isMessageTree = (value: unknown): value is MessageTree =>
  typeof value === 'object' && value !== null && !Array.isArray(value)

export function useDevModePoEditor() {
  const { i18n } = useFdsI18n()

  const showingTranslationKeys = ref(false)
  const originalMessages = ref<Record<string, MessageTree>>({})
  const keyMessages = ref<Record<string, MessageTree>>({})

  const i18nLocaleApi = computed<LocaleMessageApi | undefined>(() => i18n?.global ?? i18n)
  const canToggleI18nKeys = computed(
    () =>
      typeof i18nLocaleApi.value?.getLocaleMessage === 'function' &&
      typeof i18nLocaleApi.value?.setLocaleMessage === 'function',
  )

  const getToggleLocales = (): string[] => {
    const locales = i18nLocaleApi.value?.availableLocales
    if (Array.isArray(locales) && locales.length > 0) {
      return [...new Set(locales.filter((locale) => typeof locale === 'string' && locale.length > 0))]
    }
    return ['sv', 'en']
  }

  const ensureLocaleMessagesLoaded = () => {
    const getLocaleMessage = i18nLocaleApi.value?.getLocaleMessage
    if (typeof getLocaleMessage !== 'function') return

    getToggleLocales().forEach((locale) => {
      if (originalMessages.value[locale]) return

      const localeMessage = getLocaleMessage(locale)
      if (!isMessageTree(localeMessage)) return

      const clonedOriginal = cloneMessages(localeMessage)
      originalMessages.value[locale] = clonedOriginal
      keyMessages.value[locale] = buildKeyMessages(clonedOriginal)
    })
  }

  const setI18nKeysVisibility = (showKeys: boolean) => {
    const setLocaleMessage = i18nLocaleApi.value?.setLocaleMessage
    if (typeof setLocaleMessage !== 'function') return

    ensureLocaleMessagesLoaded()
    showingTranslationKeys.value = showKeys

    getToggleLocales().forEach((locale) => {
      const localeMessages = showKeys ? keyMessages.value[locale] : originalMessages.value[locale]
      if (!localeMessages) return
      setLocaleMessage(locale, cloneMessages(localeMessages))
    })
  }

  return {
    showingTranslationKeys,
    canToggleI18nKeys,
    setI18nKeysVisibility,
  }
}