"use client";

import {
  createContext,
  useContext,
  useEffect,
  useState,
} from "react";

import { T, detectLang, Lang } from "@/lib/i18n";
import { api } from "@/lib/api";

type ContextType = {
  lang: Lang;
  setLang: (l: Lang) => void;
  
  t: typeof T.en;
};

const LanguageContext = createContext<ContextType>(null!);

export function LanguageProvider({
  children,
}: {
  children: React.ReactNode;
}) {

  const [lang, setLang] = useState<Lang>("en");
  const [loaded, setLoaded] = useState(false);


  useEffect(() => {

    async function loadLanguage() {

      try {

        // First check saved language
        const saved = localStorage.getItem("language") as Lang | null;

        if (saved) {
          setLang(saved);
        }


        // Then get organization language from database
        const API = process.env.NEXT_PUBLIC_API_URL || "http://localhost:8000";

const res = await fetch(`${API}/organization`, {
    headers: {
        Authorization: `Bearer ${localStorage.getItem("vp_token")}`,
    },
});

        if (res.ok) {
          const org = await res.json();

          if (org.language) {
            setLang(org.language);
            localStorage.setItem(
              "language",
              org.language
            );
          }
        }


      } catch (error) {
        console.log("Language loading error", error);

        const saved =
          localStorage.getItem("language") as Lang | null;

        setLang(saved || detectLang());
      }

      setLoaded(true);
    }


    loadLanguage();

  }, []);



  useEffect(() => {
    if(loaded){
      localStorage.setItem(
        "language",
        lang
      );
    }
  }, [lang, loaded]);



  if(!loaded){
    return null;
  }


  return (
    <LanguageContext.Provider
      value={{
        lang,
        setLang,
        t: T[lang] ?? T.en,
      }}
    >
      {children}
    </LanguageContext.Provider>
  );
}


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