"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 { Button } from "@/components/ui/button";
import { Switch } from "@/components/ui/switch";
import { Plus, X, Check, ChevronsUpDown } from "lucide-react";
import {
  SimpleRepeaterTableProps,
  SimpleRepeaterColumnConfig,
  CalculationRule,
  ColumnSourceConfig,
  ColumnTargetConfig,
  InitialDataConfig,
  DataFilterCondition,
  SummaryConfig,
  SummaryFieldConfig,
} from "./types";
import { tableManagementApi } from "@/lib/api/tableManagement";
import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover";
import { Command, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList } from "@/components/ui/command";
import { cn } from "@/lib/utils";

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

// 🆕 검색 가능한 컬럼 선택기 (Combobox)
function SourceColumnSelector({
  sourceTable,
  value,
  onChange,
  showTableName = false,
}: {
  sourceTable: string;
  value: string;
  onChange: (value: string) => void;
  showTableName?: boolean;
}) {
  const [columns, setColumns] = useState<{ columnName: string; displayName?: string }[]>([]);
  const [isLoading, setIsLoading] = useState(false);
  const [open, setOpen] = 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]);

  const selectedColumn = columns.find((col) => col.columnName === value);
  const displayText = selectedColumn
    ? showTableName
      ? `${sourceTable}.${selectedColumn.displayName || selectedColumn.columnName}`
      : selectedColumn.displayName || selectedColumn.columnName
    : "컬럼 선택";

  return (
    <Popover open={open} onOpenChange={setOpen}>
      <PopoverTrigger asChild>
        <Button
          variant="outline"
          role="combobox"
          aria-expanded={open}
          className="h-10 w-full justify-between text-sm"
          disabled={!sourceTable || isLoading}
        >
          <span className="truncate">{isLoading ? "로딩 중..." : displayText}</span>
          <ChevronsUpDown className="ml-2 h-4 w-4 shrink-0 opacity-50" />
        </Button>
      </PopoverTrigger>
      <PopoverContent
        className="p-0 max-h-[300px]"
        style={{ width: "var(--radix-popover-trigger-width)" }}
        align="start"
      >
        <Command>
          <CommandInput placeholder="컬럼 검색..." className="text-xs sm:text-sm" />
          <CommandList className="max-h-[240px] overflow-y-auto">
            <CommandEmpty className="text-xs sm:text-sm">컬럼을 찾을 수 없습니다.</CommandEmpty>
            <CommandGroup>
              {columns.map((col) => {
                const label = showTableName
                  ? `${sourceTable}.${col.displayName || col.columnName}`
                  : col.displayName || col.columnName;
                
                return (
                  <CommandItem
                    key={col.columnName}
                    value={`${col.columnName} ${col.displayName || ""} ${sourceTable}`}
                    onSelect={() => {
                      onChange(col.columnName);
                      setOpen(false);
                    }}
                    className="text-xs sm:text-sm"
                  >
                    <Check
                      className={cn(
                        "mr-2 h-4 w-4",
                        value === col.columnName ? "opacity-100" : "opacity-0"
                      )}
                    />
                    <div className="flex flex-col">
                      <span className="font-medium">{label}</span>
                      {col.displayName && col.displayName !== col.columnName && (
                        <span className="text-[10px] text-muted-foreground">
                          {col.columnName}
                        </span>
                      )}
                    </div>
                  </CommandItem>
                );
              })}
            </CommandGroup>
          </CommandList>
        </Command>
      </PopoverContent>
    </Popover>
  );
}

// 🆕 FormData 필드 선택기 (Combobox)
function FormDataFieldSelector({
  sourceTable,
  value,
  onChange,
}: {
  sourceTable: string;
  value: string;
  onChange: (value: string) => void;
}) {
  const [columns, setColumns] = useState<{ columnName: string; displayName?: string }[]>([]);
  const [isLoading, setIsLoading] = useState(false);
  const [open, setOpen] = 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]);

  const selectedColumn = columns.find((col) => col.columnName === value);
  const displayText = selectedColumn
    ? `formData["${selectedColumn.columnName}"]`
    : value
    ? `formData["${value}"]`
    : "formData 필드 선택";

  return (
    <Popover open={open} onOpenChange={setOpen}>
      <PopoverTrigger asChild>
        <Button
          variant="outline"
          role="combobox"
          aria-expanded={open}
          className="h-9 w-full justify-between text-xs"
          disabled={!sourceTable || isLoading}
        >
          <span className="truncate font-mono text-[10px]">
            {isLoading ? "로딩 중..." : displayText}
          </span>
          <ChevronsUpDown className="ml-2 h-4 w-4 shrink-0 opacity-50" />
        </Button>
      </PopoverTrigger>
      <PopoverContent
        className="p-0 max-h-[300px]"
        style={{ width: "var(--radix-popover-trigger-width)" }}
        align="start"
      >
        <Command>
          <CommandInput placeholder="필드 검색..." className="text-xs" />
          <CommandList className="max-h-[240px] overflow-y-auto">
            <CommandEmpty className="text-xs">필드를 찾을 수 없습니다.</CommandEmpty>
            <CommandGroup>
              {columns.map((col) => {
                return (
                  <CommandItem
                    key={col.columnName}
                    value={`${col.columnName} ${col.displayName || ""}`}
                    onSelect={() => {
                      onChange(col.columnName);
                      setOpen(false);
                    }}
                    className="text-xs"
                  >
                    <Check
                      className={cn(
                        "mr-2 h-4 w-4",
                        value === col.columnName ? "opacity-100" : "opacity-0"
                      )}
                    />
                    <div className="flex flex-col gap-0.5">
                      <span className="font-mono text-[11px] font-medium">
                        formData["{col.columnName}"]
                      </span>
                      {col.displayName && (
                        <span className="text-[10px] text-muted-foreground">
                          {col.displayName}
                        </span>
                      )}
                    </div>
                  </CommandItem>
                );
              })}
            </CommandGroup>
          </CommandList>
        </Command>
      </PopoverContent>
    </Popover>
  );
}

export function SimpleRepeaterTableConfigPanel({
  config,
  onChange,
  onConfigChange,
}: SimpleRepeaterTableConfigPanelProps) {
  // 하위 호환성: onConfigChange가 있으면 사용, 없으면 onChange 사용
  const handleConfigChange = onConfigChange || onChange;

  const [localConfig, setLocalConfig] = useState(config);
  const [allTables, setAllTables] = useState<{ tableName: string; displayName?: string }[]>([]);
  const [isLoadingTables, setIsLoadingTables] = useState(false);

  // config 변경 시 localConfig 동기화
  useEffect(() => {
    setLocalConfig(config);
  }, [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();
  }, []);

  // 🆕 즉시 업데이트 (Select, Switch 등)
  const updateConfig = (updates: Partial<SimpleRepeaterTableProps>) => {
    const newConfig = { ...localConfig, ...updates };
    setLocalConfig(newConfig);
    handleConfigChange(newConfig);
  };


  // 컬럼 추가
  const addColumn = () => {
    const columns = localConfig.columns || [];
    const newColumn: SimpleRepeaterColumnConfig = {
      field: "",
      label: "",
      type: "text",
      editable: true,
      width: "150px",
      sourceConfig: {
        type: "manual",
      },
      targetConfig: {
        saveEnabled: true,
      },
    };
    updateConfig({ columns: [...columns, newColumn] });
  };

  // 컬럼 삭제
  const removeColumn = (index: number) => {
    const columns = [...(localConfig.columns || [])];
    columns.splice(index, 1);
    updateConfig({ columns });
  };

  // 컬럼 수정
  const updateColumn = (index: number, updates: Partial<SimpleRepeaterColumnConfig>) => {
    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) {
          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) {
        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 addFilterCondition = () => {
    const initialConfig = localConfig.initialDataConfig || {} as InitialDataConfig;
    const conditions = initialConfig.filterConditions || [];
    const newCondition: DataFilterCondition = {
      field: "",
      operator: "=",
      value: "",
    };
    updateConfig({
      initialDataConfig: {
        ...initialConfig,
        filterConditions: [...conditions, newCondition],
      },
    });
  };

  // 🆕 초기 데이터 필터 조건 수정
  const updateFilterCondition = (index: number, updates: Partial<DataFilterCondition>) => {
    const initialConfig = localConfig.initialDataConfig || {} as InitialDataConfig;
    const conditions = [...(initialConfig.filterConditions || [])];
    conditions[index] = { ...conditions[index], ...updates };
    updateConfig({
      initialDataConfig: {
        ...initialConfig,
        filterConditions: conditions,
      },
    });
  };

  // 🆕 초기 데이터 필터 조건 삭제
  const removeFilterCondition = (index: number) => {
    const initialConfig = localConfig.initialDataConfig || {} as InitialDataConfig;
    const conditions = [...(initialConfig.filterConditions || [])];
    conditions.splice(index, 1);
    updateConfig({
      initialDataConfig: {
        ...initialConfig,
        filterConditions: conditions,
      },
    });
  };

  return (
    <div className="space-y-6 p-4">
      {/* 기본 설정 */}
      <div className="space-y-4 border rounded-lg p-4 bg-card">
        <h3 className="text-sm font-semibold">기본 설정</h3>

        <div className="space-y-2">
          <div className="flex items-center justify-between">
            <Label className="text-xs sm:text-sm">읽기 전용 모드</Label>
            <Switch
              checked={localConfig.readOnly ?? false}
              onCheckedChange={(checked) => updateConfig({ readOnly: checked })}
            />
          </div>
          <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>
            <Switch
              checked={localConfig.showRowNumber ?? true}
              onCheckedChange={(checked) => updateConfig({ showRowNumber: checked })}
            />
          </div>
          <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>
            <Switch
              checked={localConfig.allowDelete ?? true}
              onCheckedChange={(checked) => updateConfig({ allowDelete: checked })}
            />
          </div>
          <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>
            <Switch
              checked={localConfig.allowAdd ?? false}
              onCheckedChange={(checked) => updateConfig({ allowAdd: checked })}
            />
          </div>
          <p className="text-xs text-muted-foreground">
            사용자가 새 행을 추가할 수 있습니다
          </p>
        </div>

        {localConfig.allowAdd && (
          <>
            <div className="space-y-2">
              <Label className="text-xs sm:text-sm">행 추가 버튼 텍스트</Label>
              <Input
                value={localConfig.addButtonText || "행 추가"}
                onChange={(e) => updateConfig({ addButtonText: 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>
              <Select
                value={localConfig.addButtonPosition || "bottom"}
                onValueChange={(value) => updateConfig({ addButtonPosition: value as "top" | "bottom" | "both" })}
              >
                <SelectTrigger className="h-8 text-xs sm:h-10 sm:text-sm">
                  <SelectValue />
                </SelectTrigger>
                <SelectContent>
                  <SelectItem value="top">상단</SelectItem>
                  <SelectItem value="bottom">하단</SelectItem>
                  <SelectItem value="both">상단 + 하단</SelectItem>
                </SelectContent>
              </Select>
            </div>

            <div className="grid grid-cols-2 gap-4">
              <div className="space-y-2">
                <Label className="text-xs sm:text-sm">최소 행 수</Label>
                <Input
                  type="number"
                  min={0}
                  value={localConfig.minRows ?? 0}
                  onChange={(e) => updateConfig({ minRows: parseInt(e.target.value) || 0 })}
                  className="h-8 text-xs sm:h-10 sm:text-sm"
                />
                <p className="text-xs text-muted-foreground">
                  0이면 제한 없음
                </p>
              </div>

              <div className="space-y-2">
                <Label className="text-xs sm:text-sm">최대 행 수</Label>
                <Input
                  type="number"
                  min={1}
                  value={localConfig.maxRows ?? ""}
                  onChange={(e) => updateConfig({ maxRows: e.target.value ? parseInt(e.target.value) : undefined })}
                  placeholder="무제한"
                  className="h-8 text-xs sm:h-10 sm:text-sm"
                />
                <p className="text-xs text-muted-foreground">
                  비워두면 무제한
                </p>
              </div>
            </div>
          </>
        )}

        <div className="space-y-2">
          <Label className="text-xs sm:text-sm">최대 높이</Label>
          <Input
            value={localConfig.maxHeight || "240px"}
            onChange={(e) => updateConfig({ maxHeight: e.target.value })}
            placeholder="240px"
            className="h-8 text-xs sm:h-10 sm:text-sm"
          />
          <p className="text-xs text-muted-foreground">
            테이블의 최대 높이 (예: 240px, 400px, 50vh)
          </p>
        </div>
      </div>

      {/* 🆕 초기 데이터 로드 설정 */}
      <div className="space-y-4 border rounded-lg p-4 bg-card">
        <div>
          <h3 className="text-sm font-semibold mb-1">🔄 초기 데이터 로드 설정</h3>
          <p className="text-xs text-muted-foreground">
            컴포넌트가 로드될 때 어떤 테이블에서 어떤 조건으로 데이터를 가져올지 설정
          </p>
        </div>

        <div className="space-y-2">
          <Label className="text-xs sm:text-sm">소스 테이블</Label>
          <Select
            value={localConfig.initialDataConfig?.sourceTable || "__none__"}
            onValueChange={(value) => {
              if (value === "__none__") {
                // 선택 안 함: initialDataConfig 초기화
                updateConfig({
                  initialDataConfig: undefined,
                });
              } else {
                updateConfig({
                  initialDataConfig: {
                    ...localConfig.initialDataConfig,
                    sourceTable: value,
                  },
                });
              }
            }}
            disabled={isLoadingTables}
          >
            <SelectTrigger className="h-10 text-sm w-full">
              <SelectValue placeholder={isLoadingTables ? "로딩 중..." : "선택 안 함 (빈 테이블로 시작)"} />
            </SelectTrigger>
            <SelectContent>
              <SelectItem value="__none__">선택 안 함 (빈 테이블로 시작)</SelectItem>
              {allTables.map((table) => (
                <SelectItem key={table.tableName} value={table.tableName}>
                  {table.displayName || table.tableName}
                </SelectItem>
              ))}
            </SelectContent>
          </Select>
          <p className="text-xs text-muted-foreground">
            선택 안 하면 빈 테이블로 시작합니다 (새 데이터 입력용)
          </p>
        </div>

        {localConfig.initialDataConfig?.sourceTable && (
          <>
            <div className="space-y-3">
              <div className="flex items-center justify-between">
                <Label className="text-xs sm:text-sm">필터 조건</Label>
                <Button
                  size="sm"
                  variant="outline"
                  onClick={addFilterCondition}
                  className="h-7 text-xs"
                >
                  <Plus className="h-3 w-3 mr-1" />
                  조건 추가
                </Button>
              </div>
              <p className="text-xs text-muted-foreground">
                데이터를 필터링할 조건 (예: order_no = 선택한 수주번호)
              </p>

              {localConfig.initialDataConfig?.filterConditions && localConfig.initialDataConfig.filterConditions.length > 0 && (
                <div className="space-y-2">
                  {localConfig.initialDataConfig.filterConditions.map((condition, index) => (
                    <div key={`filter-${index}-${condition.field || 'empty'}-${condition.valueFromField || 'empty'}`} className="border rounded-md p-3 space-y-2 bg-background">
                      <div className="flex items-center justify-between">
                        <span className="text-[10px] font-medium text-muted-foreground">
                          조건 {index + 1}
                        </span>
                        <Button
                          size="sm"
                          variant="ghost"
                          onClick={() => removeFilterCondition(index)}
                          className="h-5 w-5 p-0"
                        >
                          <X className="h-3 w-3" />
                        </Button>
                      </div>

                      <div className="grid grid-cols-1 gap-2">
                        <div className="space-y-1">
                          <Label className="text-[10px] text-muted-foreground">필드명</Label>
                          <SourceColumnSelector
                            sourceTable={localConfig.initialDataConfig?.sourceTable || ""}
                            value={condition.field}
                            onChange={(value) => updateFilterCondition(index, { field: value })}
                            showTableName={true}
                          />
                        </div>

                        <div className="space-y-1">
                          <Label className="text-[10px] text-muted-foreground">연산자</Label>
                          <Select
                            value={condition.operator}
                            onValueChange={(value) => updateFilterCondition(index, { operator: value as any })}
                          >
                            <SelectTrigger className="h-9 text-xs w-full">
                              <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>
                              <SelectItem value="LIKE">LIKE</SelectItem>
                              <SelectItem value="IN">IN</SelectItem>
                            </SelectContent>
                          </Select>
                        </div>

                        <div className="space-y-1">
                          <Label className="text-[10px] text-muted-foreground">formData에서 가져올 필드명</Label>
                          <FormDataFieldSelector
                            sourceTable={localConfig.initialDataConfig?.sourceTable || ""}
                            value={condition.valueFromField || ""}
                            onChange={(value) => updateFilterCondition(index, { valueFromField: value })}
                          />
                          <p className="text-[10px] text-muted-foreground">
                            선택한 수주번호, 품목코드 등을 formData에서 가져옴
                          </p>
                        </div>
                      </div>

                      {condition.field && condition.valueFromField && (
                        <div className="mt-2 p-2 bg-muted/50 rounded text-[10px] font-mono">
                          WHERE {condition.field} {condition.operator} formData["{condition.valueFromField}"]
                        </div>
                      )}
                    </div>
                  ))}
                </div>
              )}

              {(!localConfig.initialDataConfig?.filterConditions || localConfig.initialDataConfig.filterConditions.length === 0) && (
                <div className="p-4 border-2 border-dashed rounded-lg text-center">
                  <p className="text-xs text-muted-foreground">
                    필터 조건이 없습니다. 모든 데이터를 가져옵니다.
                  </p>
                </div>
              )}
            </div>

            <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-1">사용 예시</p>
              <div className="space-y-1 text-[10px] text-muted-foreground">
                <p>• 수주관리 리스트에서 클릭한 수주번호(order_no)를 기준으로 데이터 로드</p>
                <p>• 필터 조건: order_no = formData["order_no"]</p>
              </div>
            </div>
          </>
        )}
      </div>

      {/* 컬럼 설정 */}
      <div className="space-y-4 border rounded-lg p-4 bg-card">
        <div className="flex items-center justify-between">
          <div>
            <h3 className="text-sm font-semibold">컬럼 설정</h3>
            <p className="text-xs text-muted-foreground">
              테이블에 표시할 컬럼을 설정합니다
            </p>
          </div>
          <Button
            size="sm"
            variant="outline"
            onClick={addColumn}
            className="h-7 text-xs"
          >
            <Plus className="h-3 w-3 mr-1" />
            컬럼 추가
          </Button>
        </div>

        {localConfig.columns && localConfig.columns.length > 0 ? (
          <div className="space-y-4">
            {localConfig.columns.map((col, index) => (
              <div key={`col-${index}-${col.field || 'empty'}`} className="border rounded-lg p-4 space-y-4 bg-background">
                <div className="flex items-center justify-between">
                  <h4 className="text-sm font-semibold">컬럼 {index + 1}</h4>
                  <Button
                    size="sm"
                    variant="ghost"
                    onClick={() => removeColumn(index)}
                    className="h-7 w-7 p-0"
                  >
                    <X className="h-4 w-4" />
                  </Button>
                </div>

                {/* 필드명 */}
                <div className="space-y-2">
                  <Label className="text-xs font-medium">필드명 *</Label>
                  {localConfig.initialDataConfig?.sourceTable ? (
                    <SourceColumnSelector
                      sourceTable={localConfig.initialDataConfig.sourceTable}
                      value={col.field}
                      onChange={async (value) => {
                        // 필드명 선택 시 자동으로 라벨도 업데이트
                        try {
                          const response = await tableManagementApi.getColumnList(localConfig.initialDataConfig!.sourceTable);
                          if (response.success && response.data) {
                            const selectedCol = response.data.columns.find((c: any) => c.columnName === value);
                            if (selectedCol) {
                              updateColumn(index, { 
                                field: value,
                                label: selectedCol.displayName || value 
                              });
                            } else {
                              updateColumn(index, { field: value });
                            }
                          }
                        } catch (error) {
                          console.error("컬럼 정보 로드 실패:", error);
                          updateColumn(index, { field: value });
                        }
                      }}
                      showTableName={false}
                    />
                  ) : (
                    <Input
                      value={col.field}
                      onChange={(e) => updateColumn(index, { field: e.target.value })}
                      placeholder="먼저 소스 테이블을 선택하세요"
                      className="h-8 text-xs sm:h-10 sm:text-sm"
                      disabled
                    />
                  )}
                  <p className="text-xs text-muted-foreground">
                    {localConfig.initialDataConfig?.sourceTable 
                      ? "데이터 객체의 필드명 (소스 테이블 컬럼에서 선택)"
                      : "초기 데이터 로드 설정에서 소스 테이블을 먼저 선택하세요"}
                  </p>
                </div>

                {/* 라벨 */}
                <div className="space-y-2">
                  <Label className="text-xs font-medium">라벨 *</Label>
                  <Input
                    value={col.label}
                    onChange={(e) => updateColumn(index, { label: e.target.value })}
                    placeholder="테이블 헤더명"
                    className="h-8 text-xs sm:h-10 sm:text-sm"
                  />
                  <p className="text-xs text-muted-foreground">
                    테이블 헤더에 표시될 이름 (필드 선택 시 자동으로 입력됨)
                  </p>
                </div>

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

                {/* Select 옵션 (타입이 select일 때만) */}
                {col.type === "select" && (
                  <div className="space-y-2">
                    <Label className="text-xs font-medium">Select 옵션</Label>
                    <div className="space-y-2">
                      {(col.selectOptions || []).map((option, optIndex) => (
                        <div key={`opt-${index}-${optIndex}-${option.value || 'empty'}`} className="flex items-center gap-2">
                          <Input
                            value={option.value}
                            onChange={(e) => {
                              const newOptions = [...(col.selectOptions || [])];
                              newOptions[optIndex] = { ...newOptions[optIndex], value: e.target.value };
                              updateColumn(index, { selectOptions: newOptions });
                            }}
                            placeholder="값"
                            className="h-8 text-xs flex-1"
                          />
                          <Input
                            value={option.label}
                            onChange={(e) => {
                              const newOptions = [...(col.selectOptions || [])];
                              newOptions[optIndex] = { ...newOptions[optIndex], label: e.target.value };
                              updateColumn(index, { selectOptions: newOptions });
                            }}
                            placeholder="라벨"
                            className="h-8 text-xs flex-1"
                          />
                          <Button
                            size="sm"
                            variant="ghost"
                            onClick={() => {
                              const newOptions = [...(col.selectOptions || [])];
                              newOptions.splice(optIndex, 1);
                              updateColumn(index, { selectOptions: newOptions });
                            }}
                            className="h-8 w-8 p-0"
                          >
                            <X className="h-4 w-4" />
                          </Button>
                        </div>
                      ))}
                      <Button
                        size="sm"
                        variant="outline"
                        onClick={() => {
                          const newOptions = [...(col.selectOptions || []), { value: "", label: "" }];
                          updateColumn(index, { selectOptions: newOptions });
                        }}
                        className="h-7 text-xs w-full"
                      >
                        <Plus className="h-3 w-3 mr-1" />
                        옵션 추가
                      </Button>
                    </div>
                  </div>
                )}

                {/* 🆕 데이터 소스 설정 (어디서 조회할지) */}
                <div className="space-y-3 border-t pt-4">
                  <div className="flex items-center gap-2">
                    <div className="h-1 w-1 rounded-full bg-blue-500"></div>
                    <Label className="text-xs font-semibold text-blue-600">데이터 소스 설정 (어디서 조회?)</Label>
                  </div>

                  <div className="space-y-2">
                    <Label className="text-xs">조회 타입</Label>
                    <Select
                      value={col.sourceConfig?.type || "manual"}
                      onValueChange={(value) => updateColumn(index, {
                        sourceConfig: {
                          ...col.sourceConfig,
                          type: value as "direct" | "join" | "manual"
                        }
                      })}
                    >
                      <SelectTrigger className="h-8 text-xs sm:h-10 sm:text-sm">
                        <SelectValue />
                      </SelectTrigger>
                      <SelectContent>
                        <SelectItem value="direct">직접 조회 (단일 테이블)</SelectItem>
                        <SelectItem value="join">조인 조회 (다른 테이블과 조인)</SelectItem>
                        <SelectItem value="manual">수동 입력 (조회 안 함)</SelectItem>
                      </SelectContent>
                    </Select>
                    <p className="text-xs text-muted-foreground">
                      {col.sourceConfig?.type === "direct" && "소스 테이블에서 직접 가져오기"}
                      {col.sourceConfig?.type === "join" && "다른 테이블과 조인하여 가져오기"}
                      {col.sourceConfig?.type === "manual" && "사용자가 직접 입력"}
                    </p>
                  </div>

                  {col.sourceConfig?.type === "direct" && (
                    <div className="space-y-3 p-3 bg-blue-50 dark:bg-blue-950 rounded-md">
                      <p className="text-xs font-medium">직접 조회 설정</p>

                      <div className="space-y-2">
                        <Label className="text-xs">소스 테이블</Label>
                        <Select
                          value={col.sourceConfig?.sourceTable || ""}
                          onValueChange={(value) => updateColumn(index, {
                            sourceConfig: {
                              ...col.sourceConfig,
                              type: "direct",
                              sourceTable: value,
                            }
                          })}
                        >
                          <SelectTrigger className="h-8 text-xs sm:h-10 sm:text-sm">
                            <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-2">
                        <Label className="text-xs">소스 컬럼</Label>
                        <SourceColumnSelector
                          sourceTable={col.sourceConfig?.sourceTable || ""}
                          value={col.sourceConfig?.sourceColumn || ""}
                          onChange={(value) => updateColumn(index, {
                            sourceConfig: {
                              ...col.sourceConfig,
                              type: "direct",
                              sourceColumn: value
                            } as ColumnSourceConfig
                          })}
                          showTableName={true}
                        />
                        <p className="text-[10px] text-muted-foreground">
                          가져올 컬럼명
                        </p>
                      </div>
                    </div>
                  )}

                  {col.sourceConfig?.type === "join" && (
                    <div className="space-y-3 p-3 bg-purple-50 dark:bg-purple-950 rounded-md">
                      <p className="text-xs font-medium">조인 조회 설정</p>

                      <div className="space-y-2">
                        <Label className="text-xs">조인 키 (현재 테이블 컬럼)</Label>
                        <SourceColumnSelector
                          sourceTable={localConfig.initialDataConfig?.sourceTable || ""}
                          value={col.sourceConfig?.joinKey || ""}
                          onChange={(value) => updateColumn(index, {
                            sourceConfig: {
                              ...col.sourceConfig,
                              type: "join",
                              joinKey: value
                            } as ColumnSourceConfig
                          })}
                          showTableName={true}
                        />
                        <p className="text-[10px] text-muted-foreground">
                          현재 테이블에서 조인에 사용할 컬럼 (예: sales_order_id)
                        </p>
                      </div>

                      <div className="space-y-2">
                        <Label className="text-xs">조인 테이블</Label>
                        <Select
                          value={col.sourceConfig?.joinTable || ""}
                          onValueChange={(value) => updateColumn(index, {
                            sourceConfig: {
                              ...col.sourceConfig,
                              type: "join",
                              joinTable: value,
                            }
                          })}
                        >
                          <SelectTrigger className="h-8 text-xs sm:h-10 sm:text-sm">
                            <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-2">
                        <Label className="text-xs">참조 키 (조인 테이블 컬럼)</Label>
                        <SourceColumnSelector
                          sourceTable={col.sourceConfig?.joinTable || ""}
                          value={col.sourceConfig?.joinRefKey || ""}
                          onChange={(value) => updateColumn(index, {
                            sourceConfig: {
                              ...col.sourceConfig,
                              type: "join",
                              joinRefKey: value
                            } as ColumnSourceConfig
                          })}
                          showTableName={true}
                        />
                        <p className="text-[10px] text-muted-foreground">
                          조인 테이블에서 매칭할 컬럼 (예: id)
                        </p>
                      </div>

                      <div className="space-y-2">
                        <Label className="text-xs">조인 컬럼</Label>
                        <SourceColumnSelector
                          sourceTable={col.sourceConfig?.joinTable || ""}
                          value={col.sourceConfig?.joinColumn || ""}
                          onChange={(value) => updateColumn(index, {
                            sourceConfig: {
                              ...col.sourceConfig,
                              type: "join",
                              joinColumn: value
                            } as ColumnSourceConfig
                          })}
                          showTableName={true}
                        />
                      </div>

                      <div className="p-2 bg-muted/50 rounded text-[10px]">
                        <p className="font-medium mb-1">조인 조건은 향후 추가 예정</p>
                        <p className="text-muted-foreground">현재는 기본 키 기반 자동 조인</p>
                      </div>
                    </div>
                  )}
                </div>

                {/* 🆕 데이터 타겟 설정 - 부모-자식 모드면 숨김 */}
                {localConfig.parentChildConfig?.enabled ? (
                  // 부모-자식 모드: 간단한 안내만 표시
                  <div className="border-t pt-4">
                    <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 text-muted-foreground">
                        <strong className="text-green-700 dark:text-green-400">부모-자식 모드</strong>
                        <br />
                        → <code className="bg-green-100 dark:bg-green-900 px-1 rounded">{localConfig.parentChildConfig.childTable || "자식 테이블"}.{col.field || "필드명"}</code> 에 저장
                      </p>
                    </div>
                  </div>
                ) : (
                  // 일반 모드: 타겟 설정 (선택사항)
                  <div className="space-y-3 border-t pt-4">
                    <div className="flex items-center gap-2">
                      <div className="h-1 w-1 rounded-full bg-gray-400"></div>
                      <Label className="text-xs font-semibold text-muted-foreground">저장 설정 (선택사항)</Label>
                    </div>

                    <div className="space-y-2">
                      <Label className="text-xs">타겟 테이블</Label>
                      <Select
                        value={col.targetConfig?.targetTable && col.targetConfig.targetTable !== "" ? col.targetConfig.targetTable : "__none__"}
                        onValueChange={(value) => {
                          if (value === "__none__") {
                            // 선택 안 함: targetConfig 초기화
                            updateColumn(index, {
                              targetConfig: undefined
                            });
                          } else {
                            // 테이블 선택: targetConfig 설정
                            updateColumn(index, {
                              targetConfig: {
                                targetTable: value,
                                targetColumn: col.field || "",
                                saveEnabled: true,
                              }
                            });
                          }
                        }}
                      >
                        <SelectTrigger className="h-8 text-xs sm:h-10 sm:text-sm">
                          <SelectValue placeholder="선택 안 함" />
                        </SelectTrigger>
                        <SelectContent>
                          <SelectItem value="__none__">선택 안 함</SelectItem>
                          {allTables.map((table) => (
                            <SelectItem key={table.tableName} value={table.tableName}>
                              {table.displayName || table.tableName}
                            </SelectItem>
                          ))}
                        </SelectContent>
                      </Select>
                      <p className="text-xs text-muted-foreground">
                        선택 안 하면 이 컬럼은 저장되지 않습니다
                      </p>
                    </div>

                    {col.targetConfig?.targetTable && col.targetConfig.targetTable !== "" && (
                      <div className="space-y-2">
                        <Label className="text-xs">타겟 컬럼</Label>
                        <SourceColumnSelector
                          sourceTable={col.targetConfig.targetTable}
                          value={col.targetConfig.targetColumn || col.field || ""}
                          onChange={(value) => updateColumn(index, {
                            targetConfig: {
                              ...col.targetConfig,
                              targetColumn: value
                            } as ColumnTargetConfig
                          })}
                          showTableName={true}
                        />
                      </div>
                    )}
                  </div>
                )}

                {/* 편집 가능 여부 */}
                <div className="space-y-2">
                  <div className="flex items-center justify-between">
                    <Label className="text-xs font-medium">편집 가능</Label>
                    <Switch
                      checked={col.editable ?? true}
                      onCheckedChange={(checked) => updateColumn(index, { editable: checked })}
                      disabled={col.calculated}
                    />
                  </div>
                  <p className="text-xs text-muted-foreground">
                    {col.calculated
                      ? "계산 필드는 자동으로 편집 불가능합니다"
                      : "비활성화 시 해당 컬럼은 읽기 전용입니다"}
                  </p>
                </div>

                {/* 필수 입력 */}
                <div className="space-y-2">
                  <div className="flex items-center justify-between">
                    <Label className="text-xs font-medium">필수 입력</Label>
                    <Switch
                      checked={col.required ?? false}
                      onCheckedChange={(checked) => updateColumn(index, { required: checked })}
                    />
                  </div>
                  <p className="text-xs text-muted-foreground">
                    활성화 시 헤더에 * 표시
                  </p>
                </div>

                {/* 컬럼 너비 */}
                <div className="space-y-2">
                  <Label className="text-xs font-medium">컬럼 너비</Label>
                  <Select
                    value={col.width || "150px"}
                    onValueChange={(value) => updateColumn(index, { width: value })}
                  >
                    <SelectTrigger className="h-8 text-xs sm:h-10 sm:text-sm">
                      <SelectValue />
                    </SelectTrigger>
                    <SelectContent>
                      <SelectItem value="80px">80px (아주 좁음)</SelectItem>
                      <SelectItem value="100px">100px (좁음)</SelectItem>
                      <SelectItem value="120px">120px (작음)</SelectItem>
                      <SelectItem value="150px">150px (기본)</SelectItem>
                      <SelectItem value="180px">180px (보통)</SelectItem>
                      <SelectItem value="200px">200px (넓음)</SelectItem>
                      <SelectItem value="250px">250px (아주 넓음)</SelectItem>
                      <SelectItem value="300px">300px (매우 넓음)</SelectItem>
                      <SelectItem value="20%">20% (비율)</SelectItem>
                      <SelectItem value="25%">25% (비율)</SelectItem>
                      <SelectItem value="33%">33% (비율)</SelectItem>
                      <SelectItem value="50%">50% (비율)</SelectItem>
                    </SelectContent>
                  </Select>
                  <p className="text-xs text-muted-foreground">
                    컬럼의 표시 너비 선택
                  </p>
                </div>

                {/* 기본값 */}
                <div className="space-y-2">
                  <Label className="text-xs font-medium">기본값</Label>
                  <Input
                    value={col.defaultValue || ""}
                    onChange={(e) => updateColumn(index, { defaultValue: e.target.value })}
                    placeholder="기본값 (선택사항)"
                    className="h-8 text-xs sm:h-10 sm:text-sm"
                  />
                  <p className="text-xs text-muted-foreground">
                    새 행 추가 시 자동으로 입력될 값
                  </p>
                </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={addColumn}>
              <Plus className="h-3 w-3 mr-1" />
              첫 번째 컬럼 추가
            </Button>
          </div>
        )}
      </div>

      {/* 계산 규칙 (자동 계산) */}
      <div className="space-y-4 border rounded-lg p-4 bg-card">
        <div>
          <h3 className="text-sm font-semibold mb-1">계산 규칙 (자동 계산)</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={`rule-${index}-${rule.result || 'empty'}`} 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.trim() !== "")
                          .map((col, colIndex) => (
                            <SelectItem key={col.field || `col-${colIndex}`} 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="space-y-4 border rounded-lg p-4 bg-card">
        <div>
          <h3 className="text-sm font-semibold mb-1">합계 설정</h3>
          <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>
            <Switch
              checked={localConfig.summaryConfig?.enabled ?? false}
              onCheckedChange={(checked) => updateConfig({
                summaryConfig: {
                  ...localConfig.summaryConfig,
                  enabled: checked,
                  fields: localConfig.summaryConfig?.fields || [],
                }
              })}
            />
          </div>
        </div>

        {localConfig.summaryConfig?.enabled && (
          <>
            <div className="space-y-2">
              <Label className="text-xs sm:text-sm">합계 제목</Label>
              <Input
                value={localConfig.summaryConfig?.title || ""}
                onChange={(e) => updateConfig({
                  summaryConfig: {
                    ...localConfig.summaryConfig,
                    enabled: true,
                    title: e.target.value,
                    fields: localConfig.summaryConfig?.fields || [],
                  }
                })}
                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>
              <Select
                value={localConfig.summaryConfig?.position || "bottom"}
                onValueChange={(value) => updateConfig({
                  summaryConfig: {
                    ...localConfig.summaryConfig,
                    enabled: true,
                    position: value as "bottom" | "bottom-right",
                    fields: localConfig.summaryConfig?.fields || [],
                  }
                })}
              >
                <SelectTrigger className="h-8 text-xs sm:h-10 sm:text-sm">
                  <SelectValue />
                </SelectTrigger>
                <SelectContent>
                  <SelectItem value="bottom">하단 전체</SelectItem>
                  <SelectItem value="bottom-right">하단 우측</SelectItem>
                </SelectContent>
              </Select>
            </div>

            <div className="space-y-3">
              <div className="flex items-center justify-between">
                <Label className="text-xs sm:text-sm">합계 필드</Label>
                <Button
                  size="sm"
                  variant="outline"
                  onClick={() => {
                    const fields = localConfig.summaryConfig?.fields || [];
                    updateConfig({
                      summaryConfig: {
                        ...localConfig.summaryConfig,
                        enabled: true,
                        fields: [...fields, { field: "", label: "", type: "sum", format: "number" }],
                      }
                    });
                  }}
                  className="h-7 text-xs"
                >
                  <Plus className="h-3 w-3 mr-1" />
                  필드 추가
                </Button>
              </div>

              {localConfig.summaryConfig?.fields && localConfig.summaryConfig.fields.length > 0 ? (
                <div className="space-y-3">
                  {localConfig.summaryConfig.fields.map((field, index) => (
                    <div key={`summary-${index}`} className="border rounded-md p-3 space-y-3 bg-background">
                      <div className="flex items-center justify-between">
                        <span className="text-xs font-medium">합계 필드 {index + 1}</span>
                        <Button
                          size="sm"
                          variant="ghost"
                          onClick={() => {
                            const fields = [...(localConfig.summaryConfig?.fields || [])];
                            fields.splice(index, 1);
                            updateConfig({
                              summaryConfig: {
                                ...localConfig.summaryConfig,
                                enabled: true,
                                fields,
                              }
                            });
                          }}
                          className="h-6 w-6 p-0"
                        >
                          <X className="h-3 w-3" />
                        </Button>
                      </div>

                      <div className="grid grid-cols-2 gap-2">
                        <div className="space-y-1">
                          <Label className="text-[10px]">필드</Label>
                          <Select
                            value={field.field}
                            onValueChange={(value) => {
                              const fields = [...(localConfig.summaryConfig?.fields || [])];
                              const selectedCol = localConfig.columns?.find(c => c.field === value);
                              fields[index] = { 
                                ...fields[index], 
                                field: value,
                                label: fields[index].label || selectedCol?.label || value,
                              };
                              updateConfig({
                                summaryConfig: {
                                  ...localConfig.summaryConfig,
                                  enabled: true,
                                  fields,
                                }
                              });
                            }}
                          >
                            <SelectTrigger className="h-8 text-xs">
                              <SelectValue placeholder="컬럼 선택" />
                            </SelectTrigger>
                            <SelectContent>
                              {(localConfig.columns || []).filter(c => c.type === "number" && c.field && c.field !== "").map((col) => (
                                <SelectItem key={col.field} value={col.field}>
                                  {col.label}
                                </SelectItem>
                              ))}
                            </SelectContent>
                          </Select>
                        </div>

                        <div className="space-y-1">
                          <Label className="text-[10px]">라벨</Label>
                          <Input
                            value={field.label}
                            onChange={(e) => {
                              const fields = [...(localConfig.summaryConfig?.fields || [])];
                              fields[index] = { ...fields[index], label: e.target.value };
                              updateConfig({
                                summaryConfig: {
                                  ...localConfig.summaryConfig,
                                  enabled: true,
                                  fields,
                                }
                              });
                            }}
                            placeholder="합계 라벨"
                            className="h-8 text-xs"
                          />
                        </div>

                        <div className="space-y-1">
                          <Label className="text-[10px]">계산 방식</Label>
                          <Select
                            value={field.type || "sum"}
                            onValueChange={(value) => {
                              const fields = [...(localConfig.summaryConfig?.fields || [])];
                              fields[index] = { ...fields[index], type: value as SummaryFieldConfig["type"] };
                              updateConfig({
                                summaryConfig: {
                                  ...localConfig.summaryConfig,
                                  enabled: true,
                                  fields,
                                }
                              });
                            }}
                          >
                            <SelectTrigger className="h-8 text-xs">
                              <SelectValue />
                            </SelectTrigger>
                            <SelectContent>
                              <SelectItem value="sum">합계 (SUM)</SelectItem>
                              <SelectItem value="avg">평균 (AVG)</SelectItem>
                              <SelectItem value="count">개수 (COUNT)</SelectItem>
                              <SelectItem value="min">최소값 (MIN)</SelectItem>
                              <SelectItem value="max">최대값 (MAX)</SelectItem>
                            </SelectContent>
                          </Select>
                        </div>

                        <div className="space-y-1">
                          <Label className="text-[10px]">표시 형식</Label>
                          <Select
                            value={field.format || "number"}
                            onValueChange={(value) => {
                              const fields = [...(localConfig.summaryConfig?.fields || [])];
                              fields[index] = { ...fields[index], format: value as SummaryFieldConfig["format"] };
                              updateConfig({
                                summaryConfig: {
                                  ...localConfig.summaryConfig,
                                  enabled: true,
                                  fields,
                                }
                              });
                            }}
                          >
                            <SelectTrigger className="h-8 text-xs">
                              <SelectValue />
                            </SelectTrigger>
                            <SelectContent>
                              <SelectItem value="number">숫자</SelectItem>
                              <SelectItem value="currency">통화 (원)</SelectItem>
                              <SelectItem value="percent">퍼센트 (%)</SelectItem>
                            </SelectContent>
                          </Select>
                        </div>
                      </div>

                      <div className="flex items-center justify-between">
                        <Label className="text-[10px]">강조 표시</Label>
                        <Switch
                          checked={field.highlight ?? false}
                          onCheckedChange={(checked) => {
                            const fields = [...(localConfig.summaryConfig?.fields || [])];
                            fields[index] = { ...fields[index], highlight: checked };
                            updateConfig({
                              summaryConfig: {
                                ...localConfig.summaryConfig,
                                enabled: true,
                                fields,
                              }
                            });
                          }}
                        />
                      </div>
                    </div>
                  ))}
                </div>
              ) : (
                <div className="p-4 border-2 border-dashed rounded-lg text-center">
                  <p className="text-xs text-muted-foreground">
                    합계 필드를 추가하세요
                  </p>
                </div>
              )}
            </div>

            <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-1">사용 예시</p>
              <div className="space-y-1 text-[10px] text-muted-foreground">
                <p>• 공급가액 합계: supply_amount 필드의 SUM</p>
                <p>• 세액 합계: tax_amount 필드의 SUM</p>
                <p>• 총액: supply_amount + tax_amount (수식 필드)</p>
              </div>
            </div>
          </>
        )}
      </div>

      {/* 사용 안내 */}
      <div className="p-4 bg-muted rounded-md text-xs text-muted-foreground">
        <p className="font-medium mb-2">SimpleRepeaterTable 사용법:</p>
        <ul className="space-y-1 list-disc list-inside">
          <li>주어진 데이터를 표시하고 편집하는 경량 테이블입니다</li>
          <li><strong>행 추가 허용</strong> 옵션으로 사용자가 새 행을 추가할 수 있습니다</li>
          <li>주로 EditModal과 함께 사용되며, 선택된 데이터를 일괄 수정할 때 유용합니다</li>
          <li>readOnly 옵션으로 전체 테이블을 읽기 전용으로 만들 수 있습니다</li>
          <li>자동 계산 규칙을 통해 수량 * 단가 = 금액 같은 계산을 자동화할 수 있습니다</li>
          <li><strong>합계 설정</strong>으로 테이블 하단에 합계/평균 등을 표시할 수 있습니다</li>
        </ul>
      </div>
    </div>
  );
}