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

import React, { useState, useEffect, useRef, useMemo } from "react";
import { filterDOMProps } from "@/lib/utils/domPropsFilter";
import { useCodeOptions, useTableCodeCategory } from "@/hooks/queries/useCodes";

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;
  isInteractive?: boolean;
  onFormDataChange?: (fieldName: string, value: any) => void;
  className?: string;
  style?: React.CSSProperties;
  onClick?: () => void;
  onDragStart?: () => void;
  onDragEnd?: () => void;
  value?: any; // 외부에서 전달받는 값
  [key: string]: any;
}

// ✅ React Query를 사용하여 중복 요청 방지 및 자동 캐싱 처리
// - 동일한 queryKey에 대해서는 자동으로 중복 요청 제거
// - 10분 staleTime으로 적절한 캐시 관리
// - 30분 gcTime으로 메모리 효율성 확보

const SelectBasicComponent: React.FC<SelectBasicComponentProps> = ({
  component,
  componentConfig,
  screenId,
  onUpdate,
  isSelected = false,
  isDesignMode = false,
  isInteractive = false,
  onFormDataChange,
  className,
  style,
  onClick,
  onDragStart,
  onDragEnd,
  value: externalValue, // 명시적으로 value prop 받기
  ...props
}) => {
  // 🚨 최우선 디버깅: 컴포넌트가 실행되는지 확인
  console.log("🚨🚨🚨 SelectBasicComponent 실행됨!!!", {
    componentId: component?.id,
    componentType: component?.type,
    webType: component?.webType,
    tableName: component?.tableName,
    columnName: component?.columnName,
    screenId,
    timestamp: new Date().toISOString(),
  });

  const [isOpen, setIsOpen] = useState(false);

  // webTypeConfig 또는 componentConfig 사용 (DynamicWebTypeRenderer 호환성)
  const config = (props as any).webTypeConfig || componentConfig || {};

  // 외부에서 전달받은 value가 있으면 우선 사용, 없으면 config.value 사용
  const [selectedValue, setSelectedValue] = useState(externalValue || config?.value || "");
  const [selectedLabel, setSelectedLabel] = useState("");

  console.log("🔍 SelectBasicComponent 초기화 (React Query):", {
    componentId: component.id,
    externalValue,
    componentConfigValue: componentConfig?.value,
    webTypeConfigValue: (props as any).webTypeConfig?.value,
    configValue: config?.value,
    finalSelectedValue: externalValue || config?.value || "",
    tableName: component.tableName,
    columnName: component.columnName,
    staticCodeCategory: config?.codeCategory,
    // React Query 디버깅 정보
    timestamp: new Date().toISOString(),
    mountCount: ++(window as any).selectMountCount || ((window as any).selectMountCount = 1),
  });

  // 언마운트 시 로깅
  useEffect(() => {
    const componentId = component.id;
    console.log(`🔍 [${componentId}] SelectBasicComponent 마운트됨`);

    return () => {
      console.log(`🔍 [${componentId}] SelectBasicComponent 언마운트됨`);
    };
  }, [component.id]);

  const selectRef = useRef<HTMLDivElement>(null);

  // 안정적인 쿼리 키를 위한 메모이제이션
  const stableTableName = useMemo(() => component.tableName, [component.tableName]);
  const stableColumnName = useMemo(() => component.columnName, [component.columnName]);
  const staticCodeCategory = useMemo(() => config?.codeCategory, [config?.codeCategory]);

  // 🚀 React Query: 테이블 코드 카테고리 조회
  const { data: dynamicCodeCategory } = useTableCodeCategory(stableTableName, stableColumnName);

  // 코드 카테고리 결정: 동적 카테고리 > 설정 카테고리 (메모이제이션)
  const codeCategory = useMemo(() => {
    const category = dynamicCodeCategory || staticCodeCategory;
    console.log(`🔑 [${component.id}] 코드 카테고리 결정:`, {
      dynamicCodeCategory,
      staticCodeCategory,
      finalCategory: category,
    });
    return category;
  }, [dynamicCodeCategory, staticCodeCategory, component.id]);

  // 🚀 React Query: 코드 옵션 조회 (안정적인 enabled 조건)
  const isCodeCategoryValid = useMemo(() => {
    return !!codeCategory && codeCategory !== "none";
  }, [codeCategory]);

  const {
    options: codeOptions,
    isLoading: isLoadingCodes,
    isFetching,
  } = useCodeOptions(codeCategory, isCodeCategoryValid);

  // React Query 상태 디버깅
  useEffect(() => {
    console.log(`🎯 [${component.id}] React Query 상태:`, {
      codeCategory,
      isCodeCategoryValid,
      codeOptionsLength: codeOptions.length,
      isLoadingCodes,
      isFetching,
      cacheStatus: isFetching ? "FETCHING" : "FROM_CACHE",
    });
  }, [component.id, codeCategory, isCodeCategoryValid, codeOptions.length, isLoadingCodes, isFetching]);

  // 외부 value prop 변경 시 selectedValue 업데이트
  useEffect(() => {
    const newValue = externalValue || config?.value || "";
    // 값이 실제로 다른 경우에만 업데이트 (빈 문자열도 유효한 값으로 처리)
    if (newValue !== selectedValue) {
      console.log(`🔄 SelectBasicComponent value 업데이트: "${selectedValue}" → "${newValue}"`);
      console.log("🔍 업데이트 조건 분석:", {
        externalValue,
        componentConfigValue: componentConfig?.value,
        configValue: config?.value,
        newValue,
        selectedValue,
        shouldUpdate: newValue !== selectedValue,
      });
      setSelectedValue(newValue);
    }
  }, [externalValue, config?.value]);

  // ✅ React Query가 자동으로 처리하므로 복잡한 전역 상태 관리 제거
  // - 캐싱: React Query가 자동 관리 (10분 staleTime, 30분 gcTime)
  // - 중복 요청 방지: 동일한 queryKey에 대해 자동 중복 제거
  // - 상태 동기화: 모든 컴포넌트가 같은 캐시 공유

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

    const options = getAllOptions();
    const selectedOption = options.find((option) => option.value === selectedValue);

    // 🎯 코드 타입의 경우 코드값과 코드명을 모두 고려하여 라벨 찾기
    let newLabel = selectedOption?.label || "";

    // selectedOption이 없고 selectedValue가 있다면, 코드명으로도 검색해보기
    if (!selectedOption && selectedValue && codeOptions.length > 0) {
      // 1) selectedValue가 코드명인 경우 (예: "국내")
      const labelMatch = options.find((option) => option.label === selectedValue);
      if (labelMatch) {
        newLabel = labelMatch.label;
        console.log(`🔍 [${component.id}] 코드명으로 매치 발견: "${selectedValue}" → "${newLabel}"`);
      } else {
        // 2) selectedValue가 코드값인 경우라면 원래 로직대로 라벨을 찾되, 없으면 원값 표시
        newLabel = selectedValue; // 코드값 그대로 표시 (예: "555")
        console.log(`🔍 [${component.id}] 코드값 원본 유지: "${selectedValue}"`);
      }
    }

    console.log(`🏷️ [${component.id}] 라벨 업데이트:`, {
      selectedValue,
      selectedOption: selectedOption ? { value: selectedOption.value, label: selectedOption.label } : null,
      newLabel,
      optionsCount: options.length,
      allOptionsValues: options.map((o) => o.value),
      allOptionsLabels: options.map((o) => o.label),
    });

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

  // 클릭 이벤트 핸들러 (React Query로 간소화)
  const handleToggle = () => {
    if (isDesignMode) return;

    console.log(`🖱️ [${component.id}] 드롭다운 토글 (React Query): ${isOpen} → ${!isOpen}`);
    console.log(`📊 [${component.id}] 현재 상태:`, {
      codeCategory,
      isLoadingCodes,
      codeOptionsLength: codeOptions.length,
      tableName: component.tableName,
      columnName: component.columnName,
    });

    // React Query가 자동으로 캐시 관리하므로 수동 새로고침 불필요
    setIsOpen(!isOpen);
  };

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

    // 디자인 모드에서의 컴포넌트 속성 업데이트
    if (onUpdate) {
      onUpdate("value", value);
    }

    // 인터랙티브 모드에서 폼 데이터 업데이트 (TextInputComponent와 동일한 로직)
    if (isInteractive && onFormDataChange && component.columnName) {
      console.log(`📤 SelectBasicComponent -> onFormDataChange 호출: ${component.columnName} = "${value}"`);
      onFormDataChange(component.columnName, value);
    } else {
      console.log("❌ SelectBasicComponent onFormDataChange 조건 미충족:", {
        isInteractive,
        hasOnFormDataChange: !!onFormDataChange,
        hasColumnName: !!component.columnName,
      });
    }

    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]);

  // ✅ React Query가 자동으로 처리하므로 수동 이벤트 리스너 불필요
  // - refetchOnWindowFocus: true (기본값)
  // - refetchOnReconnect: true (기본값)
  // - staleTime으로 적절한 캐시 관리

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

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

  // DOM props에서 React 전용 props 필터링
  const {
    component: _component,
    componentConfig: _componentConfig,
    screenId: _screenId,
    onUpdate: _onUpdate,
    isSelected: _isSelected,
    isDesignMode: _isDesignMode,
    className: _className,
    style: _style,
    onClick: _onClick,
    onDragStart: _onDragStart,
    onDragEnd: _onDragEnd,
    ...otherProps
  } = props;

  const safeDomProps = filterDOMProps(otherProps);

  return (
    <div
      ref={selectRef}
      className={`relative w-full ${className || ""}`}
      style={style}
      onClick={onClick}
      onDragStart={onDragStart}
      onDragEnd={onDragEnd}
      {...safeDomProps}
    >
      {/* 라벨 렌더링 */}
      {component.label && (component.style?.labelDisplay ?? true) && (
        <label
          style={{
            position: "absolute",
            top: "-25px",
            left: "0px",
            fontSize: component.style?.labelFontSize || "14px",
            color: component.style?.labelColor || "#3b83f6",
            fontWeight: "500",
            // isInteractive 모드에서는 사용자 스타일 우선 적용
            ...(isInteractive && component.style ? component.style : {}),
          }}
        >
          {component.label}
          {component.required && <span style={{ color: "#ef4444" }}>*</span>}
        </label>
      )}

      {/* 커스텀 셀렉트 박스 */}
      <div
        className={`flex w-full cursor-pointer items-center justify-between rounded-lg border border-gray-300 bg-white px-3 py-2 ${isDesignMode ? "pointer-events-none" : "hover:border-orange-400"} ${isSelected ? "ring-2 ring-orange-500" : ""} ${isOpen ? "border-orange-500" : ""} `}
        onClick={handleToggle}
        style={{
          pointerEvents: isDesignMode ? "none" : "auto",
          transition: "all 0.2s ease-in-out",
          boxShadow: "0 1px 2px 0 rgba(0, 0, 0, 0.05)",
        }}
        onMouseEnter={(e) => {
          if (!isDesignMode) {
            e.currentTarget.style.borderColor = "#f97316";
            e.currentTarget.style.boxShadow = "0 4px 6px -1px rgba(0, 0, 0, 0.1)";
          }
        }}
        onMouseLeave={(e) => {
          if (!isDesignMode) {
            e.currentTarget.style.borderColor = "#d1d5db";
            e.currentTarget.style.boxShadow = "0 1px 2px 0 rgba(0, 0, 0, 0.05)";
          }
        }}
      >
        <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 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: 99999, // 더 높은 z-index로 설정
          }}
        >
          {(() => {
            console.log(`🎨 [${component.id}] 드롭다운 렌더링:`, {
              isOpen,
              isDesignMode,
              isLoadingCodes,
              allOptionsLength: allOptions.length,
              allOptions: allOptions.map((o: Option) => ({ 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 };