"use client";

import { createContext, useContext, useState, useEffect, type ReactNode } from "react";
import { translations, type Locale, type Translations } from "./translations";

interface LangContextValue {
  locale:    Locale;
  t:         Translations;
  setLocale: (l: Locale) => void;
}

const LangContext = createContext<LangContextValue>({
  locale:    "fr",
  t:         translations.fr,
  setLocale: () => {},
});

export function LanguageProvider({ children }: { children: ReactNode }) {
  const [locale, setLocaleState] = useState<Locale>("fr");

  useEffect(() => {
    const saved = localStorage.getItem("asli_lang") as Locale | null;
    if (saved === "fr" || saved === "en" || saved === "es" || saved === "ar") setLocaleState(saved);
  }, []);

  useEffect(() => {
    document.documentElement.dir = locale === "ar" ? "rtl" : "ltr";
  }, [locale]);

  const setLocale = (l: Locale) => {
    setLocaleState(l);
    localStorage.setItem("asli_lang", l);
  };

  return (
    <LangContext.Provider value={{ locale, t: translations[locale], setLocale }}>
      {children}
    </LangContext.Provider>
  );
}

export function useLanguage() {
  return useContext(LangContext);
}