import { createContext, useContext, useState, useEffect, ReactNode } from "react";
import { LocalizedString } from "@/types/booth";

export type Language = "en" | "zh";

interface I18nContextType {
  language: Language;
  setLanguage: (lang: Language) => void;
  toggleLanguage: () => void;
  t: (field: LocalizedString | string | undefined, fallback?: string) => string;
  isWeChat: boolean;
}

const I18nContext = createContext<I18nContextType | null>(null);

export function I18nProvider({ children }: { children: ReactNode }) {
  const [language, setLanguageState] = useState<Language>("zh");
  const [isWeChat, setIsWeChat] = useState<boolean>(false);

  useEffect(() => {
    if (typeof window !== "undefined") {
      // 1. Detect WeChat browser environment
      const ua = navigator.userAgent.toLowerCase();
      const inWeChat = ua.includes("micromessenger");
      setIsWeChat(inWeChat);

      // 2. Check stored preference first
      const stored = localStorage.getItem("booth_lang") as Language | null;
      if (stored === "en" || stored === "zh") {
        setLanguageState(stored);
        return;
      }

      // 3. Fallback to system / browser language
      const browserLang = (navigator.language || "").toLowerCase();
      if (browserLang.startsWith("zh")) {
        setLanguageState("zh");
      } else {
        setLanguageState("en");
      }
    }
  }, []);

  const setLanguage = (lang: Language) => {
    setLanguageState(lang);
    if (typeof window !== "undefined") {
      localStorage.setItem("booth_lang", lang);
    }
  };

  const toggleLanguage = () => {
    const nextLang = language === "zh" ? "en" : "zh";
    setLanguage(nextLang);
  };

  const t = (field: LocalizedString | string | undefined, fallback: string = ""): string => {
    if (!field) return fallback;
    if (typeof field === "string") return field;
    return field[language] || field.en || fallback;
  };

  return (
    <I18nContext.Provider value={{ language, setLanguage, toggleLanguage, t, isWeChat }}>
      {children}
    </I18nContext.Provider>
  );
}

export function useI18n() {
  const context = useContext(I18nContext);
  if (!context) {
    return {
      language: "zh" as Language,
      setLanguage: () => {},
      toggleLanguage: () => {},
      t: (field: LocalizedString | string | undefined, fallback: string = "") => {
        if (!field) return fallback;
        if (typeof field === "string") return field;
        return field.zh || field.en || fallback;
      },
      isWeChat: false,
    };
  }
  return context;
}