"use client"

import type React from "react"
import { createContext, useContext, useEffect, useState } from "react"
import enTranslations from "@/lib/i18n/en.json"
import arTranslations from "@/lib/i18n/ar.json"

type Language = "en" | "ar"
type Translations = typeof enTranslations

interface LanguageContextType {
  language: Language
  setLanguage: (lang: Language) => void
  t: (key: string) => string
  dir: "ltr" | "rtl"
}

const translations = {
  en: enTranslations,
  ar: arTranslations,
}

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

export function LanguageProvider({ children }: { children: React.ReactNode }) {
  const [language, setLanguageState] = useState<Language>("en")
  const [mounted, setMounted] = useState(false)

  useEffect(() => {
    setMounted(true)
    const savedLanguage = localStorage.getItem("language") as Language
    if (savedLanguage && (savedLanguage === "en" || savedLanguage === "ar")) {
      setLanguageState(savedLanguage)
    }
  }, [])

  useEffect(() => {
    if (mounted) {
      document.documentElement.dir = language === "ar" ? "rtl" : "ltr"
      document.documentElement.lang = language
    }
  }, [language, mounted])

  const setLanguage = (lang: Language) => {
    setLanguageState(lang)
    localStorage.setItem("language", lang)
  }

  const getNestedValue = (obj: any, path: string): string => {
    const keys = path.split(".")
    let result = obj

    for (const key of keys) {
      if (result && typeof result === "object" && key in result) {
        result = result[key]
      } else {
        return path // Return the key path if translation not found
      }
    }

    return result as string
  }

  const t = (key: string): string => {
    const currentTranslations = translations[language]
    return getNestedValue(currentTranslations, key)
  }

  // Always use "ltr" for SSR to prevent hydration mismatch
  const dir = mounted ? (language === "ar" ? "rtl" : "ltr") : "ltr"

  return (
    <LanguageContext.Provider
      value={{
        language,
        setLanguage,
        t,
        dir,
      }}
    >
      {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
}