import {
  createContext,
  useCallback,
  useContext,
  useEffect,
  useMemo,
  useState,
  type ReactNode,
} from 'react'
import {
  applyDocumentLocale,
  getLocaleDirection,
  readStoredLocale,
  writeStoredLocale,
  type DashboardLocale,
} from '@meshkee/dashboard-core'

interface LocaleContextValue {
  locale: DashboardLocale
  dir: 'ltr' | 'rtl'
  isRtl: boolean
  setLocale: (locale: DashboardLocale) => void
}

const LocaleContext = createContext<LocaleContextValue | null>(null)

export { LocaleContext }

export function LocaleProvider({
  children,
  defaultLocale = 'fa',
}: {
  children: ReactNode
  defaultLocale?: DashboardLocale
}) {
  const [locale, setLocaleState] = useState<DashboardLocale>(() =>
    readStoredLocale(defaultLocale),
  )

  useEffect(() => {
    applyDocumentLocale(locale)
    writeStoredLocale(locale)
  }, [locale])

  const setLocale = useCallback((next: DashboardLocale) => {
    setLocaleState(next)
  }, [])

  const value = useMemo<LocaleContextValue>(() => {
    const dir = getLocaleDirection(locale)
    return {
      locale,
      dir,
      isRtl: dir === 'rtl',
      setLocale,
    }
  }, [locale, setLocale])

  return <LocaleContext.Provider value={value}>{children}</LocaleContext.Provider>
}

export function useLocale(): LocaleContextValue {
  const context = useContext(LocaleContext)
  if (!context) {
    throw new Error('useLocale must be used within LocaleProvider')
  }
  return context
}
