"use client";

import React, { useState, useEffect, useRef } from "react";
import { Input } from "@/components/ui/input";
import { Button } from "@/components/ui/button";
import { Search, X, Check, ChevronsUpDown } from "lucide-react";
import { EntitySearchModal } from "./EntitySearchModal";
import { EntitySearchInputProps, EntitySearchResult } from "./types";
import { cn } from "@/lib/utils";
import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover";
import { Command, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList } from "@/components/ui/command";
import { dynamicFormApi } from "@/lib/api/dynamicForm";
import { cascadingRelationApi } from "@/lib/api/cascadingRelation";

export function EntitySearchInputComponent({
  tableName,
  displayField,
  valueField,
  searchFields = [displayField],
  mode: modeProp,
  uiMode, // EntityConfigPanel에서 저장되는 값
  placeholder = "검색...",
  disabled = false,
  filterCondition = {},
  value,
  onChange,
  modalTitle = "검색",
  modalColumns = [],
  showAdditionalInfo = false,
  additionalFields = [],
  className,
  style,
  // 연쇄관계 props
  cascadingRelationCode,
  parentValue: parentValueProp,
  parentFieldId,
  formData,
  // 다중선택 props
  multiple: multipleProp,
  // 추가 props
  component,
  isInteractive,
  onFormDataChange,
}: EntitySearchInputProps & {
  uiMode?: string;
  component?: any;
  isInteractive?: boolean;
  onFormDataChange?: (fieldName: string, value: any) => void;
  webTypeConfig?: any; // 웹타입 설정 (연쇄관계 등)
}) {
  // uiMode가 있으면 우선 사용, 없으면 modeProp 사용, 기본값 "combo"
  const mode = (uiMode || modeProp || "combo") as "select" | "modal" | "combo" | "autocomplete";

  // 다중선택 및 연쇄관계 설정 (props > webTypeConfig > componentConfig 순서)
  const config = component?.componentConfig || component?.webTypeConfig || {};
  const isMultiple = multipleProp ?? config.multiple ?? false;

  // 연쇄관계 설정 추출
  const effectiveCascadingRelationCode = cascadingRelationCode || config.cascadingRelationCode;
  // cascadingParentField: ConfigPanel에서 저장되는 필드명
  const effectiveParentFieldId = parentFieldId || config.cascadingParentField || config.parentFieldId;
  const effectiveCascadingRole = config.cascadingRole; // "parent" | "child" | undefined

  // 부모 역할이면 연쇄관계 로직 적용 안함 (자식만 부모 값에 따라 필터링됨)
  const isChildRole = effectiveCascadingRole === "child";
  const shouldApplyCascading = effectiveCascadingRelationCode && isChildRole;

  const [modalOpen, setModalOpen] = useState(false);
  const [selectOpen, setSelectOpen] = useState(false);
  const [displayValue, setDisplayValue] = useState("");
  const [selectedData, setSelectedData] = useState<EntitySearchResult | null>(null);
  const [options, setOptions] = useState<EntitySearchResult[]>([]);
  const [isLoadingOptions, setIsLoadingOptions] = useState(false);
  const [optionsLoaded, setOptionsLoaded] = useState(false);

  // 다중선택 상태 (콤마로 구분된 값들)
  const [selectedValues, setSelectedValues] = useState<string[]>([]);
  const [selectedDataList, setSelectedDataList] = useState<EntitySearchResult[]>([]);

  // 연쇄관계 상태
  const [cascadingOptions, setCascadingOptions] = useState<EntitySearchResult[]>([]);
  const [isCascadingLoading, setIsCascadingLoading] = useState(false);
  const previousParentValue = useRef<any>(null);

  // 다중선택 초기값 설정
  useEffect(() => {
    if (isMultiple && value) {
      const vals =
        typeof value === "string" ? value.split(",").filter(Boolean) : Array.isArray(value) ? value : [value];
      setSelectedValues(vals.map(String));
    } else if (isMultiple && !value) {
      setSelectedValues([]);
      setSelectedDataList([]);
    }
  }, [isMultiple, value]);

  // 부모 필드 값 결정 (직접 전달 또는 formData에서 추출) - 자식 역할일 때만 필요
  const parentValue = isChildRole
    ? (parentValueProp ?? (effectiveParentFieldId && formData ? formData[effectiveParentFieldId] : undefined))
    : undefined;

  // filterCondition을 문자열로 변환하여 비교 (객체 참조 문제 해결)
  const filterConditionKey = JSON.stringify(filterCondition || {});

  // 연쇄관계가 설정된 경우: 부모 값이 변경되면 자식 옵션 로드 (자식 역할일 때만)
  useEffect(() => {
    const loadCascadingOptions = async () => {
      if (!shouldApplyCascading) return;

      // 부모 값이 없으면 옵션 초기화
      if (!parentValue) {
        setCascadingOptions([]);
        // 부모 값이 변경되면 현재 값도 초기화
        if (previousParentValue.current !== null && previousParentValue.current !== parentValue) {
          handleClear();
        }
        previousParentValue.current = parentValue;
        return;
      }

      // 부모 값이 동일하면 스킵
      if (previousParentValue.current === parentValue) {
        return;
      }

      previousParentValue.current = parentValue;
      setIsCascadingLoading(true);

      try {
        console.log("🔗 연쇄관계 옵션 로드:", { effectiveCascadingRelationCode, parentValue });
        const response = await cascadingRelationApi.getOptions(effectiveCascadingRelationCode, String(parentValue));

        if (response.success && response.data) {
          // 옵션을 EntitySearchResult 형태로 변환
          const formattedOptions = response.data.map((opt: any) => ({
            [valueField]: opt.value,
            [displayField]: opt.label,
            ...opt, // 추가 필드도 포함
          }));
          setCascadingOptions(formattedOptions);
          console.log("✅ 연쇄관계 옵션 로드 완료:", formattedOptions.length, "개");

          // 현재 선택된 값이 새 옵션에 없으면 초기화
          if (value && !formattedOptions.find((opt: any) => opt[valueField] === value)) {
            handleClear();
          }
        } else {
          setCascadingOptions([]);
        }
      } catch (error) {
        console.error("❌ 연쇄관계 옵션 로드 실패:", error);
        setCascadingOptions([]);
      } finally {
        setIsCascadingLoading(false);
      }
    };

    loadCascadingOptions();
  }, [shouldApplyCascading, effectiveCascadingRelationCode, parentValue, valueField, displayField]);

  // select 모드일 때 옵션 로드 (연쇄관계가 없거나 부모 역할인 경우)
  useEffect(() => {
    if (mode === "select" && tableName && !optionsLoaded && !shouldApplyCascading) {
      loadOptions();
      setOptionsLoaded(true);
    }
  }, [mode, tableName, filterConditionKey, optionsLoaded, shouldApplyCascading]);

  const loadOptions = async () => {
    if (!tableName) return;

    setIsLoadingOptions(true);
    try {
      const response = await dynamicFormApi.getTableData(tableName, {
        page: 1,
        pageSize: 100, // 최대 100개까지 로드
        filters: filterCondition,
      });

      if (response.success && response.data) {
        setOptions(response.data);
      }
    } catch (error) {
      console.error("옵션 로드 실패:", error);
    } finally {
      setIsLoadingOptions(false);
    }
  };

  // 실제 사용할 옵션 목록 (자식 역할이고 연쇄관계가 있으면 연쇄 옵션 사용)
  const effectiveOptions = shouldApplyCascading ? cascadingOptions : options;
  const isLoading = shouldApplyCascading ? isCascadingLoading : isLoadingOptions;

  // value가 변경되면 표시값 업데이트 (외래키 값으로 데이터 조회)
  useEffect(() => {
    const loadDisplayValue = async () => {
      // value가 없으면 초기화
      if (!value) {
        setDisplayValue("");
        setSelectedData(null);
        return;
      }

      // 이미 selectedData가 있고 value와 일치하면 표시값만 업데이트
      if (selectedData && String(selectedData[valueField]) === String(value)) {
        setDisplayValue(selectedData[displayField] || "");
        return;
      }

      // select 모드에서 options가 로드된 경우 먼저 옵션에서 찾기
      if (mode === "select" && effectiveOptions.length > 0) {
        // 타입 변환하여 비교 (숫자 vs 문자열 문제 해결)
        const found = effectiveOptions.find((opt) => String(opt[valueField]) === String(value));
        if (found) {
          setSelectedData(found);
          setDisplayValue(found[displayField] || "");
          console.log("✅ [EntitySearchInput] 옵션에서 초기값 찾음:", { value, found });
          return;
        }
        // 옵션에서 찾지 못한 경우 API로 조회 진행
        console.log("⚠️ [EntitySearchInput] 옵션에서 찾지 못함, API로 조회:", {
          value,
          optionsCount: effectiveOptions.length,
        });
      }

      // API로 해당 데이터 조회
      if (tableName) {
        try {
          console.log("🔍 [EntitySearchInput] 초기값 조회:", { value, tableName, valueField });
          const response = await dynamicFormApi.getTableData(tableName, {
            filters: { [valueField]: value },
            pageSize: 1,
          });

          if (response.success && response.data) {
            // 데이터 추출 (중첩 구조 처리)
            const responseData = response.data as any;
            const dataArray = Array.isArray(responseData)
              ? responseData
              : responseData?.data
                ? Array.isArray(responseData.data)
                  ? responseData.data
                  : [responseData.data]
                : [];

            if (dataArray.length > 0) {
              const foundData = dataArray[0];
              setSelectedData(foundData);
              setDisplayValue(foundData[displayField] || "");
              console.log("✅ [EntitySearchInput] 초기값 로드 완료:", foundData);
            } else {
              // 데이터를 찾지 못한 경우 value 자체를 표시
              console.log("⚠️ [EntitySearchInput] 초기값 데이터 없음, value 표시:", value);
              setDisplayValue(String(value));
            }
          } else {
            console.log("⚠️ [EntitySearchInput] API 응답 실패, value 표시:", value);
            setDisplayValue(String(value));
          }
        } catch (error) {
          console.error("❌ [EntitySearchInput] 초기값 조회 실패:", error);
          // 에러 시 value 자체를 표시
          setDisplayValue(String(value));
        }
      }
    };

    loadDisplayValue();
  }, [value, displayField, effectiveOptions, mode, valueField, tableName, selectedData]);

  const handleSelect = (newValue: any, fullData: EntitySearchResult) => {
    if (isMultiple) {
      // 다중선택 모드
      const valueStr = String(newValue);
      const isAlreadySelected = selectedValues.includes(valueStr);

      let newSelectedValues: string[];
      let newSelectedDataList: EntitySearchResult[];

      if (isAlreadySelected) {
        // 이미 선택된 항목이면 제거
        newSelectedValues = selectedValues.filter((v) => v !== valueStr);
        newSelectedDataList = selectedDataList.filter((d) => String(d[valueField]) !== valueStr);
      } else {
        // 선택되지 않은 항목이면 추가
        newSelectedValues = [...selectedValues, valueStr];
        newSelectedDataList = [...selectedDataList, fullData];
      }

      setSelectedValues(newSelectedValues);
      setSelectedDataList(newSelectedDataList);

      const joinedValue = newSelectedValues.join(",");
      onChange?.(joinedValue, newSelectedDataList);

      if (isInteractive && onFormDataChange && component?.columnName) {
        onFormDataChange(component.columnName, joinedValue);
        console.log("📤 EntitySearchInput (multiple) -> onFormDataChange:", component.columnName, joinedValue);
      }
    } else {
      // 단일선택 모드
      setSelectedData(fullData);
      setDisplayValue(fullData[displayField] || "");
      onChange?.(newValue, fullData);

      if (isInteractive && onFormDataChange && component?.columnName) {
        onFormDataChange(component.columnName, newValue);
        console.log("📤 EntitySearchInput -> onFormDataChange:", component.columnName, newValue);
      }
    }
  };

  // 다중선택 모드에서 개별 항목 제거
  const handleRemoveValue = (valueToRemove: string) => {
    const newSelectedValues = selectedValues.filter((v) => v !== valueToRemove);
    const newSelectedDataList = selectedDataList.filter((d) => String(d[valueField]) !== valueToRemove);

    setSelectedValues(newSelectedValues);
    setSelectedDataList(newSelectedDataList);

    const joinedValue = newSelectedValues.join(",");
    onChange?.(joinedValue || null, newSelectedDataList);

    if (isInteractive && onFormDataChange && component?.columnName) {
      onFormDataChange(component.columnName, joinedValue || null);
      console.log("📤 EntitySearchInput (remove) -> onFormDataChange:", component.columnName, joinedValue);
    }
  };

  const handleClear = () => {
    if (isMultiple) {
      setSelectedValues([]);
      setSelectedDataList([]);
      onChange?.(null, []);
    } else {
      setDisplayValue("");
      setSelectedData(null);
      onChange?.(null, null);
    }

    if (isInteractive && onFormDataChange && component?.columnName) {
      onFormDataChange(component.columnName, null);
      console.log("📤 EntitySearchInput -> onFormDataChange (clear):", component.columnName, null);
    }
  };

  const handleOpenModal = () => {
    if (!disabled) {
      setModalOpen(true);
    }
  };

  const handleSelectOption = (option: EntitySearchResult) => {
    handleSelect(option[valueField], option);
    // 다중선택이 아닌 경우에만 드롭다운 닫기
    if (!isMultiple) {
      setSelectOpen(false);
    }
  };

  // 높이 계산 (style에서 height가 있으면 사용, 없으면 기본값)
  const componentHeight = style?.height;
  const inputStyle: React.CSSProperties = componentHeight ? { height: componentHeight } : {};

  // select 모드: 검색 가능한 드롭다운
  if (mode === "select") {
    // 다중선택 모드
    if (isMultiple) {
      return (
        <div className={cn("relative flex flex-col", className)} style={style}>
          {/* 라벨 렌더링 */}
          {component?.label && component?.style?.labelDisplay !== false && (
            <label className="text-muted-foreground absolute -top-6 left-0 text-sm font-medium">
              {component.label}
              {component.required && <span className="text-destructive">*</span>}
            </label>
          )}

          {/* 선택된 항목들 표시 (태그 형식) */}
          <div
            className={cn(
              "box-border flex min-h-[40px] w-full flex-wrap items-center gap-2 rounded-md border bg-white px-3 py-2",
              !disabled && "hover:border-primary/50",
              disabled && "cursor-not-allowed bg-gray-100 opacity-60",
            )}
            onClick={() => !disabled && !isLoading && setSelectOpen(true)}
            style={{ cursor: disabled ? "not-allowed" : "pointer" }}
          >
            {selectedValues.length > 0 ? (
              selectedValues.map((val) => {
                const opt = effectiveOptions.find((o) => String(o[valueField]) === val);
                const label = opt?.[displayField] || val;
                return (
                  <span
                    key={val}
                    className="flex items-center gap-1 rounded bg-blue-100 px-2 py-1 text-sm text-blue-800"
                  >
                    {label}
                    {!disabled && (
                      <button
                        type="button"
                        onClick={(e) => {
                          e.stopPropagation();
                          handleRemoveValue(val);
                        }}
                        className="ml-1 text-blue-600 hover:text-blue-800"
                      >
                        ×
                      </button>
                    )}
                  </span>
                );
              })
            ) : (
              <span className="text-muted-foreground text-sm">
                {isLoading
                  ? "로딩 중..."
                  : shouldApplyCascading && !parentValue
                    ? "상위 항목을 먼저 선택하세요"
                    : placeholder}
              </span>
            )}
            <ChevronsUpDown className="ml-auto h-4 w-4 shrink-0 opacity-50" />
          </div>

          {/* 옵션 드롭다운 */}
          {selectOpen && !disabled && (
            <div className="absolute top-full left-0 z-50 mt-1 w-full rounded-md border bg-white shadow-md">
              <Command>
                <CommandInput placeholder={`${displayField} 검색...`} className="text-xs sm:text-sm" />
                <CommandList className="max-h-60">
                  <CommandEmpty className="py-4 text-center text-xs sm:text-sm">항목을 찾을 수 없습니다.</CommandEmpty>
                  <CommandGroup>
                    {effectiveOptions.map((option, index) => {
                      const isSelected = selectedValues.includes(String(option[valueField]));
                      return (
                        <CommandItem
                          key={option[valueField] || index}
                          value={`${option[displayField] || ""}-${option[valueField] || ""}`}
                          onSelect={() => handleSelectOption(option)}
                          className="text-xs sm:text-sm"
                        >
                          <Check className={cn("mr-2 h-4 w-4", isSelected ? "opacity-100" : "opacity-0")} />
                          <div className="flex flex-col">
                            <span className="font-medium">{option[displayField]}</span>
                            {valueField !== displayField && (
                              <span className="text-muted-foreground text-[10px]">{option[valueField]}</span>
                            )}
                          </div>
                        </CommandItem>
                      );
                    })}
                  </CommandGroup>
                </CommandList>
              </Command>
              {/* 닫기 버튼 */}
              <div className="border-t p-2">
                <Button variant="outline" size="sm" onClick={() => setSelectOpen(false)} className="w-full text-xs">
                  닫기
                </Button>
              </div>
            </div>
          )}

          {/* 외부 클릭 시 닫기 */}
          {selectOpen && <div className="fixed inset-0 z-40" onClick={() => setSelectOpen(false)} />}
        </div>
      );
    }

    // 단일선택 모드 (기존 로직)
    return (
      <div className={cn("relative flex flex-col", className)} style={style}>
        {/* 라벨 렌더링 */}
        {component?.label && component?.style?.labelDisplay !== false && (
          <label className="text-muted-foreground absolute -top-6 left-0 text-sm font-medium">
            {component.label}
            {component.required && <span className="text-destructive">*</span>}
          </label>
        )}
        <Popover open={selectOpen} onOpenChange={setSelectOpen}>
          <PopoverTrigger asChild>
            <Button
              variant="outline"
              role="combobox"
              aria-expanded={selectOpen}
              disabled={disabled || isLoading || Boolean(shouldApplyCascading && !parentValue)}
              className={cn(
                "w-full justify-between font-normal",
                !componentHeight && "h-8 text-xs sm:h-10 sm:text-sm",
                !value && "text-muted-foreground",
              )}
              style={inputStyle}
            >
              {isLoading
                ? "로딩 중..."
                : shouldApplyCascading && !parentValue
                  ? "상위 항목을 먼저 선택하세요"
                  : displayValue || placeholder}
              <ChevronsUpDown className="ml-2 h-4 w-4 shrink-0 opacity-50" />
            </Button>
          </PopoverTrigger>
          <PopoverContent className="p-0" style={{ width: "var(--radix-popover-trigger-width)" }} align="start">
            <Command>
              <CommandInput placeholder={`${displayField} 검색...`} className="text-xs sm:text-sm" />
              <CommandList>
                <CommandEmpty className="py-4 text-center text-xs sm:text-sm">항목을 찾을 수 없습니다.</CommandEmpty>
                <CommandGroup>
                  {effectiveOptions.map((option, index) => (
                    <CommandItem
                      key={option[valueField] || index}
                      value={`${option[displayField] || ""}-${option[valueField] || ""}`}
                      onSelect={() => handleSelectOption(option)}
                      className="text-xs sm:text-sm"
                    >
                      <Check
                        className={cn("mr-2 h-4 w-4", value === option[valueField] ? "opacity-100" : "opacity-0")}
                      />
                      <div className="flex flex-col">
                        <span className="font-medium">{option[displayField]}</span>
                        {valueField !== displayField && (
                          <span className="text-muted-foreground text-[10px]">{option[valueField]}</span>
                        )}
                      </div>
                    </CommandItem>
                  ))}
                </CommandGroup>
              </CommandList>
            </Command>
          </PopoverContent>
        </Popover>

        {/* 추가 정보 표시 */}
        {showAdditionalInfo && selectedData && additionalFields.length > 0 && (
          <div className="text-muted-foreground mt-1 space-y-1 px-2 text-xs">
            {additionalFields.map((field) => (
              <div key={field} className="flex gap-2">
                <span className="font-medium">{field}:</span>
                <span>{selectedData[field] || "-"}</span>
              </div>
            ))}
          </div>
        )}
      </div>
    );
  }

  // modal, combo, autocomplete 모드
  // 다중선택 모드
  if (isMultiple) {
    return (
      <div className={cn("relative flex flex-col", className)} style={style}>
        {/* 라벨 렌더링 */}
        {component?.label && component?.style?.labelDisplay !== false && (
          <label className="text-muted-foreground absolute -top-6 left-0 text-sm font-medium">
            {component.label}
            {component.required && <span className="text-destructive">*</span>}
          </label>
        )}

        {/* 선택된 항목들 표시 (태그 형식) + 검색 버튼 */}
        <div className="flex h-full gap-2">
          <div
            className={cn(
              "box-border flex min-h-[40px] flex-1 flex-wrap items-center gap-2 rounded-md border bg-white px-3 py-2",
              !disabled && "hover:border-primary/50",
              disabled && "cursor-not-allowed bg-gray-100 opacity-60",
            )}
          >
            {selectedValues.length > 0 ? (
              selectedValues.map((val) => {
                // selectedDataList에서 먼저 찾고, 없으면 effectiveOptions에서 찾기
                const dataFromList = selectedDataList.find((d) => String(d[valueField]) === val);
                const opt = dataFromList || effectiveOptions.find((o) => String(o[valueField]) === val);
                const label = opt?.[displayField] || val;
                return (
                  <span
                    key={val}
                    className="flex items-center gap-1 rounded bg-blue-100 px-2 py-1 text-sm text-blue-800"
                  >
                    {label}
                    {!disabled && (
                      <button
                        type="button"
                        onClick={(e) => {
                          e.stopPropagation();
                          handleRemoveValue(val);
                        }}
                        className="ml-1 text-blue-600 hover:text-blue-800"
                      >
                        ×
                      </button>
                    )}
                  </span>
                );
              })
            ) : (
              <span className="text-muted-foreground text-sm">{placeholder}</span>
            )}
          </div>

          {/* 모달 버튼: modal 또는 combo 모드일 때만 표시 */}
          {(mode === "modal" || mode === "combo") && (
            <Button
              type="button"
              onClick={handleOpenModal}
              disabled={disabled}
              className={cn(!componentHeight && "h-8 text-xs sm:h-10 sm:text-sm")}
              style={inputStyle}
            >
              <Search className="h-4 w-4" />
            </Button>
          )}
        </div>

        {/* 검색 모달: modal 또는 combo 모드일 때만 렌더링 */}
        {(mode === "modal" || mode === "combo") && (
          <EntitySearchModal
            open={modalOpen}
            onOpenChange={setModalOpen}
            tableName={tableName}
            displayField={displayField}
            valueField={valueField}
            searchFields={searchFields}
            filterCondition={filterCondition}
            modalTitle={modalTitle}
            modalColumns={modalColumns}
            onSelect={handleSelect}
            multiple={isMultiple}
            selectedValues={selectedValues}
          />
        )}
      </div>
    );
  }

  // 단일선택 모드 (기존 로직)
  return (
    <div className={cn("relative flex flex-col", className)} style={style}>
      {/* 라벨 렌더링 */}
      {component?.label && component?.style?.labelDisplay !== false && (
        <label className="text-muted-foreground absolute -top-6 left-0 text-sm font-medium">
          {component.label}
          {component.required && <span className="text-destructive">*</span>}
        </label>
      )}
      {/* 입력 필드 */}
      <div className="flex h-full gap-2">
        <div className="relative flex-1">
          <Input
            value={displayValue}
            onChange={(e) => setDisplayValue(e.target.value)}
            placeholder={placeholder}
            disabled={disabled}
            readOnly={mode === "modal" || mode === "combo"}
            className={cn("w-full pr-8", !componentHeight && "h-8 text-xs sm:h-10 sm:text-sm")}
            style={inputStyle}
          />
          {displayValue && !disabled && (
            <Button
              type="button"
              variant="ghost"
              size="sm"
              onClick={handleClear}
              className="absolute top-1/2 right-1 h-6 w-6 -translate-y-1/2 p-0"
            >
              <X className="h-3 w-3" />
            </Button>
          )}
        </div>

        {/* 모달 버튼: modal 또는 combo 모드일 때만 표시 */}
        {(mode === "modal" || mode === "combo") && (
          <Button
            type="button"
            onClick={handleOpenModal}
            disabled={disabled}
            className={cn(!componentHeight && "h-8 text-xs sm:h-10 sm:text-sm")}
            style={inputStyle}
          >
            <Search className="h-4 w-4" />
          </Button>
        )}
      </div>

      {/* 추가 정보 표시 */}
      {showAdditionalInfo && selectedData && additionalFields.length > 0 && (
        <div className="text-muted-foreground mt-1 space-y-1 px-2 text-xs">
          {additionalFields.map((field) => (
            <div key={field} className="flex gap-2">
              <span className="font-medium">{field}:</span>
              <span>{selectedData[field] || "-"}</span>
            </div>
          ))}
        </div>
      )}

      {/* 검색 모달: modal 또는 combo 모드일 때만 렌더링 */}
      {(mode === "modal" || mode === "combo") && (
        <EntitySearchModal
          open={modalOpen}
          onOpenChange={setModalOpen}
          tableName={tableName}
          displayField={displayField}
          valueField={valueField}
          searchFields={searchFields}
          filterCondition={filterCondition}
          modalTitle={modalTitle}
          modalColumns={modalColumns}
          onSelect={handleSelect}
        />
      )}
    </div>
  );
}