"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 } from "./types";
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);

  // 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 });
  };

  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-2">
            {(localConfig.sourceColumns || []).map((column, index) => (
              <div key={index} className="flex items-center gap-2">
                <Select
                  value={column}
                  onValueChange={(value) => updateSourceColumn(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={() => removeSourceColumn(index)}
                  className="h-8 w-8 p-0"
                >
                  <X className="h-4 w-4" />
                </Button>
              </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>

      {/* 반복 테이블 컬럼 관리 */}
      <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>
                </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 || []).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>
    </div>
  );
}