"use client";

import React, { useState, useEffect, useMemo, useCallback } from "react";
import { useSearchParams } from "next/navigation";
import { ComponentRendererProps } from "@/types/component";
import { SelectedItemsDetailInputConfig, AdditionalFieldDefinition, ItemData, GroupEntry, DisplayItem } from "./types";
import { useModalDataStore, ModalDataItem } from "@/stores/modalDataStore";
import { Input } from "@/components/ui/input";
import { Textarea } from "@/components/ui/textarea";
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
import { Checkbox } from "@/components/ui/checkbox";
import { Button } from "@/components/ui/button";
import { Badge } from "@/components/ui/badge";
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table";
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
import { X } from "lucide-react";
import * as LucideIcons from "lucide-react";
import { commonCodeApi } from "@/lib/api/commonCode";
import { cn } from "@/lib/utils";

export interface SelectedItemsDetailInputComponentProps extends ComponentRendererProps {
  config?: SelectedItemsDetailInputConfig;
}

/**
 * SelectedItemsDetailInput 컴포넌트
 * 선택된 항목들의 상세 정보를 입력하는 컴포넌트
 */
export const SelectedItemsDetailInputComponent: React.FC<SelectedItemsDetailInputComponentProps> = ({
  component,
  isDesignMode = false,
  isSelected = false,
  isInteractive = false,
  onClick,
  onDragStart,
  onDragEnd,
  config,
  className,
  style,
  formData,
  onFormDataChange,
  screenId,
  ...props
}) => {
  // 🆕 URL 파라미터에서 dataSourceId 읽기
  const searchParams = useSearchParams();
  const urlDataSourceId = searchParams?.get("dataSourceId") || undefined;

  // 컴포넌트 설정
  const componentConfig = useMemo(
    () =>
      ({
        dataSourceId: component.id || "default",
        displayColumns: [],
        additionalFields: [],
        layout: "grid",
        inputMode: "inline", // 🆕 기본값
        showIndex: true,
        allowRemove: false,
        emptyMessage: "전달받은 데이터가 없습니다.",
        targetTable: "",
        ...config,
        ...component.config,
      }) as SelectedItemsDetailInputConfig,
    [config, component.config, component.id],
  );

  // 🆕 dataSourceId 우선순위: URL 파라미터 > 컴포넌트 설정 > component.id
  const dataSourceId = useMemo(
    () => urlDataSourceId || componentConfig.dataSourceId || component.id || "default",
    [urlDataSourceId, componentConfig.dataSourceId, component.id],
  );

  // 전체 레지스트리를 가져와서 컴포넌트 내부에서 필터링 (캐싱 문제 회피)
  const dataRegistry = useModalDataStore((state) => state.dataRegistry);
  const modalData = useMemo(() => dataRegistry[dataSourceId] || [], [dataRegistry, dataSourceId]);

  // 전체 dataRegistry를 사용 (모든 누적 데이터에 접근 가능)
  console.log("📦 [SelectedItemsDetailInput] 사용 가능한 모든 데이터:", {
    keys: Object.keys(dataRegistry),
    counts: Object.entries(dataRegistry).map(([key, data]: [string, any]) => ({
      table: key,
      count: data.length,
    })),
  });

  const updateItemData = useModalDataStore((state) => state.updateItemData);

  // 🆕 새로운 데이터 구조: 품목별로 여러 개의 상세 데이터
  const [items, setItems] = useState<ItemData[]>([]);

  // 🆕 입력 모드 상태 (modal 모드일 때 사용)
  const [isEditing, setIsEditing] = useState(false);
  const [editingItemId, setEditingItemId] = useState<string | null>(null); // 현재 편집 중인 품목 ID
  const [editingGroupId, setEditingGroupId] = useState<string | null>(null); // 현재 편집 중인 그룹 ID
  const [editingDetailId, setEditingDetailId] = useState<string | null>(null); // 현재 편집 중인 항목 ID

  // 🆕 코드 카테고리별 옵션 캐싱
  const [codeOptions, setCodeOptions] = useState<Record<string, Array<{ label: string; value: string }>>>({});

  // 디버깅 로그
  useEffect(() => {
    console.log("📍 [SelectedItemsDetailInput] 설정 확인:", {
      inputMode: componentConfig.inputMode,
      urlDataSourceId,
      configDataSourceId: componentConfig.dataSourceId,
      componentId: component.id,
      finalDataSourceId: dataSourceId,
      isEditing,
      editingItemId,
    });
  }, [
    urlDataSourceId,
    componentConfig.dataSourceId,
    component.id,
    dataSourceId,
    componentConfig.inputMode,
    isEditing,
    editingItemId,
  ]);

  // 🆕 필드에 codeCategory가 있으면 자동으로 옵션 로드
  useEffect(() => {
    const loadCodeOptions = async () => {
      console.log("🔄 [loadCodeOptions] 시작:", {
        additionalFields: componentConfig.additionalFields,
        targetTable: componentConfig.targetTable,
      });

      // 🆕 code/category 타입 필드 + codeCategory가 있는 필드 모두 처리
      const codeFields = componentConfig.additionalFields?.filter(
        (field) => field.inputType === "code" || field.inputType === "category",
      );

      console.log("🔍 [loadCodeOptions] code/category 필드:", codeFields);

      if (!codeFields || codeFields.length === 0) {
        console.log("⚠️ [loadCodeOptions] code/category 타입 필드가 없습니다");
        return;
      }

      const newOptions: Record<string, Array<{ label: string; value: string }>> = { ...codeOptions };

      // 🆕 대상 테이블의 컬럼 메타데이터에서 codeCategory 가져오기
      const targetTable = componentConfig.targetTable;
      let targetTableColumns: any[] = [];

      if (targetTable) {
        try {
          const { tableTypeApi } = await import("@/lib/api/screen");
          const columnsResponse = await tableTypeApi.getColumns(targetTable);
          targetTableColumns = columnsResponse || [];
        } catch (error) {
          console.error("❌ 대상 테이블 컬럼 조회 실패:", error);
        }
      }

      for (const field of codeFields) {
        // 이미 로드된 옵션이면 스킵
        if (newOptions[field.name]) {
          console.log(`⏭️ 이미 로드된 옵션 (${field.name})`);
          continue;
        }

        try {
          // 🆕 category 타입이면 table_column_category_values에서 로드
          if (field.inputType === "category" && targetTable) {
            console.log(`🔄 카테고리 옵션 로드 시도 (${targetTable}.${field.name})`);

            const { getCategoryValues } = await import("@/lib/api/tableCategoryValue");
            const response = await getCategoryValues(targetTable, field.name, false);

            console.log("📥 getCategoryValues 응답:", response);

            if (response.success && response.data) {
              newOptions[field.name] = response.data.map((item: any) => ({
                label: item.value_label || item.valueLabel,
                value: item.value_code || item.valueCode,
              }));
              console.log(`✅ 카테고리 옵션 로드 완료 (${field.name}):`, newOptions[field.name]);
            } else {
              console.error(`❌ 카테고리 옵션 로드 실패 (${field.name}):`, response.error || "응답 없음");
            }
          } else if (field.inputType === "code") {
            // code 타입이면 기존대로 code_info에서 로드
            // 이미 codeCategory가 있으면 사용
            let codeCategory = field.codeCategory;

            // 🆕 codeCategory가 없으면 대상 테이블 컬럼에서 찾기
            if (!codeCategory && targetTableColumns.length > 0) {
              const columnMeta = targetTableColumns.find(
                (col: any) => (col.columnName || col.column_name) === field.name,
              );
              if (columnMeta) {
                codeCategory = columnMeta.codeCategory || columnMeta.code_category;
                console.log(`🔍 필드 "${field.name}"의 codeCategory를 메타데이터에서 찾음:`, codeCategory);
              }
            }

            if (!codeCategory) {
              console.warn(`⚠️ 필드 "${field.name}"의 codeCategory를 찾을 수 없습니다`);
              continue;
            }

            const response = await commonCodeApi.options.getOptions(codeCategory);
            if (response.success && response.data) {
              newOptions[field.name] = response.data.map((opt) => ({
                label: opt.label,
                value: opt.value,
              }));
              console.log(`✅ 코드 옵션 로드 완료 (${codeCategory}):`, newOptions[field.name]);
            }
          }
        } catch (error) {
          console.error(`❌ 옵션 로드 실패 (${field.name}):`, error);
        }
      }

      setCodeOptions(newOptions);
    };

    loadCodeOptions();
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [componentConfig.additionalFields, componentConfig.targetTable]);

  // 🆕 모달 데이터를 ItemData 구조로 변환 (그룹별 구조)
  useEffect(() => {
    // 🆕 수정 모드: formData에서 데이터 로드 (URL에 mode=edit이 있으면)
    const urlParams = new URLSearchParams(window.location.search);
    const mode = urlParams.get("mode");

    if (mode === "edit" && formData) {
      // 배열인지 단일 객체인지 확인
      const isArray = Array.isArray(formData);
      const dataArray = isArray ? formData : [formData];

      if (dataArray.length === 0 || (dataArray.length === 1 && Object.keys(dataArray[0]).length === 0)) {
        console.warn("⚠️ [SelectedItemsDetailInput] formData가 비어있음");
        return;
      }

      console.log(
        `📝 [SelectedItemsDetailInput] 수정 모드 - ${isArray ? "그룹 레코드" : "단일 레코드"} (${dataArray.length}개)`,
      );
      console.log("📝 [SelectedItemsDetailInput] formData (JSON):", JSON.stringify(dataArray, null, 2));

      const groups = componentConfig.fieldGroups || [];
      const additionalFields = componentConfig.additionalFields || [];

      // 🆕 첫 번째 레코드의 originalData를 기본 항목으로 설정
      const firstRecord = dataArray[0];
      const mainFieldGroups: Record<string, GroupEntry[]> = {};

      // 🔧 각 그룹별로 고유한 엔트리만 수집 (중복 제거)
      groups.forEach((group) => {
        const groupFields = additionalFields.filter((field: any) => field.groupId === group.id);

        if (groupFields.length === 0) {
          mainFieldGroups[group.id] = [];
          return;
        }

        // 🆕 각 레코드에서 그룹 데이터 추출
        const entriesMap = new Map<string, GroupEntry>();

        dataArray.forEach((record) => {
          const entryData: Record<string, any> = {};

          groupFields.forEach((field: any) => {
            let fieldValue = record[field.name];

            // 🆕 값이 없으면 autoFillFrom 로직 적용
            if ((fieldValue === undefined || fieldValue === null) && field.autoFillFrom) {
              let sourceData: any = null;

              if (field.autoFillFromTable) {
                // 특정 테이블에서 가져오기
                const tableData = dataRegistry[field.autoFillFromTable];
                if (tableData && tableData.length > 0) {
                  sourceData = tableData[0].originalData || tableData[0];
                  console.log(
                    `✅ [수정모드 autoFill] ${field.name} ← ${field.autoFillFrom} (테이블: ${field.autoFillFromTable}):`,
                    sourceData?.[field.autoFillFrom],
                  );
                } else {
                  // 🆕 dataRegistry에 없으면 record에서 직접 찾기 (Entity Join된 경우)
                  sourceData = record;
                  console.log(
                    `⚠️ [수정모드 autoFill] dataRegistry에 ${field.autoFillFromTable} 없음, record에서 직접 찾기`,
                  );
                }
              } else {
                // record 자체에서 가져오기
                sourceData = record;
                console.log(
                  `✅ [수정모드 autoFill] ${field.name} ← ${field.autoFillFrom} (레코드):`,
                  sourceData?.[field.autoFillFrom],
                );
              }

              if (sourceData && sourceData[field.autoFillFrom] !== undefined) {
                fieldValue = sourceData[field.autoFillFrom];
                console.log(`✅ [수정모드 autoFill] ${field.name} 값 설정:`, fieldValue);
              } else {
                // 🆕 Entity Join의 경우 sourceColumn_fieldName 형식으로도 찾기
                // 예: item_id_standard_price, customer_id_customer_name
                // autoFillFromTable에서 어떤 sourceColumn인지 추론
                const possibleKeys = Object.keys(sourceData || {}).filter((key) =>
                  key.endsWith(`_${field.autoFillFrom}`),
                );

                if (possibleKeys.length > 0) {
                  fieldValue = sourceData[possibleKeys[0]];
                  console.log(
                    `✅ [수정모드 autoFill] ${field.name} Entity Join 키로 찾음 (${possibleKeys[0]}):`,
                    fieldValue,
                  );
                } else {
                  console.warn(
                    `⚠️ [수정모드 autoFill] ${field.name} ← ${field.autoFillFrom} 실패 (시도한 키들: ${field.autoFillFrom}, *_${field.autoFillFrom})`,
                  );
                }
              }
            }

            // 🔧 값이 없으면 기본값 사용 (false, 0, "" 등 falsy 값도 유효한 값으로 처리)
            if (fieldValue === undefined || fieldValue === null) {
              // 기본값이 있으면 사용, 없으면 필드 타입에 따라 기본값 설정
              if (field.defaultValue !== undefined) {
                fieldValue = field.defaultValue;
              } else if (field.type === "checkbox") {
                fieldValue = false; // checkbox는 기본값 false
              } else {
                // 다른 타입은 null로 유지 (필수 필드가 아니면 표시 안 됨)
                return;
              }
            }

            // 🔧 날짜 타입이면 YYYY-MM-DD 형식으로 변환 (타임존 제거)
            if (field.type === "date" || field.type === "datetime") {
              const dateStr = String(fieldValue);
              const match = dateStr.match(/^(\d{4})-(\d{2})-(\d{2})/);
              if (match) {
                const [, year, month, day] = match;
                fieldValue = `${year}-${month}-${day}`; // ISO 형식 유지 (시간 제거)
              }
            }

            entryData[field.name] = fieldValue;
          });

          // 🔑 모든 필드 값을 합쳐서 고유 키 생성 (중복 제거 기준)
          const entryKey = JSON.stringify(entryData);

          if (!entriesMap.has(entryKey)) {
            entriesMap.set(entryKey, {
              id: `${group.id}_entry_${entriesMap.size + 1}`,
              ...entryData,
            });
          }
        });

        mainFieldGroups[group.id] = Array.from(entriesMap.values());
      });

      // 그룹이 없으면 기본 그룹 생성
      if (groups.length === 0) {
        mainFieldGroups["default"] = [];
      }

      const newItem: ItemData = {
        id: String(firstRecord.id || firstRecord.item_id || "edit"),
        originalData: firstRecord, // 첫 번째 레코드를 대표 데이터로 사용
        fieldGroups: mainFieldGroups,
      };

      setItems([newItem]);

      console.log("✅ [SelectedItemsDetailInput] 수정 모드 데이터 로드 완료:", {
        recordCount: dataArray.length,
        item: newItem,
        fieldGroupsKeys: Object.keys(mainFieldGroups),
        firstGroupEntries: mainFieldGroups[groups[0]?.id]?.length || 0,
      });
      return;
    }

    // 생성 모드: modalData에서 데이터 로드
    if (modalData && modalData.length > 0) {
      console.log("📦 [SelectedItemsDetailInput] 데이터 수신:", modalData);

      // 🆕 각 품목마다 빈 fieldGroups 객체를 가진 ItemData 생성
      const groups = componentConfig.fieldGroups || [];
      const newItems: ItemData[] = modalData.map((item) => {
        const fieldGroups: Record<string, GroupEntry[]> = {};

        // 각 그룹에 대해 빈 배열 초기화
        groups.forEach((group) => {
          fieldGroups[group.id] = [];
        });

        // 그룹이 없으면 기본 그룹 생성
        if (groups.length === 0) {
          fieldGroups["default"] = [];
        }

        // 🔧 modalData의 구조 확인: item.originalData가 있으면 그것을 사용, 없으면 item 자체를 사용
        const actualData = (item as any).originalData || item;

        return {
          id: String(item.id),
          originalData: actualData, // 🔧 실제 데이터 추출
          fieldGroups,
        };
      });

      setItems(newItems);

      console.log("✅ [SelectedItemsDetailInput] items 설정 완료:", {
        itemsLength: newItems.length,
        groups: groups.map((g) => g.id),
        firstItem: newItems[0],
      });
    }
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [modalData, component.id, componentConfig.fieldGroups, formData]); // formData 의존성 추가

  // 🆕 Cartesian Product 생성 함수 (items에서 모든 그룹의 조합을 생성)
  const generateCartesianProduct = useCallback(
    (itemsList: ItemData[]): Record<string, any>[] => {
      const allRecords: Record<string, any>[] = [];
      const groups = componentConfig.fieldGroups || [];
      const additionalFields = componentConfig.additionalFields || [];

      itemsList.forEach((item, itemIndex) => {
        // 각 그룹의 엔트리 배열들을 준비
        const groupEntriesArrays: GroupEntry[][] = groups.map((group) => item.fieldGroups[group.id] || []);

        // 🆕 모든 그룹이 비어있는지 확인
        const allGroupsEmpty = groupEntriesArrays.every((arr) => arr.length === 0);

        if (allGroupsEmpty) {
          // 🆕 모든 그룹이 비어있으면 품목 기본 정보만으로 레코드 생성
          // (거래처 품번/품명, 기간별 단가 없이도 저장 가능)
          console.log("📝 [generateCartesianProduct] 모든 그룹이 비어있음 - 품목 기본 레코드 생성", {
            itemIndex,
            itemId: item.id,
          });
          // 빈 객체를 추가하면 parentKeys와 합쳐져서 기본 레코드가 됨
          allRecords.push({});
          return;
        }

        // Cartesian Product 재귀 함수
        const cartesian = (arrays: GroupEntry[][], currentIndex: number, currentCombination: Record<string, any>) => {
          if (currentIndex === arrays.length) {
            // 모든 그룹을 순회했으면 조합 완성
            allRecords.push({ ...currentCombination });
            return;
          }

          const currentGroupEntries = arrays[currentIndex];
          if (currentGroupEntries.length === 0) {
            // 🆕 현재 그룹에 데이터가 없으면 빈 조합으로 다음 그룹 진행
            // (그룹이 비어있어도 다른 그룹의 데이터로 레코드 생성)
            cartesian(arrays, currentIndex + 1, currentCombination);
            return;
          }

          // 현재 그룹의 각 엔트리마다 재귀
          currentGroupEntries.forEach((entry) => {
            const newCombination = { ...currentCombination };

            // 현재 그룹의 필드들을 조합에 추가
            const groupFields = additionalFields.filter((f) => f.groupId === groups[currentIndex].id);
            groupFields.forEach((field) => {
              if (entry[field.name] !== undefined) {
                newCombination[field.name] = entry[field.name];
              }
            });

            cartesian(arrays, currentIndex + 1, newCombination);
          });
        };

        // 재귀 시작
        cartesian(groupEntriesArrays, 0, {});
      });

      console.log("🔀 [generateCartesianProduct] 생성된 레코드:", {
        count: allRecords.length,
        records: allRecords,
      });

      return allRecords;
    },
    [componentConfig.fieldGroups, componentConfig.additionalFields],
  );

  // 🆕 저장 요청 시에만 데이터 전달 (이벤트 리스너 방식)
  useEffect(() => {
    const handleSaveRequest = async (event: Event) => {
      // component.id를 문자열로 안전하게 변환
      const componentKey = String(component.id || "selected_items");

      console.log("🔔 [SelectedItemsDetailInput] beforeFormSave 이벤트 수신!", {
        itemsCount: items.length,
        hasOnFormDataChange: !!onFormDataChange,
        componentId: component.id,
        componentIdType: typeof component.id,
        componentKey,
      });

      if (items.length === 0) {
        console.warn("⚠️ [SelectedItemsDetailInput] 저장할 데이터 없음");
        return;
      }

      // 🆕 수정 모드인지 확인 (URL에 mode=edit이 있으면)
      const urlParams = new URLSearchParams(window.location.search);
      const mode = urlParams.get("mode");
      const isEditMode = mode === "edit";

      console.log("📝 [SelectedItemsDetailInput] 저장 모드:", { mode, isEditMode });

      if (isEditMode && componentConfig.parentDataMapping && componentConfig.parentDataMapping.length > 0) {
        // 🔄 수정 모드: UPSERT API 사용
        try {
          console.log("🔄 [SelectedItemsDetailInput] UPSERT 모드로 저장 시작");
          console.log("📋 [SelectedItemsDetailInput] componentConfig:", {
            targetTable: componentConfig.targetTable,
            parentDataMapping: componentConfig.parentDataMapping,
            fieldGroups: componentConfig.fieldGroups,
            additionalFields: componentConfig.additionalFields,
          });

          // 부모 키 추출 (parentDataMapping에서)
          const parentKeys: Record<string, any> = {};

          // formData 또는 items[0].originalData에서 부모 데이터 가져오기
          // formData가 배열이면 첫 번째 항목 사용
          let sourceData: any = formData;
          if (Array.isArray(formData) && formData.length > 0) {
            sourceData = formData[0];
          } else if (!formData) {
            sourceData = items[0]?.originalData || {};
          }

          console.log("📦 [SelectedItemsDetailInput] 부모 데이터 소스:", {
            formDataType: Array.isArray(formData) ? "배열" : typeof formData,
            sourceData,
            sourceDataKeys: Object.keys(sourceData),
            parentDataMapping: componentConfig.parentDataMapping,
          });

          console.log(
            "🔍 [SelectedItemsDetailInput] sourceData 전체 내용 (JSON):",
            JSON.stringify(sourceData, null, 2),
          );

          componentConfig.parentDataMapping.forEach((mapping) => {
            // 🆕 Entity Join 필드도 처리 (예: customer_code -> customer_id_customer_code)
            const value = getFieldValue(sourceData, mapping.sourceField);
            if (value !== undefined && value !== null) {
              parentKeys[mapping.targetField] = value;
              console.log(`✅ [parentKeys] ${mapping.sourceField} → ${mapping.targetField}:`, value);
            } else {
              console.warn(
                `⚠️ [SelectedItemsDetailInput] 부모 키 누락: ${mapping.sourceField} → ${mapping.targetField}`,
              );
            }
          });

          console.log("🔑 [SelectedItemsDetailInput] 부모 키:", parentKeys);

          // items를 Cartesian Product로 변환
          const records = generateCartesianProduct(items);

          console.log("📦 [SelectedItemsDetailInput] UPSERT 레코드:", {
            parentKeys,
            recordCount: records.length,
            records,
          });

          // targetTable 검증
          if (!componentConfig.targetTable) {
            console.error("❌ [SelectedItemsDetailInput] targetTable이 설정되지 않았습니다!");
            window.dispatchEvent(
              new CustomEvent("formSaveError", {
                detail: { message: "대상 테이블이 설정되지 않았습니다." },
              }),
            );

            // 🆕 기본 저장 건너뛰기
            if (event instanceof CustomEvent && event.detail) {
              event.detail.skipDefaultSave = true;
            }
            return;
          }

          // 🆕 먼저 기본 저장 로직 건너뛰기 설정 (UPSERT 전에!)
          if (event instanceof CustomEvent) {
            if (!event.detail) {
              console.warn("⚠️ [SelectedItemsDetailInput] event.detail이 없습니다! 새로 생성합니다.");
              // @ts-ignore - detail 재정의
              event.detail = {};
            }
            event.detail.skipDefaultSave = true;
            console.log("🚫 [SelectedItemsDetailInput] skipDefaultSave = true (UPSERT 전)", event.detail);
          } else {
            console.error("❌ [SelectedItemsDetailInput] event가 CustomEvent가 아닙니다!", event);
          }

          console.log("🎯 [SelectedItemsDetailInput] targetTable:", componentConfig.targetTable);
          console.log("📡 [SelectedItemsDetailInput] UPSERT API 호출 직전:", {
            tableName: componentConfig.targetTable,
            tableNameType: typeof componentConfig.targetTable,
            tableNameLength: componentConfig.targetTable?.length,
            parentKeys,
            recordsCount: records.length,
          });

          // UPSERT API 호출
          const { dataApi } = await import("@/lib/api/data");
          const result = await dataApi.upsertGroupedRecords(componentConfig.targetTable, parentKeys, records);

          if (result.success) {
            console.log("✅ [SelectedItemsDetailInput] UPSERT 성공:", {
              inserted: result.inserted,
              updated: result.updated,
              deleted: result.deleted,
            });

            // 저장 성공 이벤트 발생
            window.dispatchEvent(
              new CustomEvent("formSaveSuccess", {
                detail: { message: "데이터가 저장되었습니다." },
              }),
            );
          } else {
            console.error("❌ [SelectedItemsDetailInput] UPSERT 실패:", result.error);
            window.dispatchEvent(
              new CustomEvent("formSaveError", {
                detail: { message: result.error || "데이터 저장 실패" },
              }),
            );
          }
        } catch (error) {
          console.error("❌ [SelectedItemsDetailInput] UPSERT 오류:", error);
          window.dispatchEvent(
            new CustomEvent("formSaveError", {
              detail: { message: "데이터 저장 중 오류가 발생했습니다." },
            }),
          );

          // 🆕 오류 발생 시에도 기본 저장 건너뛰기 (중복 저장 방지)
          if (event instanceof CustomEvent && event.detail) {
            event.detail.skipDefaultSave = true;
          }
        }
      } else {
        // 📝 생성 모드: 기존 로직 (Cartesian Product 생성 후 formData에 추가)
        console.log("📝 [SelectedItemsDetailInput] 생성 모드: 기존 저장 로직 사용");

        console.log("📝 [SelectedItemsDetailInput] 저장 데이터 준비:", {
          key: componentKey,
          itemsCount: items.length,
          firstItem: items[0],
        });

        // ✅ CustomEvent의 detail에 데이터 첨부
        if (event instanceof CustomEvent && event.detail) {
          // context.formData에 직접 추가
          event.detail.formData[componentKey] = items;
          console.log("✅ [SelectedItemsDetailInput] context.formData에 데이터 직접 추가 완료");
        }

        // 기존 onFormDataChange도 호출 (호환성)
        if (onFormDataChange) {
          onFormDataChange(componentKey, items);
        }
      }
    };

    // 저장 버튼 클릭 시 데이터 수집
    window.addEventListener("beforeFormSave", handleSaveRequest as EventListener);

    return () => {
      window.removeEventListener("beforeFormSave", handleSaveRequest as EventListener);
    };
  }, [items, component.id, onFormDataChange, componentConfig, formData, generateCartesianProduct]);

  // 스타일 계산
  const componentStyle: React.CSSProperties = {
    width: "100%",
    height: "100%",
    ...component.style,
    ...style,
  };

  // 디자인 모드 스타일
  if (isDesignMode) {
    componentStyle.border = "1px dashed #cbd5e1";
    componentStyle.borderColor = isSelected ? "#3b82f6" : "#cbd5e1";
    componentStyle.padding = "16px";
    componentStyle.borderRadius = "8px";
  }

  // 이벤트 핸들러
  const handleClick = (e: React.MouseEvent) => {
    e.stopPropagation();
    onClick?.();
  };

  // 🆕 실시간 단가 계산 함수 (설정 기반 + 카테고리 매핑)
  const calculatePrice = useCallback(
    (entry: GroupEntry): number => {
      // 자동 계산 설정이 없으면 계산하지 않음
      if (!componentConfig.autoCalculation) return 0;

      const { inputFields, valueMapping } = componentConfig.autoCalculation;

      // 기본 단가
      const basePrice = parseFloat(entry[inputFields.basePrice] || "0");
      if (basePrice === 0) return 0;

      let price = basePrice;

      // 1단계: 할인 적용
      const discountTypeValue = entry[inputFields.discountType];
      const discountValue = parseFloat(entry[inputFields.discountValue] || "0");

      // 매핑을 통해 실제 연산 타입 결정
      const discountOperation = valueMapping?.discountType?.[discountTypeValue] || "none";

      if (discountOperation === "rate") {
        price = price * (1 - discountValue / 100);
      } else if (discountOperation === "amount") {
        price = price - discountValue;
      }

      // 2단계: 반올림 적용
      const roundingTypeValue = entry[inputFields.roundingType];
      const roundingUnitValue = entry[inputFields.roundingUnit];

      // 매핑을 통해 실제 연산 타입 결정
      const roundingOperation = valueMapping?.roundingType?.[roundingTypeValue] || "none";
      const unit = valueMapping?.roundingUnit?.[roundingUnitValue] || parseFloat(roundingUnitValue) || 1;

      if (roundingOperation === "round") {
        price = Math.round(price / unit) * unit;
      } else if (roundingOperation === "floor") {
        price = Math.floor(price / unit) * unit;
      } else if (roundingOperation === "ceil") {
        price = Math.ceil(price / unit) * unit;
      }

      return price;
    },
    [componentConfig.autoCalculation],
  );

  // 🆕 그룹별 필드 변경 핸들러: itemId + groupId + entryId + fieldName
  const handleFieldChange = useCallback(
    (itemId: string, groupId: string, entryId: string, fieldName: string, value: any) => {
      console.log("📝 [handleFieldChange] 필드 값 변경:", {
        itemId,
        groupId,
        entryId,
        fieldName,
        value,
      });

      setItems((prevItems) => {
        return prevItems.map((item) => {
          if (item.id !== itemId) return item;

          const groupEntries = item.fieldGroups[groupId] || [];
          const existingEntryIndex = groupEntries.findIndex((e) => e.id === entryId);

          if (existingEntryIndex >= 0) {
            // 기존 entry 업데이트 (항상 이 경로로만 진입)
            const updatedEntries = [...groupEntries];
            const updatedEntry = {
              ...updatedEntries[existingEntryIndex],
              [fieldName]: value,
            };

            console.log("✅ [handleFieldChange] Entry 업데이트:", {
              beforeKeys: Object.keys(updatedEntries[existingEntryIndex]),
              afterKeys: Object.keys(updatedEntry),
              updatedEntry,
            });

            // 🆕 가격 관련 필드가 변경되면 자동 계산
            if (componentConfig.autoCalculation) {
              const { inputFields, targetField } = componentConfig.autoCalculation;
              const priceRelatedFields = [
                inputFields.basePrice,
                inputFields.discountType,
                inputFields.discountValue,
                inputFields.roundingType,
                inputFields.roundingUnit,
              ];

              if (priceRelatedFields.includes(fieldName)) {
                const calculatedPrice = calculatePrice(updatedEntry);
                updatedEntry[targetField] = calculatedPrice;
                console.log("💰 [자동 계산]", {
                  basePrice: updatedEntry[inputFields.basePrice],
                  discountType: updatedEntry[inputFields.discountType],
                  discountValue: updatedEntry[inputFields.discountValue],
                  roundingType: updatedEntry[inputFields.roundingType],
                  roundingUnit: updatedEntry[inputFields.roundingUnit],
                  calculatedPrice,
                  targetField,
                });
              }
            }

            updatedEntries[existingEntryIndex] = updatedEntry;
            return {
              ...item,
              fieldGroups: {
                ...item.fieldGroups,
                [groupId]: updatedEntries,
              },
            };
          } else {
            // 이 경로는 발생하면 안 됨 (handleAddGroupEntry에서 미리 추가함)
            console.warn("⚠️ entry가 없는데 handleFieldChange 호출됨:", { itemId, groupId, entryId });
            return item;
          }
        });
      });
    },
    [calculatePrice],
  );

  // 🆕 품목 제거 핸들러
  const handleRemoveItem = (itemId: string) => {
    setItems((prevItems) => prevItems.filter((item) => item.id !== itemId));
  };

  // 🆕 그룹 항목 추가 핸들러 (특정 그룹에 새 항목 추가)
  const handleAddGroupEntry = (itemId: string, groupId: string) => {
    const newEntryId = `entry-${Date.now()}`;

    // 🔧 미리 빈 entry를 추가하여 리렌더링 방지 (autoFillFrom 처리)
    setItems((prevItems) => {
      return prevItems.map((item) => {
        if (item.id !== itemId) return item;

        const groupEntries = item.fieldGroups[groupId] || [];
        const newEntry: GroupEntry = { id: newEntryId };

        // 🆕 autoFillFrom 필드 자동 채우기 (tableName으로 직접 접근)
        const groupFields = (componentConfig.additionalFields || []).filter((f) => f.groupId === groupId);

        groupFields.forEach((field) => {
          if (!field.autoFillFrom) return;

          // 데이터 소스 결정
          let sourceData: any = null;

          if (field.autoFillFromTable) {
            // 특정 테이블에서 가져오기
            const tableData = dataRegistry[field.autoFillFromTable];
            if (tableData && tableData.length > 0) {
              // 첫 번째 항목 사용 (또는 매칭 로직 추가 가능)
              sourceData = tableData[0].originalData || tableData[0];
              console.log(
                `✅ [autoFill 추가] ${field.name} ← ${field.autoFillFrom} (테이블: ${field.autoFillFromTable}):`,
                sourceData?.[field.autoFillFrom],
              );
            } else {
              // 🆕 dataRegistry에 없으면 item.originalData에서 찾기 (수정 모드)
              sourceData = item.originalData;
              console.log(`⚠️ [autoFill 추가] dataRegistry에 ${field.autoFillFromTable} 없음, originalData에서 찾기`);
            }
          } else {
            // 주 데이터 소스 (item.originalData) 사용
            sourceData = item.originalData;
            console.log(
              `✅ [autoFill 추가] ${field.name} ← ${field.autoFillFrom} (주 소스):`,
              sourceData?.[field.autoFillFrom],
            );
          }

          // 🆕 getFieldValue 사용하여 Entity Join 필드도 찾기
          if (sourceData) {
            const fieldValue = getFieldValue(sourceData, field.autoFillFrom);
            if (fieldValue !== undefined && fieldValue !== null) {
              newEntry[field.name] = fieldValue;
              console.log(`✅ [autoFill 추가] ${field.name} 값 설정:`, fieldValue);
            } else {
              console.warn(`⚠️ [autoFill 추가] ${field.name} ← ${field.autoFillFrom} 실패`);
            }
          }
        });

        return {
          ...item,
          fieldGroups: {
            ...item.fieldGroups,
            [groupId]: [...groupEntries, newEntry],
          },
        };
      });
    });

    setIsEditing(true);
    setEditingItemId(itemId);
    setEditingDetailId(newEntryId);
    setEditingGroupId(groupId);
  };

  // 🆕 그룹 항목 제거 핸들러
  const handleRemoveGroupEntry = (itemId: string, groupId: string, entryId: string) => {
    setItems((prevItems) =>
      prevItems.map((item) => {
        if (item.id !== itemId) return item;
        return {
          ...item,
          fieldGroups: {
            ...item.fieldGroups,
            [groupId]: (item.fieldGroups[groupId] || []).filter((e) => e.id !== entryId),
          },
        };
      }),
    );
  };

  // 🆕 그룹 항목 편집 핸들러 (클릭하면 수정 가능)
  const handleEditGroupEntry = (itemId: string, groupId: string, entryId: string) => {
    setIsEditing(true);
    setEditingItemId(itemId);
    setEditingGroupId(groupId);
    setEditingDetailId(entryId);
  };

  // 🆕 다음 품목으로 이동
  const handleNextItem = () => {
    const currentIndex = items.findIndex((item) => item.id === editingItemId);
    if (currentIndex < items.length - 1) {
      // 다음 품목으로
      const nextItem = items[currentIndex + 1];
      setEditingItemId(nextItem.id);
      const groups = componentConfig.fieldGroups || [];
      const firstGroupId = groups.length > 0 ? groups[0].id : "default";
      const newEntryId = `entry-${Date.now()}`;
      setEditingDetailId(newEntryId);
      setEditingGroupId(firstGroupId);
      setIsEditing(true);
    } else {
      // 마지막 품목이면 편집 모드 종료
      setIsEditing(false);
      setEditingItemId(null);
      setEditingDetailId(null);
      setEditingGroupId(null);
    }
  };

  // 🆕 개별 필드 렌더링 (itemId, groupId, entryId, entry 데이터 전달)
  const renderField = (
    field: AdditionalFieldDefinition,
    itemId: string,
    groupId: string,
    entryId: string,
    entry: GroupEntry,
  ) => {
    const value = entry[field.name] || field.defaultValue || "";

    // 🆕 계산된 필드는 읽기 전용 (자동 계산 설정 기반)
    const isCalculatedField = componentConfig.autoCalculation?.targetField === field.name;

    const commonProps = {
      value: value || "",
      disabled: componentConfig.disabled || componentConfig.readonly,
      placeholder: field.placeholder,
      required: field.required,
    };

    // 🆕 inputType이 있으면 우선 사용, 없으면 field.type 사용
    const renderType = field.inputType || field.type;

    // 🆕 inputType에 따라 적절한 컴포넌트 렌더링
    switch (renderType) {
      // 기본 타입들
      case "text":
      case "varchar":
      case "char":
        return (
          <Input
            {...commonProps}
            type="text"
            onChange={(e) => handleFieldChange(itemId, groupId, entryId, field.name, e.target.value)}
            maxLength={field.validation?.maxLength}
            className="h-10 text-sm"
          />
        );

      case "number":
      case "int":
      case "integer":
      case "bigint":
      case "decimal":
      case "numeric":
        // 🆕 계산된 단가는 천 단위 구분 및 강조 표시
        if (isCalculatedField) {
          const numericValue = parseFloat(value) || 0;
          const formattedValue = new Intl.NumberFormat("ko-KR").format(numericValue);

          return (
            <div className="relative">
              <Input
                value={formattedValue}
                readOnly
                disabled
                className={cn(
                  "h-10 text-sm",
                  "bg-primary/10 border-primary/30 text-primary font-semibold",
                  "cursor-not-allowed",
                )}
              />
              <div className="text-primary/70 absolute top-1/2 right-2 -translate-y-1/2 text-[10px]">자동 계산</div>
            </div>
          );
        }

        return (
          <Input
            {...commonProps}
            type="number"
            onChange={(e) => handleFieldChange(itemId, groupId, entryId, field.name, e.target.value)}
            min={field.validation?.min}
            max={field.validation?.max}
            className="h-10 text-sm"
          />
        );

      case "date":
      case "timestamp":
      case "datetime":
        return (
          <Input
            {...commonProps}
            type="date"
            onChange={(e) => handleFieldChange(itemId, groupId, entryId, field.name, e.target.value)}
            onClick={(e) => {
              // 날짜 선택기 강제 열기
              const target = e.target as HTMLInputElement;
              if (target && target.showPicker) {
                target.showPicker();
              }
            }}
            className="h-10 cursor-pointer text-sm"
          />
        );

      case "checkbox":
      case "boolean":
      case "bool":
        return (
          <Checkbox
            checked={value === true || value === "true"}
            onCheckedChange={(checked) => handleFieldChange(itemId, groupId, entryId, field.name, checked)}
            disabled={componentConfig.disabled || componentConfig.readonly}
          />
        );

      case "textarea":
        return (
          <Textarea
            {...commonProps}
            onChange={(e) => handleFieldChange(itemId, groupId, entryId, field.name, e.target.value)}
            rows={2}
            className="resize-none text-xs sm:text-sm"
          />
        );

      // 🆕 추가 inputType들
      case "code":
      case "category":
        // 🆕 옵션을 field.name 또는 field.codeCategory 키로 찾기
        let categoryOptions = field.options; // 기본값

        // 1순위: 필드 이름으로 직접 찾기 (category 타입에서 사용)
        if (codeOptions[field.name]) {
          categoryOptions = codeOptions[field.name];
        }
        // 2순위: codeCategory로 찾기 (code 타입에서 사용)
        else if (field.codeCategory && codeOptions[field.codeCategory]) {
          categoryOptions = codeOptions[field.codeCategory];
        }

        return (
          <Select
            value={value || ""}
            onValueChange={(val) => handleFieldChange(itemId, groupId, entryId, field.name, val)}
            disabled={componentConfig.disabled || componentConfig.readonly}
          >
            <SelectTrigger size="default" className="w-full">
              <SelectValue placeholder={field.placeholder || "선택하세요"} />
            </SelectTrigger>
            <SelectContent>
              {categoryOptions && categoryOptions.length > 0 ? (
                categoryOptions
                  .filter((option) => option.value !== "")
                  .map((option) => (
                    <SelectItem key={option.value} value={option.value}>
                      {option.label}
                    </SelectItem>
                  ))
              ) : (
                <div className="text-muted-foreground py-6 text-center text-xs">옵션 로딩 중...</div>
              )}
            </SelectContent>
          </Select>
        );

      case "entity":
        // TODO: EntitySelect 컴포넌트 사용
        return (
          <Input
            {...commonProps}
            type="text"
            onChange={(e) => handleFieldChange(itemId, groupId, entryId, field.name, e.target.value)}
            className="h-8 text-xs sm:h-10 sm:text-sm"
          />
        );

      case "select":
        return (
          <Select
            value={value || ""}
            onValueChange={(val) => handleFieldChange(itemId, groupId, entryId, field.name, val)}
            disabled={componentConfig.disabled || componentConfig.readonly}
          >
            <SelectTrigger className="h-8 w-full text-xs sm:h-10 sm:text-sm">
              <SelectValue placeholder={field.placeholder || "선택하세요"} />
            </SelectTrigger>
            <SelectContent>
              {field.options
                ?.filter((option) => option.value !== "")
                .map((option) => (
                  <SelectItem key={option.value} value={option.value}>
                    {option.label}
                  </SelectItem>
                ))}
            </SelectContent>
          </Select>
        );

      // 기본값: 텍스트 입력
      default:
        return (
          <Input
            {...commonProps}
            type="text"
            onChange={(e) => handleFieldChange(itemId, groupId, entryId, field.name, e.target.value)}
            maxLength={field.validation?.maxLength}
            className="h-8 text-xs sm:h-10 sm:text-sm"
          />
        );
    }
  };

  // 🆕 Entity Join된 필드명도 찾는 헬퍼 함수
  const getFieldValue = useCallback((data: Record<string, any>, fieldName: string) => {
    // 1. Entity Join 형식으로 먼저 찾기 (*_fieldName) - 우선순위!
    //    예: item_id_item_name (품목의 품명) vs customer_item_name (거래처 품명)
    const possibleKeys = Object.keys(data).filter(
      (key) => key.endsWith(`_${fieldName}`) && key !== fieldName, // 자기 자신은 제외
    );

    if (possibleKeys.length > 0) {
      // 🆕 여러 개 있으면 가장 긴 키 선택 (더 구체적인 것)
      // 예: item_id_item_name (18자) vs customer_item_name (18자) 중 정렬 순서로 선택
      // 실제로는 item_id로 시작하는 것을 우선
      const entityJoinKey = possibleKeys.find((key) => key.includes("_id_")) || possibleKeys[0];
      console.log(`🔍 [getFieldValue] "${fieldName}" → "${entityJoinKey}" =`, data[entityJoinKey]);
      return data[entityJoinKey];
    }

    // 2. 직접 필드명으로 찾기 (Entity Join이 없을 때만)
    if (data[fieldName] !== undefined) {
      console.log(`🔍 [getFieldValue] "${fieldName}" → 직접 =`, data[fieldName]);
      return data[fieldName];
    }

    console.warn(`⚠️ [getFieldValue] "${fieldName}" 못 찾음`);
    return null;
  }, []);

  // 🆕 displayItems를 렌더링하는 헬퍼 함수 (그룹별)
  const renderDisplayItems = useCallback(
    (entry: GroupEntry, item: ItemData, groupId: string) => {
      // 🆕 해당 그룹의 displayItems 가져오기
      const group = (componentConfig.fieldGroups || []).find((g) => g.id === groupId);
      const displayItems = group?.displayItems || [];

      if (displayItems.length === 0) {
        // displayItems가 없으면 기본 방식 (해당 그룹의 필드만 나열)
        const fields = (componentConfig.additionalFields || []).filter((f) =>
          componentConfig.fieldGroups && componentConfig.fieldGroups.length > 0 ? f.groupId === groupId : true,
        );
        return fields
          .map((f) => {
            const value = entry[f.name];
            if (!value) return "-";

            const strValue = String(value);

            // 🔧 ISO 날짜 형식 자동 감지 및 포맷팅 (필드 타입 무관)
            // ISO 8601 형식: YYYY-MM-DDTHH:mm:ss.sssZ 또는 YYYY-MM-DD
            const isoDateMatch = strValue.match(/^(\d{4})-(\d{2})-(\d{2})(T|\s|$)/);
            if (isoDateMatch) {
              const [, year, month, day] = isoDateMatch;
              return `${year}.${month}.${day}`;
            }

            return strValue;
          })
          .join(" / ");
      }

      // displayItems 설정대로 렌더링
      return (
        <>
          {displayItems.map((displayItem) => {
            const styleClasses = cn(
              displayItem.bold && "font-bold",
              displayItem.underline && "underline",
              displayItem.italic && "italic",
            );

            const inlineStyle: React.CSSProperties = {
              color: displayItem.color,
              backgroundColor: displayItem.backgroundColor,
            };

            switch (displayItem.type) {
              case "icon": {
                if (!displayItem.icon) return null;
                const IconComponent = (LucideIcons as any)[displayItem.icon];
                if (!IconComponent) return null;
                return <IconComponent key={displayItem.id} className="mr-1 inline-block h-3 w-3" style={inlineStyle} />;
              }

              case "text":
                return (
                  <span key={displayItem.id} className={styleClasses} style={inlineStyle}>
                    {displayItem.value}
                  </span>
                );

              case "field": {
                const fieldValue = entry[displayItem.fieldName || ""];
                const isEmpty = fieldValue === null || fieldValue === undefined || fieldValue === "";

                // 🆕 빈 값 처리
                if (isEmpty) {
                  switch (displayItem.emptyBehavior) {
                    case "hide":
                      return null; // 항목 숨김
                    case "default":
                      // 기본값 표시
                      const defaultValue = displayItem.defaultValue || "-";
                      return (
                        <span
                          key={displayItem.id}
                          className={cn(styleClasses, "text-muted-foreground")}
                          style={inlineStyle}
                        >
                          {displayItem.label}
                          {defaultValue}
                        </span>
                      );
                    case "blank":
                    default:
                      // 빈 칸으로 표시
                      return (
                        <span key={displayItem.id} className={styleClasses} style={inlineStyle}>
                          {displayItem.label}
                        </span>
                      );
                  }
                }

                // 값이 있는 경우, 형식에 맞게 표시
                let formattedValue = fieldValue;

                // 🔧 자동 날짜 감지 (format 설정 없어도 ISO 날짜 자동 변환)
                const strValue = String(fieldValue);
                const isoDateMatch = strValue.match(/^(\d{4})-(\d{2})-(\d{2})(T|\s|$)/);
                if (isoDateMatch && !displayItem.format) {
                  const [, year, month, day] = isoDateMatch;
                  formattedValue = `${year}.${month}.${day}`;
                }

                switch (displayItem.format) {
                  case "currency":
                    // 천 단위 구분
                    formattedValue = new Intl.NumberFormat("ko-KR").format(Number(fieldValue) || 0);
                    break;
                  case "number":
                    formattedValue = new Intl.NumberFormat("ko-KR").format(Number(fieldValue) || 0);
                    break;
                  case "date":
                    // YYYY.MM.DD 형식
                    if (fieldValue) {
                      // 날짜 문자열을 직접 파싱 (타임존 문제 방지)
                      const dateStr = String(fieldValue);
                      const match = dateStr.match(/^(\d{4})-(\d{2})-(\d{2})/);
                      if (match) {
                        const [, year, month, day] = match;
                        formattedValue = `${year}.${month}.${day}`;
                      } else {
                        // Date 객체로 변환 시도 (fallback)
                        const date = new Date(fieldValue);
                        if (!isNaN(date.getTime())) {
                          formattedValue = date
                            .toLocaleDateString("ko-KR", {
                              year: "numeric",
                              month: "2-digit",
                              day: "2-digit",
                            })
                            .replace(/\. /g, ".")
                            .replace(/\.$/, "");
                        }
                      }
                    }
                    break;
                  case "badge":
                    // 배지로 표시
                    return (
                      <Badge
                        key={displayItem.id}
                        variant={displayItem.badgeVariant || "default"}
                        className={styleClasses}
                        style={inlineStyle}
                      >
                        {displayItem.label}
                        {formattedValue}
                      </Badge>
                    );
                  case "text":
                  default:
                    // 일반 텍스트
                    break;
                }

                // 🔧 마지막 안전장치: formattedValue가 여전히 ISO 형식이면 한번 더 변환
                let finalValue = formattedValue;
                if (typeof formattedValue === "string") {
                  const isoCheck = formattedValue.match(/^(\d{4})-(\d{2})-(\d{2})(T|\s|$)/);
                  if (isoCheck) {
                    const [, year, month, day] = isoCheck;
                    finalValue = `${year}.${month}.${day}`;
                  }
                }

                return (
                  <span key={displayItem.id} className={styleClasses} style={inlineStyle}>
                    {displayItem.label}
                    {finalValue}
                  </span>
                );
              }

              case "badge": {
                const fieldValue = displayItem.fieldName ? entry[displayItem.fieldName] : displayItem.value;
                return (
                  <Badge
                    key={displayItem.id}
                    variant={displayItem.badgeVariant || "default"}
                    className={styleClasses}
                    style={inlineStyle}
                  >
                    {displayItem.label}
                    {fieldValue}
                  </Badge>
                );
              }

              default:
                return null;
            }
          })}
        </>
      );
    },
    [componentConfig.fieldGroups, componentConfig.additionalFields],
  );

  // 빈 상태 렌더링
  if (items.length === 0) {
    return (
      <div style={componentStyle} className={className} onClick={handleClick}>
        <div className="border-border bg-muted/30 flex flex-col items-center justify-center rounded-lg border-2 border-dashed p-8 text-center">
          <p className="text-muted-foreground text-sm">{componentConfig.emptyMessage}</p>
          {isDesignMode && (
            <p className="text-muted-foreground mt-2 text-xs">
              💡 이전 모달에서 "다음" 버튼으로 데이터를 전달하면 여기에 표시됩니다.
            </p>
          )}
        </div>
      </div>
    );
  }

  // 🆕 그룹별로 입력 항목들 렌더링 (각 그룹이 독립적으로 여러 항목 관리)
  const renderFieldsByGroup = (item: ItemData) => {
    const fields = componentConfig.additionalFields || [];
    const groups = componentConfig.fieldGroups || [];

    // 그룹이 정의되지 않은 경우, 기본 그룹 사용
    const effectiveGroups = groups.length > 0 ? groups : [{ id: "default", title: "입력 정보", order: 0 }];

    const sortedGroups = [...effectiveGroups].sort((a, b) => (a.order || 0) - (b.order || 0));

    return (
      <div className="grid grid-cols-2 gap-3">
        {sortedGroups.map((group) => {
          const groupFields = fields.filter((f) => (groups.length === 0 ? true : f.groupId === group.id));

          if (groupFields.length === 0) return null;

          const groupEntries = item.fieldGroups[group.id] || [];
          const isEditingThisGroup = isEditing && editingItemId === item.id && editingGroupId === group.id;

          return (
            <Card key={group.id} className="border-2 shadow-sm">
              <CardHeader className="pb-3">
                <CardTitle className="flex items-center justify-between text-sm font-semibold">
                  <span>{group.title}</span>
                  <Button
                    type="button"
                    onClick={() => handleAddGroupEntry(item.id, group.id)}
                    size="sm"
                    variant="outline"
                    className="h-7 text-xs"
                  >
                    + 추가
                  </Button>
                </CardTitle>
                {group.description && <p className="text-muted-foreground text-xs">{group.description}</p>}
              </CardHeader>
              <CardContent className="space-y-3">
                {/* 이미 입력된 항목들 */}
                {groupEntries.length > 0 ? (
                  <div className="space-y-2">
                    {groupEntries.map((entry, idx) => {
                      const isEditingThisEntry = isEditingThisGroup && editingDetailId === entry.id;

                      if (isEditingThisEntry) {
                        // 편집 모드: 입력 필드 표시 (가로 배치)
                        return (
                          <Card key={entry.id} className="border-primary border-dashed">
                            <CardContent className="p-3">
                              <div className="mb-3 flex items-center justify-between">
                                <span className="text-xs font-medium">수정 중</span>
                                <Button
                                  type="button"
                                  variant="ghost"
                                  size="sm"
                                  onClick={() => {
                                    setIsEditing(false);
                                    setEditingItemId(null);
                                    setEditingGroupId(null);
                                    setEditingDetailId(null);
                                  }}
                                  className="h-6 text-xs"
                                >
                                  완료
                                </Button>
                              </div>
                              {/* 🆕 가로 Grid 배치 (2~3열) */}
                              <div className="grid grid-cols-1 gap-3 sm:grid-cols-2 lg:grid-cols-3">
                                {groupFields.map((field) => (
                                  <div key={field.name} className="space-y-1">
                                    <label className="text-xs font-medium">
                                      {field.label}
                                      {field.required && <span className="text-destructive ml-1">*</span>}
                                    </label>
                                    {renderField(field, item.id, group.id, entry.id, entry)}
                                  </div>
                                ))}
                              </div>
                            </CardContent>
                          </Card>
                        );
                      } else {
                        // 읽기 모드: 텍스트 표시 (클릭하면 수정)
                        return (
                          <div
                            key={entry.id}
                            className="bg-muted/30 hover:bg-muted/50 flex cursor-pointer items-center justify-between rounded border p-2 text-xs"
                            onClick={() => handleEditGroupEntry(item.id, group.id, entry.id)}
                          >
                            <span className="flex items-center gap-1">
                              {idx + 1}. {renderDisplayItems(entry, item, group.id)}
                            </span>
                            <Button
                              type="button"
                              variant="ghost"
                              size="sm"
                              onClick={(e) => {
                                e.stopPropagation();
                                handleRemoveGroupEntry(item.id, group.id, entry.id);
                              }}
                              className="h-6 w-6 p-0"
                            >
                              <X className="h-3 w-3" />
                            </Button>
                          </div>
                        );
                      }
                    })}
                  </div>
                ) : (
                  <p className="text-muted-foreground text-xs italic">아직 입력된 항목이 없습니다.</p>
                )}

                {/* 새 항목 입력 중 */}
                {isEditingThisGroup && editingDetailId && !groupEntries.find((e) => e.id === editingDetailId) && (
                  <Card className="border-primary border-dashed">
                    <CardContent className="space-y-2 p-3">
                      <div className="mb-2 flex items-center justify-between">
                        <span className="text-xs font-medium">새 항목</span>
                        <Button
                          type="button"
                          variant="ghost"
                          size="sm"
                          onClick={() => {
                            setIsEditing(false);
                            setEditingItemId(null);
                            setEditingGroupId(null);
                            setEditingDetailId(null);
                          }}
                          className="h-6 text-xs"
                        >
                          취소
                        </Button>
                      </div>
                      {groupFields.map((field) => (
                        <div key={field.name} className="space-y-1">
                          <label className="text-xs font-medium">
                            {field.label}
                            {field.required && <span className="text-destructive ml-1">*</span>}
                          </label>
                          {renderField(field, item.id, group.id, editingDetailId, {})}
                        </div>
                      ))}
                    </CardContent>
                  </Card>
                )}
              </CardContent>
            </Card>
          );
        })}
      </div>
    );
  };

  // 🆕 Grid 레이아웃 렌더링 (완전히 재작성 - 그룹별 독립 관리)
  const renderGridLayout = () => {
    console.log("🎨 [renderGridLayout] 렌더링:", {
      itemsLength: items.length,
      displayColumns: componentConfig.displayColumns,
      firstItemOriginalData: items[0]?.originalData,
    });

    return (
      <div className="bg-card space-y-4 p-4">
        {items.map((item, index) => {
          // 제목용 첫 번째 컬럼 값
          const titleValue = componentConfig.displayColumns?.[0]?.name
            ? getFieldValue(item.originalData, componentConfig.displayColumns[0].name)
            : null;

          // 요약용 모든 컬럼 값들
          const summaryValues = componentConfig.displayColumns
            ?.map((col) => getFieldValue(item.originalData, col.name))
            .filter(Boolean);

          console.log("🔍 [renderGridLayout] 항목 렌더링:", {
            index,
            titleValue,
            summaryValues,
            displayColumns: componentConfig.displayColumns,
            originalData: item.originalData,
            "displayColumns[0]": componentConfig.displayColumns?.[0],
            "originalData keys": Object.keys(item.originalData),
          });

          return (
            <Card key={item.id} className="border shadow-sm">
              <CardHeader className="pb-3">
                <CardTitle className="flex items-center justify-between text-base font-semibold">
                  <span>
                    {index + 1}. {titleValue || "항목"}
                  </span>
                  <Button
                    type="button"
                    variant="ghost"
                    size="sm"
                    onClick={() => handleRemoveItem(item.id)}
                    className="h-7 w-7 p-0 text-red-500"
                  >
                    <X className="h-4 w-4" />
                  </Button>
                </CardTitle>
                {/* 원본 데이터 요약 */}
                {summaryValues && summaryValues.length > 0 && (
                  <div className="text-muted-foreground text-xs">{summaryValues.join(" | ")}</div>
                )}
              </CardHeader>
              <CardContent>
                {/* 그룹별 입력 항목들 렌더링 */}
                {renderFieldsByGroup(item)}
              </CardContent>
            </Card>
          );
        })}
      </div>
    );
  };

  // 🔧 기존 renderGridLayout (백업 - 사용 안 함)
  const renderGridLayout_OLD = () => {
    return (
      <div className="bg-card space-y-4 p-4">
        {/* Modal 모드: 추가 버튼 */}
        {isModalMode && !isEditing && items.length === 0 && (
          <div className="py-8 text-center">
            <p className="text-muted-foreground mb-4 text-sm">항목을 추가하려면 추가 버튼을 클릭하세요</p>
            <Button type="button" onClick={() => setIsEditing(true)} size="sm" className="text-xs sm:text-sm">
              + 추가
            </Button>
          </div>
        )}

        {/* Modal 모드: 편집 중인 항목 (입력창 표시) */}
        {isModalMode &&
          isEditing &&
          editingItemId &&
          (() => {
            const editingItem = items.find((item) => item.id === editingItemId);
            console.log("🔍 [Modal Mode] 편집 항목 찾기:", {
              editingItemId,
              itemsLength: items.length,
              itemIds: items.map((i) => i.id),
              editingItem: editingItem ? "찾음" : "못 찾음",
              editingDetailId,
            });
            if (!editingItem) {
              console.warn("⚠️ [Modal Mode] 편집할 항목을 찾을 수 없습니다!");
              return null;
            }

            return (
              <Card className="border-primary border-2 shadow-sm">
                <CardHeader className="pb-3">
                  <CardTitle className="flex items-center justify-between text-sm font-semibold">
                    <span>
                      품목:{" "}
                      {getFieldValue(editingItem.originalData, componentConfig.displayColumns?.[0]?.name || "") ||
                        "항목"}
                    </span>
                    <Button
                      type="button"
                      variant="ghost"
                      size="sm"
                      onClick={() => {
                        setIsEditing(false);
                        setEditingItemId(null);
                        setEditingDetailId(null);
                      }}
                      className="h-7 text-xs"
                    >
                      취소
                    </Button>
                  </CardTitle>
                </CardHeader>
                <CardContent className="space-y-3">
                  {/* 원본 데이터 요약 */}
                  <div className="text-muted-foreground bg-muted rounded p-2 text-xs">
                    {componentConfig.displayColumns
                      ?.map((col) => editingItem.originalData[col.name])
                      .filter(Boolean)
                      .join(" | ")}
                  </div>

                  {/* 🆕 이미 입력된 상세 항목들 표시 */}
                  {editingItem.details.length > 0 && (
                    <div className="space-y-2">
                      <div className="text-xs font-medium">입력된 항목 ({editingItem.details.length}개)</div>
                      {editingItem.details.map((detail, idx) => (
                        <div
                          key={detail.id}
                          className="bg-muted/30 flex items-center justify-between rounded border p-2 text-xs"
                        >
                          <span>
                            {idx + 1}. {detail[componentConfig.additionalFields?.[0]?.name] || "입력됨"}
                          </span>
                          <Button
                            type="button"
                            variant="ghost"
                            size="sm"
                            onClick={() => handleRemoveDetail(editingItem.id, detail.id)}
                            className="h-6 w-6 p-0"
                          >
                            X
                          </Button>
                        </div>
                      ))}
                    </div>
                  )}

                  {/* 추가 입력 필드 */}
                  {componentConfig.additionalFields &&
                    componentConfig.additionalFields.length > 0 &&
                    editingDetailId &&
                    (() => {
                      // 현재 편집 중인 detail 찾기 (없으면 빈 객체)
                      const currentDetail = editingItem.details.find((d) => d.id === editingDetailId) || {
                        id: editingDetailId,
                      };
                      return renderFieldsByGroup(editingItem.id, editingDetailId, currentDetail);
                    })()}

                  {/* 액션 버튼들 */}
                  <div className="flex justify-end gap-2 pt-2">
                    <Button
                      type="button"
                      onClick={() => handleAddDetail(editingItem.id)}
                      size="sm"
                      variant="outline"
                      className="text-xs"
                    >
                      + 이 품목에 추가 입력
                    </Button>
                    <Button type="button" variant="default" onClick={handleNextItem} size="sm" className="text-xs">
                      다음 품목
                    </Button>
                  </div>
                </CardContent>
              </Card>
            );
          })()}

        {/* 저장된 항목들 (inline 모드 또는 modal 모드에서 편집 완료된 항목) */}
        {items.map((item, index) => {
          // Modal 모드에서 현재 편집 중인 항목은 위에서 렌더링하므로 스킵
          if (isModalMode && isEditing && item.id === editingItemId) {
            return null;
          }

          // Modal 모드: 작은 요약 카드
          if (isModalMode) {
            return (
              <Card key={item.id} className="bg-muted/50 border shadow-sm">
                <CardContent className="p-3">
                  <div className="mb-2 flex items-center justify-between">
                    <div className="flex-1">
                      <div className="mb-1 text-sm font-semibold">
                        {index + 1}.{" "}
                        {getFieldValue(item.originalData, componentConfig.displayColumns?.[0]?.name || "") || "항목"}
                      </div>
                      <div className="text-muted-foreground text-xs">
                        {componentConfig.displayColumns
                          ?.map((col) => getFieldValue(item.originalData, col.name))
                          .filter(Boolean)
                          .join(" | ")}
                      </div>
                    </div>
                    <div className="flex items-center gap-2">
                      <Button
                        type="button"
                        variant="ghost"
                        size="sm"
                        onClick={() => {
                          setIsEditing(true);
                          setEditingItemId(item.id);
                          const newDetailId = `detail-${Date.now()}`;
                          setEditingDetailId(newDetailId);
                        }}
                        className="h-7 text-xs text-orange-600"
                      >
                        추가 입력
                      </Button>
                      {componentConfig.allowRemove && (
                        <Button
                          type="button"
                          variant="ghost"
                          size="icon"
                          onClick={() => handleRemoveItem(item.id)}
                          className="h-7 w-7 text-red-500"
                        >
                          <X className="h-3 w-3" />
                        </Button>
                      )}
                    </div>
                  </div>
                  {/* 🆕 입력된 상세 항목들 표시 */}
                  {item.details && item.details.length > 0 && (
                    <div className="border-primary mt-2 space-y-1 border-l-2 pl-4">
                      {item.details.map((detail, detailIdx) => (
                        <div key={detail.id} className="text-primary text-xs">
                          {detailIdx + 1}. {detail[componentConfig.additionalFields?.[0]?.name] || "입력됨"}
                        </div>
                      ))}
                    </div>
                  )}
                </CardContent>
              </Card>
            );
          }

          // Inline 모드: 각 품목마다 여러 상세 항목 표시
          return (
            <Card key={item.id} className="border shadow-sm">
              <CardContent className="space-y-3 p-4">
                {/* 제목 (품명) */}
                <div className="flex items-center justify-between">
                  <div className="text-base font-semibold">
                    {index + 1}.{" "}
                    {getFieldValue(item.originalData, componentConfig.displayColumns?.[0]?.name || "") || "항목"}
                  </div>
                  <Button
                    type="button"
                    onClick={() => {
                      const newDetailId = `detail-${Date.now()}`;
                      handleAddDetail(item.id);
                    }}
                    size="sm"
                    variant="outline"
                    className="text-xs"
                  >
                    + 상세 입력 추가
                  </Button>
                </div>

                {/* 원본 데이터 요약 (작은 텍스트, | 구분자) */}
                <div className="text-muted-foreground text-xs">
                  {componentConfig.displayColumns
                    ?.map((col) => getFieldValue(item.originalData, col.name))
                    .filter(Boolean)
                    .join(" | ")}
                </div>

                {/* 🆕 각 상세 항목 표시 */}
                {item.details && item.details.length > 0 ? (
                  <div className="border-primary space-y-3 border-l-2 pl-4">
                    {item.details.map((detail, detailIdx) => (
                      <Card key={detail.id} className="border-dashed">
                        <CardContent className="space-y-2 p-3">
                          <div className="flex items-center justify-between">
                            <div className="text-xs font-medium">상세 항목 {detailIdx + 1}</div>
                            <Button
                              type="button"
                              variant="ghost"
                              size="sm"
                              onClick={() => handleRemoveDetail(item.id, detail.id)}
                              className="h-6 w-6 p-0 text-red-500"
                            >
                              X
                            </Button>
                          </div>
                          {/* 입력 필드들 */}
                          {renderFieldsByGroup(item.id, detail.id, detail)}
                        </CardContent>
                      </Card>
                    ))}
                  </div>
                ) : (
                  <div className="text-muted-foreground pl-4 text-xs italic">아직 입력된 상세 항목이 없습니다.</div>
                )}
              </CardContent>
            </Card>
          );
        })}

        {/* Modal 모드: 하단 추가 버튼 (항목이 있을 때) */}
        {isModalMode && !isEditing && items.length > 0 && (
          <Button
            type="button"
            onClick={() => {
              // 새 항목 추가 로직은 여기서 처리하지 않고, 기존 항목이 있으면 첫 항목을 편집 모드로
              setIsEditing(true);
              setEditingItemId(items[0]?.id || null);
            }}
            variant="outline"
            size="sm"
            className="w-full border-dashed text-xs sm:text-sm"
          >
            + 추가
          </Button>
        )}
      </div>
    );
  };

  // 기존 테이블 레이아웃 (사용 안 함, 삭제 예정)
  const renderOldGridLayout = () => {
    return (
      <div className="bg-card overflow-auto">
        <Table>
          <TableHeader>
            <TableRow className="bg-background">
              {componentConfig.showIndex && (
                <TableHead className="h-12 w-12 px-4 py-3 text-center text-xs font-semibold sm:text-sm">#</TableHead>
              )}

              {/* 원본 데이터 컬럼 */}
              {componentConfig.displayColumns?.map((col) => (
                <TableHead key={col.name} className="h-12 px-4 py-3 text-xs font-semibold sm:text-sm">
                  {col.label || col.name}
                </TableHead>
              ))}

              {/* 추가 입력 필드 컬럼 */}
              {componentConfig.additionalFields?.map((field) => (
                <TableHead key={field.name} className="h-12 px-4 py-3 text-xs font-semibold sm:text-sm">
                  {field.label}
                  {field.required && <span className="text-destructive ml-1">*</span>}
                </TableHead>
              ))}

              {componentConfig.allowRemove && (
                <TableHead className="h-12 w-20 px-4 py-3 text-center text-xs font-semibold sm:text-sm">작업</TableHead>
              )}
            </TableRow>
          </TableHeader>
          <TableBody>
            {items.map((item, index) => (
              <TableRow key={item.id} className="bg-background hover:bg-muted/50 transition-colors">
                {/* 인덱스 번호 */}
                {componentConfig.showIndex && (
                  <TableCell className="h-14 px-4 py-3 text-center text-xs font-medium sm:text-sm">
                    {index + 1}
                  </TableCell>
                )}

                {/* 원본 데이터 표시 */}
                {componentConfig.displayColumns?.map((col) => (
                  <TableCell key={col.name} className="h-14 px-4 py-3 text-xs sm:text-sm">
                    {getFieldValue(item.originalData, col.name) || "-"}
                  </TableCell>
                ))}

                {/* 추가 입력 필드 */}
                {componentConfig.additionalFields?.map((field) => (
                  <TableCell key={field.name} className="h-14 px-4 py-3">
                    {renderField(field, item)}
                  </TableCell>
                ))}

                {/* 삭제 버튼 */}
                {componentConfig.allowRemove && (
                  <TableCell className="h-14 px-4 py-3 text-center">
                    {!componentConfig.disabled && !componentConfig.readonly && (
                      <Button
                        type="button"
                        variant="ghost"
                        size="icon"
                        onClick={() => handleRemoveItem(item.id)}
                        className="text-destructive hover:bg-destructive/10 hover:text-destructive h-7 w-7 sm:h-8 sm:w-8"
                        title="항목 제거"
                      >
                        <X className="h-3 w-3 sm:h-4 sm:w-4" />
                      </Button>
                    )}
                  </TableCell>
                )}
              </TableRow>
            ))}
          </TableBody>
        </Table>
      </div>
    );
  };

  // 🆕 Card 레이아웃 렌더링 (Grid와 동일)
  const renderCardLayout = () => {
    return renderGridLayout();
  };

  // 🔧 기존 renderCardLayout (백업 - 사용 안 함)
  const renderCardLayout_OLD = () => {
    const isModalMode = componentConfig.inputMode === "modal";
    console.log("🎨 [renderCardLayout] 렌더링 모드:", {
      inputMode: componentConfig.inputMode,
      isModalMode,
      isEditing,
      editingItemId,
      itemsLength: items.length,
    });

    return (
      <div className="bg-card space-y-3 p-4">
        {/* Modal 모드: 추가 버튼 */}
        {isModalMode && !isEditing && items.length === 0 && (
          <div className="py-8 text-center">
            <p className="text-muted-foreground mb-4 text-sm">항목을 추가하려면 추가 버튼을 클릭하세요</p>
            <Button type="button" onClick={() => setIsEditing(true)} size="sm" className="text-xs sm:text-sm">
              + 추가
            </Button>
          </div>
        )}

        {/* Modal 모드: 편집 중인 항목 (입력창 표시) */}
        {isModalMode &&
          isEditing &&
          editingItemId &&
          (() => {
            const editingItem = items.find((item) => item.id === editingItemId);
            console.log("🔍 [Modal Mode - Card] 편집 항목 찾기:", {
              editingItemId,
              itemsLength: items.length,
              itemIds: items.map((i) => i.id),
              editingItem: editingItem ? "찾음" : "못 찾음",
              editingDetailId,
            });
            if (!editingItem) {
              console.warn("⚠️ [Modal Mode - Card] 편집할 항목을 찾을 수 없습니다!");
              return null;
            }

            return (
              <Card className="border-primary border-2 shadow-sm">
                <CardHeader className="pb-3">
                  <CardTitle className="flex items-center justify-between text-sm font-semibold">
                    <span>
                      품목:{" "}
                      {getFieldValue(editingItem.originalData, componentConfig.displayColumns?.[0]?.name || "") ||
                        "항목"}
                    </span>
                    <Button
                      type="button"
                      variant="ghost"
                      size="sm"
                      onClick={() => {
                        setIsEditing(false);
                        setEditingItemId(null);
                        setEditingDetailId(null);
                      }}
                      className="h-7 text-xs"
                    >
                      취소
                    </Button>
                  </CardTitle>
                </CardHeader>
                <CardContent className="space-y-3">
                  {/* 원본 데이터 요약 */}
                  <div className="text-muted-foreground bg-muted rounded p-2 text-xs">
                    {componentConfig.displayColumns
                      ?.map((col) => editingItem.originalData[col.name])
                      .filter(Boolean)
                      .join(" | ")}
                  </div>

                  {/* 🆕 이미 입력된 상세 항목들 표시 */}
                  {editingItem.details.length > 0 && (
                    <div className="space-y-2">
                      <div className="text-xs font-medium">입력된 항목 ({editingItem.details.length}개)</div>
                      {editingItem.details.map((detail, idx) => (
                        <div
                          key={detail.id}
                          className="bg-muted/30 flex items-center justify-between rounded border p-2 text-xs"
                        >
                          <span>
                            {idx + 1}. {detail[componentConfig.additionalFields?.[0]?.name] || "입력됨"}
                          </span>
                          <Button
                            type="button"
                            variant="ghost"
                            size="sm"
                            onClick={() => handleRemoveDetail(editingItem.id, detail.id)}
                            className="h-6 w-6 p-0"
                          >
                            X
                          </Button>
                        </div>
                      ))}
                    </div>
                  )}

                  {/* 추가 입력 필드 */}
                  {componentConfig.additionalFields &&
                    componentConfig.additionalFields.length > 0 &&
                    editingDetailId &&
                    (() => {
                      // 현재 편집 중인 detail 찾기 (없으면 빈 객체)
                      const currentDetail = editingItem.details.find((d) => d.id === editingDetailId) || {
                        id: editingDetailId,
                      };
                      return renderFieldsByGroup(editingItem.id, editingDetailId, currentDetail);
                    })()}

                  {/* 액션 버튼들 */}
                  <div className="flex justify-end gap-2 pt-2">
                    <Button
                      type="button"
                      onClick={() => handleAddDetail(editingItem.id)}
                      size="sm"
                      variant="outline"
                      className="text-xs"
                    >
                      + 이 품목에 추가 입력
                    </Button>
                    <Button type="button" variant="default" onClick={handleNextItem} size="sm" className="text-xs">
                      다음 품목
                    </Button>
                  </div>
                </CardContent>
              </Card>
            );
          })()}

        {/* 저장된 항목들 (inline 모드 또는 modal 모드에서 편집 완료된 항목) */}
        {items.map((item, index) => {
          // Modal 모드에서 현재 편집 중인 항목은 위에서 렌더링하므로 스킵
          if (isModalMode && isEditing && item.id === editingItemId) {
            return null;
          }

          // Modal 모드: 작은 요약 카드
          if (isModalMode) {
            return (
              <Card key={item.id} className="bg-muted/50 border shadow-sm">
                <CardContent className="flex items-center justify-between p-3">
                  <div className="flex-1">
                    <div className="mb-1 text-sm font-semibold">
                      {index + 1}.{" "}
                      {getFieldValue(item.originalData, componentConfig.displayColumns?.[0]?.name || "") || "항목"}
                    </div>
                    <div className="text-muted-foreground text-xs">
                      {componentConfig.displayColumns
                        ?.map((col) => getFieldValue(item.originalData, col.name))
                        .filter(Boolean)
                        .join(" | ")}
                    </div>
                  </div>
                  <div className="flex items-center gap-2">
                    <Button
                      type="button"
                      variant="ghost"
                      size="sm"
                      onClick={() => {
                        setIsEditing(true);
                        setEditingItemId(item.id);
                      }}
                      className="h-7 text-xs text-orange-600"
                    >
                      수정
                    </Button>
                    {componentConfig.allowRemove && (
                      <Button
                        type="button"
                        variant="ghost"
                        size="sm"
                        onClick={() => handleRemoveItem(item.id)}
                        className="text-destructive h-7 text-xs"
                      >
                        X
                      </Button>
                    )}
                  </div>
                </CardContent>
              </Card>
            );
          }

          // Inline 모드: 각 품목마다 여러 상세 항목 표시
          return (
            <Card key={item.id} className="border shadow-sm">
              <CardContent className="space-y-3 p-4">
                {/* 제목 (품명) */}
                <div className="flex items-center justify-between">
                  <div className="text-base font-semibold">
                    {index + 1}.{" "}
                    {getFieldValue(item.originalData, componentConfig.displayColumns?.[0]?.name || "") || "항목"}
                  </div>
                  <Button
                    type="button"
                    onClick={() => {
                      const newDetailId = `detail-${Date.now()}`;
                      handleAddDetail(item.id);
                    }}
                    size="sm"
                    variant="outline"
                    className="text-xs"
                  >
                    + 상세 입력 추가
                  </Button>
                </div>

                {/* 원본 데이터 요약 (작은 텍스트, | 구분자) */}
                <div className="text-muted-foreground text-xs">
                  {componentConfig.displayColumns
                    ?.map((col) => getFieldValue(item.originalData, col.name))
                    .filter(Boolean)
                    .join(" | ")}
                </div>

                {/* 🆕 각 상세 항목 표시 */}
                {item.details && item.details.length > 0 ? (
                  <div className="border-primary space-y-3 border-l-2 pl-4">
                    {item.details.map((detail, detailIdx) => (
                      <Card key={detail.id} className="border-dashed">
                        <CardContent className="space-y-2 p-3">
                          <div className="flex items-center justify-between">
                            <div className="text-xs font-medium">상세 항목 {detailIdx + 1}</div>
                            <Button
                              type="button"
                              variant="ghost"
                              size="sm"
                              onClick={() => handleRemoveDetail(item.id, detail.id)}
                              className="h-6 w-6 p-0 text-red-500"
                            >
                              X
                            </Button>
                          </div>
                          {/* 입력 필드들 */}
                          {renderFieldsByGroup(item.id, detail.id, detail)}
                        </CardContent>
                      </Card>
                    ))}
                  </div>
                ) : (
                  <div className="text-muted-foreground pl-4 text-xs italic">아직 입력된 상세 항목이 없습니다.</div>
                )}
              </CardContent>
            </Card>
          );
        })}

        {/* Modal 모드: 하단 추가 버튼 (항목이 있을 때) */}
        {isModalMode && !isEditing && items.length > 0 && (
          <Button
            type="button"
            onClick={() => {
              // 새 항목 추가 로직은 여기서 처리하지 않고, 기존 항목이 있으면 첫 항목을 편집 모드로
              setIsEditing(true);
              setEditingItemId(items[0]?.id || null);
            }}
            variant="outline"
            size="sm"
            className="w-full border-dashed text-xs sm:text-sm"
          >
            + 추가
          </Button>
        )}
      </div>
    );
  };

  console.log("🎨 [메인 렌더] 레이아웃 결정:", {
    layout: componentConfig.layout,
    willUseGrid: componentConfig.layout === "grid",
    inputMode: componentConfig.inputMode,
  });

  return (
    <div style={componentStyle} className={cn("space-y-4", className)} onClick={handleClick}>
      {/* 레이아웃에 따라 렌더링 */}
      {componentConfig.layout === "grid" ? renderGridLayout() : renderCardLayout()}

      {/* 항목 수 표시 */}
      <div className="text-muted-foreground flex justify-between text-xs">
        <span>총 {items.length}개 항목</span>
        {componentConfig.targetTable && <span>저장 대상: {componentConfig.targetTable}</span>}
      </div>
    </div>
  );
};

/**
 * SelectedItemsDetailInput 래퍼 컴포넌트
 * 추가적인 로직이나 상태 관리가 필요한 경우 사용
 */
export const SelectedItemsDetailInputWrapper: React.FC<SelectedItemsDetailInputComponentProps> = (props) => {
  return <SelectedItemsDetailInputComponent {...props} />;
};