"use client";

import React, { createContext, useContext, useState, useEffect, useCallback } from "react";
import { en } from "./locales/en";
import { ar } from "./locales/ar";
import type { Translations } from "./locales/en";

type Locale = "en" | "ar";

interface I18nContextType {
  locale: Locale;
  t: Translations;
  dir: "ltr" | "rtl";
  setLocale: (locale: Locale) => void;
  toggleLocale: () => void;
}

const translations: Record<Locale, Translations> = { en, ar };

const I18nContext = createContext<I18nContextType>({
  locale: "en",
  t: en,
  dir: "ltr",
  setLocale: () => {},
  toggleLocale: () => {},
});

export function I18nProvider({ children }: { children: React.ReactNode }) {
  const [locale, setLocaleState] = useState<Locale>("en");

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

  useEffect(() => {
    const t = translations[locale];
    document.documentElement.setAttribute("dir", t.dir);
    document.documentElement.setAttribute("lang", t.lang);
    localStorage.setItem("unipam-locale", locale);
  }, [locale]);

  const setLocale = useCallback((l: Locale) => setLocaleState(l), []);
  const toggleLocale = useCallback(
    () => setLocaleState((prev) => (prev === "en" ? "ar" : "en")),
    []
  );

  const value: I18nContextType = {
    locale,
    t: translations[locale],
    dir: translations[locale].dir,
    setLocale,
    toggleLocale,
  };

  return <I18nContext.Provider value={value}>{children}</I18nContext.Provider>;
}

export function useTranslation() {
  const context = useContext(I18nContext);
  if (!context) {
    throw new Error("useTranslation must be used within I18nProvider");
  }
  return context;
}

export { I18nContext };