'use client'

import { createContext, useContext, useEffect, useState } from 'react'
import type { ReactNode } from 'react'
import { SupportedLanguage, loadTranslations, getTranslationValue, Translations } from './load-translations'

type LanguageContextType = {
  language: SupportedLanguage
  setLanguage: (lang: SupportedLanguage) => void
  t: (key: string, params?: Record<string, string | number>) => string
  translations: Translations
}

const LanguageContext = createContext<LanguageContextType | undefined>(undefined)

export function LanguageProvider({ children, initialLanguage = 'en' }: {
  children: ReactNode
  initialLanguage?: SupportedLanguage
}) {
  const [language, setLanguageState] = useState<SupportedLanguage>(initialLanguage)
  const [translations, setTranslations] = useState<Translations | null>(null)

  // Load translations when language changes
  useEffect(() => {
    const loadLang = async () => {
      const loaded = await loadTranslations(language)
      setTranslations(loaded)
    }
    loadLang()
  }, [language])

  // Load saved language from localStorage on mount
  useEffect(() => {
    const saved = localStorage.getItem('user-language') as SupportedLanguage
    if (saved) {
      setLanguageState(saved)
      document.documentElement.lang = saved
    }
  }, [])

  const setLanguage = (lang: SupportedLanguage) => {
    setLanguageState(lang)
    localStorage.setItem('user-language', lang)
    // Update HTML lang attribute for font styling
    document.documentElement.lang = lang
  }

  const t = (key: string, params?: Record<string, string | number>) => {
    if (!translations) return key

    let value: any = getTranslationValue(translations, key)

    // Replace parameters like {count}, {percentage}, etc.
    if (params) {
      Object.entries(params).forEach(([param, paramValue]) => {
        value = value.replace(`{${param}}`, String(paramValue))
      })
    }

    return value
  }

  if (!translations) {
    return null // Show loading state if needed
  }

  return (
    <LanguageContext.Provider value={{ language, setLanguage, t, translations }}>
      {children}
    </LanguageContext.Provider>
  )
}

export function useLanguage() {
  const context = useContext(LanguageContext)
  if (context === undefined) {
    throw new Error('useLanguage must be used within a LanguageProvider')
  }
  return context
}