"use client";

import React, { useState, useEffect } from "react";
import { Label } from "@/components/ui/label";
import { Input } from "@/components/ui/input";
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
import { Command, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList } from "@/components/ui/command";
import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover";
import { Button } from "@/components/ui/button";
import { Switch } from "@/components/ui/switch";
import { Plus, X, Check, ChevronsUpDown } from "lucide-react";
import { ModalRepeaterTableProps, RepeaterColumnConfig, ColumnMapping, CalculationRule, DynamicDataSourceConfig, DynamicDataSourceOption, MultiTableJoinStep, ModalFilterConfig } from "./types";
import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogDescription, DialogFooter } from "@/components/ui/dialog";
import { tableManagementApi } from "@/lib/api/tableManagement";
import { cn } from "@/lib/utils";

interface ModalRepeaterTableConfigPanelProps {
  config: Partial<ModalRepeaterTableProps>;
  onChange: (config: Partial<ModalRepeaterTableProps>) => void;
  onConfigChange?: (config: Partial<ModalRepeaterTableProps>) => void; // 하위 호환성
}

// 소스 컬럼 선택기 (동적 테이블별 컬럼 로드)
function SourceColumnSelector({
  sourceTable,
  value,
  onChange,
}: {
  sourceTable: string;
  value: string;
  onChange: (value: string) => void;
}) {
  const [columns, setColumns] = useState<{ columnName: string; displayName?: string }[]>([]);
  const [isLoading, setIsLoading] = useState(false);

  useEffect(() => {
    const loadColumns = async () => {
      if (!sourceTable) {
        setColumns([]);
        return;
      }

      setIsLoading(true);
      try {
        const response = await tableManagementApi.getColumnList(sourceTable);
        if (response.success && response.data) {
          setColumns(response.data.columns);
        }
      } catch (error) {
        console.error("컬럼 로드 실패:", error);
        setColumns([]);
      } finally {
        setIsLoading(false);
      }
    };
    loadColumns();
  }, [sourceTable]);

  return (
    <Select value={value} onValueChange={onChange} disabled={!sourceTable || isLoading}>
      <SelectTrigger className="h-10 text-sm w-full">
        <SelectValue placeholder={isLoading ? "로딩 중..." : "컬럼 선택"} />
      </SelectTrigger>
      <SelectContent>
        {columns.map((col) => (
          <SelectItem key={col.columnName} value={col.columnName}>
            {col.displayName || col.columnName}
          </SelectItem>
        ))}
      </SelectContent>
    </Select>
  );
}

// 참조 컬럼 선택기 (동적 테이블별 컬럼 로드)
function ReferenceColumnSelector({
  referenceTable,
  value,
  onChange,
}: {
  referenceTable: string;
  value: string;
  onChange: (value: string) => void;
}) {
  const [columns, setColumns] = useState<{ columnName: string; displayName?: string }[]>([]);
  const [isLoading, setIsLoading] = useState(false);

  useEffect(() => {
    const loadColumns = async () => {
      if (!referenceTable) {
        setColumns([]);
        return;
      }

      setIsLoading(true);
      try {
        const response = await tableManagementApi.getColumnList(referenceTable);
        if (response.success && response.data) {
          setColumns(response.data.columns);
        }
      } catch (error) {
        console.error("참조 컬럼 로드 실패:", error);
        setColumns([]);
      } finally {
        setIsLoading(false);
      }
    };
    loadColumns();
  }, [referenceTable]);

  return (
    <Select value={value} onValueChange={onChange} disabled={!referenceTable || isLoading}>
      <SelectTrigger className="h-10 text-sm w-full">
        <SelectValue placeholder={isLoading ? "로딩 중..." : "컬럼 선택"} />
      </SelectTrigger>
      <SelectContent>
        {columns.map((col) => (
          <SelectItem key={col.columnName} value={col.columnName}>
            {col.displayName || col.columnName}
          </SelectItem>
        ))}
      </SelectContent>
    </Select>
  );
}

export function ModalRepeaterTableConfigPanel({
  config,
  onChange,
  onConfigChange,
}: ModalRepeaterTableConfigPanelProps) {
  // 하위 호환성: onConfigChange가 있으면 사용, 없으면 onChange 사용
  const handleConfigChange = onConfigChange || onChange;
  // 초기 설정 정리: 계산 규칙과 컬럼 설정 동기화
  const cleanupInitialConfig = (initialConfig: Partial<ModalRepeaterTableProps>): Partial<ModalRepeaterTableProps> => {
    // 계산 규칙이 없으면 모든 컬럼의 calculated 속성 제거
    if (!initialConfig.calculationRules || initialConfig.calculationRules.length === 0) {
      const cleanedColumns = (initialConfig.columns || []).map((col) => {
        // eslint-disable-next-line @typescript-eslint/no-unused-vars
        const { calculated, ...rest } = col;
        return { ...rest, editable: true };
      });
      return { ...initialConfig, columns: cleanedColumns };
    }

    // 계산 규칙이 있으면 결과 필드만 calculated=true
    const resultFields = new Set(initialConfig.calculationRules.map((rule) => rule.result));
    const cleanedColumns = (initialConfig.columns || []).map((col) => {
      if (resultFields.has(col.field)) {
        // 계산 결과 필드는 calculated=true, editable=false
        return { ...col, calculated: true, editable: false };
      } else {
        // 나머지 필드는 calculated 제거, editable=true
        // eslint-disable-next-line @typescript-eslint/no-unused-vars
        const { calculated, ...rest } = col;
        return { ...rest, editable: true };
      }
    });

    return { ...initialConfig, columns: cleanedColumns };
  };

  const [localConfig, setLocalConfig] = useState(cleanupInitialConfig(config));
  const [allTables, setAllTables] = useState<{ tableName: string; displayName?: string }[]>([]);
  const [tableColumns, setTableColumns] = useState<{ columnName: string; displayName?: string }[]>([]);
  const [targetTableColumns, setTargetTableColumns] = useState<{ columnName: string; displayName?: string }[]>([]);
  const [isLoadingTables, setIsLoadingTables] = useState(false);
  const [isLoadingColumns, setIsLoadingColumns] = useState(false);
  const [isLoadingTargetColumns, setIsLoadingTargetColumns] = useState(false);
  const [openTableCombo, setOpenTableCombo] = useState(false);
  const [openTargetTableCombo, setOpenTargetTableCombo] = useState(false);
  const [openUniqueFieldCombo, setOpenUniqueFieldCombo] = useState(false);
  
  // 동적 데이터 소스 설정 모달
  const [dynamicSourceModalOpen, setDynamicSourceModalOpen] = useState(false);
  const [editingDynamicSourceColumnIndex, setEditingDynamicSourceColumnIndex] = useState<number | null>(null);

  // config 변경 시 localConfig 동기화 (cleanupInitialConfig 적용)
  useEffect(() => {
    const cleanedConfig = cleanupInitialConfig(config);
    setLocalConfig(cleanedConfig);
  }, [config]);

  // 전체 테이블 목록 로드
  useEffect(() => {
    const loadTables = async () => {
      setIsLoadingTables(true);
      try {
        const response = await tableManagementApi.getTableList();
        if (response.success && response.data) {
          setAllTables(response.data);
        }
      } catch (error) {
        console.error("테이블 목록 로드 실패:", error);
      } finally {
        setIsLoadingTables(false);
      }
    };
    loadTables();
  }, []);

  // 소스 테이블의 컬럼 목록 로드
  useEffect(() => {
    const loadColumns = async () => {
      if (!localConfig.sourceTable) {
        setTableColumns([]);
        return;
      }

      setIsLoadingColumns(true);
      try {
        const response = await tableManagementApi.getColumnList(localConfig.sourceTable);
        if (response.success && response.data) {
          setTableColumns(response.data.columns);
        }
      } catch (error) {
        console.error("컬럼 목록 로드 실패:", error);
        setTableColumns([]);
      } finally {
        setIsLoadingColumns(false);
      }
    };
    loadColumns();
  }, [localConfig.sourceTable]);

  // 저장 테이블의 컬럼 목록 로드
  useEffect(() => {
    const loadTargetColumns = async () => {
      if (!localConfig.targetTable) {
        setTargetTableColumns([]);
        return;
      }

      setIsLoadingTargetColumns(true);
      try {
        const response = await tableManagementApi.getColumnList(localConfig.targetTable);
        if (response.success && response.data) {
          setTargetTableColumns(response.data.columns);
        }
      } catch (error) {
        console.error("저장 테이블 컬럼 로드 실패:", error);
        setTargetTableColumns([]);
      } finally {
        setIsLoadingTargetColumns(false);
      }
    };
    loadTargetColumns();
  }, [localConfig.targetTable]);

  const updateConfig = (updates: Partial<ModalRepeaterTableProps>) => {
    const newConfig = { ...localConfig, ...updates };
    setLocalConfig(newConfig);
    handleConfigChange(newConfig);
  };

  const addSourceColumn = () => {
    const columns = localConfig.sourceColumns || [];
    updateConfig({ sourceColumns: [...columns, ""] });
  };

  const updateSourceColumn = (index: number, value: string) => {
    const columns = [...(localConfig.sourceColumns || [])];
    columns[index] = value;
    updateConfig({ sourceColumns: columns });
  };

  const removeSourceColumn = (index: number) => {
    const columns = [...(localConfig.sourceColumns || [])];
    columns.splice(index, 1);
    updateConfig({ sourceColumns: columns });
  };

  const addSearchField = () => {
    const fields = localConfig.sourceSearchFields || [];
    updateConfig({ sourceSearchFields: [...fields, ""] });
  };

  const updateSearchField = (index: number, value: string) => {
    const fields = [...(localConfig.sourceSearchFields || [])];
    fields[index] = value;
    updateConfig({ sourceSearchFields: fields });
  };

  const removeSearchField = (index: number) => {
    const fields = [...(localConfig.sourceSearchFields || [])];
    fields.splice(index, 1);
    updateConfig({ sourceSearchFields: fields });
  };

  // 🆕 저장 테이블 컬럼에서 반복 테이블 컬럼 추가
  const addRepeaterColumnFromTarget = (columnName: string) => {
    const columns = localConfig.columns || [];
    
    // 이미 존재하는 컬럼인지 확인
    if (columns.some((col) => col.field === columnName)) {
      alert("이미 추가된 컬럼입니다.");
      return;
    }

    const targetCol = targetTableColumns.find((c) => c.columnName === columnName);
    
    const newColumn: RepeaterColumnConfig = {
      field: columnName,
      label: targetCol?.displayName || columnName,
      type: "text",
      width: "150px",
      editable: true,
      mapping: {
        type: "manual",
        referenceTable: localConfig.targetTable,
        referenceField: columnName,
      },
    };

    updateConfig({ columns: [...columns, newColumn] });
  };

  // 🆕 반복 테이블 컬럼 삭제
  const removeRepeaterColumn = (index: number) => {
    const columns = [...(localConfig.columns || [])];
    columns.splice(index, 1);
    updateConfig({ columns });
  };

  // 🆕 반복 테이블 컬럼 개별 수정
  const updateRepeaterColumn = (index: number, updates: Partial<RepeaterColumnConfig>) => {
    const columns = [...(localConfig.columns || [])];
    columns[index] = { ...columns[index], ...updates };
    updateConfig({ columns });
  };

  // 🆕 계산 규칙 관리
  const addCalculationRule = () => {
    const rules = localConfig.calculationRules || [];
    const newRule: CalculationRule = {
      result: "",
      formula: "",
      dependencies: [],
    };
    updateConfig({ calculationRules: [...rules, newRule] });
  };

  const updateCalculationRule = (index: number, updates: Partial<CalculationRule>) => {
    const rules = [...(localConfig.calculationRules || [])];
    const oldRule = rules[index];
    const newRule = { ...oldRule, ...updates };
    
    // 결과 필드가 변경된 경우
    if (updates.result !== undefined && oldRule.result !== updates.result) {
      const columns = [...(localConfig.columns || [])];
      
      // 이전 결과 필드의 calculated 속성 제거
      if (oldRule.result) {
        const oldResultIndex = columns.findIndex((c) => c.field === oldRule.result);
        if (oldResultIndex !== -1) {
          // eslint-disable-next-line @typescript-eslint/no-unused-vars
          const { calculated, ...rest } = columns[oldResultIndex];
          columns[oldResultIndex] = { ...rest, editable: true };
        }
      }
      
      // 새 결과 필드를 calculated=true, editable=false로 설정
      if (updates.result) {
        const newResultIndex = columns.findIndex((c) => c.field === updates.result);
        if (newResultIndex !== -1) {
          columns[newResultIndex] = {
            ...columns[newResultIndex],
            calculated: true,
            editable: false,
          };
        }
      }
      
      rules[index] = newRule;
      updateConfig({ calculationRules: rules, columns });
      return;
    }
    
    rules[index] = newRule;
    updateConfig({ calculationRules: rules });
  };

  const removeCalculationRule = (index: number) => {
    const rules = [...(localConfig.calculationRules || [])];
    const removedRule = rules[index];
    
    // 결과 필드의 calculated 속성 제거
    if (removedRule.result) {
      const columns = [...(localConfig.columns || [])];
      const resultIndex = columns.findIndex((c) => c.field === removedRule.result);
      if (resultIndex !== -1) {
        // eslint-disable-next-line @typescript-eslint/no-unused-vars
        const { calculated, ...rest } = columns[resultIndex];
        columns[resultIndex] = { ...rest, editable: true };
      }
      rules.splice(index, 1);
      updateConfig({ calculationRules: rules, columns });
      return;
    }
    
    rules.splice(index, 1);
    updateConfig({ calculationRules: rules });
  };

  // 동적 데이터 소스 설정 함수들
  const openDynamicSourceModal = (columnIndex: number) => {
    setEditingDynamicSourceColumnIndex(columnIndex);
    setDynamicSourceModalOpen(true);
  };

  const toggleDynamicDataSource = (columnIndex: number, enabled: boolean) => {
    const columns = [...(localConfig.columns || [])];
    if (enabled) {
      columns[columnIndex] = {
        ...columns[columnIndex],
        dynamicDataSource: {
          enabled: true,
          options: [],
        },
      };
    } else {
      // eslint-disable-next-line @typescript-eslint/no-unused-vars
      const { dynamicDataSource, ...rest } = columns[columnIndex];
      columns[columnIndex] = rest;
    }
    updateConfig({ columns });
  };

  const addDynamicSourceOption = (columnIndex: number) => {
    const columns = [...(localConfig.columns || [])];
    const col = columns[columnIndex];
    const newOption: DynamicDataSourceOption = {
      id: `option_${Date.now()}`,
      label: "새 옵션",
      sourceType: "table",
      tableConfig: {
        tableName: "",
        valueColumn: "",
        joinConditions: [],
      },
    };
    
    columns[columnIndex] = {
      ...col,
      dynamicDataSource: {
        ...col.dynamicDataSource!,
        enabled: true,
        options: [...(col.dynamicDataSource?.options || []), newOption],
      },
    };
    updateConfig({ columns });
  };

  const updateDynamicSourceOption = (columnIndex: number, optionIndex: number, updates: Partial<DynamicDataSourceOption>) => {
    const columns = [...(localConfig.columns || [])];
    const col = columns[columnIndex];
    const options = [...(col.dynamicDataSource?.options || [])];
    options[optionIndex] = { ...options[optionIndex], ...updates };
    
    columns[columnIndex] = {
      ...col,
      dynamicDataSource: {
        ...col.dynamicDataSource!,
        options,
      },
    };
    updateConfig({ columns });
  };

  const removeDynamicSourceOption = (columnIndex: number, optionIndex: number) => {
    const columns = [...(localConfig.columns || [])];
    const col = columns[columnIndex];
    const options = [...(col.dynamicDataSource?.options || [])];
    options.splice(optionIndex, 1);
    
    columns[columnIndex] = {
      ...col,
      dynamicDataSource: {
        ...col.dynamicDataSource!,
        options,
      },
    };
    updateConfig({ columns });
  };

  const setDefaultDynamicSourceOption = (columnIndex: number, optionId: string) => {
    const columns = [...(localConfig.columns || [])];
    const col = columns[columnIndex];
    
    columns[columnIndex] = {
      ...col,
      dynamicDataSource: {
        ...col.dynamicDataSource!,
        defaultOptionId: optionId,
      },
    };
    updateConfig({ columns });
  };

  return (
    <div className="space-y-6 p-4">
      {/* 소스/저장 테이블 설정 */}
      <div className="space-y-4 border rounded-lg p-4 bg-card">
        <div>
          <h3 className="text-sm font-semibold mb-1">1. 소스 테이블 (데이터 검색)</h3>
          <p className="text-xs text-muted-foreground">
            항목 검색 모달에서 어떤 테이블의 어떤 컬럼 정보를 보여줄 건지 설정
          </p>
        </div>

        {/* 소스 테이블 */}
        <div className="space-y-2">
          <Label className="text-xs sm:text-sm">소스 테이블 *</Label>
          <Popover open={openTableCombo} onOpenChange={setOpenTableCombo}>
            <PopoverTrigger asChild>
              <Button
                variant="outline"
                role="combobox"
                aria-expanded={openTableCombo}
                className="h-8 w-full justify-between text-xs sm:h-10 sm:text-sm"
                disabled={isLoadingTables}
              >
                {localConfig.sourceTable
                  ? allTables.find((t) => t.tableName === localConfig.sourceTable)?.displayName || localConfig.sourceTable
                  : isLoadingTables ? "로딩 중..." : "테이블 선택"}
                <ChevronsUpDown className="ml-2 h-4 w-4 shrink-0 opacity-50" />
              </Button>
            </PopoverTrigger>
            <PopoverContent className="p-0" style={{ width: "var(--radix-popover-trigger-width)" }} align="start">
              <Command>
                <CommandInput placeholder="테이블 검색..." className="text-xs sm:text-sm" />
                <CommandList>
                  <CommandEmpty className="text-xs sm:text-sm">테이블을 찾을 수 없습니다.</CommandEmpty>
                  <CommandGroup>
                    {allTables.map((table) => (
                      <CommandItem
                        key={table.tableName}
                        value={table.tableName}
                        onSelect={() => {
                          updateConfig({ sourceTable: table.tableName });
                          setOpenTableCombo(false);
                        }}
                        className="text-xs sm:text-sm"
                      >
                        <Check className={cn("mr-2 h-4 w-4", localConfig.sourceTable === table.tableName ? "opacity-100" : "opacity-0")} />
                        <div className="flex flex-col">
                          <span className="font-medium">{table.displayName || table.tableName}</span>
                          {table.displayName && <span className="text-[10px] text-gray-500">{table.tableName}</span>}
                        </div>
                      </CommandItem>
                    ))}
                  </CommandGroup>
                </CommandList>
              </Command>
            </PopoverContent>
          </Popover>
          <p className="text-xs text-muted-foreground">
            모달에서 검색할 데이터 테이블
          </p>
        </div>

        <div className="border-t pt-4 mt-4">
          <h3 className="text-sm font-semibold mb-1">2. 저장 테이블 (데이터 저장)</h3>
          <p className="text-xs text-muted-foreground mb-2">
            반복 테이블에 입력된 정보를 어떤 테이블에 저장할 건지 선택
          </p>
        </div>

        {/* 저장 테이블 */}
        <div className="space-y-2">
          <Label className="text-xs sm:text-sm">저장 테이블 *</Label>
          <Popover open={openTargetTableCombo} onOpenChange={setOpenTargetTableCombo}>
            <PopoverTrigger asChild>
              <Button
                variant="outline"
                role="combobox"
                aria-expanded={openTargetTableCombo}
                className="h-8 w-full justify-between text-xs sm:h-10 sm:text-sm"
                disabled={isLoadingTables}
              >
                {localConfig.targetTable
                  ? allTables.find((t) => t.tableName === localConfig.targetTable)?.displayName || localConfig.targetTable
                  : isLoadingTables ? "로딩 중..." : "저장할 테이블 선택"}
                <ChevronsUpDown className="ml-2 h-4 w-4 shrink-0 opacity-50" />
              </Button>
            </PopoverTrigger>
            <PopoverContent className="p-0" style={{ width: "var(--radix-popover-trigger-width)" }} align="start">
              <Command>
                <CommandInput placeholder="테이블 검색..." className="text-xs sm:text-sm" />
                <CommandList>
                  <CommandEmpty className="text-xs sm:text-sm">테이블을 찾을 수 없습니다.</CommandEmpty>
                  <CommandGroup>
                    {allTables.map((table) => (
                      <CommandItem
                        key={table.tableName}
                        value={table.tableName}
                        onSelect={() => {
                          updateConfig({ targetTable: table.tableName });
                          setOpenTargetTableCombo(false);
                        }}
                        className="text-xs sm:text-sm"
                      >
                        <Check className={cn("mr-2 h-4 w-4", localConfig.targetTable === table.tableName ? "opacity-100" : "opacity-0")} />
                        <div className="flex flex-col">
                          <span className="font-medium">{table.displayName || table.tableName}</span>
                          {table.displayName && <span className="text-[10px] text-gray-500">{table.tableName}</span>}
                        </div>
                      </CommandItem>
                    ))}
                  </CommandGroup>
                </CommandList>
              </Command>
            </PopoverContent>
          </Popover>
          <p className="text-xs text-muted-foreground">
            반복 테이블 데이터를 저장할 대상 테이블
          </p>
        </div>

        {/* 소스 컬럼 */}
        <div className="space-y-2">
          <div className="flex items-center justify-between">
            <Label className="text-xs sm:text-sm">소스 컬럼 (항목 검색 모달)</Label>
            <Button
              size="sm"
              variant="outline"
              onClick={addSourceColumn}
              className="h-7 text-xs"
              disabled={!localConfig.sourceTable || isLoadingColumns}
            >
              <Plus className="h-3 w-3 mr-1" />
              추가
            </Button>
          </div>
          <p className="text-xs text-muted-foreground">
            모달 테이블에 표시할 컬럼과 헤더 라벨을 설정합니다
          </p>
          <div className="space-y-3">
            {(localConfig.sourceColumns || []).map((column, index) => (
              <div key={index} className="flex items-start gap-2 p-3 border rounded-md bg-background">
                <div className="flex-1 space-y-2">
                  {/* 컬럼 선택 */}
                  <div className="space-y-1">
                    <Label className="text-[10px] text-muted-foreground">컬럼</Label>
                    <Select
                      value={column}
                      onValueChange={(value) => updateSourceColumn(index, value)}
                      disabled={!localConfig.sourceTable || isLoadingColumns}
                    >
                      <SelectTrigger className="h-8 text-xs">
                        <SelectValue placeholder="컬럼 선택" />
                      </SelectTrigger>
                      <SelectContent>
                        {tableColumns.map((col) => (
                          <SelectItem key={col.columnName} value={col.columnName}>
                            {col.displayName || col.columnName}
                          </SelectItem>
                        ))}
                      </SelectContent>
                    </Select>
                  </div>
                  {/* 라벨 입력 */}
                  <div className="space-y-1">
                    <Label className="text-[10px] text-muted-foreground">표시 라벨</Label>
                    <Input
                      value={localConfig.sourceColumnLabels?.[column] || ""}
                      onChange={(e) => {
                        const newLabels = { ...(localConfig.sourceColumnLabels || {}) };
                        if (e.target.value) {
                          newLabels[column] = e.target.value;
                        } else {
                          delete newLabels[column];
                        }
                        updateConfig({ sourceColumnLabels: newLabels });
                      }}
                      placeholder={tableColumns.find(c => c.columnName === column)?.displayName || column || "라벨 입력"}
                      className="h-8 text-xs"
                      disabled={!column}
                    />
                  </div>
                </div>
                <Button
                  size="sm"
                  variant="ghost"
                  onClick={() => {
                    // 컬럼 삭제 시 해당 라벨도 삭제
                    const newLabels = { ...(localConfig.sourceColumnLabels || {}) };
                    delete newLabels[column];
                    updateConfig({ sourceColumnLabels: newLabels });
                    removeSourceColumn(index);
                  }}
                  className="h-8 w-8 p-0 mt-5"
                >
                  <X className="h-4 w-4" />
                </Button>
              </div>
            ))}
            {(localConfig.sourceColumns || []).length === 0 && (
              <div className="text-center py-4 border-2 border-dashed rounded-lg">
                <p className="text-xs text-muted-foreground">
                  "추가" 버튼을 클릭하여 모달에 표시할 컬럼을 추가하세요
                </p>
              </div>
            )}
          </div>
        </div>

        {/* 검색 필드 */}
        <div className="space-y-2">
          <div className="flex items-center justify-between">
            <Label className="text-xs sm:text-sm">검색 필드</Label>
            <Button
              size="sm"
              variant="outline"
              onClick={addSearchField}
              className="h-7 text-xs"
              disabled={!localConfig.sourceTable || isLoadingColumns}
            >
              <Plus className="h-3 w-3 mr-1" />
              추가
            </Button>
          </div>
          <p className="text-xs text-muted-foreground">
            모달에서 검색 가능한 필드들
          </p>
          <div className="space-y-2">
            {(localConfig.sourceSearchFields || []).map((field, index) => (
              <div key={index} className="flex items-center gap-2">
                <Select
                  value={field}
                  onValueChange={(value) => updateSearchField(index, value)}
                  disabled={!localConfig.sourceTable || isLoadingColumns}
                >
                  <SelectTrigger className="h-8 text-xs sm:h-10 sm:text-sm flex-1">
                    <SelectValue placeholder="필드 선택" />
                  </SelectTrigger>
                  <SelectContent>
                    {tableColumns.map((col) => (
                      <SelectItem key={col.columnName} value={col.columnName}>
                        {col.displayName || col.columnName}
                      </SelectItem>
                    ))}
                  </SelectContent>
                </Select>
                <Button
                  size="sm"
                  variant="ghost"
                  onClick={() => removeSearchField(index)}
                  className="h-8 w-8 p-0"
                >
                  <X className="h-4 w-4" />
                </Button>
              </div>
            ))}
          </div>
        </div>

        {/* 중복 체크 필드 */}
        <div className="space-y-2">
          <Label className="text-xs sm:text-sm">중복 체크 필드</Label>
          <Popover open={openUniqueFieldCombo} onOpenChange={setOpenUniqueFieldCombo}>
            <PopoverTrigger asChild>
              <Button
                variant="outline"
                role="combobox"
                aria-expanded={openUniqueFieldCombo}
                className="h-8 w-full justify-between text-xs sm:h-10 sm:text-sm"
                disabled={!localConfig.sourceTable || isLoadingColumns}
              >
                {localConfig.uniqueField
                  ? tableColumns.find((c) => c.columnName === localConfig.uniqueField)?.displayName || localConfig.uniqueField
                  : isLoadingColumns ? "로딩 중..." : "필드 선택"}
                <ChevronsUpDown className="ml-2 h-4 w-4 shrink-0 opacity-50" />
              </Button>
            </PopoverTrigger>
            <PopoverContent className="p-0" style={{ width: "var(--radix-popover-trigger-width)" }} align="start">
              <Command>
                <CommandInput placeholder="필드 검색..." className="text-xs sm:text-sm" />
                <CommandList>
                  <CommandEmpty className="text-xs sm:text-sm">필드를 찾을 수 없습니다.</CommandEmpty>
                  <CommandGroup>
                    {tableColumns.map((column) => (
                      <CommandItem
                        key={column.columnName}
                        value={column.columnName}
                        onSelect={() => {
                          updateConfig({ uniqueField: column.columnName });
                          setOpenUniqueFieldCombo(false);
                        }}
                        className="text-xs sm:text-sm"
                      >
                        <Check className={cn("mr-2 h-4 w-4", localConfig.uniqueField === column.columnName ? "opacity-100" : "opacity-0")} />
                        <div className="flex flex-col">
                          <span className="font-medium">{column.displayName || column.columnName}</span>
                          {column.displayName && <span className="text-[10px] text-gray-500">{column.columnName}</span>}
                        </div>
                      </CommandItem>
                    ))}
                  </CommandGroup>
                </CommandList>
              </Command>
            </PopoverContent>
          </Popover>
          <p className="text-xs text-muted-foreground">
            중복 추가를 방지할 고유 필드 (예: 품목 코드)
          </p>
        </div>
      </div>

      {/* 모달 설정 */}
      <div className="space-y-4 border rounded-lg p-4">
        <h3 className="text-sm font-semibold">모달 설정</h3>

        <div className="space-y-2">
          <Label className="text-xs sm:text-sm">모달 제목</Label>
          <Input
            value={localConfig.modalTitle || ""}
            onChange={(e) => updateConfig({ modalTitle: e.target.value })}
            placeholder="항목 검색 및 선택"
            className="h-8 text-xs sm:h-10 sm:text-sm"
          />
        </div>

        <div className="space-y-2">
          <Label className="text-xs sm:text-sm">모달 버튼 텍스트</Label>
          <Input
            value={localConfig.modalButtonText || ""}
            onChange={(e) => updateConfig({ modalButtonText: e.target.value })}
            placeholder="항목 검색"
            className="h-8 text-xs sm:h-10 sm:text-sm"
          />
        </div>

        <div className="space-y-2">
          <div className="flex items-center justify-between">
            <Label className="text-xs sm:text-sm">다중 선택</Label>
            <Switch
              checked={localConfig.multiSelect ?? true}
              onCheckedChange={(checked) =>
                updateConfig({ multiSelect: checked })
              }
            />
          </div>
        </div>

        {/* 모달 필터 설정 */}
        <div className="space-y-2 pt-4 border-t">
          <div className="flex items-center justify-between">
            <Label className="text-xs sm:text-sm">모달 필터</Label>
            <Button
              size="sm"
              variant="outline"
              onClick={() => {
                const filters = localConfig.modalFilters || [];
                updateConfig({
                  modalFilters: [...filters, { column: "", label: "", type: "select" }],
                });
              }}
              className="h-7 text-xs"
              disabled={!localConfig.sourceTable}
            >
              <Plus className="h-3 w-3 mr-1" />
              필터 추가
            </Button>
          </div>
          <p className="text-xs text-muted-foreground">
            모달에서 드롭다운으로 필터링할 컬럼을 설정합니다. 소스 테이블의 해당 컬럼에서 고유 값들이 자동으로 표시됩니다.
          </p>
          {(localConfig.modalFilters || []).length > 0 && (
            <div className="space-y-2 mt-2">
              {(localConfig.modalFilters || []).map((filter, index) => (
                <div key={index} className="flex items-center gap-2 p-2 border rounded-md bg-muted/30">
                  <Select
                    value={filter.column}
                    onValueChange={(value) => {
                      const filters = [...(localConfig.modalFilters || [])];
                      filters[index] = { ...filters[index], column: value };
                      updateConfig({ modalFilters: filters });
                    }}
                    disabled={!localConfig.sourceTable || isLoadingColumns}
                  >
                    <SelectTrigger className="h-8 text-xs w-[140px]">
                      <SelectValue placeholder="컬럼 선택" />
                    </SelectTrigger>
                    <SelectContent>
                      {sourceTableColumns.map((col) => (
                        <SelectItem key={col.columnName} value={col.columnName}>
                          {col.displayName || col.columnName}
                        </SelectItem>
                      ))}
                    </SelectContent>
                  </Select>
                  <Input
                    value={filter.label}
                    onChange={(e) => {
                      const filters = [...(localConfig.modalFilters || [])];
                      filters[index] = { ...filters[index], label: e.target.value };
                      updateConfig({ modalFilters: filters });
                    }}
                    placeholder="라벨"
                    className="h-8 text-xs w-[100px]"
                  />
                  <Select
                    value={filter.type}
                    onValueChange={(value: "select" | "text") => {
                      const filters = [...(localConfig.modalFilters || [])];
                      filters[index] = { ...filters[index], type: value };
                      updateConfig({ modalFilters: filters });
                    }}
                  >
                    <SelectTrigger className="h-8 text-xs w-[100px]">
                      <SelectValue />
                    </SelectTrigger>
                    <SelectContent>
                      <SelectItem value="select">드롭다운</SelectItem>
                      <SelectItem value="text">텍스트</SelectItem>
                    </SelectContent>
                  </Select>
                  <Button
                    size="icon"
                    variant="ghost"
                    onClick={() => {
                      const filters = [...(localConfig.modalFilters || [])];
                      filters.splice(index, 1);
                      updateConfig({ modalFilters: filters });
                    }}
                    className="h-7 w-7 text-destructive hover:text-destructive"
                  >
                    <X className="h-3 w-3" />
                  </Button>
                </div>
              ))}
            </div>
          )}
        </div>
      </div>

      {/* 반복 테이블 컬럼 관리 */}
      <div className="space-y-4 border rounded-lg p-4 bg-card">
        <div>
          <h3 className="text-sm font-semibold mb-1">3. 반복 테이블 컬럼 (헤더 구성)</h3>
          <p className="text-xs text-muted-foreground">
            반복 테이블 헤더에 표시할 컬럼 옵션 - 어떤 컬럼을 화면에 보여줄지 선택
          </p>
        </div>

        {/* 저장 테이블 컬럼 선택 */}
        {localConfig.targetTable && targetTableColumns.length > 0 && (
          <div className="space-y-2">
            <Label className="text-xs sm:text-sm">저장 테이블 컬럼 선택</Label>
            <div className="flex flex-wrap gap-2">
              {targetTableColumns.map((col) => (
                <Button
                  key={col.columnName}
                  size="sm"
                  variant="outline"
                  onClick={() => addRepeaterColumnFromTarget(col.columnName)}
                  className="h-7 text-xs"
                  disabled={isLoadingTargetColumns}
                >
                  <Plus className="h-3 w-3 mr-1" />
                  {col.displayName || col.columnName}
                </Button>
              ))}
            </div>
          </div>
        )}

        {/* 추가된 컬럼 목록 */}
        {localConfig.columns && localConfig.columns.length > 0 && (
          <div className="space-y-3">
            <Label className="text-xs sm:text-sm">추가된 컬럼</Label>
            <div className="flex flex-wrap gap-2">
              {localConfig.columns.map((col, index) => (
                <div
                  key={index}
                  className="inline-flex items-center gap-2 px-3 py-1.5 bg-primary/10 text-primary rounded-md text-xs"
                >
                  <span className="font-medium">{col.label}</span>
                  <span className="text-[10px] opacity-70">
                    ({col.mapping?.type === "source" ? "소스" : col.mapping?.type === "reference" ? "참조" : "수동입력"})
                  </span>
                  <button
                    onClick={() => removeRepeaterColumn(index)}
                    className="ml-1 hover:bg-primary/20 rounded p-0.5"
                  >
                    <X className="h-3 w-3" />
                  </button>
                </div>
              ))}
            </div>

            {/* 개별 컬럼 설정 - 세로 레이아웃 */}
            <div className="space-y-4">
              {localConfig.columns.map((col, index) => (
                <div key={index} className="border rounded-lg p-4 space-y-4">
                  <div className="flex items-center justify-between">
                    <h4 className="text-sm font-semibold">{col.label}</h4>
                    <Button
                      size="sm"
                      variant="ghost"
                      onClick={() => removeRepeaterColumn(index)}
                      className="h-7 w-7 p-0"
                    >
                      <X className="h-4 w-4" />
                    </Button>
                  </div>

                  {/* 세로 레이아웃: 모든 항목 동일한 너비/높이 */}
                  <div className="grid grid-cols-1 gap-4">
                    {/* 1. 품목명 */}
                    <div className="space-y-2">
                      <Label className="text-xs font-medium text-muted-foreground">
                        품목명
                      </Label>
                      <Input
                        value={col.label}
                        onChange={(e) => updateRepeaterColumn(index, { label: e.target.value })}
                        placeholder="화면에 표시될 이름"
                        className="h-10 text-sm w-full"
                      />
                      <p className="text-[10px] text-muted-foreground">
                        반복 테이블 헤더에 표시될 이름
                      </p>
                    </div>

                    {/* 2. 컬럼명 */}
                    <div className="space-y-2">
                      <Label className="text-xs font-medium text-muted-foreground">
                        컬럼명
                      </Label>
                      <Input
                        value={col.field}
                        onChange={(e) => updateRepeaterColumn(index, { field: e.target.value })}
                        placeholder="데이터베이스 필드명"
                        className="h-10 text-sm w-full"
                      />
                      <p className="text-[10px] text-muted-foreground">
                        저장 테이블의 실제 컬럼명
                      </p>
                    </div>

                    {/* 3. 컬럼 타입 */}
                    <div className="space-y-2">
                      <Label className="text-xs font-medium text-muted-foreground">
                        컬럼 타입
                      </Label>
                      <Select
                        value={col.type || "text"}
                        onValueChange={(value) => updateRepeaterColumn(index, { type: value as "text" | "number" | "date" | "select" })}
                      >
                        <SelectTrigger className="h-10 text-sm w-full">
                          <SelectValue />
                        </SelectTrigger>
                        <SelectContent>
                          <SelectItem value="text">텍스트</SelectItem>
                          <SelectItem value="number">숫자</SelectItem>
                          <SelectItem value="date">날짜</SelectItem>
                          <SelectItem value="select">선택</SelectItem>
                        </SelectContent>
                      </Select>
                      <p className="text-[10px] text-muted-foreground">
                        입력 필드 타입
                      </p>
                    </div>

                    {/* 4. 매핑 설정 */}
                    <div className="space-y-2">
                      <Label className="text-xs font-medium text-muted-foreground">
                        매핑 설정
                      </Label>
                      <Select
                        value={col.mapping?.type || "manual"}
                        onValueChange={(value) => updateRepeaterColumn(index, {
                          mapping: {
                            ...col.mapping,
                            type: value as "source" | "reference" | "manual"
                          }
                        })}
                      >
                        <SelectTrigger className="h-10 text-sm w-full">
                          <SelectValue />
                        </SelectTrigger>
                        <SelectContent>
                          <SelectItem value="source">소스 테이블에서 복사</SelectItem>
                          <SelectItem value="reference">외부 테이블 참조</SelectItem>
                          <SelectItem value="manual">화면에서 입력 (수동)</SelectItem>
                        </SelectContent>
                      </Select>
                      <p className="text-[10px] text-muted-foreground">
                        {col.mapping?.type === "source" && "모달에서 선택한 항목의 값을 가져옴"}
                        {col.mapping?.type === "reference" && "다른 테이블의 값을 참조"}
                        {col.mapping?.type === "manual" && "사용자가 직접 입력"}
                      </p>
                    </div>

                    {/* 5. 소스 정보 */}
                    <div className="space-y-2">
                      <Label className="text-xs font-medium text-muted-foreground">
                        소스 정보
                      </Label>
                      
                      {col.mapping?.type === "source" && (
                        <div className="space-y-3">
                          <div className="p-3 bg-blue-50 dark:bg-blue-950 rounded-md border border-blue-200 dark:border-blue-800">
                            <p className="text-xs font-medium mb-2">소스 테이블에서 복사</p>
                            <p className="text-[10px] text-muted-foreground">
                              모달 검색에서 선택한 항목(소스 테이블)의 컬럼 값을 가져옴
                            </p>
                          </div>

                          {/* 소스 테이블 선택 */}
                          <div className="space-y-1.5">
                            <Label className="text-[11px]">소스 테이블 선택 *</Label>
                            <Select
                              value={col.mapping?.referenceTable || localConfig.sourceTable || ""}
                              onValueChange={(value) => updateRepeaterColumn(index, {
                                mapping: {
                                  ...col.mapping,
                                  type: "source",
                                  referenceTable: value,
                                }
                              })}
                            >
                              <SelectTrigger className="h-10 text-sm w-full">
                                <SelectValue placeholder="테이블 선택" />
                              </SelectTrigger>
                              <SelectContent>
                                {allTables.map((table) => (
                                  <SelectItem key={table.tableName} value={table.tableName}>
                                    {table.displayName || table.tableName}
                                  </SelectItem>
                                ))}
                              </SelectContent>
                            </Select>
                            <p className="text-[10px] text-muted-foreground">
                              값을 가져올 소스 테이블
                            </p>
                          </div>

                          {/* 소스 컬럼 선택 */}
                          <div className="space-y-1.5">
                            <Label className="text-[11px]">소스 컬럼 선택 *</Label>
                            <SourceColumnSelector
                              sourceTable={col.mapping?.referenceTable || localConfig.sourceTable || ""}
                              value={col.mapping?.sourceField || ""}
                              onChange={(value) => updateRepeaterColumn(index, {
                                mapping: {
                                  ...col.mapping,
                                  type: "source",
                                  sourceField: value
                                } as ColumnMapping
                              })}
                            />
                            <p className="text-[10px] text-muted-foreground">
                              가져올 컬럼명
                            </p>
                          </div>
                        </div>
                      )}

                      {col.mapping?.type === "reference" && (
                        <div className="space-y-3">
                          <div className="p-3 bg-purple-50 dark:bg-purple-950 rounded-md border border-purple-200 dark:border-purple-800">
                            <p className="text-xs font-medium mb-2">외부 테이블 참조</p>
                            <p className="text-[10px] text-muted-foreground">
                              다른 테이블의 컬럼 값을 조인하여 가져옴 (조인 조건 필요)
                            </p>
                          </div>

                          {/* 참조 테이블 선택 */}
                          <div className="space-y-1.5">
                            <Label className="text-[11px]">참조 테이블 선택 *</Label>
                            <Select
                              value={col.mapping?.referenceTable || ""}
                              onValueChange={(value) => updateRepeaterColumn(index, {
                                mapping: {
                                  ...col.mapping,
                                  type: "reference",
                                  referenceTable: value,
                                }
                              })}
                            >
                              <SelectTrigger className="h-10 text-sm w-full">
                                <SelectValue placeholder="테이블 선택" />
                              </SelectTrigger>
                              <SelectContent>
                                {allTables.map((table) => (
                                  <SelectItem key={table.tableName} value={table.tableName}>
                                    {table.displayName || table.tableName}
                                  </SelectItem>
                                ))}
                              </SelectContent>
                            </Select>
                            <p className="text-[10px] text-muted-foreground">
                              참조할 외부 테이블
                            </p>
                          </div>

                          {/* 참조 컬럼 선택 */}
                          <div className="space-y-1.5">
                            <Label className="text-[11px]">참조 컬럼 선택 *</Label>
                            <ReferenceColumnSelector
                              referenceTable={col.mapping?.referenceTable || ""}
                              value={col.mapping?.referenceField || ""}
                              onChange={(value) => updateRepeaterColumn(index, {
                                mapping: {
                                  ...col.mapping,
                                  type: "reference",
                                  referenceField: value
                                } as ColumnMapping
                              })}
                            />
                            <p className="text-[10px] text-muted-foreground">
                              가져올 컬럼명
                            </p>
                          </div>

                          {/* 조인 조건 설정 */}
                          <div className="space-y-2">
                            <div className="flex items-center justify-between">
                              <Label className="text-[11px]">조인 조건 *</Label>
                              <Button
                                size="sm"
                                variant="outline"
                                onClick={() => {
                                  const currentConditions = col.mapping?.joinCondition || [];
                                  updateRepeaterColumn(index, {
                                    mapping: {
                                      ...col.mapping,
                                      type: "reference",
                                      joinCondition: [
                                        ...currentConditions,
                                        { sourceField: "", targetField: "", operator: "=" }
                                      ]
                                    } as ColumnMapping
                                  });
                                }}
                                className="h-6 text-[10px] px-2"
                              >
                                <Plus className="h-3 w-3 mr-1" />
                                조인 조건 추가
                              </Button>
                            </div>
                            <p className="text-[10px] text-muted-foreground">
                              소스 테이블과 참조 테이블을 어떻게 매칭할지 설정
                            </p>

                            {/* 조인 조건 목록 */}
                            <div className="space-y-2">
                              {(col.mapping?.joinCondition || []).map((condition, condIndex) => (
                                <div key={condIndex} className="p-3 border rounded-md bg-background space-y-2">
                                  <div className="flex items-center justify-between mb-2">
                                    <span className="text-[10px] font-medium text-muted-foreground">
                                      조인 조건 {condIndex + 1}
                                    </span>
                                    <Button
                                      size="sm"
                                      variant="ghost"
                                      onClick={() => {
                                        const currentConditions = [...(col.mapping?.joinCondition || [])];
                                        currentConditions.splice(condIndex, 1);
                                        updateRepeaterColumn(index, {
                                          mapping: {
                                            ...col.mapping,
                                            type: "reference",
                                            joinCondition: currentConditions
                                          } as ColumnMapping
                                        });
                                      }}
                                      className="h-5 w-5 p-0"
                                    >
                                      <X className="h-3 w-3" />
                                    </Button>
                                  </div>

                                  {/* 소스 테이블 선택 */}
                                  <div className="space-y-1">
                                    <Label className="text-[10px] text-muted-foreground">소스 테이블 (어느 테이블)</Label>
                                    <Select
                                      value={condition.sourceTable || "target"}
                                      onValueChange={(value) => {
                                        const currentConditions = [...(col.mapping?.joinCondition || [])];
                                        currentConditions[condIndex] = {
                                          ...currentConditions[condIndex],
                                          sourceTable: value as "source" | "target"
                                        };
                                        updateRepeaterColumn(index, {
                                          mapping: {
                                            ...col.mapping,
                                            type: "reference",
                                            joinCondition: currentConditions
                                          } as ColumnMapping
                                        });
                                      }}
                                    >
                                      <SelectTrigger className="h-9 text-xs w-full">
                                        <SelectValue />
                                      </SelectTrigger>
                                      <SelectContent>
                                        <SelectItem value="target">
                                          <div className="flex flex-col">
                                            <span className="font-medium">저장 테이블 (권장)</span>
                                            <span className="text-[10px] text-muted-foreground">
                                              {localConfig.targetTable || "sales_order_mng"}
                                            </span>
                                          </div>
                                        </SelectItem>
                                        <SelectItem value="source">
                                          <div className="flex flex-col">
                                            <span className="font-medium">소스 테이블</span>
                                            <span className="text-[10px] text-muted-foreground">
                                              {localConfig.sourceTable || "item_info"}
                                            </span>
                                          </div>
                                        </SelectItem>
                                      </SelectContent>
                                    </Select>
                                    <p className="text-[10px] text-muted-foreground">
                                      반복 테이블 = 저장 테이블 컬럼 사용
                                    </p>
                                  </div>

                                  {/* 소스 필드 */}
                                  <div className="space-y-1">
                                    <Label className="text-[10px] text-muted-foreground">소스 필드 (어느 컬럼)</Label>
                                    <Select
                                      value={condition.sourceField || ""}
                                      onValueChange={(value) => {
                                        const currentConditions = [...(col.mapping?.joinCondition || [])];
                                        currentConditions[condIndex] = {
                                          ...currentConditions[condIndex],
                                          sourceField: value
                                        };
                                        updateRepeaterColumn(index, {
                                          mapping: {
                                            ...col.mapping,
                                            type: "reference",
                                            joinCondition: currentConditions
                                          } as ColumnMapping
                                        });
                                      }}
                                    >
                                      <SelectTrigger className="h-9 text-xs w-full">
                                        <SelectValue placeholder="컬럼 선택" />
                                      </SelectTrigger>
                                      <SelectContent>
                                        {/* 저장 테이블 선택 시 */}
                                        {(!condition.sourceTable || condition.sourceTable === "target") && (
                                          <>
                                            {/* 반복 테이블에 추가된 컬럼 */}
                                            {(localConfig.columns || []).length > 0 && (
                                              <>
                                                <div className="px-2 py-1.5 text-[10px] font-semibold text-muted-foreground">
                                                  반복 테이블 컬럼 (권장)
                                                </div>
                                                {localConfig.columns
                                                  .filter((c) => c.field !== col.field)
                                                  .map((repeaterCol) => (
                                                    <SelectItem key={`repeater-${repeaterCol.field}`} value={repeaterCol.field}>
                                                      <span className="font-medium">{repeaterCol.label}</span>
                                                      <span className="text-[10px] text-muted-foreground ml-1">({repeaterCol.field})</span>
                                                    </SelectItem>
                                                  ))}
                                              </>
                                            )}
                                            
                                            {/* 저장 테이블의 모든 컬럼 */}
                                            {targetTableColumns.length > 0 && (
                                              <>
                                                <div className="px-2 py-1.5 text-[10px] font-semibold text-muted-foreground border-t mt-1 pt-2">
                                                  저장 테이블 전체 컬럼 ({localConfig.targetTable || "sales_order_mng"})
                                                </div>
                                                {targetTableColumns.map((targetCol) => (
                                                  <SelectItem key={`target-${targetCol.columnName}`} value={targetCol.columnName}>
                                                    {targetCol.displayName || targetCol.columnName}
                                                  </SelectItem>
                                                ))}
                                              </>
                                            )}
                                          </>
                                        )}
                                        
                                        {/* 소스 테이블 선택 시 */}
                                        {condition.sourceTable === "source" && (
                                          <>
                                            {tableColumns.length > 0 && (
                                              <>
                                                <div className="px-2 py-1.5 text-[10px] font-semibold text-muted-foreground">
                                                  소스 테이블 컬럼 ({localConfig.sourceTable || "item_info"})
                                                </div>
                                                {tableColumns.map((sourceCol) => (
                                                  <SelectItem key={`source-${sourceCol.columnName}`} value={sourceCol.columnName}>
                                                    {sourceCol.displayName || sourceCol.columnName}
                                                  </SelectItem>
                                                ))}
                                              </>
                                            )}
                                          </>
                                        )}
                                      </SelectContent>
                                    </Select>
                                    <p className="text-[10px] text-muted-foreground">
                                      {(!condition.sourceTable || condition.sourceTable === "target") 
                                        ? "반복 테이블에 이미 추가된 컬럼"
                                        : "모달에서 선택한 원본 데이터의 컬럼"}
                                    </p>
                                  </div>

                                  {/* 연산자 */}
                                  <div className="flex items-center justify-center">
                                    <Select
                                      value={condition.operator || "="}
                                      onValueChange={(value) => {
                                        const currentConditions = [...(col.mapping?.joinCondition || [])];
                                        currentConditions[condIndex] = {
                                          ...currentConditions[condIndex],
                                          operator: value as "=" | "!=" | ">" | "<" | ">=" | "<="
                                        };
                                        updateRepeaterColumn(index, {
                                          mapping: {
                                            ...col.mapping,
                                            type: "reference",
                                            joinCondition: currentConditions
                                          } as ColumnMapping
                                        });
                                      }}
                                    >
                                      <SelectTrigger className="h-9 text-xs w-20">
                                        <SelectValue />
                                      </SelectTrigger>
                                      <SelectContent>
                                        <SelectItem value="=">=</SelectItem>
                                        <SelectItem value="!=">!=</SelectItem>
                                        <SelectItem value=">">&gt;</SelectItem>
                                        <SelectItem value="<">&lt;</SelectItem>
                                        <SelectItem value=">=">&gt;=</SelectItem>
                                        <SelectItem value="<=">&lt;=</SelectItem>
                                      </SelectContent>
                                    </Select>
                                  </div>

                                  {/* 대상 필드 */}
                                  <div className="space-y-1">
                                    <Label className="text-[10px] text-muted-foreground">대상 필드 (참조 테이블)</Label>
                                    <ReferenceColumnSelector
                                      referenceTable={col.mapping?.referenceTable || ""}
                                      value={condition.targetField || ""}
                                      onChange={(value) => {
                                        const currentConditions = [...(col.mapping?.joinCondition || [])];
                                        currentConditions[condIndex] = {
                                          ...currentConditions[condIndex],
                                          targetField: value
                                        };
                                        updateRepeaterColumn(index, {
                                          mapping: {
                                            ...col.mapping,
                                            type: "reference",
                                            joinCondition: currentConditions
                                          } as ColumnMapping
                                        });
                                      }}
                                    />
                                  </div>

                                  {/* 조인 조건 미리보기 */}
                                  {condition.sourceField && condition.targetField && (
                                    <div className="mt-2 p-2 bg-muted/50 rounded text-[10px] font-mono">
                                      <span className="text-blue-600 dark:text-blue-400">
                                        {condition.sourceTable === "source" 
                                          ? localConfig.sourceTable 
                                          : localConfig.targetTable || "저장테이블"}
                                      </span>
                                      <span className="text-muted-foreground">.{condition.sourceField}</span>
                                      <span className="mx-2 text-purple-600 dark:text-purple-400">{condition.operator || "="}</span>
                                      <span className="text-purple-600 dark:text-purple-400">{col.mapping?.referenceTable}</span>
                                      <span className="text-muted-foreground">.{condition.targetField}</span>
                                    </div>
                                  )}
                                </div>
                              ))}

                              {/* 조인 조건 없을 때 안내 */}
                              {(!col.mapping?.joinCondition || col.mapping.joinCondition.length === 0) && (
                                <div className="p-4 border-2 border-dashed rounded-lg text-center">
                                  <p className="text-xs text-muted-foreground mb-2">
                                    조인 조건이 없습니다
                                  </p>
                                  <p className="text-[10px] text-muted-foreground">
                                    "조인 조건 추가" 버튼을 클릭하여 매칭 조건을 설정하세요
                                  </p>
                                </div>
                              )}
                            </div>

                            {/* 조인 조건 예시 */}
                            {col.mapping?.referenceTable && (
                              <div className="p-3 bg-blue-50 dark:bg-blue-950 rounded-md border border-blue-200 dark:border-blue-800">
                                <p className="text-xs font-medium mb-2">조인 조건 예시</p>
                                <div className="space-y-1 text-[10px] text-muted-foreground">
                                  <p>예) 거래처별 품목 단가 조회:</p>
                                  <p className="ml-2 font-mono">• item_code = item_code</p>
                                  <p className="ml-2 font-mono">• customer_code = customer_code</p>
                                </div>
                              </div>
                            )}
                          </div>
                        </div>
                      )}

                      {col.mapping?.type === "manual" && (
                        <div className="p-3 bg-green-50 dark:bg-green-950 rounded-md border border-green-200 dark:border-green-800">
                          <p className="text-xs font-medium mb-2">화면에서 입력 (수동)</p>
                          <p className="text-[10px] text-muted-foreground">
                            사용자가 반복 테이블에서 직접 입력
                          </p>
                        </div>
                      )}
                    </div>
                  </div>

                  {/* 6. 동적 데이터 소스 설정 */}
                  <div className="space-y-2 border-t pt-4">
                    <div className="flex items-center justify-between">
                      <Label className="text-xs font-medium text-muted-foreground">
                        동적 데이터 소스
                      </Label>
                      <Switch
                        checked={col.dynamicDataSource?.enabled || false}
                        onCheckedChange={(checked) => toggleDynamicDataSource(index, checked)}
                      />
                </div>
                    <p className="text-[10px] text-muted-foreground">
                      컬럼 헤더 클릭으로 데이터 소스 전환 (예: 거래처별 단가, 품목별 단가)
                    </p>
                    
                    {col.dynamicDataSource?.enabled && (
                      <div className="space-y-2">
                        <div className="flex items-center justify-between">
                          <span className="text-[10px] text-muted-foreground">
                            {col.dynamicDataSource.options.length}개 옵션 설정됨
                          </span>
                          <Button
                            size="sm"
                            variant="outline"
                            onClick={() => openDynamicSourceModal(index)}
                            className="h-7 text-xs"
                          >
                            옵션 설정
                          </Button>
                        </div>
                        
                        {/* 옵션 미리보기 */}
                        {col.dynamicDataSource.options.length > 0 && (
                          <div className="flex flex-wrap gap-1">
                            {col.dynamicDataSource.options.map((opt) => (
                              <span
                                key={opt.id}
                                className={cn(
                                  "text-[10px] px-2 py-0.5 rounded-full",
                                  col.dynamicDataSource?.defaultOptionId === opt.id
                                    ? "bg-primary text-primary-foreground"
                                    : "bg-muted"
                                )}
                              >
                                {opt.label}
                                {col.dynamicDataSource?.defaultOptionId === opt.id && " (기본)"}
                              </span>
                            ))}
                          </div>
                        )}
                      </div>
                    )}
                  </div>
                </div>
              ))}
            </div>
          </div>
        )}
      </div>

      {/* 계산 규칙 (자동 계산) */}
      <div className="space-y-4 border rounded-lg p-4 bg-card">
        <div>
          <h3 className="text-sm font-semibold mb-1">4. 계산 규칙 (자동 계산)</h3>
          <p className="text-xs text-muted-foreground">
            반복 테이블 컬럼들을 조합하여 자동 계산 (예: 수량 x 단가 = 금액)
          </p>
        </div>

        <div className="p-3 bg-amber-50 dark:bg-amber-950 rounded-md border border-amber-200 dark:border-amber-800">
          <p className="text-xs font-medium mb-1">중요 안내</p>
          <ul className="text-[10px] text-muted-foreground space-y-1">
            <li>• <strong className="text-primary">결과 필드는 수정 불가</strong> (자동 계산됨)</li>
            <li>• 계산 공식에 사용된 컬럼은 수정 가능</li>
            <li>• 예시: order_qty * unit_price = total_amount</li>
          </ul>
        </div>

        {localConfig.calculationRules && localConfig.calculationRules.length > 0 ? (
          <div className="space-y-4">
            {localConfig.calculationRules.map((rule, index) => (
              <div key={index} className="border rounded-lg p-4 space-y-4 bg-gradient-to-br from-card to-muted/20">
                <div className="flex items-center justify-between">
                  <div className="flex items-center gap-2">
                    <div className="w-6 h-6 rounded-full bg-primary text-primary-foreground flex items-center justify-center text-xs font-bold">
                      {index + 1}
                    </div>
                    <h4 className="text-sm font-semibold">계산 규칙 {index + 1}</h4>
                  </div>
                  <Button
                    size="sm"
                    variant="ghost"
                    onClick={() => removeCalculationRule(index)}
                    className="h-7 w-7 p-0 hover:bg-destructive/10 hover:text-destructive"
                  >
                    <X className="h-4 w-4" />
                  </Button>
                </div>

                <div className="grid grid-cols-1 gap-4">
                  {/* 결과 필드 */}
                  <div className="space-y-2">
                    <Label className="text-xs font-medium text-muted-foreground">
                      결과 필드 (계산된 값이 저장될 컬럼) *
                    </Label>
                    <Select
                      value={rule.result || ""}
                      onValueChange={(value) => updateCalculationRule(index, { result: value })}
                    >
                      <SelectTrigger className="h-10 text-sm w-full">
                        <SelectValue placeholder="결과 컬럼 선택">
                          {rule.result
                            ? localConfig.columns?.find((c) => c.field === rule.result)?.label || rule.result
                            : "결과 컬럼 선택"}
                        </SelectValue>
                      </SelectTrigger>
                      <SelectContent>
                        {(localConfig.columns || []).filter((col) => col.field && col.field !== "").map((col) => (
                          <SelectItem key={col.field} value={col.field}>
                            {col.label} ({col.field})
                          </SelectItem>
                        ))}
                      </SelectContent>
                    </Select>
                    <p className="text-[10px] text-muted-foreground">
                      이 컬럼은 자동 계산되어 수정 불가능합니다
                    </p>
                  </div>

                  {/* 계산 공식 */}
                  <div className="space-y-2">
                    <Label className="text-xs font-medium text-muted-foreground">
                      계산 공식 (JavaScript 표현식) *
                    </Label>
                    <Input
                      value={rule.formula || ""}
                      onChange={(e) => updateCalculationRule(index, { formula: e.target.value })}
                      placeholder="예: order_qty * unit_price"
                      className="h-10 text-sm w-full font-mono"
                    />
                    <p className="text-[10px] text-muted-foreground">
                      사용 가능한 연산자: +, -, *, /, (), 필드명 사용
                    </p>
                  </div>

                  {/* 현재 설정 표시 */}
                  {rule.result && rule.formula && (
                    <div className="p-3 bg-primary/5 border border-primary/20 rounded-md">
                      <div className="flex items-center gap-2 mb-2">
                        <div className="w-1 h-4 bg-primary rounded-full"></div>
                        <p className="text-xs font-semibold text-primary">현재 설정</p>
                      </div>
                      <div className="flex items-center gap-2 text-sm">
                        <span className="font-bold text-primary">
                          {localConfig.columns?.find((c) => c.field === rule.result)?.label || rule.result}
                        </span>
                        <span className="text-muted-foreground">=</span>
                        <code className="px-2 py-1 bg-muted rounded text-xs font-mono">
                          {rule.formula}
                        </code>
                      </div>
                    </div>
                  )}
                </div>
              </div>
            ))}
          </div>
        ) : (
          <div className="text-center py-8 border-2 border-dashed rounded-lg">
            <div className="w-12 h-12 mx-auto mb-3 rounded-full bg-muted flex items-center justify-center">
              <Plus className="h-6 w-6 text-muted-foreground" />
            </div>
            <p className="text-sm font-medium mb-1">계산 규칙이 없습니다</p>
            <p className="text-xs text-muted-foreground mb-4">
              자동 계산이 필요한 컬럼이 있다면 규칙을 추가하세요
            </p>
            <Button size="sm" variant="outline" onClick={addCalculationRule}>
              <Plus className="h-3 w-3 mr-1" />
              첫 번째 규칙 추가
            </Button>
          </div>
        )}

        {localConfig.calculationRules && localConfig.calculationRules.length > 0 && (
          <Button
            size="sm"
            variant="outline"
            onClick={addCalculationRule}
            className="w-full"
          >
            <Plus className="h-3 w-3 mr-1" />
            계산 규칙 추가
          </Button>
        )}
      </div>

      {/* 설정 순서 안내 */}
      <div className="p-4 bg-muted rounded-md text-xs text-muted-foreground">
        <p className="font-medium mb-2">설정 순서:</p>
        <ol className="space-y-1 list-decimal list-inside">
          <li><strong>소스 테이블</strong> (검색용): 모달에서 검색할 데이터 테이블</li>
          <li><strong>저장 테이블</strong> (저장용): 선택한 항목을 저장할 테이블</li>
          <li><strong>반복 테이블 컬럼</strong>: 저장 테이블의 컬럼 선택 → 화면에 표시</li>
          <li><strong>컬럼 매핑 설정</strong>: 각 컬럼의 초기값을 어디서 가져올지 설정</li>
          <li><strong>계산 규칙</strong>: 자동 계산이 필요한 컬럼 설정 (선택사항)</li>
        </ol>

        <div className="mt-4 pt-4 border-t border-border">
          <p className="font-medium mb-2">실제 사용 예시:</p>
          <ul className="space-y-1.5 text-[10px]">
            <li><strong>수주 등록 화면</strong></li>
            <li className="ml-4">- 소스 테이블: <code className="bg-background px-1 py-0.5 rounded">item_info</code> (품목 검색)</li>
            <li className="ml-4">- 저장 테이블: <code className="bg-background px-1 py-0.5 rounded">sales_order_mng</code> (수주 저장)</li>
            <li className="ml-4">- 컬럼: part_name, quantity, unit_price, amount...</li>
            <li className="ml-4">- 매핑: item_name → part_name (소스에서 복사)</li>
            <li className="ml-4">- 계산: <code className="bg-background px-1 py-0.5 rounded">amount = quantity * unit_price</code></li>
          </ul>
        </div>
      </div>

      {/* 동적 데이터 소스 설정 모달 */}
      <Dialog open={dynamicSourceModalOpen} onOpenChange={setDynamicSourceModalOpen}>
        <DialogContent className="max-w-[95vw] sm:max-w-[600px] max-h-[90vh] overflow-y-auto">
          <DialogHeader>
            <DialogTitle className="text-base sm:text-lg">
              동적 데이터 소스 설정
              {editingDynamicSourceColumnIndex !== null && localConfig.columns?.[editingDynamicSourceColumnIndex] && (
                <span className="text-primary ml-2">
                  ({localConfig.columns[editingDynamicSourceColumnIndex].label})
                </span>
              )}
            </DialogTitle>
            <DialogDescription className="text-xs sm:text-sm">
              컬럼 헤더 클릭 시 선택할 수 있는 데이터 소스 옵션을 설정합니다
            </DialogDescription>
          </DialogHeader>

          {editingDynamicSourceColumnIndex !== null && localConfig.columns?.[editingDynamicSourceColumnIndex] && (
            <div className="space-y-4">
              {/* 옵션 목록 */}
              <div className="space-y-3">
                {(localConfig.columns[editingDynamicSourceColumnIndex].dynamicDataSource?.options || []).map((option, optIndex) => (
                  <div key={option.id} className="border rounded-lg p-4 space-y-3">
                    <div className="flex items-center justify-between">
                      <div className="flex items-center gap-2">
                        <span className="text-xs font-medium">옵션 {optIndex + 1}</span>
                        {localConfig.columns![editingDynamicSourceColumnIndex].dynamicDataSource?.defaultOptionId === option.id && (
                          <span className="text-[10px] bg-primary text-primary-foreground px-1.5 py-0.5 rounded">기본</span>
                        )}
                      </div>
                      <div className="flex items-center gap-1">
                        {localConfig.columns![editingDynamicSourceColumnIndex].dynamicDataSource?.defaultOptionId !== option.id && (
                          <Button
                            size="sm"
                            variant="ghost"
                            onClick={() => setDefaultDynamicSourceOption(editingDynamicSourceColumnIndex, option.id)}
                            className="h-6 text-[10px] px-2"
                          >
                            기본으로 설정
                          </Button>
                        )}
                        <Button
                          size="sm"
                          variant="ghost"
                          onClick={() => removeDynamicSourceOption(editingDynamicSourceColumnIndex, optIndex)}
                          className="h-6 w-6 p-0 hover:bg-destructive/10 hover:text-destructive"
                        >
                          <X className="h-3 w-3" />
                        </Button>
                      </div>
                    </div>

                    {/* 옵션 라벨 */}
                    <div className="space-y-1">
                      <Label className="text-[10px]">표시 라벨 *</Label>
                      <Input
                        value={option.label}
                        onChange={(e) => updateDynamicSourceOption(editingDynamicSourceColumnIndex, optIndex, { label: e.target.value })}
                        placeholder="예: 거래처별 단가"
                        className="h-8 text-xs"
                      />
                    </div>

                    {/* 소스 타입 */}
                    <div className="space-y-1">
                      <Label className="text-[10px]">조회 방식 *</Label>
                      <Select
                        value={option.sourceType}
                        onValueChange={(value) => updateDynamicSourceOption(editingDynamicSourceColumnIndex, optIndex, { 
                          sourceType: value as "table" | "multiTable" | "api",
                          tableConfig: value === "table" ? { tableName: "", valueColumn: "", joinConditions: [] } : undefined,
                          multiTableConfig: value === "multiTable" ? { joinChain: [], valueColumn: "" } : undefined,
                          apiConfig: value === "api" ? { endpoint: "", parameterMappings: [], responseValueField: "" } : undefined,
                        })}
                      >
                        <SelectTrigger className="h-8 text-xs">
                          <SelectValue />
                        </SelectTrigger>
                        <SelectContent>
                          <SelectItem value="table">테이블 직접 조회 (단순 조인)</SelectItem>
                          <SelectItem value="multiTable">테이블 복합 조인 (2개 이상)</SelectItem>
                          <SelectItem value="api">전용 API 호출</SelectItem>
                        </SelectContent>
                      </Select>
                    </div>

                    {/* 테이블 직접 조회 설정 */}
                    {option.sourceType === "table" && (
                      <div className="space-y-3 p-3 bg-blue-50 dark:bg-blue-950 rounded-md border border-blue-200 dark:border-blue-800">
                        <p className="text-xs font-medium">테이블 조회 설정</p>
                        
                        {/* 참조 테이블 */}
                        <div className="space-y-1">
                          <Label className="text-[10px]">참조 테이블 *</Label>
                          <Select
                            value={option.tableConfig?.tableName || ""}
                            onValueChange={(value) => updateDynamicSourceOption(editingDynamicSourceColumnIndex, optIndex, {
                              tableConfig: { ...option.tableConfig!, tableName: value },
                            })}
                          >
                            <SelectTrigger className="h-8 text-xs">
                              <SelectValue placeholder="테이블 선택" />
                            </SelectTrigger>
                            <SelectContent>
                              {allTables.map((table) => (
                                <SelectItem key={table.tableName} value={table.tableName}>
                                  {table.displayName || table.tableName}
                                </SelectItem>
                              ))}
                            </SelectContent>
                          </Select>
                        </div>

                        {/* 값 컬럼 */}
                        <div className="space-y-1">
                          <Label className="text-[10px]">값 컬럼 (가져올 컬럼) *</Label>
                          <ReferenceColumnSelector
                            referenceTable={option.tableConfig?.tableName || ""}
                            value={option.tableConfig?.valueColumn || ""}
                            onChange={(value) => updateDynamicSourceOption(editingDynamicSourceColumnIndex, optIndex, {
                              tableConfig: { ...option.tableConfig!, valueColumn: value },
                            })}
                          />
                        </div>

                        {/* 조인 조건 */}
                        <div className="space-y-2">
                          <div className="flex items-center justify-between">
                            <Label className="text-[10px]">조인 조건 *</Label>
                            <Button
                              size="sm"
                              variant="outline"
                              onClick={() => {
                                const newConditions = [...(option.tableConfig?.joinConditions || []), { sourceField: "", targetField: "" }];
                                updateDynamicSourceOption(editingDynamicSourceColumnIndex, optIndex, {
                                  tableConfig: { ...option.tableConfig!, joinConditions: newConditions },
                                });
                              }}
                              className="h-6 text-[10px] px-2"
                            >
                              <Plus className="h-3 w-3 mr-1" />
                              추가
                            </Button>
                          </div>
                          
                          {(option.tableConfig?.joinConditions || []).map((cond, condIndex) => (
                            <div key={condIndex} className="flex items-center gap-2 p-2 bg-background rounded">
                              <Select
                                value={cond.sourceField}
                                onValueChange={(value) => {
                                  const newConditions = [...(option.tableConfig?.joinConditions || [])];
                                  newConditions[condIndex] = { ...newConditions[condIndex], sourceField: value };
                                  updateDynamicSourceOption(editingDynamicSourceColumnIndex, optIndex, {
                                    tableConfig: { ...option.tableConfig!, joinConditions: newConditions },
                                  });
                                }}
                              >
                                <SelectTrigger className="h-7 text-[10px] flex-1">
                                  <SelectValue placeholder="현재 행 필드" />
                                </SelectTrigger>
                                <SelectContent>
                                  {(localConfig.columns || []).filter((col) => col.field && col.field !== "").map((col) => (
                                    <SelectItem key={col.field} value={col.field}>
                                      {col.label}
                                    </SelectItem>
                                  ))}
                                </SelectContent>
                              </Select>
                              <span className="text-[10px] text-muted-foreground">=</span>
                              <ReferenceColumnSelector
                                referenceTable={option.tableConfig?.tableName || ""}
                                value={cond.targetField}
                                onChange={(value) => {
                                  const newConditions = [...(option.tableConfig?.joinConditions || [])];
                                  newConditions[condIndex] = { ...newConditions[condIndex], targetField: value };
                                  updateDynamicSourceOption(editingDynamicSourceColumnIndex, optIndex, {
                                    tableConfig: { ...option.tableConfig!, joinConditions: newConditions },
                                  });
                                }}
                              />
                              <Button
                                size="sm"
                                variant="ghost"
                                onClick={() => {
                                  const newConditions = [...(option.tableConfig?.joinConditions || [])];
                                  newConditions.splice(condIndex, 1);
                                  updateDynamicSourceOption(editingDynamicSourceColumnIndex, optIndex, {
                                    tableConfig: { ...option.tableConfig!, joinConditions: newConditions },
                                  });
                                }}
                                className="h-6 w-6 p-0"
                              >
                                <X className="h-3 w-3" />
                              </Button>
                            </div>
                          ))}
                        </div>
                      </div>
                    )}

                    {/* 테이블 복합 조인 설정 (2개 이상 테이블) */}
                    {option.sourceType === "multiTable" && (
                      <div className="space-y-3 p-3 bg-green-50 dark:bg-green-950 rounded-md border border-green-200 dark:border-green-800">
                        <div>
                          <p className="text-xs font-medium">복합 조인 설정</p>
                          <p className="text-[10px] text-muted-foreground mt-1">
                            여러 테이블을 순차적으로 조인합니다
                          </p>
                        </div>

                        {/* 조인 체인 */}
                        <div className="space-y-2">
                          <div className="flex items-center justify-between">
                            <Label className="text-[10px]">조인 체인 *</Label>
                            <Button
                              size="sm"
                              variant="outline"
                              onClick={() => {
                                const newChain: MultiTableJoinStep[] = [
                                  ...(option.multiTableConfig?.joinChain || []),
                                  { tableName: "", joinCondition: { fromField: "", toField: "" }, outputField: "" }
                                ];
                                updateDynamicSourceOption(editingDynamicSourceColumnIndex, optIndex, {
                                  multiTableConfig: { ...option.multiTableConfig!, joinChain: newChain },
                                });
                              }}
                              className="h-6 text-[10px] px-2"
                            >
                              <Plus className="h-3 w-3 mr-1" />
                              조인 추가
                            </Button>
                          </div>

                          {/* 시작점 안내 */}
                          <div className="p-2 bg-background rounded border-l-2 border-primary">
                            <p className="text-[10px] font-medium text-primary">시작: 현재 행 데이터</p>
                            <p className="text-[10px] text-muted-foreground">
                              첫 번째 조인은 현재 행의 필드에서 시작합니다
                            </p>
                          </div>

                          {/* 조인 단계들 */}
                          {(option.multiTableConfig?.joinChain || []).map((step, stepIndex) => (
                            <div key={stepIndex} className="p-3 border rounded-md bg-background space-y-3">
                              <div className="flex items-center justify-between">
                                <div className="flex items-center gap-2">
                                  <div className="w-5 h-5 rounded-full bg-green-500 text-white flex items-center justify-center text-[10px] font-bold">
                                    {stepIndex + 1}
                                  </div>
                                  <span className="text-xs font-medium">조인 단계 {stepIndex + 1}</span>
                                </div>
                                <Button
                                  size="sm"
                                  variant="ghost"
                                  onClick={() => {
                                    const newChain = [...(option.multiTableConfig?.joinChain || [])];
                                    newChain.splice(stepIndex, 1);
                                    updateDynamicSourceOption(editingDynamicSourceColumnIndex, optIndex, {
                                      multiTableConfig: { ...option.multiTableConfig!, joinChain: newChain },
                                    });
                                  }}
                                  className="h-5 w-5 p-0"
                                >
                                  <X className="h-3 w-3" />
                                </Button>
                              </div>

                              {/* 조인할 테이블 */}
                              <div className="space-y-1">
                                <Label className="text-[10px]">조인할 테이블 *</Label>
                                <Select
                                  value={step.tableName}
                                  onValueChange={(value) => {
                                    const newChain = [...(option.multiTableConfig?.joinChain || [])];
                                    newChain[stepIndex] = { ...newChain[stepIndex], tableName: value };
                                    updateDynamicSourceOption(editingDynamicSourceColumnIndex, optIndex, {
                                      multiTableConfig: { ...option.multiTableConfig!, joinChain: newChain },
                                    });
                                  }}
                                >
                                  <SelectTrigger className="h-8 text-xs">
                                    <SelectValue placeholder="테이블 선택" />
                                  </SelectTrigger>
                                  <SelectContent>
                                    {allTables.map((table) => (
                                      <SelectItem key={table.tableName} value={table.tableName}>
                                        {table.displayName || table.tableName}
                                      </SelectItem>
                                    ))}
                                  </SelectContent>
                                </Select>
                              </div>

                              {/* 조인 조건 */}
                              <div className="grid grid-cols-[1fr,auto,1fr] gap-2 items-end">
                                <div className="space-y-1">
                                  <Label className="text-[10px]">
                                    {stepIndex === 0 ? "현재 행 필드" : "이전 단계 출력 필드"}
                                  </Label>
                                  {stepIndex === 0 ? (
                                    <Select
                                      value={step.joinCondition.fromField}
                                      onValueChange={(value) => {
                                        const newChain = [...(option.multiTableConfig?.joinChain || [])];
                                        newChain[stepIndex] = {
                                          ...newChain[stepIndex],
                                          joinCondition: { ...newChain[stepIndex].joinCondition, fromField: value }
                                        };
                                        updateDynamicSourceOption(editingDynamicSourceColumnIndex, optIndex, {
                                          multiTableConfig: { ...option.multiTableConfig!, joinChain: newChain },
                                        });
                                      }}
                                    >
                                      <SelectTrigger className="h-8 text-xs">
                                        <SelectValue placeholder="필드 선택" />
                                      </SelectTrigger>
                                      <SelectContent>
                                        {(localConfig.columns || []).filter((col) => col.field && col.field !== "").map((col) => (
                                          <SelectItem key={col.field} value={col.field}>
                                            {col.label} ({col.field})
                                          </SelectItem>
                                        ))}
                                      </SelectContent>
                                    </Select>
                                  ) : (
                                    <Input
                                      value={step.joinCondition.fromField}
                                      onChange={(e) => {
                                        const newChain = [...(option.multiTableConfig?.joinChain || [])];
                                        newChain[stepIndex] = {
                                          ...newChain[stepIndex],
                                          joinCondition: { ...newChain[stepIndex].joinCondition, fromField: e.target.value }
                                        };
                                        updateDynamicSourceOption(editingDynamicSourceColumnIndex, optIndex, {
                                          multiTableConfig: { ...option.multiTableConfig!, joinChain: newChain },
                                        });
                                      }}
                                      placeholder={option.multiTableConfig?.joinChain[stepIndex - 1]?.outputField || "이전 출력 필드"}
                                      className="h-8 text-xs"
                                    />
                                  )}
                                </div>

                                <div className="flex items-center justify-center pb-1">
                                  <span className="text-xs text-muted-foreground">=</span>
                                </div>

                                <div className="space-y-1">
                                  <Label className="text-[10px]">대상 테이블 필드</Label>
                                  <ReferenceColumnSelector
                                    referenceTable={step.tableName}
                                    value={step.joinCondition.toField}
                                    onChange={(value) => {
                                      const newChain = [...(option.multiTableConfig?.joinChain || [])];
                                      newChain[stepIndex] = {
                                        ...newChain[stepIndex],
                                        joinCondition: { ...newChain[stepIndex].joinCondition, toField: value }
                                      };
                                      updateDynamicSourceOption(editingDynamicSourceColumnIndex, optIndex, {
                                        multiTableConfig: { ...option.multiTableConfig!, joinChain: newChain },
                                      });
                                    }}
                                  />
                                </div>
                              </div>

                              {/* 다음 단계로 전달할 필드 */}
                              <div className="space-y-1">
                                <Label className="text-[10px]">다음 단계로 전달할 필드 (출력)</Label>
                                <ReferenceColumnSelector
                                  referenceTable={step.tableName}
                                  value={step.outputField || ""}
                                  onChange={(value) => {
                                    const newChain = [...(option.multiTableConfig?.joinChain || [])];
                                    newChain[stepIndex] = { ...newChain[stepIndex], outputField: value };
                                    updateDynamicSourceOption(editingDynamicSourceColumnIndex, optIndex, {
                                      multiTableConfig: { ...option.multiTableConfig!, joinChain: newChain },
                                    });
                                  }}
                                />
                                <p className="text-[10px] text-muted-foreground">
                                  {stepIndex < (option.multiTableConfig?.joinChain.length || 0) - 1
                                    ? "다음 조인 단계에서 사용할 필드"
                                    : "마지막 단계면 비워두세요"}
                                </p>
                              </div>

                              {/* 조인 미리보기 */}
                              {step.tableName && step.joinCondition.fromField && step.joinCondition.toField && (
                                <div className="p-2 bg-muted/50 rounded text-[10px] font-mono">
                                  <span className="text-blue-600 dark:text-blue-400">
                                    {stepIndex === 0 ? "현재행" : option.multiTableConfig?.joinChain[stepIndex - 1]?.tableName}
                                  </span>
                                  <span className="text-muted-foreground">.{step.joinCondition.fromField}</span>
                                  <span className="mx-2 text-green-600 dark:text-green-400">=</span>
                                  <span className="text-green-600 dark:text-green-400">{step.tableName}</span>
                                  <span className="text-muted-foreground">.{step.joinCondition.toField}</span>
                                  {step.outputField && (
                                    <span className="ml-2 text-purple-600 dark:text-purple-400">
                                      → {step.outputField}
                                    </span>
                                  )}
                                </div>
                              )}
                            </div>
                          ))}

                          {/* 조인 체인이 없을 때 안내 */}
                          {(!option.multiTableConfig?.joinChain || option.multiTableConfig.joinChain.length === 0) && (
                            <div className="p-4 border-2 border-dashed rounded-lg text-center">
                              <p className="text-xs text-muted-foreground mb-2">
                                조인 체인이 없습니다
                              </p>
                              <p className="text-[10px] text-muted-foreground">
                                "조인 추가" 버튼을 클릭하여 테이블 조인을 설정하세요
                              </p>
                            </div>
                          )}
                        </div>

                        {/* 최종 값 컬럼 */}
                        {option.multiTableConfig?.joinChain && option.multiTableConfig.joinChain.length > 0 && (
                          <div className="space-y-1 pt-2 border-t">
                            <Label className="text-[10px]">최종 값 컬럼 (가져올 값) *</Label>
                            <ReferenceColumnSelector
                              referenceTable={option.multiTableConfig.joinChain[option.multiTableConfig.joinChain.length - 1]?.tableName || ""}
                              value={option.multiTableConfig.valueColumn || ""}
                              onChange={(value) => {
                                updateDynamicSourceOption(editingDynamicSourceColumnIndex, optIndex, {
                                  multiTableConfig: { ...option.multiTableConfig!, valueColumn: value },
                                });
                              }}
                            />
                            <p className="text-[10px] text-muted-foreground">
                              마지막 테이블에서 가져올 값
                            </p>
                          </div>
                        )}

                        {/* 전체 조인 경로 미리보기 */}
                        {option.multiTableConfig?.joinChain && option.multiTableConfig.joinChain.length > 0 && (
                          <div className="p-3 bg-muted rounded-md">
                            <p className="text-[10px] font-medium mb-2">조인 경로 미리보기</p>
                            <div className="text-[10px] font-mono space-y-1">
                              {option.multiTableConfig.joinChain.map((step, idx) => (
                                <div key={idx} className="flex items-center gap-1">
                                  {idx === 0 && (
                                    <>
                                      <span className="text-blue-600">현재행</span>
                                      <span>.{step.joinCondition.fromField}</span>
                                      <span className="text-muted-foreground mx-1">→</span>
                                    </>
                                  )}
                                  <span className="text-green-600">{step.tableName}</span>
                                  <span>.{step.joinCondition.toField}</span>
                                  {step.outputField && idx < option.multiTableConfig!.joinChain.length - 1 && (
                                    <>
                                      <span className="text-muted-foreground mx-1">→</span>
                                      <span className="text-purple-600">{step.outputField}</span>
                                    </>
                                  )}
                                </div>
                              ))}
                              {option.multiTableConfig.valueColumn && (
                                <div className="pt-1 border-t mt-1">
                                  <span className="text-orange-600">최종 값: </span>
                                  <span>{option.multiTableConfig.joinChain[option.multiTableConfig.joinChain.length - 1]?.tableName}.{option.multiTableConfig.valueColumn}</span>
                                </div>
                              )}
                            </div>
                          </div>
                        )}
                      </div>
                    )}

                    {/* API 호출 설정 */}
                    {option.sourceType === "api" && (
                      <div className="space-y-3 p-3 bg-purple-50 dark:bg-purple-950 rounded-md border border-purple-200 dark:border-purple-800">
                        <p className="text-xs font-medium">API 호출 설정</p>
                        <p className="text-[10px] text-muted-foreground">
                          복잡한 다중 조인은 백엔드 API로 처리합니다
                        </p>
                        
                        {/* API 엔드포인트 */}
                        <div className="space-y-1">
                          <Label className="text-[10px]">API 엔드포인트 *</Label>
                          <Input
                            value={option.apiConfig?.endpoint || ""}
                            onChange={(e) => updateDynamicSourceOption(editingDynamicSourceColumnIndex, optIndex, {
                              apiConfig: { ...option.apiConfig!, endpoint: e.target.value },
                            })}
                            placeholder="/api/price/customer"
                            className="h-8 text-xs font-mono"
                          />
                        </div>

                        {/* HTTP 메서드 */}
                        <div className="space-y-1">
                          <Label className="text-[10px]">HTTP 메서드</Label>
                          <Select
                            value={option.apiConfig?.method || "GET"}
                            onValueChange={(value) => updateDynamicSourceOption(editingDynamicSourceColumnIndex, optIndex, {
                              apiConfig: { ...option.apiConfig!, method: value as "GET" | "POST" },
                            })}
                          >
                            <SelectTrigger className="h-8 text-xs">
                              <SelectValue />
                            </SelectTrigger>
                            <SelectContent>
                              <SelectItem value="GET">GET</SelectItem>
                              <SelectItem value="POST">POST</SelectItem>
                            </SelectContent>
                          </Select>
                        </div>

                        {/* 파라미터 매핑 */}
                        <div className="space-y-2">
                          <div className="flex items-center justify-between">
                            <Label className="text-[10px]">파라미터 매핑 *</Label>
                            <Button
                              size="sm"
                              variant="outline"
                              onClick={() => {
                                const newMappings = [...(option.apiConfig?.parameterMappings || []), { paramName: "", sourceField: "" }];
                                updateDynamicSourceOption(editingDynamicSourceColumnIndex, optIndex, {
                                  apiConfig: { ...option.apiConfig!, parameterMappings: newMappings },
                                });
                              }}
                              className="h-6 text-[10px] px-2"
                            >
                              <Plus className="h-3 w-3 mr-1" />
                              추가
                            </Button>
                          </div>
                          
                          {(option.apiConfig?.parameterMappings || []).map((mapping, mapIndex) => (
                            <div key={mapIndex} className="flex items-center gap-2 p-2 bg-background rounded">
                              <Input
                                value={mapping.paramName}
                                onChange={(e) => {
                                  const newMappings = [...(option.apiConfig?.parameterMappings || [])];
                                  newMappings[mapIndex] = { ...newMappings[mapIndex], paramName: e.target.value };
                                  updateDynamicSourceOption(editingDynamicSourceColumnIndex, optIndex, {
                                    apiConfig: { ...option.apiConfig!, parameterMappings: newMappings },
                                  });
                                }}
                                placeholder="파라미터명"
                                className="h-7 text-[10px] flex-1"
                              />
                              <span className="text-[10px] text-muted-foreground">=</span>
                              <Select
                                value={mapping.sourceField}
                                onValueChange={(value) => {
                                  const newMappings = [...(option.apiConfig?.parameterMappings || [])];
                                  newMappings[mapIndex] = { ...newMappings[mapIndex], sourceField: value };
                                  updateDynamicSourceOption(editingDynamicSourceColumnIndex, optIndex, {
                                    apiConfig: { ...option.apiConfig!, parameterMappings: newMappings },
                                  });
                                }}
                              >
                                <SelectTrigger className="h-7 text-[10px] flex-1">
                                  <SelectValue placeholder="현재 행 필드" />
                                </SelectTrigger>
                                <SelectContent>
                                  {(localConfig.columns || []).filter((col) => col.field && col.field !== "").map((col) => (
                                    <SelectItem key={col.field} value={col.field}>
                                      {col.label}
                                    </SelectItem>
                                  ))}
                                </SelectContent>
                              </Select>
                              <Button
                                size="sm"
                                variant="ghost"
                                onClick={() => {
                                  const newMappings = [...(option.apiConfig?.parameterMappings || [])];
                                  newMappings.splice(mapIndex, 1);
                                  updateDynamicSourceOption(editingDynamicSourceColumnIndex, optIndex, {
                                    apiConfig: { ...option.apiConfig!, parameterMappings: newMappings },
                                  });
                                }}
                                className="h-6 w-6 p-0"
                              >
                                <X className="h-3 w-3" />
                              </Button>
                            </div>
                          ))}
                        </div>

                        {/* 응답 값 필드 */}
                        <div className="space-y-1">
                          <Label className="text-[10px]">응답 값 필드 *</Label>
                          <Input
                            value={option.apiConfig?.responseValueField || ""}
                            onChange={(e) => updateDynamicSourceOption(editingDynamicSourceColumnIndex, optIndex, {
                              apiConfig: { ...option.apiConfig!, responseValueField: e.target.value },
                            })}
                            placeholder="price (또는 data.price)"
                            className="h-8 text-xs font-mono"
                          />
                          <p className="text-[10px] text-muted-foreground">
                            API 응답에서 값을 가져올 필드 (중첩 경로 지원: data.price)
                          </p>
                        </div>
                      </div>
                    )}
                  </div>
                ))}

                {/* 옵션 추가 버튼 */}
                <Button
                  variant="outline"
                  onClick={() => addDynamicSourceOption(editingDynamicSourceColumnIndex)}
                  className="w-full h-10"
                >
                  <Plus className="h-4 w-4 mr-2" />
                  데이터 소스 옵션 추가
                </Button>
              </div>

              {/* 안내 */}
              <div className="p-3 bg-muted rounded-md text-xs text-muted-foreground">
                <p className="font-medium mb-1">사용 예시</p>
                <ul className="space-y-1 text-[10px]">
                  <li>- <strong>거래처별 단가</strong>: customer_item_price 테이블에서 조회</li>
                  <li>- <strong>품목별 단가</strong>: item_info 테이블에서 기준 단가 조회</li>
                  <li>- <strong>계약 단가</strong>: 전용 API로 복잡한 조인 처리</li>
                </ul>
              </div>
            </div>
          )}

          <DialogFooter className="gap-2 sm:gap-0">
            <Button
              variant="outline"
              onClick={() => setDynamicSourceModalOpen(false)}
              className="h-8 flex-1 text-xs sm:h-10 sm:flex-none sm:text-sm"
            >
              닫기
            </Button>
          </DialogFooter>
        </DialogContent>
      </Dialog>
    </div>
  );
}