"use client";

import React, { useState, useEffect, useCallback, useMemo, useRef } from "react";
import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";
import { Label } from "@/components/ui/label";
import { Textarea } from "@/components/ui/textarea";
import { Checkbox } from "@/components/ui/checkbox";
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
import { Collapsible, CollapsibleContent, CollapsibleTrigger } from "@/components/ui/collapsible";
import {
  AlertDialog,
  AlertDialogAction,
  AlertDialogCancel,
  AlertDialogContent,
  AlertDialogDescription,
  AlertDialogFooter,
  AlertDialogHeader,
  AlertDialogTitle,
} from "@/components/ui/alert-dialog";
import { Card, CardContent, CardHeader, CardTitle, CardDescription } from "@/components/ui/card";
import { ChevronDown, ChevronUp, ChevronRight, Plus, Trash2, RefreshCw, Loader2 } from "lucide-react";
import { toast } from "sonner";
import { cn } from "@/lib/utils";
import { apiClient } from "@/lib/api/client";
import { generateNumberingCode, allocateNumberingCode, previewNumberingCode } from "@/lib/api/numberingRule";
import { useCascadingDropdown } from "@/hooks/useCascadingDropdown";
import { CascadingDropdownConfig } from "@/types/screen-management";

import {
  UniversalFormModalComponentProps,
  UniversalFormModalConfig,
  FormSectionConfig,
  FormFieldConfig,
  FormDataState,
  RepeatSectionItem,
  SelectOptionConfig,
  OptionalFieldGroupConfig,
} from "./types";
import { defaultConfig, generateUniqueId } from "./config";
import { TableSectionRenderer } from "./TableSectionRenderer";

/**
 * 🔗 연쇄 드롭다운 Select 필드 컴포넌트
 */
interface CascadingSelectFieldProps {
  fieldId: string;
  config: CascadingDropdownConfig;
  parentValue?: string | number | null;
  value?: string;
  onChange: (value: string) => void;
  placeholder?: string;
  disabled?: boolean;
}

const CascadingSelectField: React.FC<CascadingSelectFieldProps> = ({
  fieldId,
  config,
  parentValue,
  value,
  onChange,
  placeholder,
  disabled,
}) => {
  const { options, loading } = useCascadingDropdown({
    config,
    parentValue,
  });

  const getPlaceholder = () => {
    if (!parentValue) {
      return config.emptyParentMessage || "상위 항목을 먼저 선택하세요";
    }
    if (loading) {
      return config.loadingMessage || "로딩 중...";
    }
    if (options.length === 0) {
      return config.noOptionsMessage || "선택 가능한 항목이 없습니다";
    }
    return placeholder || "선택하세요";
  };

  const isDisabled = disabled || !parentValue || loading;

  return (
    <Select value={value || ""} onValueChange={onChange} disabled={isDisabled}>
      <SelectTrigger id={fieldId} className="w-full">
        {loading ? (
          <div className="flex items-center gap-2">
            <Loader2 className="h-4 w-4 animate-spin" />
            <span className="text-muted-foreground text-sm">로딩 중...</span>
          </div>
        ) : (
          <SelectValue placeholder={getPlaceholder()} />
        )}
      </SelectTrigger>
      <SelectContent>
        {options.length === 0 ? (
          <div className="text-muted-foreground px-2 py-4 text-center text-sm">
            {!parentValue
              ? config.emptyParentMessage || "상위 항목을 먼저 선택하세요"
              : config.noOptionsMessage || "선택 가능한 항목이 없습니다"}
          </div>
        ) : (
          options
            .filter((option) => option.value && option.value !== "")
            .map((option) => (
              <SelectItem key={option.value} value={option.value}>
                {option.label}
              </SelectItem>
            ))
        )}
      </SelectContent>
    </Select>
  );
};

/**
 * 범용 폼 모달 컴포넌트
 *
 * 섹션 기반 폼 레이아웃, 채번규칙, 다중 행 저장을 지원합니다.
 */
export function UniversalFormModalComponent({
  component,
  config: propConfig,
  isDesignMode = false,
  isSelected = false,
  className,
  style,
  initialData: propInitialData,
  // DynamicComponentRenderer에서 전달되는 props (DOM 전달 방지를 위해 _ prefix 사용)
  _initialData,
  _originalData,
  _groupedData,
  onSave,
  onCancel,
  onChange,
  ...restProps // 나머지 props는 DOM에 전달하지 않음
}: UniversalFormModalComponentProps & { _initialData?: any; _originalData?: any; _groupedData?: any }) {
  // initialData 우선순위: 직접 전달된 prop > DynamicComponentRenderer에서 전달된 prop
  const initialData = propInitialData || _initialData;
  // 설정 병합
  const config: UniversalFormModalConfig = useMemo(() => {
    const componentConfig = component?.config || {};
    return {
      ...defaultConfig,
      ...propConfig,
      ...componentConfig,
      modal: {
        ...defaultConfig.modal,
        ...propConfig?.modal,
        ...componentConfig.modal,
      },
      saveConfig: {
        ...defaultConfig.saveConfig,
        ...propConfig?.saveConfig,
        ...componentConfig.saveConfig,
        multiRowSave: {
          ...defaultConfig.saveConfig.multiRowSave,
          ...propConfig?.saveConfig?.multiRowSave,
          ...componentConfig.saveConfig?.multiRowSave,
        },
        afterSave: {
          ...defaultConfig.saveConfig.afterSave,
          ...propConfig?.saveConfig?.afterSave,
          ...componentConfig.saveConfig?.afterSave,
        },
      },
    };
  }, [component?.config, propConfig]);

  // 폼 데이터 상태
  const [formData, setFormData] = useState<FormDataState>({});
  const [, setOriginalData] = useState<Record<string, any>>({});

  // 반복 섹션 데이터
  const [repeatSections, setRepeatSections] = useState<{
    [sectionId: string]: RepeatSectionItem[];
  }>({});

  // 섹션 접힘 상태
  const [collapsedSections, setCollapsedSections] = useState<Set<string>>(new Set());

  // 옵셔널 필드 그룹 활성화 상태 (섹션ID-그룹ID 조합)
  const [activatedOptionalFieldGroups, setActivatedOptionalFieldGroups] = useState<Set<string>>(new Set());

  // Select 옵션 캐시
  const [selectOptionsCache, setSelectOptionsCache] = useState<{
    [key: string]: { value: string; label: string }[];
  }>({});

  // 연동 필드 그룹 데이터 캐시 (테이블별 데이터)
  const [linkedFieldDataCache, setLinkedFieldDataCache] = useState<{
    [tableKey: string]: Record<string, any>[];
  }>({});

  // 로딩 상태
  const [saving, setSaving] = useState(false);

  // 🆕 수정 모드: 원본 그룹 데이터 (INSERT/UPDATE/DELETE 추적용)
  const [originalGroupedData, setOriginalGroupedData] = useState<any[]>([]);
  const groupedDataInitializedRef = useRef(false);

  // 삭제 확인 다이얼로그
  const [deleteDialog, setDeleteDialog] = useState<{
    open: boolean;
    sectionId: string;
    itemId: string;
  }>({ open: false, sectionId: "", itemId: "" });

  // 초기 데이터를 한 번만 캡처 (컴포넌트 마운트 시)
  const capturedInitialData = useRef<Record<string, any> | undefined>(undefined);
  const hasInitialized = useRef(false);
  // 마지막으로 초기화된 데이터의 ID를 추적 (수정 모달에서 다른 항목 선택 시 재초기화 필요)
  const lastInitializedId = useRef<string | undefined>(undefined);

  // 초기화 - 최초 마운트 시 또는 initialData가 변경되었을 때 실행
  useEffect(() => {
    // initialData에서 ID 값 추출 (id, ID, objid 등)
    const currentId = initialData?.id || initialData?.ID || initialData?.objid;
    const currentIdString = currentId !== undefined ? String(currentId) : undefined;
    
    // 생성 모드에서 부모로부터 전달받은 데이터 해시 (ID가 없을 때만)
    const createModeDataHash = !currentIdString && initialData && Object.keys(initialData).length > 0
      ? JSON.stringify(initialData)
      : undefined;

    // 이미 초기화되었고, ID가 동일하고, 생성 모드 데이터도 동일하면 스킵
    if (hasInitialized.current && lastInitializedId.current === currentIdString) {
      // 생성 모드에서 데이터가 새로 전달된 경우는 재초기화 필요
      if (!createModeDataHash || capturedInitialData.current) {
        return;
      }
    }

    // 🆕 수정 모드: initialData에 데이터가 있으면서 ID가 변경된 경우 재초기화
    if (hasInitialized.current && currentIdString && lastInitializedId.current !== currentIdString) {
      console.log("[UniversalFormModal] ID 변경 감지 - 재초기화:", {
        prevId: lastInitializedId.current,
        newId: currentIdString,
        initialData: initialData,
      });
      // 채번 플래그 초기화 (새 항목이므로)
      numberingGeneratedRef.current = false;
      isGeneratingRef.current = false;
    }

    // 최초 initialData 캡처 (이후 변경되어도 이 값 사용)
    if (initialData && Object.keys(initialData).length > 0) {
      capturedInitialData.current = JSON.parse(JSON.stringify(initialData)); // 깊은 복사
      lastInitializedId.current = currentIdString;
      console.log("[UniversalFormModal] 초기 데이터 캡처:", capturedInitialData.current);
    }

    hasInitialized.current = true;
    initializeForm();
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [initialData]); // initialData 전체 변경 시 재초기화

  // config 변경 시에만 재초기화 (initialData 변경은 무시) - 채번규칙 제외
  useEffect(() => {
    if (!hasInitialized.current) return; // 최초 초기화 전이면 스킵

    console.log("[useEffect config 변경] 재초기화 스킵 (채번 중복 방지)");
    // initializeForm(); // 주석 처리 - config 변경 시 재초기화 안 함 (채번 중복 방지)
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [config]);

  // 컴포넌트 unmount 시 채번 플래그 초기화
  useEffect(() => {
    return () => {
      console.log("[채번] 컴포넌트 unmount - 플래그 초기화");
      numberingGeneratedRef.current = false;
      isGeneratingRef.current = false;
    };
  }, []);

  // 🆕 beforeFormSave 이벤트 리스너 - ButtonPrimary 저장 시 formData를 전달
  // 설정된 필드(columnName)만 병합하여 의도치 않은 덮어쓰기 방지
  useEffect(() => {
    const handleBeforeFormSave = (event: Event) => {
      if (!(event instanceof CustomEvent) || !event.detail?.formData) return;

      // 설정에 정의된 필드 columnName 목록 수집
      const configuredFields = new Set<string>();
      config.sections.forEach((section) => {
        (section.fields || []).forEach((field) => {
          if (field.columnName) {
            configuredFields.add(field.columnName);
          }
        });
      });

      console.log("[UniversalFormModal] beforeFormSave 이벤트 수신");
      console.log("[UniversalFormModal] 설정된 필드 목록:", Array.from(configuredFields));

      // UniversalFormModal에 설정된 필드만 병합 (채번 규칙 포함)
      // 외부 formData에 이미 값이 있어도 UniversalFormModal 값으로 덮어씀
      // (UniversalFormModal이 해당 필드의 주인이므로)
      for (const [key, value] of Object.entries(formData)) {
        // 설정에 정의된 필드 또는 채번 규칙 ID 필드만 병합
        const isConfiguredField = configuredFields.has(key);
        const isNumberingRuleId = key.endsWith("_numberingRuleId");

        if (isConfiguredField || isNumberingRuleId) {
          if (value !== undefined && value !== null && value !== "") {
            event.detail.formData[key] = value;
            console.log(`[UniversalFormModal] 필드 병합: ${key} =`, value);
          }
        }
      }

      // 반복 섹션 데이터도 병합 (필요한 경우)
      if (Object.keys(repeatSections).length > 0) {
        for (const [sectionId, items] of Object.entries(repeatSections)) {
          const sectionKey = `_repeatSection_${sectionId}`;
          event.detail.formData[sectionKey] = items;
          console.log(`[UniversalFormModal] 반복 섹션 병합: ${sectionKey}`, items);
        }
      }

      // 🆕 수정 모드: 원본 그룹 데이터 전달 (UPDATE/DELETE 추적용)
      if (originalGroupedData.length > 0) {
        event.detail.formData._originalGroupedData = originalGroupedData;
        console.log(`[UniversalFormModal] 원본 그룹 데이터 병합: ${originalGroupedData.length}개`);
      }
    };

    window.addEventListener("beforeFormSave", handleBeforeFormSave as EventListener);

    return () => {
      window.removeEventListener("beforeFormSave", handleBeforeFormSave as EventListener);
    };
  }, [formData, repeatSections, config.sections, originalGroupedData]);

  // 🆕 수정 모드: _groupedData가 있으면 테이블 섹션 초기화
  useEffect(() => {
    if (!_groupedData || _groupedData.length === 0) return;
    if (groupedDataInitializedRef.current) return; // 이미 초기화됨

    // 테이블 타입 섹션 찾기
    const tableSection = config.sections.find((s) => s.type === "table");
    if (!tableSection) {
      console.log("[UniversalFormModal] 테이블 섹션 없음 - _groupedData 무시");
      return;
    }

    console.log("[UniversalFormModal] 수정 모드 - 테이블 섹션 초기화:", {
      sectionId: tableSection.id,
      itemCount: _groupedData.length,
    });

    // 원본 데이터 저장 (수정/삭제 추적용)
    setOriginalGroupedData(JSON.parse(JSON.stringify(_groupedData)));

    // 테이블 섹션 데이터 설정
    const tableSectionKey = `_tableSection_${tableSection.id}`;
    setFormData((prev) => ({
      ...prev,
      [tableSectionKey]: _groupedData,
    }));

    groupedDataInitializedRef.current = true;
  }, [_groupedData, config.sections]);

  // 필드 레벨 linkedFieldGroup 데이터 로드
  useEffect(() => {
    const loadData = async () => {
      const tablesToLoad = new Set<string>();

      // 모든 섹션의 필드에서 linkedFieldGroup.sourceTable 수집
      config.sections.forEach((section) => {
        (section.fields || []).forEach((field) => {
          if (field.linkedFieldGroup?.enabled && field.linkedFieldGroup?.sourceTable) {
            tablesToLoad.add(field.linkedFieldGroup.sourceTable);
          }
        });
      });

      // 각 테이블 데이터 로드
      for (const tableName of tablesToLoad) {
        if (!linkedFieldDataCache[tableName]) {
          await loadLinkedFieldData(tableName);
        }
      }
    };

    loadData();
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [config.sections]);

  // 폼 초기화
  const initializeForm = useCallback(async () => {
    console.log("[initializeForm] 시작");

    // 캡처된 initialData 사용 (props로 전달된 initialData가 아닌)
    const effectiveInitialData = capturedInitialData.current || initialData;

    console.log("[initializeForm] 초기 데이터:", {
      capturedInitialData: capturedInitialData.current,
      initialData: initialData,
      effectiveInitialData: effectiveInitialData,
      hasData: effectiveInitialData && Object.keys(effectiveInitialData).length > 0,
    });

    const newFormData: FormDataState = {};
    const newRepeatSections: { [sectionId: string]: RepeatSectionItem[] } = {};
    const newCollapsed = new Set<string>();
    const newActivatedGroups = new Set<string>();

    // 섹션별 초기화
    for (const section of config.sections) {
      // 접힘 상태 초기화
      if (section.defaultCollapsed) {
        newCollapsed.add(section.id);
      }

      if (section.repeatable) {
        // 반복 섹션 초기화
        const minItems = section.repeatConfig?.minItems || 0;
        const items: RepeatSectionItem[] = [];
        for (let i = 0; i < minItems; i++) {
          items.push(createRepeatItem(section, i));
        }
        newRepeatSections[section.id] = items;
      } else if (section.type === "table") {
        // 테이블 섹션은 필드 초기화 스킵 (TableSectionRenderer에서 처리)
        continue;
      } else {
        // 일반 섹션 필드 초기화
        for (const field of (section.fields || [])) {
          // 기본값 설정
          let value = field.defaultValue ?? "";

          // 부모에서 전달받은 값 적용 (receiveFromParent 또는 effectiveInitialData에 해당 값이 있으면)
          if (effectiveInitialData) {
            const parentField = field.parentFieldName || field.columnName;
            if (effectiveInitialData[parentField] !== undefined) {
              // receiveFromParent가 true이거나, effectiveInitialData에 값이 있으면 적용
              if (field.receiveFromParent || value === "" || value === undefined) {
                value = effectiveInitialData[parentField];
              }
            }
          }

          newFormData[field.columnName] = value;
        }

        // 옵셔널 필드 그룹 처리
        if (section.optionalFieldGroups) {
          for (const group of section.optionalFieldGroups) {
            const key = `${section.id}-${group.id}`;
            
            // 수정 모드: triggerField 값이 triggerValueOnAdd와 일치하면 그룹 자동 활성화
            if (effectiveInitialData && group.triggerField && group.triggerValueOnAdd !== undefined) {
              const triggerValue = effectiveInitialData[group.triggerField];
              if (triggerValue === group.triggerValueOnAdd) {
                newActivatedGroups.add(key);
                console.log(`[initializeForm] 옵셔널 그룹 자동 활성화: ${key}, triggerField=${group.triggerField}, value=${triggerValue}`);
                
                // 활성화된 그룹의 필드값도 초기화
                for (const field of group.fields || []) {
                  let value = field.defaultValue ?? "";
                  const parentField = field.parentFieldName || field.columnName;
                  if (effectiveInitialData[parentField] !== undefined) {
                    value = effectiveInitialData[parentField];
                  }
                  newFormData[field.columnName] = value;
                }
              }
            }
            
            // 신규 등록 모드: triggerValueOnRemove를 기본값으로 설정
            if (group.triggerField && group.triggerValueOnRemove !== undefined) {
              // effectiveInitialData에 해당 값이 없는 경우에만 기본값 설정
              if (!effectiveInitialData || effectiveInitialData[group.triggerField] === undefined) {
                newFormData[group.triggerField] = group.triggerValueOnRemove;
              }
            }
          }
        }
      }
    }

    setFormData(newFormData);
    setRepeatSections(newRepeatSections);
    setCollapsedSections(newCollapsed);
    setActivatedOptionalFieldGroups(newActivatedGroups);
    setOriginalData(effectiveInitialData || {});

    // 수정 모드에서 서브 테이블 데이터 로드 (겸직 등)
    const multiTable = config.saveConfig?.customApiSave?.multiTable;
    if (multiTable && effectiveInitialData) {
      const pkColumn = multiTable.mainTable?.primaryKeyColumn;
      const pkValue = effectiveInitialData[pkColumn];
      
      // PK 값이 있으면 수정 모드로 판단
      if (pkValue) {
        console.log("[initializeForm] 수정 모드 - 서브 테이블 데이터 로드 시작");
        
        for (const subTableConfig of multiTable.subTables || []) {
          // loadOnEdit 옵션이 활성화된 경우에만 로드
          if (!subTableConfig.enabled || !subTableConfig.options?.loadOnEdit) {
            continue;
          }
          
          const { tableName, linkColumn, repeatSectionId, fieldMappings, options } = subTableConfig;
          if (!tableName || !linkColumn?.subColumn || !repeatSectionId) {
            continue;
          }
          
          try {
            // 서브 테이블에서 데이터 조회
            const filters: Record<string, any> = {
              [linkColumn.subColumn]: pkValue,
            };
            
            // 서브 항목만 로드 (메인 항목 제외)
            if (options?.loadOnlySubItems && options?.mainMarkerColumn) {
              filters[options.mainMarkerColumn] = options.subMarkerValue ?? false;
            }
            
            console.log(`[initializeForm] 서브 테이블 ${tableName} 조회:`, filters);
            
            const response = await apiClient.get(`/table-management/tables/${tableName}/data`, {
              params: {
                filters: JSON.stringify(filters),
                page: 1,
                pageSize: 100,
              },
            });
            
            if (response.data?.success && response.data?.data?.items) {
              const subItems = response.data.data.items;
              console.log(`[initializeForm] 서브 테이블 ${tableName} 데이터 ${subItems.length}건 로드됨`);
              
              // 역매핑: 서브 테이블 데이터 → 반복 섹션 데이터
              const repeatItems: RepeatSectionItem[] = subItems.map((item: any, index: number) => {
                const repeatItem: RepeatSectionItem = {
                  _id: generateUniqueId("repeat"),
                  _index: index,
                  _originalData: item, // 원본 데이터 보관 (수정 시 필요)
                };
                
                // 필드 매핑 역변환 (targetColumn → formField)
                for (const mapping of fieldMappings || []) {
                  if (mapping.formField && mapping.targetColumn) {
                    repeatItem[mapping.formField] = item[mapping.targetColumn];
                  }
                }
                
                return repeatItem;
              });
              
              // 반복 섹션에 데이터 설정
              newRepeatSections[repeatSectionId] = repeatItems;
              setRepeatSections({ ...newRepeatSections });
              console.log(`[initializeForm] 반복 섹션 ${repeatSectionId}에 ${repeatItems.length}건 설정`);
            }
          } catch (error) {
            console.error(`[initializeForm] 서브 테이블 ${tableName} 로드 실패:`, error);
          }
        }
      }
    }

    // 채번규칙 자동 생성
    console.log("[initializeForm] generateNumberingValues 호출");
    await generateNumberingValues(newFormData);
    console.log("[initializeForm] 완료");
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [config]); // initialData는 의존성에서 제거 (capturedInitialData.current 사용)

  // 반복 섹션 아이템 생성
  const createRepeatItem = (section: FormSectionConfig, index: number): RepeatSectionItem => {
    const item: RepeatSectionItem = {
      _id: generateUniqueId("repeat"),
      _index: index,
    };

    for (const field of (section.fields || [])) {
      item[field.columnName] = field.defaultValue ?? "";
    }

    return item;
  };

  // 채번규칙 자동 생성 (중복 호출 방지)
  const numberingGeneratedRef = useRef(false);
  const isGeneratingRef = useRef(false); // 진행 중 플래그 추가

  const generateNumberingValues = useCallback(
    async (currentFormData: FormDataState) => {
      // 이미 생성되었거나 진행 중이면 스킵
      if (numberingGeneratedRef.current) {
        console.log("[채번] 이미 생성됨 - 스킵");
        return;
      }

      if (isGeneratingRef.current) {
        console.log("[채번] 생성 진행 중 - 스킵");
        return;
      }

      isGeneratingRef.current = true; // 진행 중 표시
      console.log("[채번] 생성 시작");

      const updatedData = { ...currentFormData };
      let hasChanges = false;

      for (const section of config.sections) {
        if (section.repeatable || section.type === "table") continue;

        for (const field of (section.fields || [])) {
          if (
            field.numberingRule?.enabled &&
            field.numberingRule?.generateOnOpen &&
            field.numberingRule?.ruleId &&
            !updatedData[field.columnName]
          ) {
            try {
              console.log(`[채번 미리보기 API 호출] ${field.columnName}, ruleId: ${field.numberingRule.ruleId}`);
              // generateOnOpen: 미리보기만 표시 (DB 시퀀스 증가 안 함)
              const response = await previewNumberingCode(field.numberingRule.ruleId);
              if (response.success && response.data?.generatedCode) {
                updatedData[field.columnName] = response.data.generatedCode;

                // 저장 시 실제 할당을 위해 ruleId 저장 (TextInput과 동일한 키 형식)
                const ruleIdKey = `${field.columnName}_numberingRuleId`;
                updatedData[ruleIdKey] = field.numberingRule.ruleId;

                hasChanges = true;
                numberingGeneratedRef.current = true; // 생성 완료 표시
                console.log(
                  `[채번 미리보기 완료] ${field.columnName} = ${response.data.generatedCode} (저장 시 실제 할당)`,
                );
                console.log(`[채번 규칙 ID 저장] ${ruleIdKey} = ${field.numberingRule.ruleId}`);

                // 부모 컴포넌트에도 ruleId 전달 (ModalRepeaterTable → ScreenModal)
                if (onChange) {
                  onChange({
                    ...updatedData,
                    [ruleIdKey]: field.numberingRule.ruleId,
                  });
                  console.log(`[채번] 부모에게 ruleId 전달: ${ruleIdKey}`);
                }
              }
            } catch (error) {
              console.error(`채번규칙 미리보기 실패 (${field.columnName}):`, error);
            }
          }
        }
      }

      isGeneratingRef.current = false; // 진행 완료

      if (hasChanges) {
        setFormData(updatedData);
      }
    },
    [config, onChange],
  );

  // 필드 값 변경 핸들러
  const handleFieldChange = useCallback(
    (columnName: string, value: any) => {
      setFormData((prev) => {
        const newData = { ...prev, [columnName]: value };
        // onChange는 렌더링 외부에서 호출해야 함 (setTimeout 사용)
        if (onChange) {
          setTimeout(() => onChange(newData), 0);
        }
        return newData;
      });
    },
    [onChange],
  );

  // 반복 섹션 필드 값 변경 핸들러
  const handleRepeatFieldChange = useCallback((sectionId: string, itemId: string, columnName: string, value: any) => {
    setRepeatSections((prev) => {
      const items = prev[sectionId] || [];
      const newItems = items.map((item) => (item._id === itemId ? { ...item, [columnName]: value } : item));
      return { ...prev, [sectionId]: newItems };
    });
  }, []);

  // 반복 섹션 아이템 추가
  const handleAddRepeatItem = useCallback(
    (sectionId: string) => {
      const section = config.sections.find((s) => s.id === sectionId);
      if (!section) return;

      const maxItems = section.repeatConfig?.maxItems || 10;

      setRepeatSections((prev) => {
        const items = prev[sectionId] || [];
        if (items.length >= maxItems) {
          toast.error(`최대 ${maxItems}개까지만 추가할 수 있습니다.`);
          return prev;
        }

        const newItem = createRepeatItem(section, items.length);
        return { ...prev, [sectionId]: [...items, newItem] };
      });
    },
    [config],
  );

  // 반복 섹션 아이템 삭제
  const handleRemoveRepeatItem = useCallback(
    (sectionId: string, itemId: string) => {
      const section = config.sections.find((s) => s.id === sectionId);
      if (!section) return;

      const minItems = section.repeatConfig?.minItems || 0;

      setRepeatSections((prev) => {
        const items = prev[sectionId] || [];
        if (items.length <= minItems) {
          toast.error(`최소 ${minItems}개는 유지해야 합니다.`);
          return prev;
        }

        const newItems = items.filter((item) => item._id !== itemId).map((item, index) => ({ ...item, _index: index }));

        return { ...prev, [sectionId]: newItems };
      });

      setDeleteDialog({ open: false, sectionId: "", itemId: "" });
    },
    [config],
  );

  // 섹션 접힘 토글
  const toggleSectionCollapse = useCallback((sectionId: string) => {
    setCollapsedSections((prev) => {
      const newSet = new Set(prev);
      if (newSet.has(sectionId)) {
        newSet.delete(sectionId);
      } else {
        newSet.add(sectionId);
      }
      return newSet;
    });
  }, []);

  // 옵셔널 필드 그룹 활성화
  const activateOptionalFieldGroup = useCallback((sectionId: string, groupId: string) => {
    const section = config.sections.find((s) => s.id === sectionId);
    const group = section?.optionalFieldGroups?.find((g) => g.id === groupId);
    if (!group) return;

    const key = `${sectionId}-${groupId}`;
    setActivatedOptionalFieldGroups((prev) => {
      const newSet = new Set(prev);
      newSet.add(key);
      return newSet;
    });

    // 연동 필드 값 변경 (추가 시)
    if (group.triggerField && group.triggerValueOnAdd !== undefined) {
      handleFieldChange(group.triggerField, group.triggerValueOnAdd);
    }
  }, [config, handleFieldChange]);

  // 옵셔널 필드 그룹 비활성화
  const deactivateOptionalFieldGroup = useCallback((sectionId: string, groupId: string) => {
    const section = config.sections.find((s) => s.id === sectionId);
    const group = section?.optionalFieldGroups?.find((g) => g.id === groupId);
    if (!group) return;

    const key = `${sectionId}-${groupId}`;
    setActivatedOptionalFieldGroups((prev) => {
      const newSet = new Set(prev);
      newSet.delete(key);
      return newSet;
    });

    // 연동 필드 값 변경 (제거 시)
    if (group.triggerField && group.triggerValueOnRemove !== undefined) {
      handleFieldChange(group.triggerField, group.triggerValueOnRemove);
    }

    // 옵셔널 필드 그룹 필드 값 초기화
    (group.fields || []).forEach((field) => {
      handleFieldChange(field.columnName, field.defaultValue || "");
    });
  }, [config, handleFieldChange]);

  // Select 옵션 로드
  const loadSelectOptions = useCallback(
    async (fieldId: string, optionConfig: SelectOptionConfig): Promise<{ value: string; label: string }[]> => {
      // 캐시 확인
      if (selectOptionsCache[fieldId]) {
        return selectOptionsCache[fieldId];
      }

      let options: { value: string; label: string }[] = [];

      try {
        if (optionConfig.type === "static") {
          // 직접 입력: 설정된 정적 옵션 사용
          options = optionConfig.staticOptions || [];
        } else if (optionConfig.type === "table" && optionConfig.tableName) {
          // 테이블 참조: POST 방식으로 테이블 데이터 조회 (autoFilter 포함)
          const response = await apiClient.post(`/table-management/tables/${optionConfig.tableName}/data`, {
            page: 1,
            size: 1000,
            autoFilter: { enabled: true, filterColumn: "company_code" },
          });

          // 응답 데이터 파싱
          let dataArray: any[] = [];
          if (response.data?.success) {
            const responseData = response.data?.data;
            if (responseData?.data && Array.isArray(responseData.data)) {
              dataArray = responseData.data;
            } else if (Array.isArray(responseData)) {
              dataArray = responseData;
            } else if (responseData?.rows && Array.isArray(responseData.rows)) {
              dataArray = responseData.rows;
            }
          }

          options = dataArray.map((row: any) => ({
            value: String(row[optionConfig.valueColumn || "id"]),
            label: String(row[optionConfig.labelColumn || "name"]),
          }));
        } else if (optionConfig.type === "code" && optionConfig.categoryKey) {
          // 공통코드(카테고리 컬럼): table_column_category_values 테이블에서 조회
          // categoryKey 형식: "tableName.columnName"
          const [categoryTable, categoryColumn] = optionConfig.categoryKey.split(".");
          if (categoryTable && categoryColumn) {
            const response = await apiClient.get(
              `/table-categories/${categoryTable}/${categoryColumn}/values`
            );
            if (response.data?.success && response.data?.data) {
              // 라벨값을 DB에 저장 (화면에 표시되는 값 그대로 저장)
              options = response.data.data.map((item: any) => ({
                value: item.valueLabel || item.value_label,
                label: item.valueLabel || item.value_label,
              }));
            }
          }
        }

        // 캐시 저장
        setSelectOptionsCache((prev) => ({ ...prev, [fieldId]: options }));
      } catch (error) {
        console.error(`Select 옵션 로드 실패 (${fieldId}):`, error);
      }

      return options;
    },
    [selectOptionsCache],
  );

  // 연동 필드 그룹 데이터 로드
  const loadLinkedFieldData = useCallback(
    async (sourceTable: string): Promise<Record<string, any>[]> => {
      // 캐시 확인 - 이미 배열로 캐시되어 있으면 반환
      if (Array.isArray(linkedFieldDataCache[sourceTable]) && linkedFieldDataCache[sourceTable].length > 0) {
        return linkedFieldDataCache[sourceTable];
      }

      let data: Record<string, any>[] = [];

      try {
        console.log(`[연동필드] ${sourceTable} 데이터 로드 시작`);
        // 현재 회사 기준으로 데이터 조회 (POST 메서드, autoFilter 사용)
        const response = await apiClient.post(`/table-management/tables/${sourceTable}/data`, {
          page: 1,
          size: 1000,
          autoFilter: { enabled: true, filterColumn: "company_code" }, // 현재 회사 기준 자동 필터링
        });

        console.log(`[연동필드] ${sourceTable} API 응답:`, response.data);

        if (response.data?.success) {
          // data 구조 확인: { data: { data: [...], total, page, ... } } 또는 { data: [...] }
          const responseData = response.data?.data;
          if (Array.isArray(responseData)) {
            // 직접 배열인 경우
            data = responseData;
          } else if (responseData?.data && Array.isArray(responseData.data)) {
            // { data: [...], total: ... } 형태 (tableManagementService 응답)
            data = responseData.data;
          } else if (responseData?.rows && Array.isArray(responseData.rows)) {
            // { rows: [...], total: ... } 형태 (다른 API 응답)
            data = responseData.rows;
          }
          console.log(`[연동필드] ${sourceTable} 파싱된 데이터 ${data.length}개:`, data.slice(0, 3));
        }

        // 캐시 저장 (빈 배열이라도 저장하여 중복 요청 방지)
        setLinkedFieldDataCache((prev) => ({ ...prev, [sourceTable]: data }));
      } catch (error) {
        console.error(`연동 필드 데이터 로드 실패 (${sourceTable}):`, error);
        // 실패해도 빈 배열로 캐시하여 무한 요청 방지
        setLinkedFieldDataCache((prev) => ({ ...prev, [sourceTable]: [] }));
      }

      return data;
    },
    [linkedFieldDataCache],
  );

  // 필수 필드 검증
  const validateRequiredFields = useCallback((): { valid: boolean; missingFields: string[] } => {
    const missingFields: string[] = [];

    for (const section of config.sections) {
      if (section.repeatable || section.type === "table") continue; // 반복 섹션 및 테이블 섹션은 별도 검증

      for (const field of (section.fields || [])) {
        if (field.required && !field.hidden && !field.numberingRule?.hidden) {
          const value = formData[field.columnName];
          if (value === undefined || value === null || value === "") {
            missingFields.push(field.label || field.columnName);
          }
        }
      }
    }

    return { valid: missingFields.length === 0, missingFields };
  }, [config.sections, formData]);

  // 단일 행 저장
  const saveSingleRow = useCallback(async () => {
    const dataToSave = { ...formData };
    
    // 테이블 섹션 데이터 추출 (별도 저장용)
    const tableSectionData: Record<string, any[]> = {};

    // 메타데이터 필드 제거 (채번 규칙 ID는 유지 - buttonActions.ts에서 사용)
    Object.keys(dataToSave).forEach((key) => {
      if (key.startsWith("_tableSection_")) {
        // 테이블 섹션 데이터는 별도로 저장
        const sectionId = key.replace("_tableSection_", "");
        tableSectionData[sectionId] = dataToSave[key] || [];
        delete dataToSave[key];
      } else if (key.startsWith("_") && !key.includes("_numberingRuleId")) {
        delete dataToSave[key];
      }
    });

    // 저장 시점 채번규칙 처리 (generateOnSave만 처리)
    for (const section of config.sections) {
      // 테이블 타입 섹션은 건너뛰기
      if (section.type === "table") continue;
      
      for (const field of (section.fields || [])) {
        if (field.numberingRule?.enabled && field.numberingRule?.generateOnSave && field.numberingRule?.ruleId) {
          const response = await allocateNumberingCode(field.numberingRule.ruleId);
          if (response.success && response.data?.generatedCode) {
            dataToSave[field.columnName] = response.data.generatedCode;
            console.log(`[채번 할당] ${field.columnName} = ${response.data.generatedCode}`);
          } else {
            console.error(`[채번 실패] ${field.columnName}:`, response.error);
          }
        }
      }
    }

    // 별도 테이블에 저장해야 하는 테이블 섹션 목록
    const tableSectionsForSeparateTable = config.sections.filter(
      (s) => s.type === "table" && 
        s.tableConfig?.saveConfig?.targetTable && 
        s.tableConfig.saveConfig.targetTable !== config.saveConfig.tableName
    );
    
    // 테이블 섹션이 있고 메인 테이블에 품목별로 저장하는 경우 (공통 + 개별 병합 저장)
    // targetTable이 없거나 메인 테이블과 같은 경우
    const tableSectionsForMainTable = config.sections.filter(
      (s) => s.type === "table" && 
        (!s.tableConfig?.saveConfig?.targetTable || 
         s.tableConfig.saveConfig.targetTable === config.saveConfig.tableName)
    );

    console.log("[saveSingleRow] 메인 테이블:", config.saveConfig.tableName);
    console.log("[saveSingleRow] 메인 테이블에 저장할 테이블 섹션:", tableSectionsForMainTable.map(s => s.id));
    console.log("[saveSingleRow] 별도 테이블에 저장할 테이블 섹션:", tableSectionsForSeparateTable.map(s => s.id));
    console.log("[saveSingleRow] 테이블 섹션 데이터 키:", Object.keys(tableSectionData));
    console.log("[saveSingleRow] dataToSave 키:", Object.keys(dataToSave));

    if (tableSectionsForMainTable.length > 0) {
      // 공통 저장 필드 수집 (sectionSaveModes 설정에 따라)
      const commonFieldsData: Record<string, any> = {};
      const { sectionSaveModes } = config.saveConfig;
      
      // 필드 타입 섹션에서 공통 저장 필드 수집
      for (const section of config.sections) {
        if (section.type === "table") continue;
        
        const sectionMode = sectionSaveModes?.find((s) => s.sectionId === section.id);
        const defaultMode = "common"; // 필드 타입 섹션의 기본값은 공통 저장
        const sectionSaveMode = sectionMode?.saveMode || defaultMode;
        
        if (section.fields) {
          for (const field of section.fields) {
            const fieldOverride = sectionMode?.fieldOverrides?.find((f) => f.fieldName === field.columnName);
            const fieldSaveMode = fieldOverride?.saveMode || sectionSaveMode;
            
            if (fieldSaveMode === "common" && dataToSave[field.columnName] !== undefined) {
              commonFieldsData[field.columnName] = dataToSave[field.columnName];
            }
          }
        }
      }
      
      // 각 테이블 섹션의 품목 데이터에 공통 필드 병합하여 저장
      for (const tableSection of tableSectionsForMainTable) {
        const sectionData = tableSectionData[tableSection.id] || [];
        
        if (sectionData.length > 0) {
          // 품목별로 행 저장
          for (const item of sectionData) {
            const rowToSave = { ...commonFieldsData, ...item };
            
            // _sourceData 등 내부 메타데이터 제거
            Object.keys(rowToSave).forEach((key) => {
              if (key.startsWith("_")) {
                delete rowToSave[key];
              }
            });
            
            const response = await apiClient.post(
              `/table-management/tables/${config.saveConfig.tableName}/add`,
              rowToSave
            );
            
            if (!response.data?.success) {
              throw new Error(response.data?.message || "품목 저장 실패");
            }
          }
          
          // 이미 저장했으므로 아래 로직에서 다시 저장하지 않도록 제거
          delete tableSectionData[tableSection.id];
        }
      }
      
      // 품목이 없으면 공통 데이터만 저장하지 않음 (품목이 필요한 화면이므로)
      // 다른 테이블 섹션이 있는 경우에만 메인 데이터 저장
      const hasOtherTableSections = Object.keys(tableSectionData).length > 0;
      if (!hasOtherTableSections) {
        return; // 메인 테이블에 저장할 품목이 없으면 종료
      }
    }

    // 메인 데이터 저장 (테이블 섹션이 없거나 별도 테이블에 저장하는 경우)
    const response = await apiClient.post(`/table-management/tables/${config.saveConfig.tableName}/add`, dataToSave);

    if (!response.data?.success) {
      throw new Error(response.data?.message || "저장 실패");
    }
    
    // 테이블 섹션 데이터 저장 (별도 테이블에)
    for (const section of config.sections) {
      if (section.type === "table" && section.tableConfig?.saveConfig?.targetTable) {
        const sectionData = tableSectionData[section.id];
        if (sectionData && sectionData.length > 0) {
          // 메인 레코드 ID가 필요한 경우 (response.data에서 가져오기)
          const mainRecordId = response.data?.data?.id;
          
          // 공통 저장 필드 수집: 다른 섹션(필드 타입)에서 공통 저장으로 설정된 필드 값
          // 기본값: 필드 타입 섹션은 'common', 테이블 타입 섹션은 'individual'
          const commonFieldsData: Record<string, any> = {};
          const { sectionSaveModes } = config.saveConfig;
          
          // 다른 섹션에서 공통 저장으로 설정된 필드 값 수집
          for (const otherSection of config.sections) {
            if (otherSection.id === section.id) continue; // 현재 테이블 섹션은 건너뛰기
            
            const sectionMode = sectionSaveModes?.find((s) => s.sectionId === otherSection.id);
            // 기본값: 필드 타입 섹션은 'common', 테이블 타입 섹션은 'individual'
            const defaultMode = otherSection.type === "table" ? "individual" : "common";
            const sectionSaveMode = sectionMode?.saveMode || defaultMode;
            
            // 필드 타입 섹션의 필드들 처리
            if (otherSection.type !== "table" && otherSection.fields) {
              for (const field of otherSection.fields) {
                // 필드별 오버라이드 확인
                const fieldOverride = sectionMode?.fieldOverrides?.find((f) => f.fieldName === field.columnName);
                const fieldSaveMode = fieldOverride?.saveMode || sectionSaveMode;
                
                // 공통 저장이면 formData에서 값을 가져와 모든 품목에 적용
                if (fieldSaveMode === "common" && formData[field.columnName] !== undefined) {
                  commonFieldsData[field.columnName] = formData[field.columnName];
                }
              }
            }
            
            // 🆕 선택적 필드 그룹 (optionalFieldGroups)도 처리
            if (otherSection.optionalFieldGroups && otherSection.optionalFieldGroups.length > 0) {
              for (const optGroup of otherSection.optionalFieldGroups) {
                if (optGroup.fields) {
                  for (const field of optGroup.fields) {
                    // 선택적 필드 그룹은 기본적으로 common 저장
                    if (formData[field.columnName] !== undefined) {
                      commonFieldsData[field.columnName] = formData[field.columnName];
                    }
                  }
                }
              }
            }
          }
          
          console.log("[saveSingleRow] 별도 테이블 저장 - 공통 필드:", Object.keys(commonFieldsData));
          
          for (const item of sectionData) {
            // 공통 필드 병합 + 개별 품목 데이터
            const itemToSave = { ...commonFieldsData, ...item };
            
            // saveToTarget: false인 컬럼은 저장에서 제외
            const columns = section.tableConfig?.columns || [];
            for (const col of columns) {
              if (col.saveConfig?.saveToTarget === false && col.field in itemToSave) {
                delete itemToSave[col.field];
              }
            }
            
            // _sourceData 등 내부 메타데이터 제거
            Object.keys(itemToSave).forEach((key) => {
              if (key.startsWith("_")) {
                delete itemToSave[key];
              }
            });
            
            // 메인 레코드와 연결이 필요한 경우
            if (mainRecordId && config.saveConfig.primaryKeyColumn) {
              itemToSave[config.saveConfig.primaryKeyColumn] = mainRecordId;
            }
            
            const saveResponse = await apiClient.post(
              `/table-management/tables/${section.tableConfig.saveConfig.targetTable}/add`,
              itemToSave
            );
            
            if (!saveResponse.data?.success) {
              throw new Error(saveResponse.data?.message || `${section.title || "테이블 섹션"} 저장 실패`);
            }
          }
        }
      }
    }
  }, [config.sections, config.saveConfig.tableName, config.saveConfig.primaryKeyColumn, config.saveConfig.sectionSaveModes, formData]);

  // 다중 행 저장 (겸직 등)
  const saveMultipleRows = useCallback(async () => {
    const { multiRowSave } = config.saveConfig;
    if (!multiRowSave) return;

    let { commonFields = [], repeatSectionId = "" } = multiRowSave;
    const { typeColumn, mainTypeValue, subTypeValue, mainSectionFields = [] } = multiRowSave;

    // 공통 필드가 설정되지 않은 경우, 기본정보 섹션의 모든 필드를 공통 필드로 사용
    if (commonFields.length === 0) {
      const nonRepeatableSections = config.sections.filter((s) => !s.repeatable);
      commonFields = nonRepeatableSections.flatMap((s) => (s.fields || []).map((f) => f.columnName));
    }

    // 반복 섹션 ID가 설정되지 않은 경우, 첫 번째 반복 섹션 사용
    if (!repeatSectionId) {
      const repeatableSection = config.sections.find((s) => s.repeatable);
      if (repeatableSection) {
        repeatSectionId = repeatableSection.id;
      }
    }

    // 반복 섹션 데이터
    const repeatItems = repeatSections[repeatSectionId] || [];

    // 저장할 행들 생성
    const rowsToSave: any[] = [];

    // 공통 데이터 (모든 행에 적용)
    const commonData: any = {};
    commonFields.forEach((fieldName) => {
      if (formData[fieldName] !== undefined) {
        commonData[fieldName] = formData[fieldName];
      }
    });

    // 메인 섹션 필드 데이터 (메인 행에만 적용되는 부서/직급 등)
    const mainSectionData: any = {};
    mainSectionFields.forEach((fieldName) => {
      if (formData[fieldName] !== undefined) {
        mainSectionData[fieldName] = formData[fieldName];
      }
    });

    // 메인 행 (공통 데이터 + 메인 섹션 필드)
    const mainRow: any = { ...commonData, ...mainSectionData };
    if (typeColumn) {
      mainRow[typeColumn] = mainTypeValue || "main";
    }
    rowsToSave.push(mainRow);

    // 반복 섹션 행들 (공통 데이터 + 반복 섹션 필드)
    for (const item of repeatItems) {
      const subRow: any = { ...commonData };

      // 반복 섹션의 필드 값 추가
      const repeatSection = config.sections.find((s) => s.id === repeatSectionId);
      (repeatSection?.fields || []).forEach((field) => {
        if (item[field.columnName] !== undefined) {
          subRow[field.columnName] = item[field.columnName];
        }
      });

      if (typeColumn) {
        subRow[typeColumn] = subTypeValue || "concurrent";
      }

      rowsToSave.push(subRow);
    }

    // 저장 시점 채번규칙 처리 (메인 행만)
    for (const section of config.sections) {
      if (section.repeatable || section.type === "table") continue;

      for (const field of (section.fields || [])) {
        if (field.numberingRule?.enabled && field.numberingRule?.ruleId) {
          // generateOnSave 또는 generateOnOpen 모두 저장 시 실제 순번 할당
          const shouldAllocate = field.numberingRule.generateOnSave || field.numberingRule.generateOnOpen;
          if (shouldAllocate) {
            const response = await allocateNumberingCode(field.numberingRule.ruleId);
            if (response.success && response.data?.generatedCode) {
              // 모든 행에 동일한 채번 값 적용 (공통 필드인 경우)
              if (commonFields.includes(field.columnName)) {
                rowsToSave.forEach((row) => {
                  row[field.columnName] = response.data?.generatedCode;
                });
              } else {
                rowsToSave[0][field.columnName] = response.data?.generatedCode;
              }
            }
          }
        }
      }
    }

    // 모든 행 저장
    for (let i = 0; i < rowsToSave.length; i++) {
      const row = rowsToSave[i];

      // 빈 객체 체크
      if (Object.keys(row).length === 0) {
        continue;
      }

      const response = await apiClient.post(`/table-management/tables/${config.saveConfig.tableName}/add`, row);

      if (!response.data?.success) {
        throw new Error(response.data?.message || `${i + 1}번째 행 저장 실패`);
      }
    }
  }, [config.sections, config.saveConfig, formData, repeatSections]);

  // 다중 테이블 저장 (범용)
  const saveWithMultiTable = useCallback(async () => {
    const { customApiSave } = config.saveConfig;
    if (!customApiSave?.multiTable) return;

    const { multiTable } = customApiSave;

    // 1. 메인 테이블 데이터 구성
    const mainData: Record<string, any> = {};
    config.sections.forEach((section) => {
      if (section.repeatable || section.type === "table") return; // 반복 섹션 및 테이블 타입 제외
      (section.fields || []).forEach((field) => {
        const value = formData[field.columnName];
        if (value !== undefined && value !== null && value !== "") {
          mainData[field.columnName] = value;
        }
      });
    });
    
    // 1-0. receiveFromParent 필드 값도 mainData에 추가 (서브 테이블 저장용)
    // 이 필드들은 메인 테이블에는 저장되지 않지만, 서브 테이블 저장 시 필요할 수 있음
    config.sections.forEach((section) => {
      if (section.repeatable || section.type === "table") return;
      (section.fields || []).forEach((field) => {
        if (field.receiveFromParent && !mainData[field.columnName]) {
          const value = formData[field.columnName];
          if (value !== undefined && value !== null && value !== "") {
            mainData[field.columnName] = value;
          }
        }
      });
    });

    // 1-1. 채번규칙 처리 (저장 시점에 실제 순번 할당)
    for (const section of config.sections) {
      if (section.repeatable || section.type === "table") continue;

      for (const field of (section.fields || [])) {
        // 채번규칙이 활성화된 필드 처리
        if (field.numberingRule?.enabled && field.numberingRule?.ruleId) {
          // 신규 생성이거나 값이 없는 경우에만 채번
          const isNewRecord = !initialData?.[multiTable.mainTable.primaryKeyColumn];
          const hasNoValue = !mainData[field.columnName];

          if (isNewRecord || hasNoValue) {
            try {
              // allocateNumberingCode로 실제 순번 증가
              const response = await allocateNumberingCode(field.numberingRule.ruleId);
              if (response.success && response.data?.generatedCode) {
                mainData[field.columnName] = response.data.generatedCode;
              }
            } catch (error) {
              console.error(`채번규칙 할당 실패 (${field.columnName}):`, error);
            }
          }
        }
      }
    }

    // 2. 서브 테이블 데이터 구성
    const subTablesData: Array<{
      tableName: string;
      linkColumn: { mainField: string; subColumn: string };
      items: Record<string, any>[];
      options?: {
        saveMainAsFirst?: boolean;
        mainFieldMappings?: Array<{ formField: string; targetColumn: string }>;
        mainMarkerColumn?: string;
        mainMarkerValue?: any;
        subMarkerValue?: any;
        deleteExistingBefore?: boolean;
      };
    }> = [];

    for (const subTableConfig of multiTable.subTables || []) {
      // 서브 테이블이 활성화되어 있고 테이블명이 있어야 함
      // repeatSectionId는 선택사항 (saveMainAsFirst만 사용하는 경우 없을 수 있음)
      if (!subTableConfig.enabled || !subTableConfig.tableName) {
        continue;
      }

      const subItems: Record<string, any>[] = [];
      
      // 반복 섹션이 있는 경우에만 반복 데이터 처리
      if (subTableConfig.repeatSectionId) {
        const repeatData = repeatSections[subTableConfig.repeatSectionId] || [];

        // 반복 섹션 데이터를 필드 매핑에 따라 변환
        for (const item of repeatData) {
          const mappedItem: Record<string, any> = {};

          // 연결 컬럼 값 설정
          if (subTableConfig.linkColumn?.mainField && subTableConfig.linkColumn?.subColumn) {
            mappedItem[subTableConfig.linkColumn.subColumn] = mainData[subTableConfig.linkColumn.mainField];
          }

          // 필드 매핑에 따라 데이터 변환
          for (const mapping of subTableConfig.fieldMappings || []) {
            if (mapping.formField && mapping.targetColumn) {
              mappedItem[mapping.targetColumn] = item[mapping.formField];
            }
          }

          // 메인/서브 구분 컬럼 설정 (서브 데이터는 서브 마커 값)
          if (subTableConfig.options?.mainMarkerColumn) {
            mappedItem[subTableConfig.options.mainMarkerColumn] = subTableConfig.options?.subMarkerValue ?? false;
          }

          if (Object.keys(mappedItem).length > 0) {
            subItems.push(mappedItem);
          }
        }
      }

      // saveMainAsFirst가 활성화된 경우, 메인 데이터를 서브 테이블에 저장하기 위한 매핑 생성
      let mainFieldMappings: Array<{ formField: string; targetColumn: string }> | undefined;
      if (subTableConfig.options?.saveMainAsFirst) {
        mainFieldMappings = [];

        // fieldMappings에 정의된 targetColumn만 매핑 (서브 테이블에 존재하는 컬럼만)
        for (const mapping of subTableConfig.fieldMappings || []) {
          if (mapping.targetColumn) {
            // formData에서 동일한 컬럼명이 있으면 매핑 (receiveFromParent 필드 포함)
            const formValue = formData[mapping.targetColumn];
            if (formValue !== undefined && formValue !== null && formValue !== "") {
              mainFieldMappings.push({
                formField: mapping.targetColumn,
                targetColumn: mapping.targetColumn,
              });
            }
            // 또는 메인 섹션의 필드 중 같은 이름이 있으면 매핑
            else {
              config.sections.forEach((section) => {
                if (section.repeatable || section.type === "table") return;
                const matchingField = (section.fields || []).find((f) => f.columnName === mapping.targetColumn);
                if (matchingField) {
                  const fieldValue = formData[matchingField.columnName];
                  if (fieldValue !== undefined && fieldValue !== null && fieldValue !== "") {
                    mainFieldMappings!.push({
                      formField: matchingField.columnName,
                      targetColumn: mapping.targetColumn,
                    });
                  }
                }
              });
            }
          }
        }

        // 중복 제거
        mainFieldMappings = mainFieldMappings.filter(
          (m, idx, arr) => arr.findIndex((x) => x.targetColumn === m.targetColumn) === idx,
        );
      }

      // 서브 테이블 데이터 추가 (반복 데이터가 없어도 saveMainAsFirst가 있으면 추가)
      if (subItems.length > 0 || subTableConfig.options?.saveMainAsFirst) {
        subTablesData.push({
          tableName: subTableConfig.tableName,
          linkColumn: subTableConfig.linkColumn,
          items: subItems,
          options: {
            ...subTableConfig.options,
            mainFieldMappings, // 메인 데이터 매핑 추가
          },
        });
      }
    }

    // 3. 범용 다중 테이블 저장 API 호출
    const response = await apiClient.post("/table-management/multi-table-save", {
      mainTable: multiTable.mainTable,
      mainData,
      subTables: subTablesData,
      isUpdate: !!initialData?.[multiTable.mainTable.primaryKeyColumn],
    });

    if (!response.data?.success) {
      throw new Error(response.data?.message || "다중 테이블 저장 실패");
    }
  }, [config.sections, config.saveConfig, formData, repeatSections, initialData]);

  // 커스텀 API 저장
  const saveWithCustomApi = useCallback(async () => {
    const { customApiSave } = config.saveConfig;
    if (!customApiSave) return;

    const saveWithGenericCustomApi = async () => {
      if (!customApiSave.customEndpoint) {
        throw new Error("커스텀 API 엔드포인트가 설정되지 않았습니다.");
      }

      const dataToSave = { ...formData };

      // 메타데이터 필드 제거
      Object.keys(dataToSave).forEach((key) => {
        if (key.startsWith("_")) {
          delete dataToSave[key];
        }
      });

      // 반복 섹션 데이터 포함
      if (Object.keys(repeatSections).length > 0) {
        dataToSave._repeatSections = repeatSections;
      }

      const method = customApiSave.customMethod || "POST";
      const response =
        method === "PUT"
          ? await apiClient.put(customApiSave.customEndpoint, dataToSave)
          : await apiClient.post(customApiSave.customEndpoint, dataToSave);

      if (!response.data?.success) {
        throw new Error(response.data?.message || "저장 실패");
      }
    };

    switch (customApiSave.apiType) {
      case "multi-table":
        await saveWithMultiTable();
        break;
      case "custom":
        await saveWithGenericCustomApi();
        break;
      default:
        throw new Error(`지원하지 않는 API 타입: ${customApiSave.apiType}`);
    }
  }, [config.saveConfig, formData, repeatSections, saveWithMultiTable]);

  // 저장 처리
  const handleSave = useCallback(async () => {
    // 커스텀 API 저장 모드가 아닌 경우에만 테이블명 체크
    if (!config.saveConfig.customApiSave?.enabled && !config.saveConfig.tableName) {
      toast.error("저장할 테이블이 설정되지 않았습니다.");
      return;
    }

    // 필수 필드 검증
    const { valid, missingFields } = validateRequiredFields();
    if (!valid) {
      toast.error(`필수 항목을 입력해주세요: ${missingFields.join(", ")}`);
      return;
    }

    setSaving(true);

    try {
      const { multiRowSave, customApiSave } = config.saveConfig;

      // 커스텀 API 저장 모드
      if (customApiSave?.enabled) {
        await saveWithCustomApi();
      } else if (multiRowSave?.enabled) {
        // 다중 행 저장
        await saveMultipleRows();
      } else {
        // 단일 행 저장
        await saveSingleRow();
      }

      // 저장 후 동작
      if (config.saveConfig.afterSave?.showToast) {
        toast.success("저장되었습니다.");
      }

      if (config.saveConfig.afterSave?.refreshParent) {
        window.dispatchEvent(new CustomEvent("refreshParentData"));
      }

      // onSave 콜백은 저장 완료 알림용으로만 사용
      // 실제 저장은 이미 위에서 완료됨 (saveSingleRow 또는 saveMultipleRows)
      // EditModal 등 부모 컴포넌트의 저장 로직이 다시 실행되지 않도록
      // _saveCompleted 플래그를 포함하여 전달
      if (onSave) {
        onSave({ ...formData, _saveCompleted: true });
      }

      // 저장 완료 후 모달 닫기 이벤트 발생
      if (config.saveConfig.afterSave?.closeModal !== false) {
        window.dispatchEvent(new CustomEvent("closeEditModal"));
      }
    } catch (error: any) {
      console.error("저장 실패:", error);
      // axios 에러의 경우 서버 응답 메시지 추출
      const errorMessage =
        error.response?.data?.message ||
        error.response?.data?.error?.details ||
        error.message ||
        "저장에 실패했습니다.";
      toast.error(errorMessage);
    } finally {
      setSaving(false);
    }
  }, [
    config,
    formData,
    repeatSections,
    onSave,
    validateRequiredFields,
    saveSingleRow,
    saveMultipleRows,
    saveWithCustomApi,
  ]);

  // 폼 초기화
  const handleReset = useCallback(() => {
    initializeForm();
    toast.info("폼이 초기화되었습니다.");
  }, [initializeForm]);

  // 필드 요소 렌더링 (입력 컴포넌트만)
  // repeatContext: 반복 섹션인 경우 { sectionId, itemId }를 전달
  const renderFieldElement = (
    field: FormFieldConfig,
    value: any,
    onChangeHandler: (value: any) => void,
    fieldKey: string,
    isDisabled: boolean,
    repeatContext?: { sectionId: string; itemId: string },
  ) => {
    return (() => {
      switch (field.fieldType) {
        case "textarea":
          return (
            <Textarea
              id={fieldKey}
              value={value || ""}
              onChange={(e) => onChangeHandler(e.target.value)}
              placeholder={field.placeholder}
              disabled={isDisabled}
              readOnly={field.readOnly}
              className="min-h-[80px]"
            />
          );

        case "checkbox":
          return (
            <div className="flex items-center space-x-2 pt-2">
              <Checkbox
                id={fieldKey}
                checked={!!value}
                onCheckedChange={(checked) => onChangeHandler(checked)}
                disabled={isDisabled}
              />
              <Label htmlFor={fieldKey} className="text-sm font-normal">
                {field.placeholder || field.label}
              </Label>
            </div>
          );

        case "select": {
          // 🆕 연쇄 드롭다운 처리
          if (field.cascading?.enabled) {
            const cascadingConfig = field.cascading;
            const parentValue = formData[cascadingConfig.parentField];

            return (
              <CascadingSelectField
                fieldId={fieldKey}
                config={cascadingConfig as CascadingDropdownConfig}
                parentValue={parentValue}
                value={value}
                onChange={onChangeHandler}
                placeholder={field.placeholder || "선택하세요"}
                disabled={isDisabled}
              />
            );
          }

          // 다중 컬럼 저장이 활성화된 경우
          const lfgMappings = field.linkedFieldGroup?.mappings;
          if (
            field.linkedFieldGroup?.enabled &&
            field.linkedFieldGroup?.sourceTable &&
            lfgMappings &&
            lfgMappings.length > 0
          ) {
            const lfg = field.linkedFieldGroup;
            const sourceTableName = lfg.sourceTable as string;
            const cachedData = linkedFieldDataCache[sourceTableName];
            const sourceData = Array.isArray(cachedData) ? cachedData : [];

            // 첫 번째 매핑의 sourceColumn을 드롭다운 값으로 사용
            const valueColumn = lfgMappings[0].sourceColumn || "";

            // 데이터 로드 (아직 없으면)
            if (!cachedData && sourceTableName) {
              loadLinkedFieldData(sourceTableName);
            }

            // 표시 텍스트 생성 함수
            const getDisplayText = (row: Record<string, unknown>): string => {
              // 메인 표시 컬럼 (displayColumn)
              const mainDisplayVal = row[lfg.displayColumn || ""] || "";
              // 서브 표시 컬럼 (subDisplayColumn이 있으면 사용, 없으면 valueColumn 사용)
              const subDisplayVal = lfg.subDisplayColumn 
                ? (row[lfg.subDisplayColumn] || "")
                : (row[valueColumn] || "");
              
              switch (lfg.displayFormat) {
                case "code_name":
                  // 서브 - 메인 형식
                  return `${subDisplayVal} - ${mainDisplayVal}`;
                case "name_code":
                  // 메인 (서브) 형식
                  return `${mainDisplayVal} (${subDisplayVal})`;
                case "custom":
                  // 커스텀 형식: {컬럼명}을 실제 값으로 치환
                  if (lfg.customDisplayFormat) {
                    let result = lfg.customDisplayFormat;
                    // {컬럼명} 패턴을 찾아서 실제 값으로 치환
                    const matches = result.match(/\{([^}]+)\}/g);
                    if (matches) {
                      matches.forEach((match) => {
                        const columnName = match.slice(1, -1); // { } 제거
                        const columnValue = row[columnName];
                        result = result.replace(match, columnValue !== undefined && columnValue !== null ? String(columnValue) : "");
                      });
                    }
                    return result;
                  }
                  return String(mainDisplayVal);
                case "name_only":
                default:
                  return String(mainDisplayVal);
              }
            };

            return (
              <Select
                value={value || ""}
                onValueChange={(selectedValue) => {
                  // 선택된 값에 해당하는 행 찾기
                  const selectedRow = sourceData.find((row) => String(row[valueColumn]) === selectedValue);

                  // 기본 필드 값 변경 (첫 번째 매핑의 값)
                  onChangeHandler(selectedValue);

                  // 매핑된 컬럼들도 함께 저장
                  if (selectedRow && lfg.mappings) {
                    lfg.mappings.forEach((mapping) => {
                      if (mapping.sourceColumn && mapping.targetColumn) {
                        const mappedValue = selectedRow[mapping.sourceColumn];

                        // 반복 섹션인 경우 repeatSections에 저장, 아니면 formData에 저장
                        if (repeatContext) {
                          setRepeatSections((prev) => {
                            const items = prev[repeatContext.sectionId] || [];
                            const newItems = items.map((item) =>
                              item._id === repeatContext.itemId
                                ? { ...item, [mapping.targetColumn]: mappedValue }
                                : item,
                            );
                            return { ...prev, [repeatContext.sectionId]: newItems };
                          });
                        } else {
                          setFormData((prev) => ({
                            ...prev,
                            [mapping.targetColumn]: mappedValue,
                          }));
                        }
                      }
                    });
                  }
                }}
                disabled={isDisabled}
              >
                <SelectTrigger id={fieldKey} className="w-full" size="default">
                  <SelectValue placeholder={field.placeholder || "선택하세요"} />
                </SelectTrigger>
                <SelectContent>
                  {sourceData.length > 0 ? (
                    sourceData
                      .filter((row) => row[valueColumn] !== null && row[valueColumn] !== undefined && String(row[valueColumn]) !== "")
                      .map((row, index) => (
                        <SelectItem key={`${row[valueColumn]}_${index}`} value={String(row[valueColumn])}>
                          {getDisplayText(row)}
                        </SelectItem>
                      ))
                  ) : (
                    <SelectItem value="_empty" disabled>
                      {cachedData === undefined ? "데이터를 불러오는 중..." : "데이터가 없습니다"}
                    </SelectItem>
                  )}
                </SelectContent>
              </Select>
            );
          }

          // 일반 select 필드
          return (
            <SelectField
              fieldId={fieldKey}
              value={value}
              onChange={onChangeHandler}
              optionConfig={field.selectOptions}
              placeholder={field.placeholder || "선택하세요"}
              disabled={isDisabled}
              loadOptions={loadSelectOptions}
            />
          );
        }

        case "date":
          return (
            <Input
              id={fieldKey}
              type="date"
              value={value || ""}
              onChange={(e) => onChangeHandler(e.target.value)}
              disabled={isDisabled}
              readOnly={field.readOnly}
            />
          );

        case "datetime":
          return (
            <Input
              id={fieldKey}
              type="datetime-local"
              value={value || ""}
              onChange={(e) => onChangeHandler(e.target.value)}
              disabled={isDisabled}
              readOnly={field.readOnly}
            />
          );

        case "number":
          return (
            <Input
              id={fieldKey}
              type="number"
              value={value ?? ""}
              onChange={(e) => onChangeHandler(e.target.value ? Number(e.target.value) : "")}
              placeholder={field.placeholder}
              disabled={isDisabled}
              readOnly={field.readOnly}
            />
          );

        case "password":
          return (
            <Input
              id={fieldKey}
              type="password"
              value={value || ""}
              onChange={(e) => onChangeHandler(e.target.value)}
              placeholder={field.placeholder}
              disabled={isDisabled}
              readOnly={field.readOnly}
            />
          );

        case "email":
          return (
            <Input
              id={fieldKey}
              type="email"
              value={value || ""}
              onChange={(e) => onChangeHandler(e.target.value)}
              placeholder={field.placeholder}
              disabled={isDisabled}
              readOnly={field.readOnly}
            />
          );

        case "tel":
          return (
            <Input
              id={fieldKey}
              type="tel"
              value={value || ""}
              onChange={(e) => onChangeHandler(e.target.value)}
              placeholder={field.placeholder}
              disabled={isDisabled}
              readOnly={field.readOnly}
            />
          );

        default:
          return (
            <Input
              id={fieldKey}
              type="text"
              value={value || ""}
              onChange={(e) => onChangeHandler(e.target.value)}
              placeholder={field.placeholder}
              disabled={isDisabled}
              readOnly={field.readOnly}
            />
          );
      }
    })();
  };

  // 섹션의 열 수에 따른 기본 gridSpan 계산
  const getDefaultGridSpan = (sectionColumns: number = 2): number => {
    // 12칸 그리드 기준: 1열=12, 2열=6, 3열=4, 4열=3
    return Math.floor(12 / sectionColumns);
  };

  // 필드 렌더링 (섹션 열 수 적용)
  // repeatContext: 반복 섹션인 경우 { sectionId, itemId }를 전달
  const renderFieldWithColumns = (
    field: FormFieldConfig,
    value: any,
    onChangeHandler: (value: any) => void,
    fieldKey: string,
    sectionColumns: number = 2,
    repeatContext?: { sectionId: string; itemId: string },
  ) => {
    // 섹션 열 수에 따른 기본 gridSpan 계산 (섹션 열 수가 우선)
    const defaultSpan = getDefaultGridSpan(sectionColumns);
    // 섹션이 1열이면 무조건 12(전체 너비), 그 외에는 필드 설정 또는 기본값 사용
    const actualGridSpan = sectionColumns === 1 ? 12 : field.gridSpan || defaultSpan;

    const isDisabled = !!(field.disabled || (field.numberingRule?.enabled && !field.numberingRule?.editable));
    const isHidden = field.hidden || field.numberingRule?.hidden;

    if (isHidden) {
      return null;
    }

    const fieldElement = renderFieldElement(field, value, onChangeHandler, fieldKey, isDisabled, repeatContext);

    if (field.fieldType === "checkbox") {
      return (
        <div key={fieldKey} className="space-y-1" style={{ gridColumn: `span ${actualGridSpan}` }}>
          {fieldElement}
        </div>
      );
    }

    return (
      <div key={fieldKey} className="space-y-1" style={{ gridColumn: `span ${actualGridSpan}` }}>
        <Label htmlFor={fieldKey} className="text-sm font-medium">
          {field.label}
          {field.required && <span className="text-destructive ml-1">*</span>}
          {field.numberingRule?.enabled && <span className="text-muted-foreground ml-1 text-xs">(자동생성)</span>}
        </Label>
        {fieldElement}
      </div>
    );
  };

  // 섹션 렌더링
  const renderSection = (section: FormSectionConfig) => {
    const isCollapsed = collapsedSections.has(section.id);
    const sectionColumns = section.columns || 2;

    // 반복 섹션
    if (section.repeatable) {
      return renderRepeatableSection(section, isCollapsed);
    }

    // 테이블 타입 섹션
    if (section.type === "table" && section.tableConfig) {
      return (
        <Card key={section.id} className="mb-4">
          <CardHeader className="pb-3">
            <CardTitle className="text-base">{section.title}</CardTitle>
            {section.description && <CardDescription className="text-xs">{section.description}</CardDescription>}
          </CardHeader>
          <CardContent>
            <TableSectionRenderer
              sectionId={section.id}
              tableConfig={section.tableConfig}
              formData={formData}
              onFormDataChange={handleFieldChange}
              onTableDataChange={(data) => {
                // 테이블 섹션 데이터를 formData에 저장
                handleFieldChange(`_tableSection_${section.id}`, data);
              }}
            />
          </CardContent>
        </Card>
      );
    }

    // 기본 필드 타입 섹션
    return (
      <Card key={section.id} className="mb-4">
        {section.collapsible ? (
          <Collapsible open={!isCollapsed} onOpenChange={() => toggleSectionCollapse(section.id)}>
            <CollapsibleTrigger asChild>
              <CardHeader className="hover:bg-muted/50 cursor-pointer transition-colors">
                <div className="flex items-center justify-between">
                  <div>
                    <CardTitle className="text-base">{section.title}</CardTitle>
                    {section.description && (
                      <CardDescription className="mt-1 text-xs">{section.description}</CardDescription>
                    )}
                  </div>
                  {isCollapsed ? <ChevronDown className="h-4 w-4" /> : <ChevronUp className="h-4 w-4" />}
                </div>
              </CardHeader>
            </CollapsibleTrigger>
            <CollapsibleContent>
              <CardContent>
                <div className="grid gap-4" style={{ gridTemplateColumns: `repeat(12, 1fr)` }}>
                  {/* 일반 필드 렌더링 */}
                  {(section.fields || []).map((field) =>
                    renderFieldWithColumns(
                      field,
                      formData[field.columnName],
                      (value) => handleFieldChange(field.columnName, value),
                      `${section.id}-${field.id}`,
                      sectionColumns,
                    ),
                  )}
                </div>
              </CardContent>
            </CollapsibleContent>
          </Collapsible>
        ) : (
          <>
            <CardHeader className="pb-3">
              <CardTitle className="text-base">{section.title}</CardTitle>
              {section.description && <CardDescription className="text-xs">{section.description}</CardDescription>}
            </CardHeader>
            <CardContent>
              <div className="grid gap-4" style={{ gridTemplateColumns: `repeat(12, 1fr)` }}>
                {/* 일반 필드 렌더링 */}
                {(section.fields || []).map((field) =>
                  renderFieldWithColumns(
                    field,
                    formData[field.columnName],
                    (value) => handleFieldChange(field.columnName, value),
                    `${section.id}-${field.id}`,
                    sectionColumns,
                  ),
                )}
              </div>
              
              {/* 옵셔널 필드 그룹 렌더링 */}
              {section.optionalFieldGroups && section.optionalFieldGroups.length > 0 && (
                <div className="mt-4 space-y-3">
                  {section.optionalFieldGroups.map((group) => 
                    renderOptionalFieldGroup(section, group, sectionColumns)
                  )}
                </div>
              )}
            </CardContent>
          </>
        )}
      </Card>
    );
  };

  // 옵셔널 필드 그룹 접힘 상태 관리
  const [collapsedOptionalGroups, setCollapsedOptionalGroups] = useState<Set<string>>(() => {
    // 초기 접힘 상태 설정
    const initialCollapsed = new Set<string>();
    config.sections.forEach((section) => {
      section.optionalFieldGroups?.forEach((group) => {
        if (group.defaultCollapsed) {
          initialCollapsed.add(`${section.id}-${group.id}`);
        }
      });
    });
    return initialCollapsed;
  });

  // 옵셔널 필드 그룹 렌더링
  const renderOptionalFieldGroup = (
    section: FormSectionConfig,
    group: OptionalFieldGroupConfig,
    sectionColumns: number
  ) => {
    const key = `${section.id}-${group.id}`;
    const isActivated = activatedOptionalFieldGroups.has(key);
    const isCollapsed = collapsedOptionalGroups.has(key);
    const groupColumns = group.columns || sectionColumns;
    const addButtonText = group.addButtonText || `+ ${group.title} 추가`;
    const removeButtonText = group.removeButtonText || "제거";

    // 비활성화 상태: 추가 버튼만 표시
    if (!isActivated) {
      return (
        <div
          key={group.id}
          className="hover:border-primary/50 hover:bg-muted/30 border-muted rounded-lg border-2 border-dashed p-3 transition-colors"
        >
          <div className="flex items-center justify-between">
            <div>
              <p className="text-muted-foreground text-sm font-medium">{group.title}</p>
              {group.description && (
                <p className="text-muted-foreground/70 mt-0.5 text-xs">{group.description}</p>
              )}
            </div>
            <Button
              variant="outline"
              size="sm"
              onClick={() => activateOptionalFieldGroup(section.id, group.id)}
              className="h-8 shrink-0 text-xs"
            >
              <Plus className="mr-1 h-3.5 w-3.5" />
              {addButtonText}
            </Button>
          </div>
        </div>
      );
    }

    // 활성화 상태: 필드 그룹 표시
    // collapsible 설정에 따라 접기/펼치기 지원
    if (group.collapsible) {
      return (
        <Collapsible
          key={group.id}
          open={!isCollapsed}
          onOpenChange={(open) => {
            setCollapsedOptionalGroups((prev) => {
              const newSet = new Set(prev);
              if (open) {
                newSet.delete(key);
              } else {
                newSet.add(key);
              }
              return newSet;
            });
          }}
          className="border-primary/30 bg-muted/10 rounded-lg border"
        >
          <div className="flex items-center justify-between p-3">
            <CollapsibleTrigger asChild>
              <button className="flex items-center gap-2 text-left hover:opacity-80">
                {isCollapsed ? (
                  <ChevronRight className="h-4 w-4" />
                ) : (
                  <ChevronDown className="h-4 w-4" />
                )}
                <div>
                  <p className="text-sm font-medium">{group.title}</p>
                  {group.description && (
                    <p className="text-muted-foreground mt-0.5 text-xs">{group.description}</p>
                  )}
                </div>
              </button>
            </CollapsibleTrigger>
            <Button
              variant="ghost"
              size="sm"
              onClick={() => {
                if (group.confirmRemove) {
                  if (confirm(`${group.title}을(를) 제거하시겠습니까?\n입력한 내용이 초기화됩니다.`)) {
                    deactivateOptionalFieldGroup(section.id, group.id);
                  }
                } else {
                  deactivateOptionalFieldGroup(section.id, group.id);
                }
              }}
              className="text-muted-foreground hover:text-destructive h-7 shrink-0 text-xs"
            >
              <Trash2 className="mr-1 h-3 w-3" />
              {removeButtonText}
            </Button>
          </div>
          <CollapsibleContent>
            <div className="grid gap-3 px-3 pb-3" style={{ gridTemplateColumns: "repeat(12, 1fr)" }}>
              {(group.fields || []).map((field) =>
                renderFieldWithColumns(
                  field,
                  formData[field.columnName],
                  (value) => handleFieldChange(field.columnName, value),
                  `${section.id}-${group.id}-${field.id}`,
                  groupColumns
                )
              )}
            </div>
          </CollapsibleContent>
        </Collapsible>
      );
    }

    // 접기 비활성화: 일반 표시
    return (
      <div key={group.id} className="border-primary/30 bg-muted/10 rounded-lg border p-3">
        <div className="mb-3 flex items-center justify-between">
          <div>
            <p className="text-sm font-medium">{group.title}</p>
            {group.description && (
              <p className="text-muted-foreground mt-0.5 text-xs">{group.description}</p>
            )}
          </div>
          <Button
            variant="ghost"
            size="sm"
            onClick={() => {
              if (group.confirmRemove) {
                if (confirm(`${group.title}을(를) 제거하시겠습니까?\n입력한 내용이 초기화됩니다.`)) {
                  deactivateOptionalFieldGroup(section.id, group.id);
                }
              } else {
                deactivateOptionalFieldGroup(section.id, group.id);
              }
            }}
            className="text-muted-foreground hover:text-destructive h-7 shrink-0 text-xs"
          >
            <Trash2 className="mr-1 h-3 w-3" />
            {removeButtonText}
          </Button>
        </div>
        <div className="grid gap-3" style={{ gridTemplateColumns: "repeat(12, 1fr)" }}>
          {(group.fields || []).map((field) =>
            renderFieldWithColumns(
              field,
              formData[field.columnName],
              (value) => handleFieldChange(field.columnName, value),
              `${section.id}-${group.id}-${field.id}`,
              groupColumns
            )
          )}
        </div>
      </div>
    );
  };

  // 반복 섹션 렌더링
  const renderRepeatableSection = (section: FormSectionConfig, isCollapsed: boolean) => {
    const items = repeatSections[section.id] || [];
    const maxItems = section.repeatConfig?.maxItems || 10;
    const canAdd = items.length < maxItems;
    const sectionColumns = section.columns || 2;

    const content = (
      <>
        {items.length === 0 ? (
          <div className="text-muted-foreground py-8 text-center">
            <p className="text-sm">등록된 항목이 없습니다.</p>
            <Button variant="outline" size="sm" className="mt-2" onClick={() => handleAddRepeatItem(section.id)}>
              <Plus className="mr-1 h-4 w-4" />
              {section.repeatConfig?.addButtonText || "+ 추가"}
            </Button>
          </div>
        ) : (
          <div className="space-y-4">
            {items.map((item, index) => (
              <div key={item._id} className="bg-muted/30 relative rounded-lg border p-4">
                <div className="mb-3 flex items-center justify-between">
                  <span className="text-muted-foreground text-sm font-medium">
                    {(section.repeatConfig?.itemTitle || "항목 {index}").replace("{index}", String(index + 1))}
                  </span>
                  <Button
                    variant="ghost"
                    size="sm"
                    className="text-destructive hover:text-destructive h-8 w-8 p-0"
                    onClick={() => {
                      if (section.repeatConfig?.confirmRemove) {
                        setDeleteDialog({ open: true, sectionId: section.id, itemId: item._id });
                      } else {
                        handleRemoveRepeatItem(section.id, item._id);
                      }
                    }}
                  >
                    <Trash2 className="h-4 w-4" />
                  </Button>
                </div>
                <div className="grid gap-4" style={{ gridTemplateColumns: `repeat(12, 1fr)` }}>
                  {/* 일반 필드 렌더링 */}
                  {(section.fields || []).map((field) =>
                    renderFieldWithColumns(
                      field,
                      item[field.columnName],
                      (value) => handleRepeatFieldChange(section.id, item._id, field.columnName, value),
                      `${section.id}-${item._id}-${field.id}`,
                      sectionColumns,
                      { sectionId: section.id, itemId: item._id }, // 반복 섹션 컨텍스트 전달
                    ),
                  )}
                </div>
              </div>
            ))}

            {canAdd && (
              <Button variant="outline" size="sm" className="w-full" onClick={() => handleAddRepeatItem(section.id)}>
                <Plus className="mr-1 h-4 w-4" />
                {section.repeatConfig?.addButtonText || "+ 추가"}
              </Button>
            )}
          </div>
        )}
      </>
    );

    return (
      <Card key={section.id} className="mb-4">
        {section.collapsible ? (
          <Collapsible open={!isCollapsed} onOpenChange={() => toggleSectionCollapse(section.id)}>
            <CollapsibleTrigger asChild>
              <CardHeader className="hover:bg-muted/50 cursor-pointer transition-colors">
                <div className="flex items-center justify-between">
                  <div>
                    <CardTitle className="text-base">
                      {section.title}
                      <span className="text-muted-foreground ml-2 text-sm font-normal">({items.length}개)</span>
                    </CardTitle>
                    {section.description && (
                      <CardDescription className="mt-1 text-xs">{section.description}</CardDescription>
                    )}
                  </div>
                  {isCollapsed ? <ChevronDown className="h-4 w-4" /> : <ChevronUp className="h-4 w-4" />}
                </div>
              </CardHeader>
            </CollapsibleTrigger>
            <CollapsibleContent>
              <CardContent>{content}</CardContent>
            </CollapsibleContent>
          </Collapsible>
        ) : (
          <>
            <CardHeader className="pb-3">
              <CardTitle className="text-base">
                {section.title}
                <span className="text-muted-foreground ml-2 text-sm font-normal">({items.length}개)</span>
              </CardTitle>
              {section.description && <CardDescription className="text-xs">{section.description}</CardDescription>}
            </CardHeader>
            <CardContent>{content}</CardContent>
          </>
        )}
      </Card>
    );
  };

  // 디자인 모드 렌더링
  if (isDesignMode) {
    return (
      <div
        className={cn(
          "min-h-[200px] rounded-lg border-2 border-dashed p-4",
          isSelected ? "border-primary bg-primary/5" : "border-muted",
          className,
        )}
        style={style}
      >
        <div className="text-muted-foreground text-center">
          <p className="font-medium">{config.modal.title || "범용 폼 모달"}</p>
          <p className="mt-1 text-xs">
            {config.sections.length}개 섹션 |{config.sections.reduce((acc, s) => acc + (s.fields?.length || 0), 0)}개 필드
          </p>
          <p className="mt-1 text-xs">저장 테이블: {config.saveConfig.tableName || "(미설정)"}</p>
        </div>
      </div>
    );
  }

  return (
    <div className={cn("w-full", className)} style={style}>
      {/* 섹션들 */}
      <div className="space-y-4">{config.sections.map((section) => renderSection(section))}</div>

      {/* 버튼 영역 - 저장 버튼이 표시될 때만 렌더링 */}
      {config.modal.showSaveButton !== false && (
        <div className="mt-6 flex justify-end gap-2 border-t pt-4">
          {config.modal.showResetButton && (
            <Button
              type="button"
              variant="outline"
              onClick={(e) => {
                e.preventDefault();
                e.stopPropagation();
                handleReset();
              }}
              disabled={saving}
            >
              <RefreshCw className="mr-1 h-4 w-4" />
              {config.modal.resetButtonText || "초기화"}
            </Button>
          )}
          <Button
            type="button"
            onClick={(e) => {
              e.preventDefault();
              e.stopPropagation();
              handleSave();
            }}
            disabled={saving || !config.saveConfig.tableName}
          >
            {saving ? "저장 중..." : config.modal.saveButtonText || "저장"}
          </Button>
        </div>
      )}

      {/* 삭제 확인 다이얼로그 */}
      <AlertDialog
        open={deleteDialog.open}
        onOpenChange={(open) => !open && setDeleteDialog({ open: false, sectionId: "", itemId: "" })}
      >
        <AlertDialogContent>
          <AlertDialogHeader>
            <AlertDialogTitle>항목 삭제</AlertDialogTitle>
            <AlertDialogDescription>이 항목을 삭제하시겠습니까? 이 작업은 되돌릴 수 없습니다.</AlertDialogDescription>
          </AlertDialogHeader>
          <AlertDialogFooter>
            <AlertDialogCancel>취소</AlertDialogCancel>
            <AlertDialogAction
              onClick={() => handleRemoveRepeatItem(deleteDialog.sectionId, deleteDialog.itemId)}
              className="bg-destructive text-destructive-foreground hover:bg-destructive/90"
            >
              삭제
            </AlertDialogAction>
          </AlertDialogFooter>
        </AlertDialogContent>
      </AlertDialog>
    </div>
  );
}

// Select 필드 컴포넌트 (옵션 로딩 포함)
interface SelectFieldProps {
  fieldId: string;
  value: any;
  onChange: (value: any) => void;
  optionConfig?: SelectOptionConfig;
  placeholder?: string;
  disabled?: boolean;
  loadOptions: (fieldId: string, config: SelectOptionConfig) => Promise<{ value: string; label: string }[]>;
}

function SelectField({ fieldId, value, onChange, optionConfig, placeholder, disabled, loadOptions }: SelectFieldProps) {
  const [options, setOptions] = useState<{ value: string; label: string }[]>([]);
  const [loading, setLoading] = useState(false);

  useEffect(() => {
    if (optionConfig) {
      setLoading(true);
      loadOptions(fieldId, optionConfig)
        .then(setOptions)
        .finally(() => setLoading(false));
    }
  }, [fieldId, optionConfig, loadOptions]);

  return (
    <Select value={value || ""} onValueChange={onChange} disabled={disabled || loading}>
      <SelectTrigger size="default">
        <SelectValue placeholder={loading ? "로딩 중..." : placeholder} />
      </SelectTrigger>
      <SelectContent>
        {options
          .filter((option) => option.value && option.value !== "")
          .map((option) => (
            <SelectItem key={option.value} value={option.value}>
              {option.label}
            </SelectItem>
          ))}
      </SelectContent>
    </Select>
  );
}

export default UniversalFormModalComponent;