ERP-node/frontend/hooks/useMultiLang.ts

import { useState, useEffect } from "react";
import { apiClient } from "@/lib/api/client";

// 전역 언어 상태 (다른 컴포넌트에서 접근 가능)
let globalUserLang = "KR";
let globalChangeLangCallback: ((lang: string) => void) | null = null;

export const useMultiLang = (options: { companyCode?: string } = {}) => {
  const [userLang, setUserLang] = useState<string | null>(null); // null로 시작
  const companyCode = options.companyCode || "*";

  // 전역 언어 상태 동기화 (무한 루프 방지)
  useEffect(() => {
    // 초기 로딩 시에만 동기화
    if (globalUserLang && globalUserLang !== userLang) {
      setUserLang(globalUserLang);
    }
  }, []); // 의존성 배열을 비워서 한 번만 실행

  // 언어 변경 시 전역 콜백 호출 (무한 루프 방지)
  useEffect(() => {
    // 언어가 설정된 경우에만 콜백 호출
    if (globalChangeLangCallback && userLang) {
      globalChangeLangCallback(userLang);
    }
  }, [userLang]);

  // 사용자 로케일 조회 (한 번만 실행)
  useEffect(() => {
    // localStorage에서 로케일 확인 (새 창에서도 공유)
    const storedLocale = localStorage.getItem("userLocale");
    const storedLocaleLoaded = localStorage.getItem("userLocaleLoaded");

    if (storedLocaleLoaded === "true" && storedLocale) {
      console.log("🌐 localStorage에서 사용자 로케일 사용:", storedLocale);
      setUserLang(storedLocale);
      globalUserLang = storedLocale;

      // 전역 상태도 동기화
      (window as any).__GLOBAL_USER_LANG = storedLocale;
      (window as any).__GLOBAL_USER_LOCALE_LOADED = true;
      return;
    }

    // 전역에서 이미 로케일이 로드되었는지 확인
    if ((window as any).__GLOBAL_USER_LOCALE_LOADED) {
      const globalLocale = (window as any).__GLOBAL_USER_LANG;
      console.log("🌐 전역에서 사용자 로케일 사용:", globalLocale);
      setUserLang(globalLocale);
      globalUserLang = globalLocale;
      return;
    }

    // 이미 로케일이 설정되어 있으면 중복 호출 방지
    if (globalUserLang) {
      setUserLang(globalUserLang);
      return;
    }

    // 전역 로케일이 아직 로드되지 않았으면 대기
    console.log("⏳ 전역 로케일 로드 대기 중...");

    // 주기적으로 전역 로케일 확인 (더 빠른 간격으로)
    const checkInterval = setInterval(() => {
      if ((window as any).__GLOBAL_USER_LOCALE_LOADED) {
        const globalLocale = (window as any).__GLOBAL_USER_LANG;
        console.log("🌐 전역에서 사용자 로케일 확인됨:", globalLocale);
        setUserLang(globalLocale);
        globalUserLang = globalLocale;
        clearInterval(checkInterval);
      }
    }, 50); // 50ms로 단축

    // 3초 후 타임아웃 (더 빠른 타임아웃)
    setTimeout(() => {
      clearInterval(checkInterval);
      if (!userLang) {
        console.warn("⚠️ 전역 로케일 로드 타임아웃, 기본값 사용");
        setUserLang("KR");
        globalUserLang = "KR";
      }
    }, 3000); // 3초로 단축

    return () => clearInterval(checkInterval);
  }, []);

  // 다국어 텍스트 가져오기 (배치 조회 방식)
  const getText = async (menuCode: string, langKey: string, fallback?: string): Promise<string> => {
    console.log("🔍 다국어 텍스트 요청 (배치 방식):", { menuCode, langKey, userLang, companyCode });

    try {
      // 배치 조회 API 사용
      const response = await apiClient.post(
        "/multilang/batch",
        {
          langKeys: [langKey],
        },
        {
          params: {
            companyCode,
            menuCode,
            userLang,
          },
        },
      );

      console.log("📡 배치 API 응답 상태:", response.status, response.statusText);

      if (response.data.success && response.data.data && response.data.data[langKey]) {
        // 번역 텍스트를 캐시에 저장
        const cacheKey = `${menuCode}.${langKey}`;
        const currentCache = (window as any).__TRANSLATION_CACHE || {};
        currentCache[cacheKey] = response.data.data[langKey];
        (window as any).__TRANSLATION_CACHE = currentCache;

        return response.data.data[langKey];
      }

      // 실패 시 fallback 또는 키 반환
      console.log("🔄 배치 API 성공했지만 데이터 없음, fallback 반환:", fallback || langKey);
      return fallback || langKey;
    } catch (error) {
      console.error("❌ 다국어 텍스트 배치 조회 실패:", error);
      console.log("🔄 에러 시 fallback 반환:", fallback || langKey);
      return fallback || langKey;
    }
  };

  // 언어 변경 (무한 루프 방지)
  const changeLang = async (newLang: string) => {
    // 같은 언어로 변경하려는 경우 무시
    if (newLang === userLang) {
      console.log("🔄 같은 언어로 변경 시도 무시:", newLang);
      return;
    }

    try {
      console.log("🔄 언어 변경 시작:", { from: userLang, to: newLang });

      // 백엔드에 사용자 로케일 설정 요청
      const response = await apiClient.post("/admin/user-locale", {
        locale: newLang,
      });

      if (response.data.success) {
        // 전역 상태 먼저 업데이트
        globalUserLang = newLang;
        // 로컬 상태 업데이트
        setUserLang(newLang);
        console.log("✅ 사용자 로케일 변경 성공:", newLang);
      } else {
        console.error("❌ 사용자 로케일 변경 실패:", response.data.message);
      }
    } catch (error) {
      console.error("❌ 사용자 로케일 변경 중 오류:", error);
      // 오류 시에도 로컬 상태는 변경
      globalUserLang = newLang;
      setUserLang(newLang);
    }
  };

  // 전역 언어 상태 접근자
  const getGlobalUserLang = () => globalUserLang;
  const setGlobalChangeLangCallback = (callback: (lang: string) => void) => {
    globalChangeLangCallback = callback;
  };

  return {
    userLang,
    getText,
    changeLang,
    companyCode,
    getGlobalUserLang,
    setGlobalChangeLangCallback,
  };
};