ERP-node/frontend/lib/registry/components/split-panel-layout2/SplitPanelLayout2ConfigPanel.tsx

"use client";

import React, { useState, useEffect, useCallback } from "react";
import { Label } from "@/components/ui/label";
import { Input } from "@/components/ui/input";
import { Switch } from "@/components/ui/switch";
import { Button } from "@/components/ui/button";
import {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from "@/components/ui/select";
import {
  Popover,
  PopoverContent,
  PopoverTrigger,
} from "@/components/ui/popover";
import {
  Command,
  CommandEmpty,
  CommandGroup,
  CommandInput,
  CommandItem,
  CommandList,
} from "@/components/ui/command";
import { Check, ChevronsUpDown, Plus, X } from "lucide-react";
import { cn } from "@/lib/utils";
import { apiClient } from "@/lib/api/client";
import type { SplitPanelLayout2Config, ColumnConfig, DataTransferField, JoinTableConfig } from "./types";

// lodash set 대체 함수
const setPath = (obj: any, path: string, value: any): any => {
  const keys = path.split(".");
  const result = { ...obj };
  let current = result;

  for (let i = 0; i < keys.length - 1; i++) {
    const key = keys[i];
    current[key] = current[key] ? { ...current[key] } : {};
    current = current[key];
  }

  current[keys[keys.length - 1]] = value;
  return result;
};

interface SplitPanelLayout2ConfigPanelProps {
  config: SplitPanelLayout2Config;
  onChange: (config: SplitPanelLayout2Config) => void;
}

interface TableInfo {
  table_name: string;
  table_comment?: string;
}

interface ColumnInfo {
  column_name: string;
  data_type: string;
  column_comment?: string;
}

interface ScreenInfo {
  screen_id: number;
  screen_name: string;
  screen_code: string;
}

export const SplitPanelLayout2ConfigPanel: React.FC<SplitPanelLayout2ConfigPanelProps> = ({
  config,
  onChange,
}) => {
  // updateConfig 헬퍼 함수: 경로 기반으로 config를 업데이트
  const updateConfig = useCallback((path: string, value: any) => {
    console.log(`[SplitPanelLayout2ConfigPanel] updateConfig: ${path} =`, value);
    const newConfig = setPath(config, path, value);
    console.log("[SplitPanelLayout2ConfigPanel] newConfig:", newConfig);
    onChange(newConfig);
  }, [config, onChange]);

  // 상태
  const [tables, setTables] = useState<TableInfo[]>([]);
  const [leftColumns, setLeftColumns] = useState<ColumnInfo[]>([]);
  const [rightColumns, setRightColumns] = useState<ColumnInfo[]>([]);
  const [screens, setScreens] = useState<ScreenInfo[]>([]);
  const [tablesLoading, setTablesLoading] = useState(false);
  const [screensLoading, setScreensLoading] = useState(false);

  // Popover 상태
  const [leftTableOpen, setLeftTableOpen] = useState(false);
  const [rightTableOpen, setRightTableOpen] = useState(false);
  const [leftModalOpen, setLeftModalOpen] = useState(false);
  const [rightModalOpen, setRightModalOpen] = useState(false);

  // 테이블 목록 로드
  const loadTables = useCallback(async () => {
    setTablesLoading(true);
    try {
      const response = await apiClient.get("/table-management/tables");
      console.log("[loadTables] API 응답:", response.data);
      
      let tableList: any[] = [];
      if (response.data?.success && Array.isArray(response.data?.data)) {
        tableList = response.data.data;
      } else if (Array.isArray(response.data?.data)) {
        tableList = response.data.data;
      } else if (Array.isArray(response.data)) {
        tableList = response.data;
      }
      
      console.log("[loadTables] 추출된 테이블 목록:", tableList);
      
      if (tableList.length > 0) {
        // 백엔드에서 카멜케이스(tableName)로 반환하므로 둘 다 처리
        const transformedTables = tableList.map((t: any) => ({
          table_name: t.tableName ?? t.table_name ?? t.name ?? "",
          table_comment: t.displayName ?? t.table_comment ?? t.description ?? "",
        }));
        console.log("[loadTables] 변환된 테이블 목록:", transformedTables);
        setTables(transformedTables);
      } else {
        console.warn("[loadTables] 테이블 목록이 비어있습니다");
        setTables([]);
      }
    } catch (error) {
      console.error("테이블 목록 로드 실패:", error);
      setTables([]);
    } finally {
      setTablesLoading(false);
    }
  }, []);

  // 화면 목록 로드
  const loadScreens = useCallback(async () => {
    setScreensLoading(true);
    try {
      // size를 크게 설정하여 모든 화면 가져오기
      const response = await apiClient.get("/screen-management/screens?size=1000");
      console.log("[loadScreens] API 응답:", response.data);
      
      // API 응답 구조: { success, data: [...], total, page, size }
      let screenList: any[] = [];
      if (response.data?.success && Array.isArray(response.data?.data)) {
        screenList = response.data.data;
      } else if (Array.isArray(response.data?.data)) {
        screenList = response.data.data;
      } else if (Array.isArray(response.data)) {
        screenList = response.data;
      }
      
      console.log("[loadScreens] 추출된 화면 목록:", screenList);
      
      if (screenList.length > 0) {
        // 백엔드에서 카멜케이스(screenId, screenName)로 반환하므로 둘 다 처리
        const transformedScreens = screenList.map((s: any) => ({
          screen_id: s.screenId ?? s.screen_id ?? s.id,
          screen_name: s.screenName ?? s.screen_name ?? s.name ?? `화면 ${s.screenId || s.screen_id || s.id}`,
          screen_code: s.screenCode ?? s.screen_code ?? s.code ?? "",
        }));
        console.log("[loadScreens] 변환된 화면 목록:", transformedScreens);
        setScreens(transformedScreens);
      } else {
        console.warn("[loadScreens] 화면 목록이 비어있습니다");
        setScreens([]);
      }
    } catch (error) {
      console.error("화면 목록 로드 실패:", error);
      setScreens([]);
    } finally {
      setScreensLoading(false);
    }
  }, []);

  // 컬럼 목록 로드
  const loadColumns = useCallback(async (tableName: string, side: "left" | "right") => {
    if (!tableName) return;
    try {
      const response = await apiClient.get(`/table-management/tables/${tableName}/columns?size=200`);
      console.log(`[loadColumns] ${side} API 응답:`, response.data);
      
      // API 응답 구조: { success, data: { columns: [...], total, page, totalPages } }
      let columnList: any[] = [];
      if (response.data?.success && response.data?.data?.columns) {
        columnList = response.data.data.columns;
      } else if (Array.isArray(response.data?.data?.columns)) {
        columnList = response.data.data.columns;
      } else if (Array.isArray(response.data?.data)) {
        columnList = response.data.data;
      } else if (Array.isArray(response.data)) {
        columnList = response.data;
      }
      
      console.log(`[loadColumns] ${side} 추출된 컬럼 목록:`, columnList);
      
      if (columnList.length > 0) {
        // 백엔드에서 카멜케이스(columnName)로 반환하므로 둘 다 처리
        const transformedColumns = columnList.map((c: any) => ({
          column_name: c.columnName ?? c.column_name ?? c.name ?? "",
          data_type: c.dataType ?? c.data_type ?? c.type ?? "",
          column_comment: c.displayName ?? c.column_comment ?? c.label ?? "",
        }));
        console.log(`[loadColumns] ${side} 변환된 컬럼 목록:`, transformedColumns);
        
        if (side === "left") {
          setLeftColumns(transformedColumns);
        } else {
          setRightColumns(transformedColumns);
        }
      } else {
        console.warn(`[loadColumns] ${side} 컬럼 목록이 비어있습니다`);
        if (side === "left") {
          setLeftColumns([]);
        } else {
          setRightColumns([]);
        }
      }
    } catch (error) {
      console.error(`${side} 컬럼 목록 로드 실패:`, error);
      if (side === "left") {
        setLeftColumns([]);
      } else {
        setRightColumns([]);
      }
    }
  }, []);

  // 초기 로드
  useEffect(() => {
    loadTables();
    loadScreens();
  }, [loadTables, loadScreens]);

  // 테이블 변경 시 컬럼 로드
  useEffect(() => {
    if (config.leftPanel?.tableName) {
      loadColumns(config.leftPanel.tableName, "left");
    }
  }, [config.leftPanel?.tableName, loadColumns]);

  useEffect(() => {
    if (config.rightPanel?.tableName) {
      loadColumns(config.rightPanel.tableName, "right");
    }
  }, [config.rightPanel?.tableName, loadColumns]);

  // 조인 테이블 컬럼도 우측 컬럼 목록에 추가
  useEffect(() => {
    const loadJoinTableColumns = async () => {
      const joinTables = config.rightPanel?.joinTables || [];
      if (joinTables.length === 0 || !config.rightPanel?.tableName) return;

      // 메인 테이블 컬럼 먼저 로드
      try {
        const mainResponse = await apiClient.get(`/table-management/tables/${config.rightPanel.tableName}/columns?size=200`);
        let mainColumns: ColumnInfo[] = [];
        
        if (mainResponse.data?.success) {
          const columnList = mainResponse.data.data?.columns || mainResponse.data.data || [];
          mainColumns = columnList.map((c: any) => ({
            column_name: c.columnName ?? c.column_name ?? c.name ?? "",
            data_type: c.dataType ?? c.data_type ?? c.type ?? "",
            column_comment: c.displayName ?? c.column_comment ?? c.label ?? "",
          }));
        }

        // 조인 테이블들의 선택된 컬럼 추가
        const joinColumns: ColumnInfo[] = [];
        for (const jt of joinTables) {
          if (jt.joinTable && jt.selectColumns && jt.selectColumns.length > 0) {
            try {
              const joinResponse = await apiClient.get(`/table-management/tables/${jt.joinTable}/columns?size=200`);
              if (joinResponse.data?.success) {
                const columnList = joinResponse.data.data?.columns || joinResponse.data.data || [];
                const transformedColumns = columnList.map((c: any) => ({
                  column_name: c.columnName ?? c.column_name ?? c.name ?? "",
                  data_type: c.dataType ?? c.data_type ?? c.type ?? "",
                  column_comment: c.displayName ?? c.column_comment ?? c.label ?? "",
                }));
                
                // 선택된 컬럼 추가 (테이블명으로 구분)
                jt.selectColumns.forEach((selCol) => {
                  const col = transformedColumns.find((c: ColumnInfo) => c.column_name === selCol);
                  if (col) {
                    joinColumns.push({
                      ...col,
                      column_comment: col.column_comment ? `${col.column_comment} (${jt.joinTable})` : `${col.column_name} (${jt.joinTable})`,
                    });
                  }
                });
              }
            } catch (error) {
              console.error(`조인 테이블 ${jt.joinTable} 컬럼 로드 실패:`, error);
            }
          }
        }

        // 메인 + 조인 컬럼 합치기
        setRightColumns([...mainColumns, ...joinColumns]);
        console.log(`[loadJoinTableColumns] 우측 컬럼 로드 완료: 메인 ${mainColumns.length}개 + 조인 ${joinColumns.length}개`);
      } catch (error) {
        console.error("조인 테이블 컬럼 로드 실패:", error);
      }
    };

    loadJoinTableColumns();
  }, [config.rightPanel?.tableName, config.rightPanel?.joinTables]);

  // 테이블 선택 컴포넌트
  const TableSelect: React.FC<{
    value: string;
    onValueChange: (value: string) => void;
    placeholder: string;
    open: boolean;
    onOpenChange: (open: boolean) => void;
  }> = ({ value, onValueChange, placeholder, open, onOpenChange }) => {
    const selectedTable = tables.find((t) => t.table_name === value);
    
    return (
      <Popover open={open} onOpenChange={onOpenChange}>
        <PopoverTrigger asChild>
          <Button
            variant="outline"
            role="combobox"
            aria-expanded={open}
            disabled={tablesLoading}
            className="h-9 w-full justify-between text-sm"
          >
            {tablesLoading
              ? "로딩 중..."
              : selectedTable
                ? selectedTable.table_comment || selectedTable.table_name
                : value || placeholder}
            <ChevronsUpDown className="ml-2 h-4 w-4 shrink-0 opacity-50" />
          </Button>
        </PopoverTrigger>
        <PopoverContent className="w-full p-0" align="start">
          <Command>
            <CommandInput placeholder="테이블 검색..." className="h-9" />
            <CommandList>
              <CommandEmpty>
                {tables.length === 0 ? "테이블 목록을 불러오는 중..." : "검색 결과가 없습니다"}
              </CommandEmpty>
              <CommandGroup>
                {tables.map((table, index) => (
                  <CommandItem
                    key={`table-${table.table_name || index}`}
                    value={table.table_name}
                    onSelect={(selectedValue) => {
                      onValueChange(selectedValue);
                      onOpenChange(false);
                    }}
                  >
                    <Check
                      className={cn(
                        "mr-2 h-4 w-4",
                        value === table.table_name ? "opacity-100" : "opacity-0"
                      )}
                    />
                    <span className="flex flex-col">
                      <span>{table.table_comment || table.table_name}</span>
                      <span className="text-xs text-muted-foreground">{table.table_name}</span>
                    </span>
                  </CommandItem>
                ))}
              </CommandGroup>
            </CommandList>
          </Command>
        </PopoverContent>
      </Popover>
    );
  };

  // 화면 선택 컴포넌트
  const ScreenSelect: React.FC<{
    value: number | undefined;
    onValueChange: (value: number | undefined) => void;
    placeholder: string;
    open: boolean;
    onOpenChange: (open: boolean) => void;
  }> = ({ value, onValueChange, placeholder, open, onOpenChange }) => {
    const selectedScreen = screens.find((s) => s.screen_id === value);
    
    return (
      <Popover open={open} onOpenChange={onOpenChange}>
        <PopoverTrigger asChild>
          <Button
            variant="outline"
            role="combobox"
            aria-expanded={open}
            disabled={screensLoading}
            className="w-full justify-between h-9 text-sm"
          >
            {screensLoading
              ? "로딩 중..."
              : selectedScreen
                ? selectedScreen.screen_name
                : value
                  ? `화면 ${value}`
                  : placeholder}
            <ChevronsUpDown className="ml-2 h-4 w-4 shrink-0 opacity-50" />
          </Button>
        </PopoverTrigger>
        <PopoverContent className="w-full p-0" align="start">
          <Command>
            <CommandInput placeholder="화면 검색..." className="h-9" />
            <CommandList>
              <CommandEmpty>
                {screens.length === 0 ? "화면 목록을 불러오는 중..." : "검색 결과가 없습니다"}
              </CommandEmpty>
              <CommandGroup>
                {screens.map((screen, index) => (
                  <CommandItem
                    key={`screen-${screen.screen_id ?? index}`}
                    value={`${screen.screen_id}-${screen.screen_name}`}
                    onSelect={(selectedValue: string) => {
                      const screenId = parseInt(selectedValue.split("-")[0]);
                      console.log("[ScreenSelect] onSelect:", { selectedValue, screenId, screen });
                      onValueChange(isNaN(screenId) ? undefined : screenId);
                      onOpenChange(false);
                    }}
                    className="flex items-center"
                  >
                    <div className="flex items-center w-full">
                      <Check
                        className={cn(
                          "mr-2 h-4 w-4 shrink-0",
                          value === screen.screen_id ? "opacity-100" : "opacity-0"
                        )}
                      />
                      <span className="flex flex-col">
                        <span>{screen.screen_name}</span>
                        <span className="text-xs text-muted-foreground">{screen.screen_code}</span>
                      </span>
                    </div>
                  </CommandItem>
                ))}
              </CommandGroup>
            </CommandList>
          </Command>
        </PopoverContent>
      </Popover>
    );
  };

  // 컬럼 선택 컴포넌트
  const ColumnSelect: React.FC<{
    columns: ColumnInfo[];
    value: string;
    onValueChange: (value: string) => void;
    placeholder: string;
    showTableName?: boolean; // 테이블명 표시 여부
    tableName?: string; // 메인 테이블명 (조인 컬럼과 구분용)
  }> = ({ columns, value, onValueChange, placeholder, showTableName = false, tableName }) => {
    // 현재 선택된 값의 라벨 찾기
    const selectedColumn = columns.find((col) => col.column_name === value);
    const displayValue = selectedColumn
      ? selectedColumn.column_comment || selectedColumn.column_name
      : value || "";

    // 컬럼이 조인 테이블에서 온 것인지 확인 (column_comment에 괄호가 있으면 조인 테이블)
    const isJoinColumn = (col: ColumnInfo) => col.column_comment?.includes("(") && col.column_comment?.includes(")");
    
    // 컬럼 표시 텍스트 생성
    const getColumnDisplayText = (col: ColumnInfo) => {
      const label = col.column_comment || col.column_name;
      if (showTableName && tableName && !isJoinColumn(col)) {
        // 메인 테이블 컬럼에 테이블명 추가
        return `${label} (${tableName})`;
      }
      return label;
    };

    return (
      <Select value={value || ""} onValueChange={onValueChange}>
        <SelectTrigger className="h-9 text-sm min-w-[120px]">
          <SelectValue placeholder={placeholder}>
            {displayValue || placeholder}
          </SelectValue>
        </SelectTrigger>
        <SelectContent>
          {columns.length === 0 ? (
            <SelectItem value="_empty" disabled>
              테이블을 먼저 선택하세요
            </SelectItem>
          ) : (
            columns.map((col) => (
              <SelectItem key={col.column_name} value={col.column_name}>
                <span className="flex flex-col">
                  <span>{col.column_comment || col.column_name}</span>
                  {showTableName && (
                    <span className="text-[10px] text-muted-foreground">
                      {isJoinColumn(col) 
                        ? col.column_name 
                        : `${col.column_name} (${tableName || "메인"})`}
                    </span>
                  )}
                </span>
              </SelectItem>
            ))
          )}
        </SelectContent>
      </Select>
    );
  };

  // 조인 테이블 아이템 컴포넌트
  const JoinTableItem: React.FC<{
    index: number;
    joinTable: JoinTableConfig;
    tables: TableInfo[];
    mainTableColumns: ColumnInfo[];
    onUpdate: (field: keyof JoinTableConfig | Partial<JoinTableConfig>, value?: any) => void;
    onRemove: () => void;
  }> = ({ index, joinTable, tables, mainTableColumns, onUpdate, onRemove }) => {
    const [joinTableColumns, setJoinTableColumns] = useState<ColumnInfo[]>([]);
    const [joinTableOpen, setJoinTableOpen] = useState(false);

    // 조인 테이블 선택 시 해당 테이블의 컬럼 로드
    useEffect(() => {
      const loadJoinTableColumns = async () => {
        if (!joinTable.joinTable) {
          setJoinTableColumns([]);
          return;
        }
        try {
          const response = await apiClient.get(`/table-management/tables/${joinTable.joinTable}/columns?size=200`);
          let columnList: any[] = [];
          if (response.data?.success && response.data?.data?.columns) {
            columnList = response.data.data.columns;
          } else if (Array.isArray(response.data?.data?.columns)) {
            columnList = response.data.data.columns;
          } else if (Array.isArray(response.data?.data)) {
            columnList = response.data.data;
          }

          const transformedColumns = columnList.map((c: any) => ({
            column_name: c.columnName ?? c.column_name ?? c.name ?? "",
            data_type: c.dataType ?? c.data_type ?? c.type ?? "",
            column_comment: c.displayName ?? c.column_comment ?? c.label ?? "",
          }));
          setJoinTableColumns(transformedColumns);
        } catch (error) {
          console.error("조인 테이블 컬럼 로드 실패:", error);
          setJoinTableColumns([]);
        }
      };
      loadJoinTableColumns();
    }, [joinTable.joinTable]);

    const selectedTable = tables.find((t) => t.table_name === joinTable.joinTable);

    return (
      <div className="rounded-md border p-3 space-y-3">
        <div className="flex items-center justify-between">
          <span className="text-xs font-medium text-muted-foreground">조인 {index + 1}</span>
          <Button size="sm" variant="ghost" className="h-6 w-6 p-0" onClick={onRemove}>
            <X className="h-3 w-3" />
          </Button>
        </div>

        {/* 조인 테이블 선택 */}
        <div>
          <Label className="text-xs">조인할 테이블</Label>
          <Popover open={joinTableOpen} onOpenChange={setJoinTableOpen}>
            <PopoverTrigger asChild>
              <Button
                variant="outline"
                role="combobox"
                aria-expanded={joinTableOpen}
                className="h-8 w-full justify-between text-xs"
              >
                {selectedTable
                  ? selectedTable.table_comment || selectedTable.table_name
                  : joinTable.joinTable || "테이블 선택"}
                <ChevronsUpDown className="ml-2 h-3 w-3 shrink-0 opacity-50" />
              </Button>
            </PopoverTrigger>
            <PopoverContent className="w-full p-0" align="start">
              <Command>
                <CommandInput placeholder="테이블 검색..." className="h-8 text-xs" />
                <CommandList>
                  <CommandEmpty>검색 결과가 없습니다</CommandEmpty>
                  <CommandGroup>
                    {tables.map((table) => (
                      <CommandItem
                        key={table.table_name}
                        value={`${table.table_name} ${table.table_comment || ""}`}
                        onSelect={() => {
                          // cmdk가 value를 소문자로 변환하므로 직접 table.table_name 사용
                          // 여러 필드를 한 번에 업데이트 (연속 호출 시 덮어쓰기 방지)
                          onUpdate({
                            joinTable: table.table_name,
                            selectColumns: [], // 테이블 변경 시 선택 컬럼 초기화
                          });
                          setJoinTableOpen(false);
                        }}
                        className="text-xs"
                      >
                        <Check
                          className={cn(
                            "mr-2 h-3 w-3",
                            joinTable.joinTable === table.table_name ? "opacity-100" : "opacity-0"
                          )}
                        />
                        <span className="flex flex-col">
                          <span>{table.table_comment || table.table_name}</span>
                          <span className="text-[10px] text-muted-foreground">{table.table_name}</span>
                        </span>
                      </CommandItem>
                    ))}
                  </CommandGroup>
                </CommandList>
              </Command>
            </PopoverContent>
          </Popover>
        </div>

        {/* 조인 타입 */}
        <div>
          <Label className="text-xs">조인 방식</Label>
          <Select
            value={joinTable.joinType || "LEFT"}
            onValueChange={(value) => onUpdate("joinType", value)}
          >
            <SelectTrigger className="h-8 text-xs">
              <SelectValue />
            </SelectTrigger>
            <SelectContent>
              <SelectItem value="LEFT">LEFT JOIN (데이터 없어도 표시)</SelectItem>
              <SelectItem value="INNER">INNER JOIN (데이터 있어야만 표시)</SelectItem>
            </SelectContent>
          </Select>
        </div>

        {/* 조인 조건 */}
        <div className="space-y-2">
          <Label className="text-xs">조인 조건</Label>
          <div className="rounded-md bg-muted/30 p-2 space-y-2">
            <div>
              <Label className="text-[10px] text-muted-foreground">메인 테이블 컬럼</Label>
              <ColumnSelect
                columns={mainTableColumns}
                value={joinTable.mainColumn || ""}
                onValueChange={(value) => onUpdate("mainColumn", value)}
                placeholder="메인 테이블 컬럼"
              />
            </div>
            <div className="text-center text-[10px] text-muted-foreground">=</div>
            <div>
              <Label className="text-[10px] text-muted-foreground">조인 테이블 컬럼</Label>
              <ColumnSelect
                columns={joinTableColumns}
                value={joinTable.joinColumn || ""}
                onValueChange={(value) => onUpdate("joinColumn", value)}
                placeholder="조인 테이블 컬럼"
              />
            </div>
          </div>
        </div>

        {/* 가져올 컬럼 선택 */}
        <div>
          <div className="flex items-center justify-between mb-1">
            <Label className="text-xs">가져올 컬럼</Label>
            <Button
              size="sm"
              variant="ghost"
              className="h-5 text-[10px] px-1"
              onClick={() => {
                const current = joinTable.selectColumns || [];
                onUpdate("selectColumns", [...current, ""]);
              }}
              disabled={!joinTable.joinTable}
            >
              <Plus className="mr-0.5 h-2.5 w-2.5" />
              추가
            </Button>
          </div>
          <p className="text-[10px] text-muted-foreground mb-2">
            조인 테이블에서 표시할 컬럼들을 선택하세요
          </p>
          <div className="space-y-1">
            {(joinTable.selectColumns || []).map((col, colIndex) => (
              <div key={colIndex} className="flex items-center gap-1">
                <ColumnSelect
                  columns={joinTableColumns}
                  value={col}
                  onValueChange={(value) => {
                    const current = [...(joinTable.selectColumns || [])];
                    current[colIndex] = value;
                    onUpdate("selectColumns", current);
                  }}
                  placeholder="컬럼 선택"
                />
                <Button
                  size="sm"
                  variant="ghost"
                  className="h-8 w-8 shrink-0 p-0"
                  onClick={() => {
                    const current = joinTable.selectColumns || [];
                    onUpdate(
                      "selectColumns",
                      current.filter((_, i) => i !== colIndex)
                    );
                  }}
                >
                  <X className="h-3 w-3" />
                </Button>
              </div>
            ))}
            {(joinTable.selectColumns || []).length === 0 && (
              <div className="rounded border py-2 text-center text-[10px] text-muted-foreground">
                가져올 컬럼을 추가하세요
              </div>
            )}
          </div>
        </div>
      </div>
    );
  };

  // 표시 컬럼 추가
  const addDisplayColumn = (side: "left" | "right") => {
    const path = side === "left" ? "leftPanel.displayColumns" : "rightPanel.displayColumns";
    const currentColumns = side === "left"
      ? config.leftPanel?.displayColumns || []
      : config.rightPanel?.displayColumns || [];

    updateConfig(path, [...currentColumns, { name: "", label: "" }]);
  };

  // 표시 컬럼 삭제
  const removeDisplayColumn = (side: "left" | "right", index: number) => {
    const path = side === "left" ? "leftPanel.displayColumns" : "rightPanel.displayColumns";
    const currentColumns = side === "left"
      ? config.leftPanel?.displayColumns || []
      : config.rightPanel?.displayColumns || [];

    updateConfig(path, currentColumns.filter((_, i) => i !== index));
  };

  // 표시 컬럼 업데이트
  const updateDisplayColumn = (
    side: "left" | "right",
    index: number,
    fieldOrPartial: keyof ColumnConfig | Partial<ColumnConfig>,
    value?: any
  ) => {
    const path = side === "left" ? "leftPanel.displayColumns" : "rightPanel.displayColumns";
    const currentColumns = side === "left"
      ? [...(config.leftPanel?.displayColumns || [])]
      : [...(config.rightPanel?.displayColumns || [])];

    if (currentColumns[index]) {
      if (typeof fieldOrPartial === "object") {
        // 여러 필드를 한 번에 업데이트
        currentColumns[index] = { ...currentColumns[index], ...fieldOrPartial };
      } else {
        // 단일 필드 업데이트
        currentColumns[index] = { ...currentColumns[index], [fieldOrPartial]: value };
      }
      updateConfig(path, currentColumns);
    }
  };

  // 데이터 전달 필드 추가
  const addDataTransferField = () => {
    const currentFields = config.dataTransferFields || [];
    updateConfig("dataTransferFields", [...currentFields, { sourceColumn: "", targetColumn: "" }]);
  };

  // 데이터 전달 필드 삭제
  const removeDataTransferField = (index: number) => {
    const currentFields = config.dataTransferFields || [];
    updateConfig("dataTransferFields", currentFields.filter((_, i) => i !== index));
  };

  // 데이터 전달 필드 업데이트
  const updateDataTransferField = (index: number, field: keyof DataTransferField, value: string) => {
    const currentFields = [...(config.dataTransferFields || [])];
    if (currentFields[index]) {
      currentFields[index] = { ...currentFields[index], [field]: value };
      updateConfig("dataTransferFields", currentFields);
    }
  };

  return (
    <div className="space-y-6 p-1">
      {/* 좌측 패널 설정 */}
      <div className="space-y-4">
        <h4 className="font-medium text-sm border-b pb-2">좌측 패널 설정 (마스터)</h4>

        <div className="space-y-3">
          <div>
            <Label className="text-xs">패널 제목</Label>
            <Input
              value={config.leftPanel?.title || ""}
              onChange={(e) => updateConfig("leftPanel.title", e.target.value)}
              placeholder="부서"
              className="h-9 text-sm"
            />
          </div>

          <div>
            <Label className="text-xs">테이블 선택</Label>
            <TableSelect
              value={config.leftPanel?.tableName || ""}
              onValueChange={(value) => updateConfig("leftPanel.tableName", value)}
              placeholder="테이블 선택"
              open={leftTableOpen}
              onOpenChange={setLeftTableOpen}
            />
          </div>

          {/* 표시 컬럼 */}
          <div>
            <div className="flex items-center justify-between mb-2">
              <Label className="text-xs">표시할 컬럼</Label>
              <Button size="sm" variant="ghost" className="h-6 text-xs" onClick={() => addDisplayColumn("left")}>
                <Plus className="mr-1 h-3 w-3" />
                추가
              </Button>
            </div>
            <div className="space-y-3">
              {(config.leftPanel?.displayColumns || []).map((col, index) => (
                <div key={index} className="space-y-2 rounded-md border p-3">
                  <div className="flex items-center justify-between">
                    <span className="text-xs font-medium text-muted-foreground">컬럼 {index + 1}</span>
                    <Button
                      size="sm"
                      variant="ghost"
                      className="h-6 w-6 p-0"
                      onClick={() => removeDisplayColumn("left", index)}
                    >
                      <X className="h-3 w-3" />
                    </Button>
                  </div>
                  <ColumnSelect
                    columns={leftColumns}
                    value={col.name}
                    onValueChange={(value) => updateDisplayColumn("left", index, "name", value)}
                    placeholder="컬럼 선택"
                  />
                  <div>
                    <Label className="text-xs text-muted-foreground">표시 라벨</Label>
                    <Input
                      value={col.label || ""}
                      onChange={(e) => updateDisplayColumn("left", index, "label", e.target.value)}
                      placeholder="라벨명 (미입력 시 컬럼명 사용)"
                      className="h-8 text-xs"
                    />
                  </div>
                  <div>
                    <Label className="text-xs text-muted-foreground">표시 위치</Label>
                    <Select
                      value={col.displayRow || "name"}
                      onValueChange={(value) => updateDisplayColumn("left", index, "displayRow", value)}
                    >
                      <SelectTrigger className="h-8 text-xs">
                        <SelectValue />
                      </SelectTrigger>
                      <SelectContent>
                        <SelectItem value="name">이름 행 (Name Row)</SelectItem>
                        <SelectItem value="info">정보 행 (Info Row)</SelectItem>
                      </SelectContent>
                    </Select>
                  </div>
                </div>
              ))}
              {(config.leftPanel?.displayColumns || []).length === 0 && (
                <div className="rounded-md border py-4 text-center text-xs text-muted-foreground">
                  표시할 컬럼을 추가하세요
                </div>
              )}
            </div>
          </div>

          <div className="flex items-center justify-between">
            <Label className="text-xs">검색 표시</Label>
            <Switch
              checked={config.leftPanel?.showSearch || false}
              onCheckedChange={(checked) => updateConfig("leftPanel.showSearch", checked)}
            />
          </div>

          {config.leftPanel?.showSearch && (
            <div>
              <div className="mb-2 flex items-center justify-between">
                <Label className="text-xs">검색 대상 컬럼</Label>
                <Button
                  size="sm"
                  variant="ghost"
                  className="h-6 text-xs"
                  onClick={() => {
                    const current = config.leftPanel?.searchColumns || [];
                    updateConfig("leftPanel.searchColumns", [...current, { columnName: "", label: "" }]);
                  }}
                >
                  <Plus className="mr-1 h-3 w-3" />
                  추가
                </Button>
              </div>
              <div className="space-y-2">
                {(config.leftPanel?.searchColumns || []).map((searchCol, index) => (
                  <div key={index} className="flex items-center gap-2">
                    <ColumnSelect
                      columns={leftColumns}
                      value={searchCol.columnName}
                      onValueChange={(value) => {
                        const current = [...(config.leftPanel?.searchColumns || [])];
                        current[index] = { ...current[index], columnName: value };
                        updateConfig("leftPanel.searchColumns", current);
                      }}
                      placeholder="컬럼 선택"
                    />
                    <Button
                      size="sm"
                      variant="ghost"
                      className="h-8 w-8 shrink-0 p-0"
                      onClick={() => {
                        const current = config.leftPanel?.searchColumns || [];
                        updateConfig(
                          "leftPanel.searchColumns",
                          current.filter((_, i) => i !== index)
                        );
                      }}
                    >
                      <X className="h-3 w-3" />
                    </Button>
                  </div>
                ))}
                {(config.leftPanel?.searchColumns || []).length === 0 && (
                  <div className="rounded-md border py-3 text-center text-xs text-muted-foreground">
                    검색할 컬럼을 추가하세요
                  </div>
                )}
              </div>
            </div>
          )}

          <div className="flex items-center justify-between">
            <Label className="text-xs">추가 버튼 표시</Label>
            <Switch
              checked={config.leftPanel?.showAddButton || false}
              onCheckedChange={(checked) => updateConfig("leftPanel.showAddButton", checked)}
            />
          </div>

          {config.leftPanel?.showAddButton && (
            <>
              <div>
                <Label className="text-xs">추가 버튼 라벨</Label>
                <Input
                  value={config.leftPanel?.addButtonLabel || ""}
                  onChange={(e) => updateConfig("leftPanel.addButtonLabel", e.target.value)}
                  placeholder="추가"
                  className="h-9 text-sm"
                />
              </div>
              <div>
                <Label className="text-xs">모달 화면 선택</Label>
                <ScreenSelect
                  value={config.leftPanel?.addModalScreenId}
                  onValueChange={(value) => updateConfig("leftPanel.addModalScreenId", value)}
                  placeholder="모달 화면 선택"
                  open={leftModalOpen}
                  onOpenChange={setLeftModalOpen}
                />
              </div>
            </>
          )}
        </div>
      </div>

      {/* 우측 패널 설정 */}
      <div className="space-y-4">
        <h4 className="font-medium text-sm border-b pb-2">우측 패널 설정 (상세)</h4>

        <div className="space-y-3">
          <div>
            <Label className="text-xs">패널 제목</Label>
            <Input
              value={config.rightPanel?.title || ""}
              onChange={(e) => updateConfig("rightPanel.title", e.target.value)}
              placeholder="사원"
              className="h-9 text-sm"
            />
          </div>

          <div>
            <Label className="text-xs">테이블 선택</Label>
            <TableSelect
              value={config.rightPanel?.tableName || ""}
              onValueChange={(value) => updateConfig("rightPanel.tableName", value)}
              placeholder="테이블 선택"
              open={rightTableOpen}
              onOpenChange={setRightTableOpen}
            />
          </div>

          {/* 추가 조인 테이블 설정 */}
          <div className="space-y-2">
            <div className="flex items-center justify-between">
              <Label className="text-xs">추가 조인 테이블</Label>
              <Button
                size="sm"
                variant="ghost"
                className="h-6 text-xs"
                onClick={() => {
                  const current = config.rightPanel?.joinTables || [];
                  updateConfig("rightPanel.joinTables", [
                    ...current,
                    {
                      joinTable: "",
                      joinType: "LEFT",
                      mainColumn: "",
                      joinColumn: "",
                      selectColumns: [],
                    },
                  ]);
                }}
              >
                <Plus className="mr-1 h-3 w-3" />
                추가
              </Button>
            </div>
            <p className="text-[10px] text-muted-foreground">
              다른 테이블을 조인하면 표시할 컬럼에서 해당 테이블의 컬럼도 선택할 수 있습니다.
            </p>
            <div className="space-y-2">
              {(config.rightPanel?.joinTables || []).map((joinTable, index) => (
                <JoinTableItem
                  key={index}
                  index={index}
                  joinTable={joinTable}
                  tables={tables}
                  mainTableColumns={rightColumns}
                  onUpdate={(fieldOrPartial, value) => {
                    const current = [...(config.rightPanel?.joinTables || [])];
                    if (typeof fieldOrPartial === "object") {
                      // 여러 필드를 한 번에 업데이트
                      current[index] = { ...current[index], ...fieldOrPartial };
                    } else {
                      // 단일 필드 업데이트
                      current[index] = { ...current[index], [fieldOrPartial]: value };
                    }
                    updateConfig("rightPanel.joinTables", current);
                  }}
                  onRemove={() => {
                    const current = config.rightPanel?.joinTables || [];
                    updateConfig(
                      "rightPanel.joinTables",
                      current.filter((_, i) => i !== index)
                    );
                  }}
                />
              ))}
            </div>
          </div>

          {/* 표시 컬럼 */}
          <div>
            <div className="flex items-center justify-between mb-2">
              <Label className="text-xs">표시할 컬럼</Label>
              <Button size="sm" variant="ghost" className="h-6 text-xs" onClick={() => addDisplayColumn("right")}>
                <Plus className="mr-1 h-3 w-3" />
                추가
              </Button>
            </div>
            <p className="text-[10px] text-muted-foreground mb-2">
              테이블을 선택한 후 해당 테이블의 컬럼을 선택하세요.
            </p>
            <div className="space-y-3">
              {(config.rightPanel?.displayColumns || []).map((col, index) => {
                // 선택 가능한 테이블 목록: 메인 테이블 + 조인 테이블들
                const availableTables = [
                  config.rightPanel?.tableName,
                  ...(config.rightPanel?.joinTables || []).map((jt) => jt.joinTable),
                ].filter(Boolean) as string[];

                // 선택된 테이블의 컬럼만 필터링
                const selectedSourceTable = col.sourceTable || config.rightPanel?.tableName;
                const filteredColumns = rightColumns.filter((c) => {
                  // 조인 테이블 컬럼인지 확인 (column_comment에 테이블명 포함)
                  const isJoinColumn = c.column_comment?.includes("(") && c.column_comment?.includes(")");
                  
                  if (selectedSourceTable === config.rightPanel?.tableName) {
                    // 메인 테이블 선택 시: 조인 컬럼 아닌 것만
                    return !isJoinColumn;
                  } else {
                    // 조인 테이블 선택 시: 해당 테이블 컬럼만
                    return c.column_comment?.includes(`(${selectedSourceTable})`);
                  }
                });

                // 테이블 라벨 가져오기
                const getTableLabel = (tableName: string) => {
                  const table = tables.find((t) => t.table_name === tableName);
                  return table?.table_comment || tableName;
                };

                return (
                  <div key={index} className="rounded-md border p-3 space-y-2">
                    <div className="flex items-center justify-between">
                      <span className="text-xs font-medium text-muted-foreground">컬럼 {index + 1}</span>
                      <Button
                        size="sm"
                        variant="ghost"
                        className="h-6 w-6 p-0"
                        onClick={() => removeDisplayColumn("right", index)}
                      >
                        <X className="h-3 w-3" />
                      </Button>
                    </div>
                    
                    {/* 테이블 선택 */}
                    <div>
                      <Label className="text-[10px] text-muted-foreground">테이블</Label>
                      <Select
                        value={col.sourceTable || config.rightPanel?.tableName || ""}
                        onValueChange={(value) => {
                          // 테이블 변경 시 sourceTable과 name을 한 번에 업데이트
                          updateDisplayColumn("right", index, {
                            sourceTable: value,
                            name: "", // 컬럼 초기화
                          });
                        }}
                      >
                        <SelectTrigger className="h-8 text-xs">
                          <SelectValue placeholder="테이블 선택" />
                        </SelectTrigger>
                        <SelectContent>
                          {availableTables.map((tableName) => (
                            <SelectItem key={tableName} value={tableName}>
                              <span className="flex flex-col">
                                <span>{getTableLabel(tableName)}</span>
                                <span className="text-[10px] text-muted-foreground">{tableName}</span>
                              </span>
                            </SelectItem>
                          ))}
                        </SelectContent>
                      </Select>
                    </div>

                    {/* 컬럼 선택 */}
                    <div>
                      <Label className="text-[10px] text-muted-foreground">컬럼</Label>
                      <Select
                        value={col.name || ""}
                        onValueChange={(value) => updateDisplayColumn("right", index, "name", value)}
                      >
                        <SelectTrigger className="h-8 text-xs">
                          <SelectValue placeholder="컬럼 선택" />
                        </SelectTrigger>
                        <SelectContent>
                          {filteredColumns.length === 0 ? (
                            <SelectItem value="_empty" disabled>
                              테이블을 먼저 선택하세요
                            </SelectItem>
                          ) : (
                            filteredColumns.map((c) => {
                              // 조인 컬럼의 경우 테이블명 제거하고 표시
                              const displayLabel = c.column_comment?.replace(/\s*\([^)]+\)$/, "") || c.column_name;
                              return (
                                <SelectItem key={c.column_name} value={c.column_name}>
                                  <span className="flex flex-col">
                                    <span>{displayLabel}</span>
                                    <span className="text-[10px] text-muted-foreground">{c.column_name}</span>
                                  </span>
                                </SelectItem>
                              );
                            })
                          )}
                        </SelectContent>
                      </Select>
                    </div>

                    {/* 표시 라벨 */}
                    <div>
                      <Label className="text-[10px] text-muted-foreground">표시 라벨</Label>
                      <Input
                        value={col.label || ""}
                        onChange={(e) => updateDisplayColumn("right", index, "label", e.target.value)}
                        placeholder="라벨명 (미입력 시 컬럼명 사용)"
                        className="h-8 text-xs"
                      />
                    </div>

                    {/* 표시 위치 */}
                    <div>
                      <Label className="text-[10px] text-muted-foreground">표시 위치</Label>
                      <Select
                        value={col.displayRow || "info"}
                        onValueChange={(value) => updateDisplayColumn("right", index, "displayRow", value)}
                      >
                        <SelectTrigger className="h-8 text-xs">
                          <SelectValue />
                        </SelectTrigger>
                        <SelectContent>
                          <SelectItem value="name">이름 행 (Name Row)</SelectItem>
                          <SelectItem value="info">정보 행 (Info Row)</SelectItem>
                        </SelectContent>
                      </Select>
                    </div>
                  </div>
                );
              })}
              {(config.rightPanel?.displayColumns || []).length === 0 && (
                <div className="text-center py-4 text-xs text-muted-foreground border rounded-md">
                  표시할 컬럼을 추가하세요
                </div>
              )}
            </div>
          </div>

          <div className="flex items-center justify-between">
            <Label className="text-xs">검색 표시</Label>
            <Switch
              checked={config.rightPanel?.showSearch || false}
              onCheckedChange={(checked) => updateConfig("rightPanel.showSearch", checked)}
            />
          </div>

          {config.rightPanel?.showSearch && (
            <div>
              <div className="mb-2 flex items-center justify-between">
                <Label className="text-xs">검색 대상 컬럼</Label>
                <Button
                  size="sm"
                  variant="ghost"
                  className="h-6 text-xs"
                  onClick={() => {
                    const current = config.rightPanel?.searchColumns || [];
                    updateConfig("rightPanel.searchColumns", [...current, { columnName: "", label: "" }]);
                  }}
                >
                  <Plus className="mr-1 h-3 w-3" />
                  추가
                </Button>
              </div>
              <div className="space-y-2">
                {(config.rightPanel?.searchColumns || []).map((searchCol, index) => (
                  <div key={index} className="flex items-center gap-2">
                    <ColumnSelect
                      columns={rightColumns}
                      value={searchCol.columnName}
                      onValueChange={(value) => {
                        const current = [...(config.rightPanel?.searchColumns || [])];
                        current[index] = { ...current[index], columnName: value };
                        updateConfig("rightPanel.searchColumns", current);
                      }}
                      placeholder="컬럼 선택"
                    />
                    <Button
                      size="sm"
                      variant="ghost"
                      className="h-8 w-8 shrink-0 p-0"
                      onClick={() => {
                        const current = config.rightPanel?.searchColumns || [];
                        updateConfig(
                          "rightPanel.searchColumns",
                          current.filter((_, i) => i !== index)
                        );
                      }}
                    >
                      <X className="h-3 w-3" />
                    </Button>
                  </div>
                ))}
                {(config.rightPanel?.searchColumns || []).length === 0 && (
                  <div className="rounded-md border py-3 text-center text-xs text-muted-foreground">
                    검색할 컬럼을 추가하세요
                  </div>
                )}
              </div>
            </div>
          )}

          <div className="flex items-center justify-between">
            <Label className="text-xs">추가 버튼 표시</Label>
            <Switch
              checked={config.rightPanel?.showAddButton || false}
              onCheckedChange={(checked) => updateConfig("rightPanel.showAddButton", checked)}
            />
          </div>

          {config.rightPanel?.showAddButton && (
            <>
              <div>
                <Label className="text-xs">추가 버튼 라벨</Label>
                <Input
                  value={config.rightPanel?.addButtonLabel || ""}
                  onChange={(e) => updateConfig("rightPanel.addButtonLabel", e.target.value)}
                  placeholder="추가"
                  className="h-9 text-sm"
                />
              </div>
              <div>
                <Label className="text-xs">모달 화면 선택</Label>
                <ScreenSelect
                  value={config.rightPanel?.addModalScreenId}
                  onValueChange={(value) => updateConfig("rightPanel.addModalScreenId", value)}
                  placeholder="모달 화면 선택"
                  open={rightModalOpen}
                  onOpenChange={setRightModalOpen}
                />
              </div>
            </>
          )}

          {/* 표시 모드 설정 */}
          <div className="pt-3 border-t">
            <Label className="text-xs font-medium">표시 모드</Label>
            <Select
              value={config.rightPanel?.displayMode || "card"}
              onValueChange={(value) => updateConfig("rightPanel.displayMode", value)}
            >
              <SelectTrigger className="h-9 text-sm mt-1">
                <SelectValue />
              </SelectTrigger>
              <SelectContent>
                <SelectItem value="card">카드형</SelectItem>
                <SelectItem value="table">테이블형</SelectItem>
              </SelectContent>
            </Select>
            <p className="text-[10px] text-muted-foreground mt-1">
              카드형: 카드 형태로 정보 표시, 테이블형: 표 형태로 정보 표시
            </p>
          </div>

          {/* 카드 모드 전용 옵션 */}
          {(config.rightPanel?.displayMode || "card") === "card" && (
            <div className="flex items-center justify-between">
              <div>
                <Label className="text-xs">라벨 표시</Label>
                <p className="text-[10px] text-muted-foreground">라벨: 값 형식으로 표시</p>
              </div>
              <Switch
                checked={config.rightPanel?.showLabels || false}
                onCheckedChange={(checked) => updateConfig("rightPanel.showLabels", checked)}
              />
            </div>
          )}

          {/* 체크박스 표시 */}
          <div className="flex items-center justify-between">
            <div>
              <Label className="text-xs">체크박스 표시</Label>
              <p className="text-[10px] text-muted-foreground">항목 선택 기능 활성화</p>
            </div>
            <Switch
              checked={config.rightPanel?.showCheckbox || false}
              onCheckedChange={(checked) => updateConfig("rightPanel.showCheckbox", checked)}
            />
          </div>

          {/* 수정/삭제 버튼 */}
          <div className="pt-3 border-t">
            <Label className="text-xs font-medium">개별 수정/삭제</Label>
            <div className="mt-2 space-y-2">
              <div className="flex items-center justify-between">
                <Label className="text-xs">수정 버튼 표시</Label>
                <Switch
                  checked={config.rightPanel?.showEditButton || false}
                  onCheckedChange={(checked) => updateConfig("rightPanel.showEditButton", checked)}
                />
              </div>
              <div className="flex items-center justify-between">
                <Label className="text-xs">삭제 버튼 표시</Label>
                <Switch
                  checked={config.rightPanel?.showDeleteButton || false}
                  onCheckedChange={(checked) => updateConfig("rightPanel.showDeleteButton", checked)}
                />
              </div>
            </div>
          </div>

          {/* 수정 모달 화면 (수정 버튼 활성화 시) */}
          {config.rightPanel?.showEditButton && (
            <div>
              <Label className="text-xs">수정 모달 화면</Label>
              <ScreenSelect
                value={config.rightPanel?.editModalScreenId}
                onValueChange={(value) => updateConfig("rightPanel.editModalScreenId", value)}
                placeholder="수정 모달 화면 선택 (미선택 시 추가 모달 사용)"
                open={false}
                onOpenChange={() => {}}
              />
              <p className="text-[10px] text-muted-foreground mt-1">
                미선택 시 추가 모달 화면을 수정용으로 사용
              </p>
            </div>
          )}

          {/* 기본키 컬럼 */}
          <div>
            <Label className="text-xs">기본키 컬럼</Label>
            <ColumnSelect
              columns={rightColumns}
              value={config.rightPanel?.primaryKeyColumn || ""}
              onValueChange={(value) => updateConfig("rightPanel.primaryKeyColumn", value)}
              placeholder="기본키 컬럼 선택 (기본: id)"
            />
            <p className="text-[10px] text-muted-foreground mt-1">
              수정/삭제 시 사용할 기본키 컬럼 (미선택 시 id 사용)
            </p>
          </div>

          {/* 복수 액션 버튼 설정 */}
          <div className="pt-3 border-t">
            <div className="flex items-center justify-between mb-2">
              <Label className="text-xs font-medium">액션 버튼 (복수)</Label>
              <Button
                size="sm"
                variant="ghost"
                className="h-6 text-xs"
                onClick={() => {
                  const current = config.rightPanel?.actionButtons || [];
                  updateConfig("rightPanel.actionButtons", [
                    ...current,
                    {
                      id: `btn-${Date.now()}`,
                      label: "새 버튼",
                      variant: "default",
                      action: "add",
                    },
                  ]);
                }}
              >
                <Plus className="mr-1 h-3 w-3" />
                추가
              </Button>
            </div>
            <p className="text-[10px] text-muted-foreground mb-2">
              복수의 버튼을 추가하면 기존 단일 추가 버튼 대신 사용됩니다
            </p>
            <div className="space-y-3">
              {(config.rightPanel?.actionButtons || []).map((btn, index) => (
                <div key={btn.id} className="rounded-md border p-3 space-y-2">
                  <div className="flex items-center justify-between">
                    <span className="text-xs font-medium text-muted-foreground">버튼 {index + 1}</span>
                    <Button
                      size="sm"
                      variant="ghost"
                      className="h-6 w-6 p-0"
                      onClick={() => {
                        const current = config.rightPanel?.actionButtons || [];
                        updateConfig(
                          "rightPanel.actionButtons",
                          current.filter((_, i) => i !== index)
                        );
                      }}
                    >
                      <X className="h-3 w-3" />
                    </Button>
                  </div>
                  <div>
                    <Label className="text-xs text-muted-foreground">버튼 라벨</Label>
                    <Input
                      value={btn.label}
                      onChange={(e) => {
                        const current = [...(config.rightPanel?.actionButtons || [])];
                        current[index] = { ...current[index], label: e.target.value };
                        updateConfig("rightPanel.actionButtons", current);
                      }}
                      placeholder="버튼 라벨"
                      className="h-8 text-xs"
                    />
                  </div>
                  <div>
                    <Label className="text-xs text-muted-foreground">동작</Label>
                    <Select
                      value={btn.action || "add"}
                      onValueChange={(value) => {
                        const current = [...(config.rightPanel?.actionButtons || [])];
                        current[index] = { ...current[index], action: value as any };
                        updateConfig("rightPanel.actionButtons", current);
                      }}
                    >
                      <SelectTrigger className="h-8 text-xs">
                        <SelectValue />
                      </SelectTrigger>
                      <SelectContent>
                        <SelectItem value="add">추가 (모달 열기)</SelectItem>
                        <SelectItem value="edit">수정 (선택 항목)</SelectItem>
                        <SelectItem value="bulk-delete">일괄 삭제 (선택 항목)</SelectItem>
                        <SelectItem value="custom">커스텀</SelectItem>
                      </SelectContent>
                    </Select>
                  </div>
                  <div>
                    <Label className="text-xs text-muted-foreground">스타일</Label>
                    <Select
                      value={btn.variant || "default"}
                      onValueChange={(value) => {
                        const current = [...(config.rightPanel?.actionButtons || [])];
                        current[index] = { ...current[index], variant: value as any };
                        updateConfig("rightPanel.actionButtons", current);
                      }}
                    >
                      <SelectTrigger className="h-8 text-xs">
                        <SelectValue />
                      </SelectTrigger>
                      <SelectContent>
                        <SelectItem value="default">기본 (Primary)</SelectItem>
                        <SelectItem value="outline">외곽선</SelectItem>
                        <SelectItem value="destructive">삭제 (빨간색)</SelectItem>
                        <SelectItem value="ghost">투명</SelectItem>
                      </SelectContent>
                    </Select>
                  </div>
                  <div>
                    <Label className="text-xs text-muted-foreground">아이콘</Label>
                    <Select
                      value={btn.icon || "none"}
                      onValueChange={(value) => {
                        const current = [...(config.rightPanel?.actionButtons || [])];
                        current[index] = { ...current[index], icon: value === "none" ? undefined : value };
                        updateConfig("rightPanel.actionButtons", current);
                      }}
                    >
                      <SelectTrigger className="h-8 text-xs">
                        <SelectValue />
                      </SelectTrigger>
                      <SelectContent>
                        <SelectItem value="none">없음</SelectItem>
                        <SelectItem value="Plus">+ (추가)</SelectItem>
                        <SelectItem value="Edit">수정</SelectItem>
                        <SelectItem value="Trash2">삭제</SelectItem>
                      </SelectContent>
                    </Select>
                  </div>
                  {btn.action === "add" && (
                    <div>
                      <Label className="text-xs text-muted-foreground">모달 화면</Label>
                      <ScreenSelect
                        value={btn.modalScreenId}
                        onValueChange={(value) => {
                          const current = [...(config.rightPanel?.actionButtons || [])];
                          current[index] = { ...current[index], modalScreenId: value };
                          updateConfig("rightPanel.actionButtons", current);
                        }}
                        placeholder="모달 화면 선택"
                        open={false}
                        onOpenChange={() => {}}
                      />
                    </div>
                  )}
                </div>
              ))}
              {(config.rightPanel?.actionButtons || []).length === 0 && (
                <div className="text-center py-4 text-xs text-muted-foreground border rounded-md">
                  액션 버튼을 추가하세요 (선택사항)
                </div>
              )}
            </div>
          </div>
        </div>
      </div>

      {/* 연결 설정 */}
      <div className="space-y-4">
        <h4 className="border-b pb-2 text-sm font-medium">연결 설정 (조인)</h4>
        
        {/* 설명 */}
        <div className="rounded-md bg-muted/50 p-3 text-xs text-muted-foreground">
          <p className="mb-1 font-medium text-foreground">좌측 패널 선택 시 우측 패널 데이터 필터링</p>
          <p>좌측에서 항목을 선택하면 좌측 조인 컬럼의 값으로 우측 테이블을 필터링합니다.</p>
          <p className="mt-1 text-[10px]">예: 부서(dept_code) 선택 시 해당 부서의 사원만 표시</p>
        </div>

        <div className="space-y-3">
          <div>
            <Label className="text-xs">좌측 테이블 조인 컬럼</Label>
            <ColumnSelect
              columns={leftColumns}
              value={config.joinConfig?.leftColumn || ""}
              onValueChange={(value) => updateConfig("joinConfig.leftColumn", value)}
              placeholder="조인 컬럼 선택"
            />
          </div>

          <div>
            <Label className="text-xs">우측 테이블 조인 컬럼</Label>
            <ColumnSelect
              columns={rightColumns}
              value={config.joinConfig?.rightColumn || ""}
              onValueChange={(value) => updateConfig("joinConfig.rightColumn", value)}
              placeholder="조인 컬럼 선택"
            />
          </div>
        </div>
      </div>

      {/* 데이터 전달 설정 */}
      <div className="space-y-4">
        <div className="flex items-center justify-between border-b pb-2">
          <h4 className="text-sm font-medium">데이터 전달 설정</h4>
          <Button size="sm" variant="ghost" className="h-6 text-xs" onClick={addDataTransferField}>
            <Plus className="mr-1 h-3 w-3" />
            추가
          </Button>
        </div>

        {/* 설명 */}
        <div className="rounded-md bg-muted/50 p-3 text-xs text-muted-foreground">
          <p className="mb-1 font-medium text-foreground">우측 패널 추가 버튼 클릭 시 모달로 데이터 전달</p>
          <p>좌측에서 선택한 항목의 값을 모달 폼에 자동으로 채워줍니다.</p>
          <p className="mt-1 text-[10px]">예: dept_code를 모달의 dept_code 필드에 자동 입력</p>
        </div>

        <div className="space-y-3">
          {(config.dataTransferFields || []).map((field, index) => (
            <div key={index} className="space-y-2 rounded-md border p-3">
              <div className="flex items-center justify-between">
                <span className="text-xs font-medium">필드 {index + 1}</span>
                <Button
                  size="sm"
                  variant="ghost"
                  className="h-6 w-6 p-0"
                  onClick={() => removeDataTransferField(index)}
                >
                  <X className="h-3 w-3" />
                </Button>
              </div>
              <div>
                <Label className="text-xs">소스 컬럼 (좌측 패널)</Label>
                <ColumnSelect
                  columns={leftColumns}
                  value={field.sourceColumn}
                  onValueChange={(value) => updateDataTransferField(index, "sourceColumn", value)}
                  placeholder="소스 컬럼"
                />
              </div>
              <div>
                <Label className="text-xs">타겟 컬럼 (모달 필드명)</Label>
                <Input
                  value={field.targetColumn}
                  onChange={(e) => updateDataTransferField(index, "targetColumn", e.target.value)}
                  placeholder="모달에서 사용할 필드명"
                  className="h-9 text-sm"
                />
              </div>
            </div>
          ))}
          {(config.dataTransferFields || []).length === 0 && (
            <div className="rounded-md border py-4 text-center text-xs text-muted-foreground">
              전달할 필드를 추가하세요
            </div>
          )}
        </div>
      </div>

      {/* 레이아웃 설정 */}
      <div className="space-y-4">
        <h4 className="font-medium text-sm border-b pb-2">레이아웃 설정</h4>

        <div className="space-y-3">
          <div>
            <Label className="text-xs">좌우 비율 (좌측 %)</Label>
            <Input
              type="number"
              value={config.splitRatio || 30}
              onChange={(e) => updateConfig("splitRatio", parseInt(e.target.value) || 30)}
              min={10}
              max={90}
              className="h-9 text-sm"
            />
          </div>

          <div className="flex items-center justify-between">
            <Label className="text-xs">크기 조절 가능</Label>
            <Switch
              checked={config.resizable !== false}
              onCheckedChange={(checked) => updateConfig("resizable", checked)}
            />
          </div>

          <div className="flex items-center justify-between">
            <Label className="text-xs">자동 데이터 로드</Label>
            <Switch
              checked={config.autoLoad !== false}
              onCheckedChange={(checked) => updateConfig("autoLoad", checked)}
            />
          </div>
        </div>
      </div>
    </div>
  );
};

export default SplitPanelLayout2ConfigPanel;