"use client";

import React, { useState, useEffect } from "react";
import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";
import { Label } from "@/components/ui/label";
import { Switch } from "@/components/ui/switch";
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogDescription, DialogFooter } from "@/components/ui/dialog";
import { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from "@/components/ui/accordion";
import { ScrollArea } from "@/components/ui/scroll-area";
import { Separator } from "@/components/ui/separator";
import { Plus, Trash2, Settings as SettingsIcon } from "lucide-react";
import { cn } from "@/lib/utils";
import {
  FormFieldConfig,
  LinkedFieldMapping,
  FIELD_TYPE_OPTIONS,
  SELECT_OPTION_TYPE_OPTIONS,
  LINKED_FIELD_DISPLAY_FORMAT_OPTIONS,
} from "../types";
import { apiClient } from "@/lib/api/client";

// 카테고리 컬럼 타입 (table_column_category_values 용)
interface CategoryColumnOption {
  tableName: string;
  columnName: string;
  columnLabel: string;
  valueCount: number;
  // 조합키: tableName.columnName
  key: string;
}

// 도움말 텍스트 컴포넌트
const HelpText = ({ children }: { children: React.ReactNode }) => (
  <p className="text-[10px] text-muted-foreground mt-0.5">{children}</p>
);

interface FieldDetailSettingsModalProps {
  open: boolean;
  onOpenChange: (open: boolean) => void;
  field: FormFieldConfig;
  onSave: (updates: Partial<FormFieldConfig>) => void;
  tables: { name: string; label: string }[];
  tableColumns: { [tableName: string]: { name: string; type: string; label: string }[] };
  numberingRules: { id: string; name: string }[];
  onLoadTableColumns: (tableName: string) => void;
}

export function FieldDetailSettingsModal({
  open,
  onOpenChange,
  field,
  onSave,
  tables,
  tableColumns,
  numberingRules,
  onLoadTableColumns,
}: FieldDetailSettingsModalProps) {
  // 로컬 상태로 필드 설정 관리
  const [localField, setLocalField] = useState<FormFieldConfig>(field);
  
  // 전체 카테고리 컬럼 목록 상태
  const [categoryColumns, setCategoryColumns] = useState<CategoryColumnOption[]>([]);
  const [loadingCategoryColumns, setLoadingCategoryColumns] = useState(false);

  // open이 변경될 때마다 필드 데이터 동기화
  useEffect(() => {
    if (open) {
      setLocalField(field);
    }
  }, [open, field]);
  
  // 모든 카테고리 컬럼 목록 로드 (모달 열릴 때)
  useEffect(() => {
    const loadAllCategoryColumns = async () => {
      if (!open) return;
      
      setLoadingCategoryColumns(true);
      try {
        // /api/table-categories/all-columns API 호출
        const response = await apiClient.get("/table-categories/all-columns");
        if (response.data?.success && response.data?.data) {
          // 중복 제거를 위해 Map 사용
          const uniqueMap = new Map<string, CategoryColumnOption>();
          response.data.data.forEach((col: any) => {
            const tableName = col.tableName || col.table_name;
            const columnName = col.columnName || col.column_name;
            const key = `${tableName}.${columnName}`;
            
            // 이미 존재하는 경우 valueCount가 더 큰 것을 유지
            if (!uniqueMap.has(key)) {
              uniqueMap.set(key, {
                tableName,
                columnName,
                columnLabel: col.columnLabel || col.column_label || columnName,
                valueCount: parseInt(col.valueCount || col.value_count || "0"),
                key,
              });
            }
          });
          
          setCategoryColumns(Array.from(uniqueMap.values()));
        } else {
          setCategoryColumns([]);
        }
      } catch (error) {
        setCategoryColumns([]);
      } finally {
        setLoadingCategoryColumns(false);
      }
    };
    
    loadAllCategoryColumns();
  }, [open]);

  // 필드 업데이트 함수
  const updateField = (updates: Partial<FormFieldConfig>) => {
    setLocalField((prev) => ({ ...prev, ...updates }));
  };

  // 저장 함수
  const handleSave = () => {
    onSave(localField);
    onOpenChange(false);
  };

  // 연결 필드 매핑 추가
  const addLinkedFieldMapping = () => {
    const newMapping: LinkedFieldMapping = {
      sourceColumn: "",
      targetColumn: "",
    };
    const mappings = [...(localField.linkedFieldGroup?.mappings || []), newMapping];
    updateField({
      linkedFieldGroup: {
        ...localField.linkedFieldGroup,
        enabled: true,
        mappings,
      },
    });
  };

  // 연결 필드 매핑 삭제
  const removeLinkedFieldMapping = (index: number) => {
    const mappings = [...(localField.linkedFieldGroup?.mappings || [])];
    mappings.splice(index, 1);
    updateField({
      linkedFieldGroup: {
        ...localField.linkedFieldGroup,
        mappings,
      },
    });
  };

  // 연결 필드 매핑 업데이트
  const updateLinkedFieldMapping = (index: number, updates: Partial<LinkedFieldMapping>) => {
    const mappings = [...(localField.linkedFieldGroup?.mappings || [])];
    mappings[index] = { ...mappings[index], ...updates };
    updateField({
      linkedFieldGroup: {
        ...localField.linkedFieldGroup,
        mappings,
      },
    });
  };

  // 소스 테이블 컬럼 목록 (연결 필드용)
  const sourceTableColumns = localField.linkedFieldGroup?.sourceTable
    ? tableColumns[localField.linkedFieldGroup.sourceTable] || []
    : [];

  // Select 옵션의 참조 테이블 컬럼 목록
  const selectTableColumns = localField.selectOptions?.tableName
    ? tableColumns[localField.selectOptions.tableName] || []
    : [];

  return (
    <Dialog open={open} onOpenChange={onOpenChange}>
      <DialogContent className="max-w-[95vw] sm:max-w-[700px] max-h-[85vh] flex flex-col p-0">
        <DialogHeader className="px-4 pt-4 pb-2 border-b shrink-0">
          <DialogTitle className="text-base">필드 상세 설정: {localField.label}</DialogTitle>
          <DialogDescription className="text-xs">
            필드의 타입, 동작 방식, 고급 옵션을 설정합니다.
          </DialogDescription>
        </DialogHeader>

        <div className="flex-1 overflow-hidden px-4">
          <ScrollArea className="h-[calc(85vh-180px)]">
            <div className="space-y-4 py-3 pr-3">
              {/* 기본 정보 섹션 */}
              <div className="space-y-3 border rounded-lg p-3 bg-card">
                <h3 className="text-xs font-semibold">기본 정보</h3>

                <div>
                  <Label className="text-[10px]">필드 타입</Label>
                  <Select
                    value={localField.fieldType}
                    onValueChange={(value) =>
                      updateField({
                        fieldType: value as FormFieldConfig["fieldType"],
                      })
                    }
                  >
                    <SelectTrigger className="h-7 text-xs mt-1">
                      <SelectValue />
                    </SelectTrigger>
                    <SelectContent>
                      {FIELD_TYPE_OPTIONS.map((opt) => (
                        <SelectItem key={opt.value} value={opt.value}>
                          {opt.label}
                        </SelectItem>
                      ))}
                    </SelectContent>
                  </Select>
                  <HelpText>입력 필드의 유형을 선택하세요 (텍스트, 숫자, 날짜 등)</HelpText>
                </div>

                <div>
                  <Label className="text-[10px]">그리드 너비</Label>
                  <Select
                    value={String(localField.gridSpan || 6)}
                    onValueChange={(value) => updateField({ gridSpan: parseInt(value) })}
                  >
                    <SelectTrigger className="h-7 text-xs mt-1">
                      <SelectValue />
                    </SelectTrigger>
                    <SelectContent>
                      <SelectItem value="3">1/4 너비</SelectItem>
                      <SelectItem value="4">1/3 너비</SelectItem>
                      <SelectItem value="6">1/2 너비</SelectItem>
                      <SelectItem value="8">2/3 너비</SelectItem>
                      <SelectItem value="12">전체 너비</SelectItem>
                    </SelectContent>
                  </Select>
                  <HelpText>폼에서 차지할 너비를 설정합니다 (12칸 그리드 기준)</HelpText>
                </div>

                <div>
                  <Label className="text-[10px]">플레이스홀더</Label>
                  <Input
                    value={localField.placeholder || ""}
                    onChange={(e) => updateField({ placeholder: e.target.value })}
                    placeholder="입력 힌트"
                    className="h-7 text-xs mt-1"
                  />
                  <HelpText>입력 필드에 표시될 힌트 텍스트입니다</HelpText>
                </div>
              </div>

              {/* 옵션 토글 */}
              <div className="space-y-2 border rounded-lg p-3 bg-card">
                <h3 className="text-xs font-semibold mb-2">필드 옵션</h3>

                <div className="flex items-center justify-between">
                  <span className="text-[10px]">필수 입력</span>
                  <Switch
                    checked={localField.required || false}
                    onCheckedChange={(checked) => updateField({ required: checked })}
                  />
                </div>
                <HelpText>이 필드를 필수 입력으로 만듭니다</HelpText>

                <Separator className="my-2" />

                <div className="flex items-center justify-between">
                  <span className="text-[10px]">비활성화 (읽기전용)</span>
                  <Switch
                    checked={localField.disabled || false}
                    onCheckedChange={(checked) => updateField({ disabled: checked })}
                  />
                </div>
                <HelpText>필드를 비활성화하여 수정할 수 없게 만듭니다</HelpText>

                <Separator className="my-2" />

                <div className="flex items-center justify-between">
                  <span className="text-[10px]">숨김 (자동 저장만)</span>
                  <Switch
                    checked={localField.hidden || false}
                    onCheckedChange={(checked) => updateField({ hidden: checked })}
                  />
                </div>
                <HelpText>화면에 표시하지 않지만 값은 저장됩니다</HelpText>

                <Separator className="my-2" />

                <div className="flex items-center justify-between">
                  <span className="text-[10px]">부모에서 값 받기</span>
                  <Switch
                    checked={localField.receiveFromParent || false}
                    onCheckedChange={(checked) => updateField({ receiveFromParent: checked })}
                  />
                </div>
                <HelpText>부모 화면에서 전달받은 값으로 자동 채워집니다</HelpText>
              </div>

              {/* Accordion으로 고급 설정 */}
              <Accordion type="single" collapsible className="space-y-2">
                {/* Select 옵션 설정 */}
                {localField.fieldType === "select" && (
                  <AccordionItem value="select-options" className="border rounded-lg">
                    <AccordionTrigger className="px-3 py-2 text-xs font-medium hover:no-underline bg-green-50/50">
                      <div className="flex items-center gap-2">
                        <SettingsIcon className="h-3.5 w-3.5 text-green-600" />
                        <span>Select 옵션 설정</span>
                        {localField.selectOptions?.type && (
                          <span className="text-[9px] text-muted-foreground">
                            ({localField.selectOptions.type === "code" ? "공통코드" : "직접 입력"})
                          </span>
                        )}
                      </div>
                    </AccordionTrigger>
                    <AccordionContent className="px-3 pb-3 space-y-3">
                      <HelpText>드롭다운에 표시될 옵션 목록을 어디서 가져올지 설정합니다.</HelpText>

                      <div>
                        <Label className="text-[10px]">옵션 타입</Label>
                        <Select
                          value={localField.selectOptions?.type || "static"}
                          onValueChange={(value) =>
                            updateField({
                              selectOptions: {
                                ...localField.selectOptions,
                                type: value as "static" | "code",
                              },
                            })
                          }
                        >
                          <SelectTrigger className="h-7 text-xs mt-1">
                            <SelectValue />
                          </SelectTrigger>
                          <SelectContent>
                            {SELECT_OPTION_TYPE_OPTIONS.map((opt) => (
                              <SelectItem key={opt.value} value={opt.value}>
                                {opt.label}
                              </SelectItem>
                            ))}
                          </SelectContent>
                        </Select>
                      </div>

                      {localField.selectOptions?.type === "table" && (
                        <div className="space-y-3 pt-2 border-t">
                          <HelpText>테이블 참조: DB 테이블에서 옵션 목록을 가져옵니다.</HelpText>

                          <div>
                            <Label className="text-[10px]">참조 테이블</Label>
                            <Select
                              value={localField.selectOptions?.tableName || ""}
                              onValueChange={(value) => {
                                updateField({
                                  selectOptions: {
                                    ...localField.selectOptions,
                                    tableName: value,
                                  },
                                });
                                onLoadTableColumns(value);
                              }}
                            >
                              <SelectTrigger className="h-7 text-xs mt-1">
                                <SelectValue placeholder="테이블 선택" />
                              </SelectTrigger>
                              <SelectContent>
                                {tables.map((t) => (
                                  <SelectItem key={t.name} value={t.name}>
                                    {t.label || t.name}
                                  </SelectItem>
                                ))}
                              </SelectContent>
                            </Select>
                            <HelpText>드롭다운 목록을 가져올 테이블을 선택하세요</HelpText>
                          </div>

                          <div>
                            <Label className="text-[10px]">조인할 컬럼 (값)</Label>
                            {selectTableColumns.length > 0 ? (
                              <Select
                                value={localField.selectOptions?.valueColumn || ""}
                                onValueChange={(value) =>
                                  updateField({
                                    selectOptions: {
                                      ...localField.selectOptions,
                                      valueColumn: value,
                                    },
                                  })
                                }
                              >
                                <SelectTrigger className="h-7 text-xs mt-1">
                                  <SelectValue placeholder="컬럼 선택" />
                                </SelectTrigger>
                                <SelectContent>
                                  {selectTableColumns.map((col) => (
                                    <SelectItem key={col.name} value={col.name}>
                                      {col.name}
                                      {col.label !== col.name && ` (${col.label})`}
                                    </SelectItem>
                                  ))}
                                </SelectContent>
                              </Select>
                            ) : (
                              <Input
                                value={localField.selectOptions?.valueColumn || ""}
                                onChange={(e) =>
                                  updateField({
                                    selectOptions: {
                                      ...localField.selectOptions,
                                      valueColumn: e.target.value,
                                    },
                                  })
                                }
                                placeholder="customer_code"
                                className="h-7 text-xs mt-1"
                              />
                            )}
                            <HelpText>
                              참조 테이블에서 조인할 컬럼 (기본키)
                              <br />
                              예: customer_code, customer_id
                            </HelpText>
                          </div>

                          <div>
                            <Label className="text-[10px]">표시할 컬럼 (라벨)</Label>
                            {selectTableColumns.length > 0 ? (
                              <Select
                                value={localField.selectOptions?.labelColumn || ""}
                                onValueChange={(value) =>
                                  updateField({
                                    selectOptions: {
                                      ...localField.selectOptions,
                                      labelColumn: value,
                                    },
                                  })
                                }
                              >
                                <SelectTrigger className="h-7 text-xs mt-1">
                                  <SelectValue placeholder="컬럼 선택" />
                                </SelectTrigger>
                                <SelectContent>
                                  {selectTableColumns.map((col) => (
                                    <SelectItem key={col.name} value={col.name}>
                                      {col.name}
                                      {col.label !== col.name && ` (${col.label})`}
                                    </SelectItem>
                                  ))}
                                </SelectContent>
                              </Select>
                            ) : (
                              <Input
                                value={localField.selectOptions?.labelColumn || ""}
                                onChange={(e) =>
                                  updateField({
                                    selectOptions: {
                                      ...localField.selectOptions,
                                      labelColumn: e.target.value,
                                    },
                                  })
                                }
                                placeholder="customer_name"
                                className="h-7 text-xs mt-1"
                              />
                            )}
                            <HelpText>
                              드롭다운에 표시할 컬럼 (이름)
                              <br />
                              예: customer_name, dept_name
                            </HelpText>
                          </div>

                          <div>
                            <Label className="text-[10px]">저장할 컬럼</Label>
                            {selectTableColumns.length > 0 ? (
                              <Select
                                value={localField.selectOptions?.saveColumn || ""}
                                onValueChange={(value) =>
                                  updateField({
                                    selectOptions: {
                                      ...localField.selectOptions,
                                      saveColumn: value,
                                    },
                                  })
                                }
                              >
                                <SelectTrigger className="h-7 text-xs mt-1">
                                  <SelectValue placeholder="컬럼 선택 (미선택 시 조인 컬럼 저장)" />
                                </SelectTrigger>
                                <SelectContent>
                                  <SelectItem value="">조인 컬럼 사용 (기본)</SelectItem>
                                  {selectTableColumns.map((col) => (
                                    <SelectItem key={col.name} value={col.name}>
                                      {col.name}
                                      {col.label !== col.name && ` (${col.label})`}
                                    </SelectItem>
                                  ))}
                                </SelectContent>
                              </Select>
                            ) : (
                              <Input
                                value={localField.selectOptions?.saveColumn || ""}
                                onChange={(e) =>
                                  updateField({
                                    selectOptions: {
                                      ...localField.selectOptions,
                                      saveColumn: e.target.value,
                                    },
                                  })
                                }
                                placeholder="비워두면 조인 컬럼 저장"
                                className="h-7 text-xs mt-1"
                              />
                            )}
                            <HelpText>
                              실제로 DB에 저장할 컬럼을 선택하세요
                              <br />
                              예: customer_name 저장 (비워두면 customer_code 저장)
                            </HelpText>
                          </div>
                        </div>
                      )}

                      {localField.selectOptions?.type === "code" && (
                        <div className="space-y-2 pt-2 border-t">
                          <HelpText>공통코드: 코드설정에서 등록한 카테고리 값을 가져옵니다.</HelpText>
                          <div>
                            <Label className="text-[10px]">카테고리 선택</Label>
                            <Select
                              value={localField.selectOptions?.categoryKey || ""}
                              onValueChange={(value) =>
                                updateField({
                                  selectOptions: {
                                    ...localField.selectOptions,
                                    categoryKey: value,
                                  },
                                })
                              }
                            >
                              <SelectTrigger className="h-7 text-xs mt-1">
                                <SelectValue placeholder={loadingCategoryColumns ? "로딩 중..." : "카테고리 선택"} />
                              </SelectTrigger>
                              <SelectContent>
                                {categoryColumns.map((col, idx) => (
                                  <SelectItem key={`${col.key}-${idx}`} value={col.key}>
                                    {col.columnLabel} - {col.tableName} ({col.valueCount}개)
                                  </SelectItem>
                                ))}
                              </SelectContent>
                            </Select>
                            <HelpText>코드설정에서 등록한 카테고리를 선택하세요</HelpText>
                          </div>
                        </div>
                      )}
                    </AccordionContent>
                  </AccordionItem>
                )}

                {/* 연결 필드 설정 */}
                <AccordionItem value="linked-fields" className="border rounded-lg">
                  <AccordionTrigger className="px-3 py-2 text-xs font-medium hover:no-underline bg-orange-50/50">
                    <div className="flex items-center gap-2">
                      <SettingsIcon className="h-3.5 w-3.5 text-orange-600" />
                      <span>연결 필드 설정 (다중 컬럼 저장)</span>
                      {localField.linkedFieldGroup?.enabled && (
                        <span className="text-[9px] text-muted-foreground">
                          ({(localField.linkedFieldGroup?.mappings || []).length}개)
                        </span>
                      )}
                    </div>
                  </AccordionTrigger>
                  <AccordionContent className="px-3 pb-3 space-y-3">
                    <div className="flex items-center justify-between">
                      <span className="text-[10px] font-medium">연결 필드 사용</span>
                      <Switch
                        checked={localField.linkedFieldGroup?.enabled || false}
                        onCheckedChange={(checked) =>
                          updateField({
                            linkedFieldGroup: {
                              ...localField.linkedFieldGroup,
                              enabled: checked,
                            },
                          })
                        }
                      />
                    </div>
                    <HelpText>
                      드롭다운 선택 시 다른 테이블의 값도 함께 저장합니다.
                      <br />
                      예: 고객 선택 → 고객코드, 고객명, 연락처를 각각 저장
                    </HelpText>

                    {localField.linkedFieldGroup?.enabled && (
                      <div className="space-y-3 pt-2 border-t">
                        <div>
                          <Label className="text-[10px]">소스 테이블</Label>
                          <Select
                            value={localField.linkedFieldGroup?.sourceTable || ""}
                            onValueChange={(value) => {
                              updateField({
                                linkedFieldGroup: {
                                  ...localField.linkedFieldGroup,
                                  sourceTable: value,
                                },
                              });
                              onLoadTableColumns(value);
                            }}
                          >
                            <SelectTrigger className="h-7 text-xs mt-1">
                              <SelectValue placeholder="테이블 선택" />
                            </SelectTrigger>
                            <SelectContent>
                              {tables.map((t) => (
                                <SelectItem key={t.name} value={t.name}>
                                  {t.label || t.name}
                                </SelectItem>
                              ))}
                            </SelectContent>
                          </Select>
                          <HelpText>값을 가져올 소스 테이블 (예: customer_mng)</HelpText>
                        </div>

                        <div>
                          <Label className="text-[10px]">표시 컬럼</Label>
                          {sourceTableColumns.length > 0 ? (
                            <Select
                              value={localField.linkedFieldGroup?.displayColumn || ""}
                              onValueChange={(value) =>
                                updateField({
                                  linkedFieldGroup: {
                                    ...localField.linkedFieldGroup,
                                    displayColumn: value,
                                  },
                                })
                              }
                            >
                              <SelectTrigger className="h-7 text-xs mt-1">
                                <SelectValue placeholder="컬럼 선택" />
                              </SelectTrigger>
                              <SelectContent>
                                {sourceTableColumns.map((col) => (
                                  <SelectItem key={col.name} value={col.name}>
                                    {col.name}
                                    {col.label !== col.name && ` (${col.label})`}
                                  </SelectItem>
                                ))}
                              </SelectContent>
                            </Select>
                          ) : (
                            <Input
                              value={localField.linkedFieldGroup?.displayColumn || ""}
                              onChange={(e) =>
                                updateField({
                                  linkedFieldGroup: {
                                    ...localField.linkedFieldGroup,
                                    displayColumn: e.target.value,
                                  },
                                })
                              }
                              placeholder="customer_name"
                              className="h-7 text-xs mt-1"
                            />
                          )}
                          <HelpText>드롭다운에 표시할 컬럼 (예: customer_name)</HelpText>
                        </div>

                        <div>
                          <Label className="text-[10px]">표시 형식</Label>
                          <Select
                            value={localField.linkedFieldGroup?.displayFormat || "name_only"}
                            onValueChange={(value) =>
                              updateField({
                                linkedFieldGroup: {
                                  ...localField.linkedFieldGroup,
                                  displayFormat: value as "name_only" | "code_name" | "name_code",
                                },
                              })
                            }
                          >
                            <SelectTrigger className="h-7 text-xs mt-1">
                              <SelectValue />
                            </SelectTrigger>
                            <SelectContent>
                              {LINKED_FIELD_DISPLAY_FORMAT_OPTIONS.map((opt) => (
                                <SelectItem key={opt.value} value={opt.value}>
                                  {opt.label}
                                </SelectItem>
                              ))}
                            </SelectContent>
                          </Select>
                          <HelpText>드롭다운에 표시될 형식을 선택하세요</HelpText>
                        </div>

                        <Separator />

                        <div className="space-y-2">
                          <div className="flex items-center justify-between">
                            <Label className="text-[10px] font-medium">컬럼 매핑 목록</Label>
                            <Button size="sm" variant="outline" onClick={addLinkedFieldMapping} className="h-6 text-[9px] px-2">
                              <Plus className="h-3 w-3 mr-1" />
                              매핑 추가
                            </Button>
                          </div>
                          <HelpText>
                            소스 테이블의 컬럼을 현재 폼의 어느 컬럼에 저장할지 매핑합니다.
                            <br />
                            예: customer_code → partner_id, customer_name → partner_name
                          </HelpText>

                          {(localField.linkedFieldGroup?.mappings || []).length === 0 ? (
                            <div className="text-center py-4 border border-dashed rounded-lg">
                              <p className="text-[10px] text-muted-foreground">매핑이 없습니다</p>
                              <p className="text-[9px] text-muted-foreground">위의 "매핑 추가" 버튼을 클릭하세요</p>
                            </div>
                          ) : (
                            <div className="space-y-2">
                              {(localField.linkedFieldGroup?.mappings || []).map((mapping, index) => (
                                <div key={index} className="border rounded-lg p-2 space-y-2 bg-muted/30">
                                  <div className="flex items-center justify-between">
                                    <span className="text-[9px] font-medium text-muted-foreground">매핑 {index + 1}</span>
                                    <Button
                                      size="sm"
                                      variant="ghost"
                                      onClick={() => removeLinkedFieldMapping(index)}
                                      className="h-5 w-5 p-0 text-destructive"
                                    >
                                      <Trash2 className="h-3 w-3" />
                                    </Button>
                                  </div>

                                  <div>
                                    <Label className="text-[9px]">소스 컬럼 (가져올 값)</Label>
                                    {sourceTableColumns.length > 0 ? (
                                      <Select
                                        value={mapping.sourceColumn || ""}
                                        onValueChange={(value) =>
                                          updateLinkedFieldMapping(index, { sourceColumn: value })
                                        }
                                      >
                                        <SelectTrigger className="h-6 text-[9px] mt-0.5">
                                          <SelectValue placeholder="컬럼 선택" />
                                        </SelectTrigger>
                                        <SelectContent>
                                          {sourceTableColumns.map((col) => (
                                            <SelectItem key={col.name} value={col.name}>
                                              {col.name}
                                              {col.label !== col.name && ` (${col.label})`}
                                            </SelectItem>
                                          ))}
                                        </SelectContent>
                                      </Select>
                                    ) : (
                                      <Input
                                        value={mapping.sourceColumn || ""}
                                        onChange={(e) =>
                                          updateLinkedFieldMapping(index, { sourceColumn: e.target.value })
                                        }
                                        placeholder="customer_code"
                                        className="h-6 text-[9px] mt-0.5"
                                      />
                                    )}
                                  </div>

                                  <div className="text-center text-[9px] text-muted-foreground">↓</div>

                                  <div>
                                    <Label className="text-[9px]">타겟 컬럼 (저장할 위치)</Label>
                                    <Input
                                      value={mapping.targetColumn || ""}
                                      onChange={(e) =>
                                        updateLinkedFieldMapping(index, { targetColumn: e.target.value })
                                      }
                                      placeholder="partner_id"
                                      className="h-6 text-[9px] mt-0.5"
                                    />
                                  </div>
                                </div>
                              ))}
                            </div>
                          )}
                        </div>
                      </div>
                    )}
                  </AccordionContent>
                </AccordionItem>

                {/* 채번규칙 설정 */}
                <AccordionItem value="numbering-rule" className="border rounded-lg">
                  <AccordionTrigger className="px-3 py-2 text-xs font-medium hover:no-underline bg-blue-50/50">
                    <div className="flex items-center gap-2">
                      <SettingsIcon className="h-3.5 w-3.5 text-blue-600" />
                      <span>채번규칙 설정</span>
                      {localField.numberingRule?.enabled && (
                        <span className="text-[9px] text-muted-foreground">(활성화됨)</span>
                      )}
                    </div>
                  </AccordionTrigger>
                  <AccordionContent className="px-3 pb-3 space-y-3">
                    <div className="flex items-center justify-between">
                      <span className="text-[10px] font-medium">채번규칙 사용</span>
                      <Switch
                        checked={localField.numberingRule?.enabled || false}
                        onCheckedChange={(checked) =>
                          updateField({
                            numberingRule: {
                              ...localField.numberingRule,
                              enabled: checked,
                            },
                          })
                        }
                      />
                    </div>
                    <HelpText>
                      자동으로 코드/번호를 생성합니다.
                      <br />
                      예: EMP-001, ORD-20240101-001
                    </HelpText>

                    {localField.numberingRule?.enabled && (
                      <div className="space-y-2 pt-2 border-t">
                        <div>
                          <Label className="text-[10px]">채번규칙 선택</Label>
                          <Select
                            value={localField.numberingRule?.ruleId || ""}
                            onValueChange={(value) =>
                              updateField({
                                numberingRule: {
                                  ...localField.numberingRule,
                                  ruleId: value,
                                },
                              })
                            }
                          >
                            <SelectTrigger className="h-7 text-xs mt-1">
                              <SelectValue placeholder="규칙 선택" />
                            </SelectTrigger>
                            <SelectContent>
                              {numberingRules.length === 0 ? (
                                <div className="px-2 py-1.5 text-xs text-muted-foreground">
                                  등록된 채번규칙이 없습니다
                                </div>
                              ) : (
                                numberingRules.map((rule) => (
                                  <SelectItem key={rule.id} value={rule.id}>
                                    {rule.name}
                                  </SelectItem>
                                ))
                              )}
                            </SelectContent>
                          </Select>
                          <HelpText>사용할 채번규칙을 선택하세요</HelpText>
                        </div>

                        <Separator className="my-2" />

                        <div className="flex items-center justify-between">
                          <span className="text-[10px]">사용자 수정 가능</span>
                          <Switch
                            checked={localField.numberingRule?.editable || false}
                            onCheckedChange={(checked) =>
                              updateField({
                                numberingRule: {
                                  ...localField.numberingRule,
                                  editable: checked,
                                },
                              })
                            }
                          />
                        </div>
                        <HelpText>생성된 번호를 사용자가 수정할 수 있게 합니다</HelpText>

                        <Separator className="my-2" />

                        <div className="flex items-center justify-between">
                          <span className="text-[10px]">저장 시점에 생성</span>
                          <Switch
                            checked={localField.numberingRule?.generateOnSave || false}
                            onCheckedChange={(checked) =>
                              updateField({
                                numberingRule: {
                                  ...localField.numberingRule,
                                  generateOnSave: checked,
                                  generateOnOpen: !checked,
                                },
                              })
                            }
                          />
                        </div>
                        <HelpText>OFF: 모달 열릴 때 생성 / ON: 저장 버튼 클릭 시 생성</HelpText>
                      </div>
                    )}
                  </AccordionContent>
                </AccordionItem>
              </Accordion>
            </div>
          </ScrollArea>
        </div>

        <DialogFooter className="px-4 py-3 border-t shrink-0">
          <Button variant="outline" onClick={() => onOpenChange(false)} className="h-9 text-sm">
            취소
          </Button>
          <Button onClick={handleSave} className="h-9 text-sm">
            저장
          </Button>
        </DialogFooter>
      </DialogContent>
    </Dialog>
  );
}