ERP-node/frontend/lib/registry/components/select-basic/SelectBasicComponent.tsx

import React, { useState, useEffect, useRef } from "react";
import { commonCodeApi } from "../../../api/commonCode";
import { tableTypeApi } from "../../../api/screen";

interface Option {
  value: string;
  label: string;
}

export interface SelectBasicComponentProps {
  component: any;
  componentConfig: any;
  screenId?: number;
  onUpdate?: (field: string, value: any) => void;
  isSelected?: boolean;
  isDesignMode?: boolean;
  className?: string;
  style?: React.CSSProperties;
  onClick?: () => void;
  onDragStart?: () => void;
  onDragEnd?: () => void;
  [key: string]: any;
}

// 🚀 전역 상태 관리: 모든 컴포넌트가 공유하는 상태
interface GlobalState {
  tableCategories: Map<string, string>; // tableName.columnName -> codeCategory
  codeOptions: Map<string, { options: Option[]; timestamp: number }>; // codeCategory -> options
  activeRequests: Map<string, Promise<any>>; // 진행 중인 요청들
  subscribers: Set<() => void>; // 상태 변경 구독자들
}

const globalState: GlobalState = {
  tableCategories: new Map(),
  codeOptions: new Map(),
  activeRequests: new Map(),
  subscribers: new Set(),
};

// 전역 상태 변경 알림
const notifyStateChange = () => {
  globalState.subscribers.forEach((callback) => callback());
};

// 캐시 유효 시간 (5분)
const CACHE_DURATION = 5 * 60 * 1000;

// 🔧 전역 테이블 코드 카테고리 로딩 (중복 방지)
const loadGlobalTableCodeCategory = async (tableName: string, columnName: string): Promise<string | null> => {
  const key = `${tableName}.${columnName}`;

  // 이미 진행 중인 요청이 있으면 대기
  if (globalState.activeRequests.has(`table_${key}`)) {
    try {
      await globalState.activeRequests.get(`table_${key}`);
    } catch (error) {
      console.error(`❌ 테이블 설정 로딩 대기 중 오류:`, error);
    }
  }

  // 캐시된 값이 있으면 반환
  if (globalState.tableCategories.has(key)) {
    const cachedCategory = globalState.tableCategories.get(key);
    console.log(`✅ 캐시된 테이블 설정 사용: ${key} -> ${cachedCategory}`);
    return cachedCategory || null;
  }

  // 새로운 요청 생성
  const request = (async () => {
    try {
      console.log(`🔍 테이블 코드 카테고리 조회: ${key}`);
      const columns = await tableTypeApi.getColumns(tableName);
      const targetColumn = columns.find((col) => col.columnName === columnName);

      const codeCategory =
        targetColumn?.codeCategory && targetColumn.codeCategory !== "none" ? targetColumn.codeCategory : null;

      // 전역 상태에 저장
      globalState.tableCategories.set(key, codeCategory || "");

      console.log(`✅ 테이블 설정 조회 완료: ${key} -> ${codeCategory}`);

      // 상태 변경 알림
      notifyStateChange();

      return codeCategory;
    } catch (error) {
      console.error(`❌ 테이블 코드 카테고리 조회 실패: ${key}`, error);
      return null;
    } finally {
      globalState.activeRequests.delete(`table_${key}`);
    }
  })();

  globalState.activeRequests.set(`table_${key}`, request);
  return request;
};

// 🔧 전역 코드 옵션 로딩 (중복 방지)
const loadGlobalCodeOptions = async (codeCategory: string): Promise<Option[]> => {
  if (!codeCategory || codeCategory === "none") {
    return [];
  }

  // 이미 진행 중인 요청이 있으면 대기
  if (globalState.activeRequests.has(`code_${codeCategory}`)) {
    try {
      await globalState.activeRequests.get(`code_${codeCategory}`);
    } catch (error) {
      console.error(`❌ 코드 옵션 로딩 대기 중 오류:`, error);
    }
  }

  // 캐시된 값이 유효하면 반환
  const cached = globalState.codeOptions.get(codeCategory);
  if (cached && Date.now() - cached.timestamp < CACHE_DURATION) {
    console.log(`✅ 캐시된 코드 옵션 사용: ${codeCategory} (${cached.options.length}개)`);
    return cached.options;
  }

  // 새로운 요청 생성
  const request = (async () => {
    try {
      console.log(`🔄 코드 옵션 로딩: ${codeCategory}`);
      const response = await commonCodeApi.codes.getList(codeCategory, { isActive: true });

      console.log(`🔍 [API 응답 원본] ${codeCategory}:`, {
        response,
        success: response.success,
        data: response.data,
        dataType: typeof response.data,
        isArray: Array.isArray(response.data),
        dataLength: response.data?.length,
        firstItem: response.data?.[0],
      });

      if (response.success && response.data) {
        const options = response.data.map((code: any, index: number) => {
          console.log(`🔍 [코드 매핑] ${index}:`, {
            originalCode: code,
            codeKeys: Object.keys(code),
            values: Object.values(code),
            // 가능한 모든 필드 확인
            code: code.code,
            codeName: code.codeName,
            name: code.name,
            label: code.label,
            // 대문자 버전
            CODE: code.CODE,
            CODE_NAME: code.CODE_NAME,
            NAME: code.NAME,
            LABEL: code.LABEL,
            // 스네이크 케이스
            code_name: code.code_name,
            code_value: code.code_value,
            // 기타 가능한 필드들
            value: code.value,
            text: code.text,
            title: code.title,
            description: code.description,
          });

          // 실제 값 찾기 시도 (우선순위 순)
          const actualValue = code.code || code.CODE || code.value || code.code_value || `code_${index}`;
          const actualLabel =
            code.codeName ||
            code.name ||
            code.CODE_NAME ||
            code.NAME ||
            code.label ||
            code.LABEL ||
            code.text ||
            code.title ||
            code.description ||
            actualValue;

          console.log(`✨ [최종 매핑] ${index}:`, {
            actualValue,
            actualLabel,
            hasValue: !!actualValue,
            hasLabel: !!actualLabel,
          });

          return {
            value: actualValue,
            label: actualLabel,
          };
        });

        console.log(`🔍 [최종 옵션 배열] ${codeCategory}:`, {
          optionsLength: options.length,
          options: options.map((opt, idx) => ({
            index: idx,
            value: opt.value,
            label: opt.label,
            hasLabel: !!opt.label,
            hasValue: !!opt.value,
          })),
        });

        // 전역 상태에 저장
        globalState.codeOptions.set(codeCategory, {
          options,
          timestamp: Date.now(),
        });

        console.log(`✅ 코드 옵션 로딩 완료: ${codeCategory} (${options.length}개)`);

        // 상태 변경 알림
        notifyStateChange();

        return options;
      } else {
        console.log(`⚠️ 빈 응답: ${codeCategory}`);
        return [];
      }
    } catch (error) {
      console.error(`❌ 코드 옵션 로딩 실패: ${codeCategory}`, error);
      return [];
    } finally {
      globalState.activeRequests.delete(`code_${codeCategory}`);
    }
  })();

  globalState.activeRequests.set(`code_${codeCategory}`, request);
  return request;
};

const SelectBasicComponent: React.FC<SelectBasicComponentProps> = ({
  component,
  componentConfig,
  screenId,
  onUpdate,
  isSelected = false,
  isDesignMode = false,
  className,
  style,
  onClick,
  onDragStart,
  onDragEnd,
  ...props
}) => {
  const [isOpen, setIsOpen] = useState(false);
  const [selectedValue, setSelectedValue] = useState(componentConfig?.value || "");
  const [selectedLabel, setSelectedLabel] = useState("");
  const [codeOptions, setCodeOptions] = useState<Option[]>([]);
  const [isLoadingCodes, setIsLoadingCodes] = useState(false);
  const [dynamicCodeCategory, setDynamicCodeCategory] = useState<string | null>(null);
  const [globalStateVersion, setGlobalStateVersion] = useState(0); // 전역 상태 변경 감지용
  const selectRef = useRef<HTMLDivElement>(null);

  // 코드 카테고리 결정: 동적 카테고리 > 설정 카테고리
  const codeCategory = dynamicCodeCategory || componentConfig?.codeCategory;

  // 🚀 전역 상태 구독 및 동기화
  useEffect(() => {
    const updateFromGlobalState = () => {
      setGlobalStateVersion((prev) => prev + 1);
    };

    // 전역 상태 변경 구독
    globalState.subscribers.add(updateFromGlobalState);

    return () => {
      globalState.subscribers.delete(updateFromGlobalState);
    };
  }, []);

  // 🔧 테이블 코드 카테고리 로드 (전역 상태 사용)
  const loadTableCodeCategory = async () => {
    if (!component.tableName || !component.columnName) return;

    try {
      console.log(`🔍 [${component.id}] 전역 테이블 코드 카테고리 조회`);
      const category = await loadGlobalTableCodeCategory(component.tableName, component.columnName);

      if (category !== dynamicCodeCategory) {
        console.log(`🔄 [${component.id}] 코드 카테고리 변경: ${dynamicCodeCategory} → ${category}`);
        setDynamicCodeCategory(category);
      }
    } catch (error) {
      console.error(`❌ [${component.id}] 테이블 코드 카테고리 조회 실패:`, error);
    }
  };

  // 🔧 코드 옵션 로드 (전역 상태 사용)
  const loadCodeOptions = async (category: string) => {
    if (!category || category === "none") {
      setCodeOptions([]);
      setIsLoadingCodes(false);
      return;
    }

    try {
      setIsLoadingCodes(true);
      console.log(`🔄 [${component.id}] 전역 코드 옵션 로딩: ${category}`);

      const options = await loadGlobalCodeOptions(category);
      setCodeOptions(options);

      console.log(`✅ [${component.id}] 코드 옵션 업데이트 완료: ${category} (${options.length}개)`);
    } catch (error) {
      console.error(`❌ [${component.id}] 코드 옵션 로딩 실패:`, error);
      setCodeOptions([]);
    } finally {
      setIsLoadingCodes(false);
    }
  };

  // 초기 테이블 코드 카테고리 로드
  useEffect(() => {
    loadTableCodeCategory();
  }, [component.tableName, component.columnName]);

  // 전역 상태 변경 시 동기화
  useEffect(() => {
    if (component.tableName && component.columnName) {
      const key = `${component.tableName}.${component.columnName}`;
      const cachedCategory = globalState.tableCategories.get(key);

      if (cachedCategory && cachedCategory !== dynamicCodeCategory) {
        console.log(`🔄 [${component.id}] 전역 상태 동기화: ${dynamicCodeCategory} → ${cachedCategory}`);
        setDynamicCodeCategory(cachedCategory || null);
      }
    }
  }, [globalStateVersion, component.tableName, component.columnName]);

  // 코드 카테고리 변경 시 옵션 로드
  useEffect(() => {
    if (codeCategory && codeCategory !== "none") {
      // 전역 캐시된 옵션부터 확인
      const cached = globalState.codeOptions.get(codeCategory);
      if (cached && Date.now() - cached.timestamp < CACHE_DURATION) {
        console.log(`🚀 [${component.id}] 전역 캐시 즉시 적용: ${codeCategory} (${cached.options.length}개)`);
        setCodeOptions(cached.options);
        setIsLoadingCodes(false);
      } else {
        loadCodeOptions(codeCategory);
      }
    } else {
      setCodeOptions([]);
      setIsLoadingCodes(false);
    }
  }, [codeCategory]);

  // 전역 상태에서 코드 옵션 변경 감지
  useEffect(() => {
    if (codeCategory) {
      const cached = globalState.codeOptions.get(codeCategory);
      if (cached && Date.now() - cached.timestamp < CACHE_DURATION) {
        if (JSON.stringify(cached.options) !== JSON.stringify(codeOptions)) {
          console.log(`🔄 [${component.id}] 전역 옵션 변경 감지: ${codeCategory}`);
          setCodeOptions(cached.options);
        }
      }
    }
  }, [globalStateVersion, codeCategory]);

  // 선택된 값에 따른 라벨 업데이트
  useEffect(() => {
    const getAllOptions = () => {
      const configOptions = componentConfig.options || [];
      return [...codeOptions, ...configOptions];
    };

    const options = getAllOptions();
    const selectedOption = options.find((option) => option.value === selectedValue);
    const newLabel = selectedOption?.label || "";

    if (newLabel !== selectedLabel) {
      setSelectedLabel(newLabel);
    }
  }, [selectedValue, codeOptions, componentConfig.options]);

  // 클릭 이벤트 핸들러 (전역 상태 새로고침)
  const handleToggle = () => {
    if (isDesignMode) return;

    console.log(`🖱️ [${component.id}] 드롭다운 토글: ${isOpen} → ${!isOpen}`);
    console.log(`📊 [${component.id}] 현재 상태:`, {
      isDesignMode,
      isLoadingCodes,
      allOptionsLength: allOptions.length,
      allOptions: allOptions.map((o) => ({ value: o.value, label: o.label })),
    });

    // 드롭다운을 열 때 전역 상태 새로고침
    if (!isOpen) {
      console.log(`🖱️ [${component.id}] 셀렉트박스 클릭 - 전역 상태 새로고침`);

      // 테이블 설정 캐시 무효화 후 재로드
      if (component.tableName && component.columnName) {
        const key = `${component.tableName}.${component.columnName}`;
        globalState.tableCategories.delete(key);

        // 현재 코드 카테고리의 캐시도 무효화
        if (dynamicCodeCategory) {
          globalState.codeOptions.delete(dynamicCodeCategory);
          console.log(`🗑️ [${component.id}] 코드 옵션 캐시 무효화: ${dynamicCodeCategory}`);

          // 강제로 새로운 API 호출 수행
          console.log(`🔄 [${component.id}] 강제 코드 옵션 재로드 시작: ${dynamicCodeCategory}`);
          loadCodeOptions(dynamicCodeCategory);
        }

        loadTableCodeCategory();
      }
    }

    setIsOpen(!isOpen);
  };

  // 옵션 선택 핸들러
  const handleOptionSelect = (value: string, label: string) => {
    setSelectedValue(value);
    setSelectedLabel(label);
    setIsOpen(false);

    if (onUpdate) {
      onUpdate("value", value);
    }

    console.log(`✅ [${component.id}] 옵션 선택:`, { value, label });
  };

  // 외부 클릭 시 드롭다운 닫기
  useEffect(() => {
    const handleClickOutside = (event: MouseEvent) => {
      if (selectRef.current && !selectRef.current.contains(event.target as Node)) {
        setIsOpen(false);
      }
    };

    if (isOpen) {
      document.addEventListener("mousedown", handleClickOutside);
    }

    return () => {
      document.removeEventListener("mousedown", handleClickOutside);
    };
  }, [isOpen]);

  // 🚀 실시간 업데이트를 위한 이벤트 리스너
  useEffect(() => {
    const handleFocus = () => {
      console.log(`👁️ [${component.id}] 윈도우 포커스 - 전역 상태 새로고침`);
      if (component.tableName && component.columnName) {
        const key = `${component.tableName}.${component.columnName}`;
        globalState.tableCategories.delete(key); // 캐시 무효화
        loadTableCodeCategory();
      }
    };

    const handleVisibilityChange = () => {
      if (!document.hidden) {
        console.log(`👁️ [${component.id}] 페이지 가시성 변경 - 전역 상태 새로고침`);
        if (component.tableName && component.columnName) {
          const key = `${component.tableName}.${component.columnName}`;
          globalState.tableCategories.delete(key); // 캐시 무효화
          loadTableCodeCategory();
        }
      }
    };

    window.addEventListener("focus", handleFocus);
    document.addEventListener("visibilitychange", handleVisibilityChange);

    return () => {
      window.removeEventListener("focus", handleFocus);
      document.removeEventListener("visibilitychange", handleVisibilityChange);
    };
  }, [component.tableName, component.columnName]);

  // 모든 옵션 가져오기
  const getAllOptions = () => {
    const configOptions = componentConfig.options || [];
    console.log(`🔧 [${component.id}] 옵션 병합:`, {
      codeOptionsLength: codeOptions.length,
      codeOptions: codeOptions.map((o) => ({ value: o.value, label: o.label })),
      configOptionsLength: configOptions.length,
      configOptions: configOptions.map((o) => ({ value: o.value, label: o.label })),
    });
    return [...codeOptions, ...configOptions];
  };

  const allOptions = getAllOptions();
  const placeholder = componentConfig.placeholder || "선택하세요";

  return (
    <div
      ref={selectRef}
      className={`relative w-full ${className || ""}`}
      style={style}
      onClick={onClick}
      onDragStart={onDragStart}
      onDragEnd={onDragEnd}
      {...props}
    >
      {/* 커스텀 셀렉트 박스 */}
      <div
        className={`flex w-full cursor-pointer items-center justify-between rounded-md border border-gray-300 bg-white px-3 py-2 ${isDesignMode ? "pointer-events-none" : "hover:border-gray-400"} ${isSelected ? "ring-2 ring-blue-500" : ""} ${isOpen ? "border-blue-500" : ""} `}
        onClick={handleToggle}
        style={{
          pointerEvents: isDesignMode ? "none" : "auto",
        }}
      >
        <span className={selectedLabel ? "text-gray-900" : "text-gray-500"}>{selectedLabel || placeholder}</span>

        {/* 드롭다운 아이콘 */}
        <svg
          className={`h-4 w-4 transition-transform ${isOpen ? "rotate-180" : ""}`}
          fill="none"
          stroke="currentColor"
          viewBox="0 0 24 24"
        >
          <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 9l-7 7-7-7" />
        </svg>
      </div>

      {/* 드롭다운 옵션 */}
      {isOpen && !isDesignMode && (
        <div
          className="absolute z-50 mt-1 max-h-60 w-full overflow-auto rounded-md border border-gray-300 bg-white shadow-lg"
          style={{
            backgroundColor: "white",
            color: "black",
            zIndex: 9999,
          }}
        >
          {(() => {
            console.log(`🎨 [${component.id}] 드롭다운 렌더링:`, {
              isOpen,
              isDesignMode,
              isLoadingCodes,
              allOptionsLength: allOptions.length,
              allOptions: allOptions.map((o) => ({ value: o.value, label: o.label })),
            });
            return null;
          })()}
          {isLoadingCodes ? (
            <div className="bg-white px-3 py-2 text-gray-900">로딩 중...</div>
          ) : allOptions.length > 0 ? (
            allOptions.map((option, index) => (
              <div
                key={`${option.value}-${index}`}
                className="cursor-pointer bg-white px-3 py-2 text-gray-900 hover:bg-gray-100"
                style={{
                  color: "black",
                  backgroundColor: "white",
                  minHeight: "32px",
                  border: "1px solid #e5e7eb",
                }}
                onClick={() => handleOptionSelect(option.value, option.label)}
              >
                {option.label || option.value || `옵션 ${index + 1}`}
              </div>
            ))
          ) : (
            <div className="bg-white px-3 py-2 text-gray-900">옵션이 없습니다</div>
          )}
        </div>
      )}
    </div>
  );
};

// Wrapper 컴포넌트 (기존 호환성을 위해)
export const SelectBasicWrapper = SelectBasicComponent;

// 기본 export
export { SelectBasicComponent };