ERP-node/frontend/components/screen/ScreenSettingModal.tsx

"use client";

import React, { useState, useEffect, useCallback, useMemo, useRef } from "react";
import {
  Dialog,
  DialogContent,
  DialogDescription,
  DialogHeader,
  DialogTitle,
} from "@/components/ui/dialog";
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";
import { Label } from "@/components/ui/label";
import { Badge } from "@/components/ui/badge";
import { Textarea } from "@/components/ui/textarea";
import {
  Table,
  TableBody,
  TableCell,
  TableHead,
  TableHeader,
  TableRow,
} from "@/components/ui/table";
import {
  Popover,
  PopoverContent,
  PopoverTrigger,
} from "@/components/ui/popover";
import {
  Command,
  CommandEmpty,
  CommandGroup,
  CommandInput,
  CommandItem,
  CommandList,
} from "@/components/ui/command";
import { toast } from "sonner";
import { cn } from "@/lib/utils";
import {
  Database,
  Link2,
  GitBranch,
  Columns3,
  Eye,
  Save,
  Plus,
  Minus,
  Pencil,
  Trash2,
  RefreshCw,
  Loader2,
  Check,
  ChevronsUpDown,
  ExternalLink,
  Table2,
  ArrowRight,
  Settings2,
  ChevronDown,
  ChevronRight,
  Filter,
  RotateCcw,
  X,
  Zap,
  MousePointer,
  Workflow,
} from "lucide-react";
import {
  getDataFlows,
  createDataFlow,
  updateDataFlow,
  deleteDataFlow,
  DataFlow,
  getMultipleScreenLayoutSummary,
  LayoutItem,
  getScreenGroup,
} from "@/lib/api/screenGroup";
import { tableManagementApi, ColumnTypeInfo, TableInfo, ColumnSettings } from "@/lib/api/tableManagement";
import { screenApi } from "@/lib/api/screen";
import { TransformWrapper, TransformComponent } from "react-zoom-pan-pinch";
import { getNodeFlows, createNodeFlow, NodeFlow } from "@/lib/api/nodeFlows";
import { FlowEditor } from "@/components/dataflow/node-editor/FlowEditor";
import ScreenDesigner from "@/components/screen/ScreenDesigner";
import { TableSettingModal } from "@/components/screen/TableSettingModal";
import {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from "@/components/ui/select";

// ============================================================
// 타입 정의
// ============================================================

interface FilterTableInfo {
  tableName: string;
  tableLabel?: string;
  filterColumns?: string[];
  // 필터 키 매핑 정보 (메인 테이블.컬럼 → 필터 테이블.컬럼)
  filterKeyMapping?: {
    mainTableColumn: string;      // 메인 테이블의 컬럼 (leftColumn)
    mainTableColumnLabel?: string;
    filterTableColumn: string;    // 필터 테이블의 컬럼 (foreignKey)
    filterTableColumnLabel?: string;
  };
  joinColumnRefs?: Array<{
    column: string;
    refTable: string;
    refTableLabel?: string;
    refColumn: string;
  }>;
}

interface FieldMappingInfo {
  targetField: string;
  sourceField: string;
  sourceTable?: string;
  sourceDisplayName?: string;
  componentType?: string;
}

interface ScreenSettingModalProps {
  isOpen: boolean;
  onClose: () => void;
  screenId: number;
  screenName: string;
  groupId?: number;
  companyCode?: string; // 프리뷰용 회사 코드
  mainTable?: string;
  mainTableLabel?: string;
  filterTables?: FilterTableInfo[];
  fieldMappings?: FieldMappingInfo[];
  componentCount?: number;
  onSaveSuccess?: () => void;
}

// 검색 가능한 Select 컴포넌트
interface SearchableSelectProps {
  value: string;
  onValueChange: (value: string) => void;
  options: Array<{ value: string; label: string; description?: string }>;
  placeholder?: string;
  disabled?: boolean;
  className?: string;
}

function SearchableSelect({
  value,
  onValueChange,
  options,
  placeholder = "선택...",
  disabled = false,
  className,
}: SearchableSelectProps) {
  const [open, setOpen] = useState(false);

  const selectedOption = options.find((opt) => opt.value === value);

  return (
    <Popover open={open} onOpenChange={setOpen}>
      <PopoverTrigger asChild>
        <Button
          variant="outline"
          role="combobox"
          aria-expanded={open}
          disabled={disabled}
          className={cn("h-8 w-full justify-between text-xs", className)}
        >
          {selectedOption ? (
            <span className="truncate">{selectedOption.label}</span>
          ) : (
            <span className="text-muted-foreground">{placeholder}</span>
          )}
          <ChevronsUpDown className="ml-2 h-4 w-4 shrink-0 opacity-50" />
        </Button>
      </PopoverTrigger>
      <PopoverContent
        className="p-0"
        style={{ width: "var(--radix-popover-trigger-width)" }}
        align="start"
      >
        <Command>
          <CommandInput placeholder="검색..." className="text-xs" />
          <CommandList>
            <CommandEmpty className="py-2 text-center text-xs">
              결과 없음
            </CommandEmpty>
            <CommandGroup>
              {options.map((option) => (
                <CommandItem
                  key={option.value}
                  value={option.value}
                  onSelect={() => {
                    onValueChange(option.value);
                    setOpen(false);
                  }}
                  className="text-xs"
                >
                  <Check
                    className={cn(
                      "mr-2 h-4 w-4",
                      value === option.value ? "opacity-100" : "opacity-0"
                    )}
                  />
                  <div className="flex flex-col">
                    <span>{option.label}</span>
                    {option.description && (
                      <span className="text-muted-foreground text-[10px]">
                        {option.description}
                      </span>
                    )}
                  </div>
                </CommandItem>
              ))}
            </CommandGroup>
          </CommandList>
        </Command>
      </PopoverContent>
    </Popover>
  );
}

// ============================================================
// 메인 모달 컴포넌트
// ============================================================

export function ScreenSettingModal({
  isOpen,
  onClose,
  screenId,
  screenName,
  groupId,
  companyCode,
  mainTable,
  mainTableLabel,
  filterTables = [],
  fieldMappings = [],
  componentCount = 0,
  onSaveSuccess,
}: ScreenSettingModalProps) {
  const [activeTab, setActiveTab] = useState("overview");
  const [loading, setLoading] = useState(false);
  const [dataFlows, setDataFlows] = useState<DataFlow[]>([]);
  const [layoutItems, setLayoutItems] = useState<LayoutItem[]>([]);
  const [iframeKey, setIframeKey] = useState(0); // iframe 새로고침용 키
  const [canvasSize, setCanvasSize] = useState({ width: 0, height: 0 }); // 화면 캔버스 크기
  const [showDesignerModal, setShowDesignerModal] = useState(false); // 화면 디자이너 모달
  const [showTableSettingModal, setShowTableSettingModal] = useState(false); // 테이블 설정 모달
  const [tableSettingTarget, setTableSettingTarget] = useState<{ tableName: string; tableLabel?: string } | null>(null);
  
  // 그룹 내 화면 목록 및 현재 선택된 화면
  const [groupScreens, setGroupScreens] = useState<Array<{
    screen_id: number;
    screen_name: string;
    screen_role?: string;
    display_order?: number;
    table_name?: string;
  }>>([]);
  const [currentScreenId, setCurrentScreenId] = useState(screenId);
  const [currentScreenName, setCurrentScreenName] = useState(screenName);
  const [currentMainTable, setCurrentMainTable] = useState(mainTable);
  const [currentMainTableLabel, setCurrentMainTableLabel] = useState(mainTableLabel);

  // 그룹 내 화면 목록 로드
  const loadGroupScreens = useCallback(async () => {
    if (!groupId) return;
    
    try {
      const groupRes = await getScreenGroup(groupId);
      if (groupRes.success && groupRes.data) {
        const groupData = groupRes.data as any;
        const screens = groupData.screens || [];
        // display_order 순으로 정렬
        screens.sort((a: any, b: any) => (a.display_order || 0) - (b.display_order || 0));
        setGroupScreens(screens);
      }
    } catch (error) {
      console.error("그룹 화면 목록 로드 실패:", error);
    }
  }, [groupId]);

  // 화면 선택 변경 핸들러
  const handleScreenChange = useCallback(async (newScreenId: number) => {
    const selectedScreen = groupScreens.find(s => s.screen_id === newScreenId);
    if (!selectedScreen) return;
    
    setCurrentScreenId(newScreenId);
    setCurrentScreenName(selectedScreen.screen_name);
    setCurrentMainTable(selectedScreen.table_name);
    // 테이블 라벨은 별도 조회 필요 (일단 테이블명 사용)
    setCurrentMainTableLabel(selectedScreen.table_name);
    setIframeKey(prev => prev + 1); // iframe 새로고침
  }, [groupScreens]);

  // 테이블 설정 모달 열기 핸들러
  const handleOpenTableSetting = useCallback((tableName: string, tableLabel?: string) => {
    setTableSettingTarget({ tableName, tableLabel });
    setShowTableSettingModal(true);
  }, []);

  // 테이블 설정 모달 닫기 핸들러
  const handleCloseTableSetting = useCallback(() => {
    setShowTableSettingModal(false);
    setTableSettingTarget(null);
  }, []);

  // 초기 로드 시 그룹 화면 목록도 로드
  useEffect(() => {
    if (isOpen && groupId) {
      loadGroupScreens();
    }
  }, [isOpen, groupId, loadGroupScreens]);

  // props 변경 시 현재 화면 상태 업데이트
  useEffect(() => {
    setCurrentScreenId(screenId);
    setCurrentScreenName(screenName);
    setCurrentMainTable(mainTable);
    setCurrentMainTableLabel(mainTableLabel);
  }, [screenId, screenName, mainTable, mainTableLabel]);

  // 데이터 로드
  const loadData = useCallback(async () => {
    if (!currentScreenId) return;

    setLoading(true);
    try {
      // 1. 해당 화면에서 시작하는 데이터 흐름 로드
      const flowsResponse = await getDataFlows({ sourceScreenId: currentScreenId });
      if (flowsResponse.success && flowsResponse.data) {
        setDataFlows(flowsResponse.data);
      }

      // 2. 화면 레이아웃 요약 정보 로드 (컴포넌트 컬럼 정보 포함)
      const layoutResponse = await getMultipleScreenLayoutSummary([currentScreenId]);
      if (layoutResponse.success && layoutResponse.data) {
        const screenLayout = layoutResponse.data[currentScreenId];
        setLayoutItems(screenLayout?.layoutItems || []);
        // 캔버스 크기 저장 (화면 프리뷰에 사용)
        setCanvasSize({
          width: screenLayout?.canvasWidth || 0,
          height: screenLayout?.canvasHeight || 0,
        });
      }
    } catch (error) {
      console.error("데이터 로드 실패:", error);
    } finally {
      setLoading(false);
    }
  }, [currentScreenId]);

  useEffect(() => {
    if (isOpen && currentScreenId) {
      loadData();
    }
  }, [isOpen, currentScreenId, loadData]);

  // 새로고침 (데이터 + iframe)
  const handleRefresh = useCallback(() => {
    loadData();
    setIframeKey(prev => prev + 1); // iframe 새로고침
  }, [loadData]);

  return (
    <>
    <Dialog open={isOpen} onOpenChange={onClose}>
      <DialogContent className="flex h-[90vh] max-h-[950px] w-[98vw] max-w-[1600px] flex-col">
        <DialogHeader className="flex-shrink-0">
          <DialogTitle className="flex items-center gap-2 text-lg">
            <Settings2 className="h-5 w-5 text-blue-500" />
            화면 설정:
            {groupScreens.length > 1 ? (
              <Select
                value={currentScreenId.toString()}
                onValueChange={(value) => handleScreenChange(parseInt(value, 10))}
              >
                <SelectTrigger className="h-8 w-auto min-w-[200px] max-w-[400px] text-base font-semibold">
                  <SelectValue placeholder="화면 선택" />
                </SelectTrigger>
                <SelectContent>
                  {groupScreens.map((screen) => (
                    <SelectItem key={screen.screen_id} value={screen.screen_id.toString()}>
                      {screen.screen_name}
                      {screen.screen_role && (
                        <span className="ml-2 text-xs text-muted-foreground">
                          ({screen.screen_role})
                        </span>
                      )}
                    </SelectItem>
                  ))}
                </SelectContent>
              </Select>
            ) : (
              <span>{currentScreenName}</span>
            )}
          </DialogTitle>
          <DialogDescription className="text-sm">
            화면의 필드 매핑, 테이블 연결, 데이터 흐름을 확인하고 설정합니다.
          </DialogDescription>
        </DialogHeader>

        {/* 2컬럼 레이아웃: 왼쪽 탭(좁게) + 오른쪽 프리뷰(넓게) */}
        <div className="flex min-h-0 flex-1 gap-3">
          {/* 왼쪽: 탭 컨텐츠 (40%) */}
          <div className="flex min-h-0 w-[40%] flex-col rounded-lg border bg-white">
            <Tabs
              value={activeTab}
              onValueChange={setActiveTab}
              className="flex min-h-0 flex-1 flex-col"
            >
              <div className="flex flex-shrink-0 items-center justify-between border-b p-2">
                <TabsList className="h-8">
                  <TabsTrigger value="overview" className="gap-1 text-xs px-2">
                    <Database className="h-3 w-3" />
                    개요
                  </TabsTrigger>
                  <TabsTrigger value="control-management" className="gap-1 text-xs px-2">
                    <Zap className="h-3 w-3" />
                    제어 관리
                  </TabsTrigger>
                  <TabsTrigger value="data-flow" className="gap-1 text-xs px-2">
                    <GitBranch className="h-3 w-3" />
                    데이터 흐름
                  </TabsTrigger>
                </TabsList>
                <div className="flex items-center gap-1">
                  <Button
                    variant="ghost"
                    size="sm"
                    onClick={handleRefresh}
                    className="h-7 w-7 p-0"
                    title="새로고침"
                  >
                    <RefreshCw className={cn("h-3.5 w-3.5", loading && "animate-spin")} />
                  </Button>
                  <Button
                    variant="outline"
                    size="sm"
                    onClick={() => setShowDesignerModal(true)}
                    className="h-7 px-2 text-xs gap-1"
                    title="화면 디자이너에서 상세 편집"
                  >
                    <ExternalLink className="h-3 w-3" />
                    디자이너
                  </Button>
                </div>
              </div>

              {/* 탭 1: 화면 개요 */}
              <TabsContent value="overview" className="mt-0 min-h-0 flex-1 overflow-auto p-3">
                <OverviewTab
                  screenId={currentScreenId}
                  screenName={currentScreenName}
                  mainTable={currentMainTable}
                  mainTableLabel={currentMainTableLabel}
                  filterTables={filterTables}
                  fieldMappings={fieldMappings}
                  componentCount={componentCount}
                  dataFlows={dataFlows}
                  layoutItems={layoutItems}
                  loading={loading}
                  onRefresh={handleRefresh}
                  onOpenTableSetting={handleOpenTableSetting}
                />
              </TabsContent>

              {/* 탭 2: 제어 관리 */}
              <TabsContent value="control-management" className="mt-0 min-h-0 flex-1 overflow-auto p-3">
                <ControlManagementTab
                  screenId={currentScreenId}
                  groupId={groupId}
                  layoutItems={layoutItems}
                  loading={loading}
                  onRefresh={handleRefresh}
                />
              </TabsContent>

              {/* 탭 3: 데이터 흐름 */}
              <TabsContent value="data-flow" className="mt-0 min-h-0 flex-1 overflow-auto p-3">
                <DataFlowTab
                  screenId={currentScreenId}
                  groupId={groupId}
                  dataFlows={dataFlows}
                  loading={loading}
                  onReload={loadData}
                  onSaveSuccess={onSaveSuccess}
                />
              </TabsContent>
            </Tabs>
          </div>

          {/* 오른쪽: 화면 프리뷰 (60%, 항상 표시) */}
          <div className="flex min-h-0 w-[60%] flex-col overflow-hidden rounded-lg border bg-white">
            <PreviewTab 
              screenId={currentScreenId} 
              screenName={currentScreenName} 
              companyCode={companyCode} 
              iframeKey={iframeKey}
              canvasWidth={canvasSize.width}
              canvasHeight={canvasSize.height}
            />
          </div>
        </div>
      </DialogContent>
    </Dialog>

    {/* ScreenDesigner 전체 화면 모달 */}
    <Dialog open={showDesignerModal} onOpenChange={setShowDesignerModal}>
      <DialogContent className="max-w-[98vw] h-[95vh] p-0 overflow-hidden">
        <div className="flex flex-col h-full">
          <ScreenDesigner
            selectedScreen={{
              screenId: currentScreenId,
              screenCode: `screen_${currentScreenId}`,
              screenName: currentScreenName,
              tableName: currentMainTable || "",
              companyCode: companyCode || "*",
              description: "",
              isActive: "Y" as const,
              createdDate: new Date(),
              updatedDate: new Date(),
            }}
            onBackToList={async () => {
              setShowDesignerModal(false);
              // 디자이너에서 저장 후 모달 닫으면 데이터 새로고침
              await loadData();
              // 데이터 로드 완료 후 iframe 갱신
              setIframeKey(prev => prev + 1);
            }}
          />
        </div>
      </DialogContent>
    </Dialog>

    {/* TableSettingModal */}
    {tableSettingTarget && (
      <TableSettingModal
        isOpen={showTableSettingModal}
        onClose={handleCloseTableSetting}
        tableName={tableSettingTarget.tableName}
        tableLabel={tableSettingTarget.tableLabel}
        screenId={currentScreenId}
        onSaveSuccess={() => {
          handleRefresh();
        }}
      />
    )}
  </>
  );
}

// ============================================================
// 통합 테이블 컬럼 아코디언 컴포넌트
// ============================================================

interface ColumnMapping {
  columnName: string;
  fieldLabel?: string;
  order: number; // 화면 순서 (y 좌표 기준)
}

interface JoinColumnRef {
  column: string;
  refTable: string;
  refTableLabel?: string;
  refColumn: string;
  displayColumn?: string;
}

interface FilterKeyMapping {
  mainTableColumn: string;
  mainTableColumnLabel?: string;
  filterTableColumn: string;
  filterTableColumnLabel?: string;
}

interface TableColumnAccordionProps {
  // 공통 props
  tableName: string;
  tableLabel?: string;
  tableType: "main" | "filter"; // 테이블 타입
  columnMappings?: ColumnMapping[];
  onColumnChange?: (fieldLabel: string, oldColumn: string, newColumn: string) => void;
  onColumnReorder?: (newOrder: string[]) => void; // 컬럼 순서 변경 콜백
  onJoinSettingSaved?: () => void;
  usedFields?: Set<string>; // 화면에서 사용 중인 컬럼 목록
  
  // 필터 테이블 전용 props (optional)
  mainTable?: string; // 메인 테이블명 (필터 테이블에서 필터 연결 정보 표시용)
  filterKeyMapping?: FilterKeyMapping;
  joinColumnRefs?: JoinColumnRef[];
}

function TableColumnAccordion({
  tableName,
  tableLabel,
  tableType,
  columnMappings = [],
  onColumnChange,
  onColumnReorder,
  onJoinSettingSaved,
  usedFields = new Set(),
  mainTable,
  filterKeyMapping,
  joinColumnRefs = [],
}: TableColumnAccordionProps) {
  // columnMappings를 Map으로 변환 (컬럼명 → 매핑정보)
  const columnMappingMap = useMemo(() => {
    const map = new Map<string, ColumnMapping>();
    columnMappings.forEach(m => map.set(m.columnName.toLowerCase(), m));
    return map;
  }, [columnMappings]);
  
  const [isOpen, setIsOpen] = useState(false);
  const [columns, setColumns] = useState<ColumnTypeInfo[]>([]);
  const [loadingColumns, setLoadingColumns] = useState(false);
  
  // 편집 중인 필드
  const [editingField, setEditingField] = useState<string | null>(null);
  
  // 조인 설정 관련 상태
  const [allTables, setAllTables] = useState<TableInfo[]>([]);
  const [refTableColumns, setRefTableColumns] = useState<ColumnTypeInfo[]>([]);
  const [loadingRefColumns, setLoadingRefColumns] = useState(false);
  const [savingJoinSetting, setSavingJoinSetting] = useState(false);
  
  // 조인 설정 편집 상태
  const [editingJoin, setEditingJoin] = useState<{
    columnName: string;
    referenceTable: string;
    referenceColumn: string;
    displayColumn: string;
  } | null>(null);
  
  // 드래그 앤 드롭 상태
  const [draggedIndex, setDraggedIndex] = useState<number | null>(null);
  const [localColumnOrder, setLocalColumnOrder] = useState<string[] | null>(null); // 드래그 중 로컬 순서
  
  // 스타일 설정 (테이블 타입별)
  const isMain = tableType === "main";
  const themeColor = isMain ? "blue" : "purple";
  const themeIcon = isMain ? Table2 : Filter;
  const themeBadge = isMain ? "메인" : "필터";
  
  // 필터 테이블용 플래그
  const hasJoinRefs = joinColumnRefs && joinColumnRefs.length > 0;
  const hasFilterKey = !!filterKeyMapping;
  
  // 정렬된 컬럼 목록
  const sortedColumns = useMemo(() => {
    if (columns.length === 0) return [];
    
    if (isMain) {
      // 메인: 사용 중 → 안 쓰는 컬럼
      const used: (ColumnTypeInfo & { mapping: ColumnMapping })[] = [];
      const unused: ColumnTypeInfo[] = [];
      
      columns.forEach(col => {
        const mapping = columnMappingMap.get(col.columnName.toLowerCase());
        if (mapping) {
          used.push({ ...col, mapping });
        } else {
          unused.push(col);
        }
      });
      
      used.sort((a, b) => a.mapping.order - b.mapping.order);
      return [...used, ...unused];
    } else {
      // 필터: 필터키 → 조인키 → 필드 → 안 쓰는 컬럼
      const filterKeys: ColumnTypeInfo[] = [];
      const joinKeys: ColumnTypeInfo[] = [];
      const fieldCols: (ColumnTypeInfo & { mapping: ColumnMapping })[] = [];
      const unused: ColumnTypeInfo[] = [];
      
      columns.forEach(col => {
        const colNameLower = col.columnName.toLowerCase();
        const isFilterKey = filterKeyMapping?.filterTableColumn?.toLowerCase() === colNameLower;
        const isJoinKey = joinColumnRefs?.some(j => j.column.toLowerCase() === colNameLower);
        const mapping = columnMappingMap.get(colNameLower);
        
        if (isFilterKey) {
          filterKeys.push(col);
        } else if (isJoinKey) {
          joinKeys.push(col);
        } else if (mapping) {
          fieldCols.push({ ...col, mapping });
        } else {
          unused.push(col);
        }
      });
      
      fieldCols.sort((a, b) => a.mapping.order - b.mapping.order);
      return [...filterKeys, ...joinKeys, ...fieldCols, ...unused];
    }
  }, [columns, columnMappingMap, isMain, filterKeyMapping, joinColumnRefs]);

  // 아코디언 열릴 때 테이블 컬럼 + 전체 테이블 목록 로드
  const handleToggle = async () => {
    const newIsOpen = !isOpen;
    setIsOpen(newIsOpen);
    
    if (newIsOpen && columns.length === 0 && tableName) {
      setLoadingColumns(true);
      try {
        const result = await tableManagementApi.getColumnList(tableName);
        if (result.success && result.data && result.data.columns) {
          setColumns(result.data.columns);
        }
        
        if (allTables.length === 0) {
          const tablesResult = await tableManagementApi.getTableList();
          if (tablesResult.success && tablesResult.data) {
            setAllTables(tablesResult.data);
          }
        }
      } catch (error) {
        console.error("테이블 컬럼 로드 실패:", error);
      } finally {
        setLoadingColumns(false);
      }
    }
  };
  
  // 참조 테이블 선택 시 해당 테이블의 컬럼 로드
  const loadRefTableColumns = useCallback(async (refTableName: string) => {
    if (!refTableName) {
      setRefTableColumns([]);
      return;
    }
    
    setLoadingRefColumns(true);
    try {
      const result = await tableManagementApi.getColumnList(refTableName);
      if (result.success && result.data && result.data.columns) {
        setRefTableColumns(result.data.columns);
      }
    } catch (error) {
      console.error("참조 테이블 컬럼 로드 실패:", error);
    } finally {
      setLoadingRefColumns(false);
    }
  }, []);
  
  // 조인 설정 저장
  const handleSaveJoinSetting = useCallback(async () => {
    if (!editingJoin || !tableName) return;
    
    setSavingJoinSetting(true);
    try {
      const settings: ColumnSettings = {
        columnLabel: columns.find(c => c.columnName === editingJoin.columnName)?.displayName || editingJoin.columnName,
        webType: "entity",
        detailSettings: JSON.stringify({}),
        codeCategory: "",
        codeValue: "",
        referenceTable: editingJoin.referenceTable,
        referenceColumn: editingJoin.referenceColumn,
        displayColumn: editingJoin.displayColumn,
      };
      
      const result = await tableManagementApi.updateColumnSettings(
        tableName,
        editingJoin.columnName,
        settings
      );
      
      if (result.success) {
        toast.success("조인 설정이 저장되었습니다.");
        setEditingJoin(null);
        onJoinSettingSaved?.();
      } else {
        toast.error(result.message || "조인 설정 저장에 실패했습니다.");
      }
    } catch (error) {
      console.error("조인 설정 저장 실패:", error);
      toast.error("조인 설정 저장에 실패했습니다.");
    } finally {
      setSavingJoinSetting(false);
    }
  }, [editingJoin, tableName, columns, onJoinSettingSaved]);
  
  // 조인 설정 편집 시작
  const startEditingJoin = useCallback((columnName: string, currentRefTable?: string, currentRefColumn?: string, currentDisplayColumn?: string) => {
    setEditingJoin({
      columnName,
      referenceTable: currentRefTable || "",
      referenceColumn: currentRefColumn || "",
      displayColumn: currentDisplayColumn || "",
    });
    
    if (currentRefTable) {
      loadRefTableColumns(currentRefTable);
    }
  }, [loadRefTableColumns]);

  // 드래그 앤 드롭 핸들러
  const handleDragStart = useCallback((e: React.DragEvent, index: number) => {
    setDraggedIndex(index);
    e.dataTransfer.effectAllowed = "move";
    e.dataTransfer.setData("text/plain", String(index));
    
    // 드래그 시작 시 현재 순서를 로컬 상태로 저장
    const usedColumns = sortedColumns.filter(col => {
      const colNameLower = col.columnName.toLowerCase();
      return columnMappingMap.has(colNameLower);
    });
    setLocalColumnOrder(usedColumns.map(col => col.columnName));
  }, [sortedColumns, columnMappingMap]);

  const handleDragOver = useCallback((e: React.DragEvent, hoverIndex: number) => {
    e.preventDefault();
    e.dataTransfer.dropEffect = "move";
    
    if (draggedIndex === null || draggedIndex === hoverIndex || !localColumnOrder) return;
    
    // 사용 중인 컬럼 수 체크
    if (hoverIndex >= localColumnOrder.length || draggedIndex >= localColumnOrder.length) return;
    
    // 로컬 순서만 변경 (저장하지 않음)
    const newOrder = [...localColumnOrder];
    const draggedItem = newOrder[draggedIndex];
    newOrder.splice(draggedIndex, 1);
    newOrder.splice(hoverIndex, 0, draggedItem);
    
    setDraggedIndex(hoverIndex);
    setLocalColumnOrder(newOrder);
  }, [draggedIndex, localColumnOrder]);

  const handleDrop = useCallback((e: React.DragEvent) => {
    e.preventDefault();
    
    // 드롭 시 최종 순서로 저장
    if (localColumnOrder && onColumnReorder) {
      onColumnReorder(localColumnOrder);
    }
    
    setDraggedIndex(null);
    setLocalColumnOrder(null);
  }, [localColumnOrder, onColumnReorder]);

  const handleDragEnd = useCallback(() => {
    // 드래그 취소 시 (드롭 영역 밖으로 나간 경우)
    setDraggedIndex(null);
    setLocalColumnOrder(null);
  }, []);

  // 컬럼의 특수 상태 확인 (필터 테이블용)
  const getColumnState = (colNameLower: string) => {
    const isFilterKey = filterKeyMapping?.filterTableColumn?.toLowerCase() === colNameLower;
    const joinRef = joinColumnRefs?.find(j => j.column.toLowerCase() === colNameLower);
    const isJoinKey = !!joinRef;
    const mapping = columnMappingMap.get(colNameLower);
    // usedFields에서도 확인 (bindField 등에서 가져온 사용 컬럼)
    const isUsed = !!mapping || usedFields.has(colNameLower) || 
      Array.from(usedFields).some(f => f.toLowerCase() === colNameLower);
    
    return { isFilterKey, isJoinKey, joinRef, isUsed, mapping };
  };

  const ThemeIcon = themeIcon;

  return (
    <div className={`rounded-lg border bg-${themeColor}-50/30 overflow-hidden`}>
      {/* 헤더 */}
      <button
        type="button"
        onClick={handleToggle}
        className={`w-full flex items-center gap-3 p-3 hover:bg-${themeColor}-50/50 transition-colors text-left`}
      >
        {isOpen ? (
          <ChevronDown className={`h-4 w-4 text-${themeColor}-500 flex-shrink-0`} />
        ) : (
          <ChevronRight className={`h-4 w-4 text-${themeColor}-500 flex-shrink-0`} />
        )}
        
        <ThemeIcon className={`h-4 w-4 text-${themeColor}-500 flex-shrink-0`} />
        
        <div className="flex-1 min-w-0">
          <div className="font-medium truncate">{tableLabel || tableName}</div>
          {tableLabel && tableName !== tableLabel && (
            <div className="text-xs text-muted-foreground truncate">{tableName}</div>
          )}
        </div>
        
        <Badge variant="outline" className={`bg-${themeColor}-100 text-${themeColor}-700 text-xs flex-shrink-0`}>
          {themeBadge}
        </Badge>
        
        {/* 요약 정보 */}
        <div className="text-xs text-muted-foreground flex-shrink-0">
          {isMain ? (
            columns.length > 0 && `${columns.length}개 컬럼`
          ) : (
            <>
              {hasFilterKey && `${(filterKeyMapping ? 1 : 0)}개 필터`}
              {hasJoinRefs && hasFilterKey && " / "}
              {hasJoinRefs && `${joinColumnRefs!.length}개 조인`}
            </>
          )}
        </div>
      </button>

      {/* 펼쳐진 내용 */}
      {isOpen && (
        <div className={`border-t border-${themeColor}-100 p-3 space-y-3 bg-white/50`}>
          {/* 필터 연결 정보 (필터 테이블만) */}
          {!isMain && filterKeyMapping && (
            <div className="flex items-center gap-1 text-xs">
              <Badge variant="outline" className="h-4 px-1 text-[8px] bg-purple-200 text-purple-700 border-purple-300">필터</Badge>
              <span className="font-mono text-purple-700">
                {mainTable}.{filterKeyMapping.mainTableColumnLabel || filterKeyMapping.mainTableColumn}
              </span>
              <span className="text-muted-foreground">=</span>
              <span className="font-mono text-purple-700">
                {tableName}.{filterKeyMapping.filterTableColumnLabel || filterKeyMapping.filterTableColumn}
              </span>
            </div>
          )}

          {/* 테이블 컬럼 정보 */}
          <div className="space-y-2">
            <div className="flex items-center justify-between">
              <div className="flex items-center gap-1 text-xs font-medium text-gray-700">
                <Table2 className="h-3 w-3" />
                테이블 컬럼 ({loadingColumns ? "로딩중..." : `${columns.length}개`})
              </div>
              {columnMappings.length > 0 && (
                <div className="flex items-center gap-2 text-[10px] text-muted-foreground">
                  <div className="flex items-center gap-1">
                    <div className="w-2 h-2 rounded-full bg-blue-500" />
                    <span>화면에서 사용 ({columnMappings.length}개)</span>
                  </div>
                </div>
              )}
            </div>
            
            {loadingColumns ? (
              <div className="flex items-center justify-center py-4">
                <Loader2 className="h-5 w-5 animate-spin text-muted-foreground" />
              </div>
            ) : sortedColumns.length > 0 ? (
              <div className="flex gap-3 items-stretch">
                {/* 왼쪽: 컬럼 목록 */}
                <div className="flex-1 space-y-1 pr-1 max-h-[350px] overflow-y-auto">
                  {(() => {
                    // 드래그 중일 때 로컬 순서 적용
                    let displayColumns = sortedColumns;
                    if (localColumnOrder && localColumnOrder.length > 0) {
                      // 사용 중인 컬럼들을 localColumnOrder에 따라 재정렬
                      const usedCols = sortedColumns.filter(col => columnMappingMap.has(col.columnName.toLowerCase()));
                      const unusedCols = sortedColumns.filter(col => !columnMappingMap.has(col.columnName.toLowerCase()));
                      
                      const reorderedUsed = localColumnOrder
                        .map(name => usedCols.find(col => col.columnName.toLowerCase() === name.toLowerCase()))
                        .filter(Boolean) as typeof usedCols;
                      
                      displayColumns = [...reorderedUsed, ...unusedCols];
                    }
                    
                    return displayColumns.map((col, cIdx) => {
                    const colNameLower = col.columnName.toLowerCase();
                    const { isFilterKey, isJoinKey, isUsed, mapping } = getColumnState(colNameLower);
                    const isSelected = editingField === (mapping?.fieldLabel || col.columnName);
                    const isDragging = draggedIndex === cIdx;
                    
                    // 드래그 가능 여부 (사용 중인 컬럼만)
                    const canDrag = isUsed && !!onColumnReorder;
                    
                    // 스타일 결정
                    let baseClass = "";
                    let leftBorderClass = "";
                    
                    if (isUsed) {
                      baseClass = isSelected
                        ? "bg-blue-100 border-blue-300"
                        : "bg-blue-50 border-blue-200 hover:bg-blue-100 hover:border-blue-300";
                      if (isJoinKey) {
                        leftBorderClass = "border-l-4 border-l-orange-500";
                      } else if (isFilterKey) {
                        leftBorderClass = "border-l-4 border-l-purple-400";
                      }
                    } else if (isJoinKey) {
                      baseClass = isSelected
                        ? "bg-orange-100 border-orange-400"
                        : "bg-orange-50 border-orange-200 hover:bg-orange-100 hover:border-orange-300";
                    } else if (isFilterKey) {
                      baseClass = isSelected
                        ? "bg-purple-100 border-purple-400"
                        : "bg-purple-50 border-purple-200 hover:bg-purple-100 hover:border-purple-300";
                    } else {
                      baseClass = isSelected
                        ? "bg-gray-100 border-gray-400"
                        : "bg-gray-50 border-gray-200 hover:bg-gray-100";
                    }
                    
                    return (
                      <div
                        key={cIdx}
                        draggable={canDrag}
                        onDragStart={canDrag ? (e) => handleDragStart(e, cIdx) : undefined}
                        onDragOver={canDrag ? (e) => handleDragOver(e, cIdx) : undefined}
                        onDrop={canDrag ? handleDrop : undefined}
                        onDragEnd={canDrag ? handleDragEnd : undefined}
                        onClick={() => {
                          setEditingField(mapping?.fieldLabel || col.columnName);
                          setEditingJoin(null);
                        }}
                        className={`flex items-center justify-between gap-2 text-xs rounded px-2 py-1.5 border transition-all cursor-pointer ${baseClass} ${leftBorderClass} ${isDragging ? "opacity-50 scale-95" : ""} ${canDrag ? "cursor-grab active:cursor-grabbing" : ""}`}
                      >
                        <span className={`font-medium truncate flex-1 min-w-0 ${
                          isUsed ? "text-blue-700"
                          : isJoinKey ? "text-orange-800"
                          : isFilterKey ? "text-purple-800"
                          : "text-gray-500"
                        }`}>
                          {col.displayName || col.columnName}
                        </span>
                        <div className="flex items-center gap-2 flex-shrink-0">
                          {isFilterKey && (
                            <Badge variant="outline" className="h-4 px-1 text-[8px] bg-purple-200 text-purple-700 border-purple-300">필터</Badge>
                          )}
                          {isJoinKey && (
                            <Badge variant="outline" className="h-4 px-1 text-[8px] bg-orange-200 text-orange-700 border-orange-300">조인</Badge>
                          )}
                          {isUsed && (
                            <Badge className="text-white text-[8px] px-1 py-0 h-4 bg-blue-500">필드</Badge>
                          )}
                          <span className="text-muted-foreground text-[10px] w-20 truncate text-right" title={col.dataType}>
                            {col.dataType?.split("(")[0]}
                          </span>
                        </div>
                      </div>
                    );
                  });
                  })()}
                </div>

                {/* 오른쪽: 컬럼 설정 패널 */}
                <div className="w-52 border-l pl-3 flex-shrink-0 max-h-[350px] overflow-y-auto">
                  {editingField ? (() => {
                    const selectedMapping = columnMappings.find(m => m.fieldLabel === editingField);
                    const selectedColumn = selectedMapping 
                      ? columns.find(c => c.columnName.toLowerCase() === selectedMapping.columnName?.toLowerCase())
                      : columns.find(c => (c.displayName || c.columnName) === editingField || c.columnName === editingField);
                    const colNameLower = selectedColumn?.columnName?.toLowerCase() || editingField.toLowerCase();
                    const { isFilterKey, isJoinKey, joinRef, isUsed } = getColumnState(colNameLower);
                    
                    // 조인 정보 - joinColumnRefs에서 먼저 찾고, 없으면 selectedColumn에서 가져옴
                    const hasJoinSetting = isJoinKey || !!selectedColumn?.referenceTable;
                    
                    return (
                      <div className="space-y-3">
                        <div className="text-xs font-medium text-gray-700">컬럼 설정</div>
                        
                        {/* 화면 필드 정보 (필드인 경우만) */}
                        {isUsed && (
                          <>
                            <div className="space-y-1">
                              <span className="text-[10px] text-muted-foreground">화면 필드</span>
                              <div className="text-sm font-medium text-blue-700">
                                {selectedColumn?.displayName || selectedMapping?.columnName || editingField}
                              </div>
                            </div>
                            
                            <div className="space-y-1">
                              <span className="text-[10px] text-muted-foreground">현재 컬럼</span>
                              <div className="text-sm font-mono text-gray-600">
                                {selectedMapping?.columnName || "-"}
                              </div>
                            </div>
                            
                            <div className="space-y-1">
                              <span className="text-[10px] text-muted-foreground">컬럼 변경</span>
                              <Popover>
                                <PopoverTrigger asChild>
                                  <Button variant="outline" size="sm" className="w-full justify-between h-7 text-xs">
                                    {selectedColumn?.displayName || selectedMapping?.columnName || "컬럼 선택"}
                                    <ChevronsUpDown className="h-3 w-3 opacity-50" />
                                  </Button>
                                </PopoverTrigger>
                                <PopoverContent className="p-0 w-48" align="start">
                                  <Command>
                                    <CommandInput placeholder="컬럼 검색..." className="h-8 text-xs" />
                                    <CommandList className="max-h-32">
                                      <CommandEmpty className="text-xs py-2">없음</CommandEmpty>
                                      <CommandGroup>
                                        {columns.map((c) => (
                                          <CommandItem
                                            key={c.columnName}
                                            value={c.displayName || c.columnName}
                                            onSelect={() => {
                                              if (onColumnChange && selectedMapping) {
                                                onColumnChange(editingField, selectedMapping.columnName, c.columnName);
                                              }
                                              setEditingField(null);
                                            }}
                                          >
                                            <Check className={`mr-2 h-3 w-3 ${c.columnName.toLowerCase() === selectedMapping?.columnName?.toLowerCase() ? "opacity-100" : "opacity-0"}`} />
                                            {c.displayName || c.columnName}
                                          </CommandItem>
                                        ))}
                                      </CommandGroup>
                                    </CommandList>
                                  </Command>
                                </PopoverContent>
                              </Popover>
                            </div>
                            
                            {/* 필드에서 제거 */}
                            <Button
                              variant="outline"
                              size="sm"
                              className="w-full h-7 text-xs text-red-600 border-red-300 hover:bg-red-50"
                              onClick={() => {
                                if (selectedMapping && onColumnChange) {
                                  onColumnChange(selectedMapping.fieldLabel!, selectedMapping.columnName, "__REMOVE_FIELD__");
                                  toast.success(`"${selectedColumn?.displayName || selectedMapping.columnName}" 필드가 제거되었습니다.`);
                                  setEditingField(null);
                                }
                              }}
                            >
                              <X className="h-3 w-3 mr-1" />
                              필드에서 제거
                            </Button>
                          </>
                        )}
                        
                        {/* 컬럼 기본 정보 (필드가 아닌 경우) */}
                        {!isUsed && (
                          <div className="space-y-3">
                            <div className="text-xs text-muted-foreground">
                              <div className="space-y-1">
                                <span className="text-[10px]">컬럼명</span>
                                <div className="font-mono">{selectedColumn?.columnName || editingField}</div>
                              </div>
                              <div className="space-y-1 mt-2">
                                <span className="text-[10px]">데이터 타입</span>
                                <div>{selectedColumn?.dataType || "-"}</div>
                              </div>
                            </div>
                            
                            <Button
                              variant="outline"
                              size="sm"
                              className="w-full h-7 text-xs text-blue-600 border-blue-300 hover:bg-blue-50"
                              onClick={() => {
                                if (selectedColumn?.columnName && onColumnChange) {
                                  onColumnChange("__NEW_FIELD__", "", selectedColumn.columnName);
                                  toast.success(`"${selectedColumn.displayName || selectedColumn.columnName}" 필드가 추가되었습니다.`);
                                  setEditingField(null);
                                }
                              }}
                            >
                              <Plus className="h-3 w-3 mr-1" />
                              필드로 추가
                            </Button>
                          </div>
                        )}
                        
                        {/* 조인 설정 */}
                        <div className="space-y-2 pt-2 border-t border-orange-200">
                          <div className="flex items-center justify-between">
                            <div className="flex items-center gap-1">
                              <Badge variant="outline" className={`h-4 px-1 text-[8px] ${hasJoinSetting ? "bg-orange-200 text-orange-700 border-orange-300" : "bg-gray-100 text-gray-600 border-gray-300"}`}>
                                조인
                              </Badge>
                              <span className={`text-[10px] font-medium ${hasJoinSetting ? "text-orange-700" : "text-gray-600"}`}>
                                {editingJoin && editingJoin.columnName === (selectedColumn?.columnName || editingField) ? "연결 편집" : (hasJoinSetting ? "연결 정보" : "연결 설정")}
                              </span>
                            </div>
                            {editingJoin && editingJoin.columnName === (selectedColumn?.columnName || editingField) ? (
                              <div className="flex gap-1">
                                <Button variant="ghost" size="sm" className="h-5 px-1.5 text-[10px] text-gray-500 hover:text-gray-700" onClick={() => setEditingJoin(null)}>
                                  취소
                                </Button>
                                <Button size="sm" className="h-5 px-1.5 text-[10px] bg-orange-500 hover:bg-orange-600 text-white" onClick={handleSaveJoinSetting} disabled={!editingJoin.referenceTable || !editingJoin.referenceColumn || savingJoinSetting}>
                                  {savingJoinSetting ? "..." : "저장"}
                                </Button>
                              </div>
                            ) : (
                              <Button
                                variant="ghost"
                                size="sm"
                                className={`h-5 px-1 text-[10px] ${hasJoinSetting ? "text-orange-600 hover:text-orange-800" : "text-gray-500 hover:text-gray-700"}`}
                                onClick={() => startEditingJoin(
                                  selectedColumn?.columnName || editingField,
                                  isJoinKey && joinRef ? joinRef.refTable : (selectedColumn?.referenceTable || ""),
                                  isJoinKey && joinRef ? joinRef.refColumn : (selectedColumn?.referenceColumn || ""),
                                  selectedColumn?.displayColumn || ""
                                )}
                              >
                                <Settings2 className="h-3 w-3 mr-0.5" />
                                {hasJoinSetting ? "편집" : "추가"}
                              </Button>
                            )}
                          </div>
                          
                          {editingJoin && editingJoin.columnName === (selectedColumn?.columnName || editingField) ? (
                            <JoinSettingEditor
                              editingJoin={editingJoin}
                              setEditingJoin={setEditingJoin}
                              allTables={allTables}
                              refTableColumns={refTableColumns}
                              loadingRefColumns={loadingRefColumns}
                              savingJoinSetting={savingJoinSetting}
                              loadRefTableColumns={loadRefTableColumns}
                              handleSaveJoinSetting={handleSaveJoinSetting}
                            />
                          ) : hasJoinSetting ? (
                            <div className="space-y-1.5 text-xs">
                              <div>
                                <span className="text-muted-foreground">대상 테이블: </span>
                                <span className="font-mono text-orange-800">{isJoinKey && joinRef ? joinRef.refTable : selectedColumn?.referenceTable}</span>
                              </div>
                              <div>
                                <span className="text-muted-foreground">연결 컬럼: </span>
                                <span className="font-mono text-orange-800">{isJoinKey && joinRef ? joinRef.refColumn : selectedColumn?.referenceColumn}</span>
                              </div>
                            </div>
                          ) : (
                            <div className="text-[10px] text-muted-foreground">조인 설정이 없습니다.</div>
                          )}
                        </div>
                        
                        {/* 필터 정보 (필터 키인 경우) - 필터 테이블에서만 */}
                        {!isMain && isFilterKey && filterKeyMapping && (
                          <div className="space-y-2 pt-2 border-t border-purple-200">
                            <div className="flex items-center gap-1">
                              <Badge variant="outline" className="h-4 px-1 text-[8px] bg-purple-200 text-purple-700 border-purple-300">필터</Badge>
                              <span className="text-[10px] text-purple-700 font-medium">필터링 정보</span>
                            </div>
                            <div className="space-y-1.5 text-xs">
                              <div>
                                <span className="text-muted-foreground">대상 테이블: </span>
                                <span className="font-mono text-purple-800">{mainTable}</span>
                              </div>
                              <div>
                                <span className="text-muted-foreground">연결 컬럼: </span>
                                <span className="font-mono text-purple-800">{filterKeyMapping.mainTableColumn}</span>
                              </div>
                            </div>
                          </div>
                        )}
                      </div>
                    );
                  })() : (
                    <div className="flex items-center justify-center h-full text-xs text-muted-foreground">
                      필드를 선택하세요
                    </div>
                  )}
                </div>
              </div>
            ) : (
              <div className="text-xs text-muted-foreground text-center py-2">컬럼 정보 없음</div>
            )}
          </div>
        </div>
      )}
    </div>
  );
}

// ============================================================
// 조인 설정 편집 컴포넌트 (검색 가능한 Combobox 사용)
// ============================================================

interface JoinSettingEditorProps {
  editingJoin: {
    columnName: string;
    referenceTable: string;
    referenceColumn: string;
    displayColumn: string;
  };
  setEditingJoin: React.Dispatch<React.SetStateAction<{
    columnName: string;
    referenceTable: string;
    referenceColumn: string;
    displayColumn: string;
  } | null>>;
  allTables: TableInfo[];
  refTableColumns: ColumnTypeInfo[];
  loadingRefColumns: boolean;
  savingJoinSetting: boolean;
  loadRefTableColumns: (tableName: string) => void;
  handleSaveJoinSetting: () => void;
}

function JoinSettingEditor({
  editingJoin,
  setEditingJoin,
  allTables,
  refTableColumns,
  loadingRefColumns,
  savingJoinSetting,
  loadRefTableColumns,
  handleSaveJoinSetting,
}: JoinSettingEditorProps) {
  const [tableSearchOpen, setTableSearchOpen] = useState(false);
  const [refColSearchOpen, setRefColSearchOpen] = useState(false);
  const [displayColSearchOpen, setDisplayColSearchOpen] = useState(false);
  
  const selectedTable = allTables.find(t => t.tableName === editingJoin.referenceTable);
  const selectedRefCol = refTableColumns.find(c => c.columnName === editingJoin.referenceColumn);
  const selectedDisplayCol = refTableColumns.find(c => c.columnName === editingJoin.displayColumn);
  
  return (
    <div className="space-y-2">
      {/* 대상 테이블 선택 - 검색 가능 Combobox */}
      <div className="space-y-1">
        <span className="text-[10px] text-muted-foreground">대상 테이블</span>
        <Popover open={tableSearchOpen} onOpenChange={setTableSearchOpen}>
          <PopoverTrigger asChild>
            <Button
              variant="outline"
              size="sm"
              className="w-full justify-between h-7 text-xs font-normal"
            >
              {selectedTable?.displayName || editingJoin.referenceTable || "테이블 선택"}
              <ChevronsUpDown className="h-3 w-3 opacity-50" />
            </Button>
          </PopoverTrigger>
          <PopoverContent className="p-0 w-56" align="start">
            <Command>
              <CommandInput placeholder="테이블 검색..." className="h-8 text-xs" />
              <CommandList>
                <CommandEmpty className="text-xs py-2">테이블을 찾을 수 없습니다.</CommandEmpty>
                <CommandGroup>
                  {allTables.map(t => (
                    <CommandItem
                      key={t.tableName}
                      value={t.displayName || t.tableName}
                      onSelect={() => {
                        setEditingJoin({ ...editingJoin, referenceTable: t.tableName, referenceColumn: "", displayColumn: "" });
                        loadRefTableColumns(t.tableName);
                        setTableSearchOpen(false);
                      }}
                      className="text-xs"
                    >
                      <Check
                        className={cn(
                          "mr-2 h-3 w-3",
                          editingJoin.referenceTable === t.tableName ? "opacity-100" : "opacity-0"
                        )}
                      />
                      {t.displayName || t.tableName}
                    </CommandItem>
                  ))}
                </CommandGroup>
              </CommandList>
            </Command>
          </PopoverContent>
        </Popover>
      </div>
      
      {/* 연결 컬럼 선택 - 검색 가능 Combobox */}
      <div className="space-y-1">
        <span className="text-[10px] text-muted-foreground">연결 컬럼 (PK)</span>
        <Popover open={refColSearchOpen} onOpenChange={setRefColSearchOpen}>
          <PopoverTrigger asChild>
            <Button
              variant="outline"
              size="sm"
              className="w-full justify-between h-7 text-xs font-normal"
              disabled={!editingJoin.referenceTable || loadingRefColumns}
            >
              {loadingRefColumns ? "로딩중..." : (selectedRefCol?.displayName || editingJoin.referenceColumn || "컬럼 선택")}
              <ChevronsUpDown className="h-3 w-3 opacity-50" />
            </Button>
          </PopoverTrigger>
          <PopoverContent className="p-0 w-56" align="start">
            <Command>
              <CommandInput placeholder="컬럼 검색..." className="h-8 text-xs" />
              <CommandList>
                <CommandEmpty className="text-xs py-2">컬럼을 찾을 수 없습니다.</CommandEmpty>
                <CommandGroup>
                  {refTableColumns.map(c => (
                    <CommandItem
                      key={c.columnName}
                      value={c.displayName || c.columnName}
                      onSelect={() => {
                        setEditingJoin({ ...editingJoin, referenceColumn: c.columnName });
                        setRefColSearchOpen(false);
                      }}
                      className="text-xs"
                    >
                      <Check
                        className={cn(
                          "mr-2 h-3 w-3",
                          editingJoin.referenceColumn === c.columnName ? "opacity-100" : "opacity-0"
                        )}
                      />
                      {c.displayName || c.columnName}
                    </CommandItem>
                  ))}
                </CommandGroup>
              </CommandList>
            </Command>
          </PopoverContent>
        </Popover>
      </div>
      
      {/* 표시 컬럼 선택 - 검색 가능 Combobox */}
      <div className="space-y-1">
        <span className="text-[10px] text-muted-foreground">표시 컬럼</span>
        <Popover open={displayColSearchOpen} onOpenChange={setDisplayColSearchOpen}>
          <PopoverTrigger asChild>
            <Button
              variant="outline"
              size="sm"
              className="w-full justify-between h-7 text-xs font-normal"
              disabled={!editingJoin.referenceTable || loadingRefColumns}
            >
              {selectedDisplayCol?.displayName || editingJoin.displayColumn || "컬럼 선택"}
              <ChevronsUpDown className="h-3 w-3 opacity-50" />
            </Button>
          </PopoverTrigger>
          <PopoverContent className="p-0 w-56" align="start">
            <Command>
              <CommandInput placeholder="컬럼 검색..." className="h-8 text-xs" />
              <CommandList>
                <CommandEmpty className="text-xs py-2">컬럼을 찾을 수 없습니다.</CommandEmpty>
                <CommandGroup>
                  {refTableColumns.map(c => (
                    <CommandItem
                      key={c.columnName}
                      value={c.displayName || c.columnName}
                      onSelect={() => {
                        setEditingJoin({ ...editingJoin, displayColumn: c.columnName });
                        setDisplayColSearchOpen(false);
                      }}
                      className="text-xs"
                    >
                      <Check
                        className={cn(
                          "mr-2 h-3 w-3",
                          editingJoin.displayColumn === c.columnName ? "opacity-100" : "opacity-0"
                        )}
                      />
                      {c.displayName || c.columnName}
                    </CommandItem>
                  ))}
                </CommandGroup>
              </CommandList>
            </Command>
          </PopoverContent>
        </Popover>
      </div>
      
    </div>
  );
}

// ============================================================
// 탭 1: 화면 개요
// ============================================================

interface OverviewTabProps {
  screenId: number;
  screenName: string;
  mainTable?: string;
  mainTableLabel?: string;
  filterTables: FilterTableInfo[];
  fieldMappings: FieldMappingInfo[];
  componentCount: number;
  dataFlows: DataFlow[];
  layoutItems: LayoutItem[]; // 컴포넌트 컬럼 정보 추가
  loading: boolean;
  onRefresh?: () => void; // 컬럼 변경 후 새로고침 콜백
  onOpenTableSetting?: (tableName: string, tableLabel?: string) => void; // 테이블 설정 모달 열기
}

function OverviewTab({
  screenId,
  screenName,
  mainTable,
  mainTableLabel,
  filterTables,
  fieldMappings,
  componentCount,
  dataFlows,
  layoutItems,
  loading,
  onRefresh,
  onOpenTableSetting,
}: OverviewTabProps) {
  const [isSavingColumn, setIsSavingColumn] = useState(false);

  // 컬럼 변경 저장 함수 - 화면 디자이너와 동일한 방식
  const handleColumnChange = useCallback(async (fieldLabel: string, oldColumn: string, newColumn: string) => {
    console.log("[handleColumnChange] 시작", { screenId, fieldLabel, oldColumn, newColumn });
    
    if (!screenId) {
      toast.error("화면 정보가 없습니다.");
      return;
    }

    // 필드 추가/제거 처리
    const isAddingField = fieldLabel === "__NEW_FIELD__";
    const isRemovingField = newColumn === "__REMOVE_FIELD__";

    setIsSavingColumn(true);
    try {
      // 1. 현재 레이아웃 가져오기
      console.log("[handleColumnChange] 레이아웃 조회 시작", { screenId });
      const currentLayout = await screenApi.getLayout(screenId);
      console.log("[handleColumnChange] 레이아웃 조회 완료", { 
        hasLayout: !!currentLayout, 
        hasComponents: !!currentLayout?.components,
        componentCount: currentLayout?.components?.length 
      });
      
      if (!currentLayout?.components) {
        toast.error("레이아웃 정보를 불러올 수 없습니다.");
        console.error("[handleColumnChange] 레이아웃 정보 없음", { currentLayout });
        return;
      }

      // 2. 레이아웃에서 해당 컬럼 변경
      let columnChanged = false;
      
      // 디버깅: 각 컴포넌트의 구조 확인
      console.log("[handleColumnChange] 컴포넌트 구조 분석 시작");
      currentLayout.components.forEach((comp: any, i: number) => {
        console.log(`[handleColumnChange] 컴포넌트 ${i}:`, {
          id: comp.id,
          componentType: comp.componentType,
          hasUsedColumns: !!comp.usedColumns,
          usedColumns: comp.usedColumns,
          hasComponentConfig: !!comp.componentConfig,
          componentConfigKeys: comp.componentConfig ? Object.keys(comp.componentConfig) : [],
          componentConfigColumns: comp.componentConfig?.columns,
          componentConfigUsedColumns: comp.componentConfig?.usedColumns,
          columnName: comp.columnName,
          bindField: comp.bindField,
        });
      });
      
      let updatedComponents = currentLayout.components.map((comp: any) => {
        // usedColumns 배열이 있는 컴포넌트에서 oldColumn을 newColumn으로 교체
        if (comp.usedColumns && Array.isArray(comp.usedColumns)) {
          // 필드 추가
          if (isAddingField) {
            console.log("[handleColumnChange] usedColumns에 필드 추가", { compId: comp.id, newColumn });
            columnChanged = true;
            return {
              ...comp,
              usedColumns: [...comp.usedColumns, newColumn],
            };
          }
          
          const idx = comp.usedColumns.findIndex(
            (col: string) => col.toLowerCase() === oldColumn.toLowerCase()
          );
          if (idx !== -1) {
            console.log("[handleColumnChange] usedColumns에서 찾음", { compId: comp.id, idx, isRemovingField });
            columnChanged = true;
            
            // 필드 제거
            if (isRemovingField) {
              return {
                ...comp,
                usedColumns: comp.usedColumns.filter((_: string, i: number) => i !== idx),
              };
            }
            
            // 컬럼 변경
            return {
              ...comp,
              usedColumns: comp.usedColumns.map((col: string, i: number) =>
                i === idx ? newColumn : col
              ),
            };
          }
        }
        
        // componentConfig 내부의 usedColumns도 확인
        if (comp.componentConfig?.usedColumns && Array.isArray(comp.componentConfig.usedColumns)) {
          // 필드 추가
          if (isAddingField && !columnChanged) {
            console.log("[handleColumnChange] componentConfig.usedColumns에 필드 추가", { compId: comp.id, newColumn });
            columnChanged = true;
            return {
              ...comp,
              componentConfig: {
                ...comp.componentConfig,
                usedColumns: [...comp.componentConfig.usedColumns, newColumn],
              },
            };
          }
          
          const idx = comp.componentConfig.usedColumns.findIndex(
            (col: string) => col.toLowerCase() === oldColumn.toLowerCase()
          );
          if (idx !== -1) {
            console.log("[handleColumnChange] componentConfig.usedColumns에서 찾음", { compId: comp.id, idx, isRemovingField });
            columnChanged = true;
            
            // 필드 제거
            if (isRemovingField) {
              return {
                ...comp,
                componentConfig: {
                  ...comp.componentConfig,
                  usedColumns: comp.componentConfig.usedColumns.filter((_: string, i: number) => i !== idx),
                },
              };
            }
            
            // 컬럼 변경
            return {
              ...comp,
              componentConfig: {
                ...comp.componentConfig,
                usedColumns: comp.componentConfig.usedColumns.map((col: string, i: number) =>
                  i === idx ? newColumn : col
                ),
              },
            };
          }
        }
        
        // componentConfig.columns 배열도 확인 (컬럼 설정 형태)
        if (comp.componentConfig?.columns && Array.isArray(comp.componentConfig.columns)) {
          // 필드 추가
          if (isAddingField && !columnChanged) {
            console.log("[handleColumnChange] componentConfig.columns에 필드 추가", { compId: comp.id, newColumn });
            columnChanged = true;
            return {
              ...comp,
              componentConfig: {
                ...comp.componentConfig,
                columns: [...comp.componentConfig.columns, { field: newColumn, columnName: newColumn }],
              },
            };
          }
          
          const columnIdx = comp.componentConfig.columns.findIndex(
            (col: any) => {
              const colName = typeof col === 'string' ? col : (col.field || col.columnName || col.name);
              return colName?.toLowerCase() === oldColumn.toLowerCase();
            }
          );
          if (columnIdx !== -1) {
            console.log("[handleColumnChange] componentConfig.columns에서 찾음", { compId: comp.id, columnIdx, isRemovingField });
            columnChanged = true;
            
            // 필드 제거
            if (isRemovingField) {
              return {
                ...comp,
                componentConfig: {
                  ...comp.componentConfig,
                  columns: comp.componentConfig.columns.filter((_: any, i: number) => i !== columnIdx),
                },
              };
            }
            
            // 컬럼 변경
            const updatedColumns = comp.componentConfig.columns.map((col: any, i: number) => {
              if (i !== columnIdx) return col;
              if (typeof col === 'string') return newColumn;
              return { ...col, field: newColumn, columnName: newColumn };
            });
            return {
              ...comp,
              componentConfig: {
                ...comp.componentConfig,
                columns: updatedColumns,
              },
            };
          }
        }

        // columnName 필드 체크 (위젯 컴포넌트)
        if (comp.columnName?.toLowerCase() === oldColumn.toLowerCase()) {
          console.log("[handleColumnChange] columnName에서 찾음", { compId: comp.id });
          columnChanged = true;
          return {
            ...comp,
            columnName: newColumn,
          };
        }
        
        // bindField 필드 체크 (바인딩 필드)
        if (comp.bindField?.toLowerCase() === oldColumn.toLowerCase()) {
          console.log("[handleColumnChange] bindField에서 찾음", { compId: comp.id });
          columnChanged = true;
          return {
            ...comp,
            bindField: newColumn,
          };
        }
        
        // split-panel-layout의 leftPanel.columns 검사
        if (comp.componentConfig?.leftPanel?.columns && Array.isArray(comp.componentConfig.leftPanel.columns)) {
          const leftColumns = comp.componentConfig.leftPanel.columns;
          console.log("[handleColumnChange] leftPanel.columns 검사:", {
            compId: comp.id,
            leftColumnsCount: leftColumns.length,
            leftColumnsContent: leftColumns.map((col: any) => typeof col === 'string' ? col : (col.name || col.columnName || col.field)),
            searchingFor: isAddingField ? newColumn : oldColumn.toLowerCase(),
            isAddingField,
            isRemovingField,
          });
          
          // 필드 추가: 배열에 새 컬럼 추가
          if (isAddingField) {
            console.log("[handleColumnChange] 필드 추가", { compId: comp.id, newColumn });
            columnChanged = true;
            return {
              ...comp,
              componentConfig: {
                ...comp.componentConfig,
                leftPanel: {
                  ...comp.componentConfig.leftPanel,
                  columns: [...leftColumns, { name: newColumn, columnName: newColumn }],
                },
              },
            };
          }
          
          const columnIdx = leftColumns.findIndex((col: any) => {
            const colName = typeof col === 'string' ? col : (col.name || col.columnName || col.field);
            return colName?.toLowerCase() === oldColumn.toLowerCase();
          });
          if (columnIdx !== -1) {
            console.log("[handleColumnChange] leftPanel.columns에서 찾음", { compId: comp.id, columnIdx, isRemovingField });
            columnChanged = true;
            
            // 필드 제거: 배열에서 해당 컬럼 제거
            if (isRemovingField) {
              const filteredColumns = leftColumns.filter((_: any, i: number) => i !== columnIdx);
              return {
                ...comp,
                componentConfig: {
                  ...comp.componentConfig,
                  leftPanel: {
                    ...comp.componentConfig.leftPanel,
                    columns: filteredColumns,
                  },
                },
              };
            }
            
            // 컬럼 변경
            const updatedLeftColumns = leftColumns.map((col: any, i: number) => {
              if (i !== columnIdx) return col;
              if (typeof col === 'string') return newColumn;
              // 객체인 경우 name/columnName 필드 업데이트
              return { ...col, name: newColumn, columnName: newColumn };
            });
            return {
              ...comp,
              componentConfig: {
                ...comp.componentConfig,
                leftPanel: {
                  ...comp.componentConfig.leftPanel,
                  columns: updatedLeftColumns,
                },
              },
            };
          }
        }
        
        // split-panel-layout의 rightPanel.columns 검사
        if (comp.componentConfig?.rightPanel?.columns && Array.isArray(comp.componentConfig.rightPanel.columns)) {
          const rightColumns = comp.componentConfig.rightPanel.columns;
          
          // 필드 추가: 배열에 새 컬럼 추가
          if (isAddingField && !columnChanged) {
            console.log("[handleColumnChange] 필드 추가 (rightPanel)", { compId: comp.id, newColumn });
            columnChanged = true;
            return {
              ...comp,
              componentConfig: {
                ...comp.componentConfig,
                rightPanel: {
                  ...comp.componentConfig.rightPanel,
                  columns: [...rightColumns, { name: newColumn, columnName: newColumn }],
                },
              },
            };
          }
          
          const columnIdx = rightColumns.findIndex((col: any) => {
            const colName = typeof col === 'string' ? col : (col.name || col.columnName || col.field);
            return colName?.toLowerCase() === oldColumn.toLowerCase();
          });
          if (columnIdx !== -1) {
            console.log("[handleColumnChange] rightPanel.columns에서 찾음", { compId: comp.id, columnIdx, isRemovingField });
            columnChanged = true;
            
            // 필드 제거
            if (isRemovingField) {
              const filteredColumns = rightColumns.filter((_: any, i: number) => i !== columnIdx);
              return {
                ...comp,
                componentConfig: {
                  ...comp.componentConfig,
                  rightPanel: {
                    ...comp.componentConfig.rightPanel,
                    columns: filteredColumns,
                  },
                },
              };
            }
            
            // 컬럼 변경
            const updatedRightColumns = rightColumns.map((col: any, i: number) => {
              if (i !== columnIdx) return col;
              if (typeof col === 'string') return newColumn;
              return { ...col, name: newColumn, columnName: newColumn };
            });
            return {
              ...comp,
              componentConfig: {
                ...comp.componentConfig,
                rightPanel: {
                  ...comp.componentConfig.rightPanel,
                  columns: updatedRightColumns,
                },
              },
            };
          }
        }

        return comp;
      });

      // 폼 화면용 필드 추가/제거 처리 (개별 input 컴포넌트)
      if (!columnChanged) {
        // 폼 화면 필드 추가: 새 text-input 컴포넌트 생성
        if (isAddingField && newColumn) {
          console.log("[handleColumnChange] 폼 화면 필드 추가 시도", { newColumn });
          
          // 마지막 컴포넌트 위치 계산
          let maxY = 50; // 기본 시작 위치
          let lastComponentHeight = 30;
          currentLayout.components.forEach((comp: any) => {
            const compY = comp.position?.y || 0;
            const compHeight = comp.size?.height || 30;
            if (compY + compHeight > maxY) {
              maxY = compY + compHeight;
              lastComponentHeight = compHeight;
            }
          });
          
          // 새 컴포넌트 위치: 마지막 컴포넌트 아래 + 간격
          const newY = maxY + 10;
          const newComponentId = `comp_${Date.now()}_${Math.random().toString(36).substr(2, 9)}`;
          
          // 새 text-input 컴포넌트 생성
          const newComponent = {
            id: newComponentId,
            type: "component",
            label: newColumn,
            columnName: newColumn,
            bindField: newColumn,
            widgetType: "text-input",
            componentType: "text-input",
            position: { x: 20, y: newY, z: 1 },
            size: { width: 300, height: 30 },
            gridColumns: 4,
            componentConfig: {
              type: "text-input",
              webType: "text-input",
              placeholder: `${newColumn}을(를) 입력하세요`,
            },
            webTypeConfig: {},
            style: {
              labelDisplay: true,
              labelFontSize: "14px",
              labelColor: "#212121",
              width: "300px",
              height: "30px",
            },
          };
          
          updatedComponents = [...updatedComponents, newComponent];
          columnChanged = true;
          console.log("[handleColumnChange] 폼 화면 필드 추가 완료", { newComponentId, newY });
        }
        
        // 폼 화면 필드 제거: bindField가 일치하는 컴포넌트 삭제
        if (isRemovingField && oldColumn) {
          console.log("[handleColumnChange] 폼 화면 필드 제거 시도", { oldColumn });
          
          const beforeCount = updatedComponents.length;
          updatedComponents = updatedComponents.filter((comp: any) => {
            // bindField, columnName, 또는 properties.columnName으로 매칭
            const compBindField = comp.bindField || comp.columnName || comp.properties?.columnName;
            if (compBindField?.toLowerCase() === oldColumn.toLowerCase()) {
              console.log("[handleColumnChange] 폼 컴포넌트 제거", { compId: comp.id, compBindField });
              return false; // 제거
            }
            return true; // 유지
          });
          
          if (beforeCount > updatedComponents.length) {
            columnChanged = true;
            console.log("[handleColumnChange] 폼 화면 필드 제거 완료", { 
              beforeCount, 
              afterCount: updatedComponents.length 
            });
          }
        }
      }

      if (!columnChanged) {
        toast.warning("변경할 컬럼을 찾을 수 없습니다.");
        console.warn("[handleColumnChange] 변경할 컬럼 없음", { oldColumn, newColumn });
        return;
      }

      // 3. 저장
      console.log("[handleColumnChange] 저장 시작", { 
        screenId, 
        componentCount: updatedComponents.length 
      });
      await screenApi.saveLayout(screenId, {
        ...currentLayout,
        components: updatedComponents,
      });
      console.log("[handleColumnChange] 저장 완료");

      if (isAddingField) {
        toast.success(`필드가 추가되었습니다: ${newColumn}`);
      } else if (isRemovingField) {
        toast.success(`필드가 제거되었습니다: ${oldColumn}`);
      } else {
        toast.success(`컬럼이 변경되었습니다: ${oldColumn} → ${newColumn}`);
      }
      
      // 실시간 반영을 위해 콜백 호출
      onRefresh?.();
    } catch (error) {
      console.error("컬럼 변경 저장 실패:", error);
      toast.error("컬럼 변경 저장에 실패했습니다.");
    } finally {
      setIsSavingColumn(false);
    }
  }, [screenId, onRefresh]);

  // 컬럼 순서 변경 저장 함수
  const handleColumnReorder = useCallback(async (tableType: "main" | "filter", newOrder: string[]) => {
    console.log("[handleColumnReorder] 시작", { screenId, tableType, newOrder });
    
    if (!screenId) {
      console.warn("[handleColumnReorder] screenId 없음");
      return;
    }

    try {
      // 1. 현재 레이아웃 가져오기
      const currentLayout = await screenApi.getLayout(screenId);
      
      if (!currentLayout?.components) {
        console.error("[handleColumnReorder] 레이아웃 정보 없음");
        return;
      }

      // 2. 레이아웃에서 해당 컬럼들의 순서 변경
      let orderChanged = false;
      
      const updatedComponents = currentLayout.components.map((comp: any) => {
        // split-panel-layout의 leftPanel.columns 순서 변경
        if (comp.componentConfig?.leftPanel?.columns && Array.isArray(comp.componentConfig.leftPanel.columns)) {
          const leftColumns = comp.componentConfig.leftPanel.columns as any[];
          
          // newOrder에 따라 leftColumns 재정렬
          const reorderedColumns = newOrder.map(colName => {
            return leftColumns.find((col: any) => {
              const name = typeof col === 'string' ? col : (col.name || col.columnName || col.field);
              return name?.toLowerCase() === colName.toLowerCase();
            });
          }).filter(Boolean);
          
          // 원래 없던 컬럼들 유지 (newOrder에 없는 컬럼들)
          const remainingColumns = leftColumns.filter((col: any) => {
            const name = typeof col === 'string' ? col : (col.name || col.columnName || col.field);
            return !newOrder.some(n => n.toLowerCase() === name?.toLowerCase());
          });
          
          if (reorderedColumns.length > 0) {
            orderChanged = true;
            console.log("[handleColumnReorder] leftPanel.columns 순서 변경", {
              compId: comp.id,
              before: leftColumns.map((c: any) => typeof c === 'string' ? c : (c.name || c.columnName)),
              after: [...reorderedColumns, ...remainingColumns].map((c: any) => typeof c === 'string' ? c : (c.name || c.columnName)),
            });
            
            return {
              ...comp,
              componentConfig: {
                ...comp.componentConfig,
                leftPanel: {
                  ...comp.componentConfig.leftPanel,
                  columns: [...reorderedColumns, ...remainingColumns],
                },
              },
            };
          }
        }
        
        // rightPanel.columns 순서 변경
        if (comp.componentConfig?.rightPanel?.columns && Array.isArray(comp.componentConfig.rightPanel.columns)) {
          const rightColumns = comp.componentConfig.rightPanel.columns as any[];
          
          const reorderedColumns = newOrder.map(colName => {
            return rightColumns.find((col: any) => {
              const name = typeof col === 'string' ? col : (col.name || col.columnName || col.field);
              return name?.toLowerCase() === colName.toLowerCase();
            });
          }).filter(Boolean);
          
          const remainingColumns = rightColumns.filter((col: any) => {
            const name = typeof col === 'string' ? col : (col.name || col.columnName || col.field);
            return !newOrder.some(n => n.toLowerCase() === name?.toLowerCase());
          });
          
          if (reorderedColumns.length > 0) {
            orderChanged = true;
            console.log("[handleColumnReorder] rightPanel.columns 순서 변경", {
              compId: comp.id,
              before: rightColumns.map((c: any) => typeof c === 'string' ? c : (c.name || c.columnName)),
              after: [...reorderedColumns, ...remainingColumns].map((c: any) => typeof c === 'string' ? c : (c.name || c.columnName)),
            });
            
            return {
              ...comp,
              componentConfig: {
                ...comp.componentConfig,
                rightPanel: {
                  ...comp.componentConfig.rightPanel,
                  columns: [...reorderedColumns, ...remainingColumns],
                },
              },
            };
          }
        }
        
        // componentConfig.usedColumns 순서 변경
        if (comp.componentConfig?.usedColumns && Array.isArray(comp.componentConfig.usedColumns)) {
          const usedColumns = comp.componentConfig.usedColumns as string[];
          
          const reorderedColumns = newOrder.filter(colName => 
            usedColumns.some(c => c.toLowerCase() === colName.toLowerCase())
          );
          
          const remainingColumns = usedColumns.filter(c => 
            !newOrder.some(n => n.toLowerCase() === c.toLowerCase())
          );
          
          if (reorderedColumns.length > 0) {
            orderChanged = true;
            console.log("[handleColumnReorder] usedColumns 순서 변경", {
              compId: comp.id,
              before: usedColumns,
              after: [...reorderedColumns, ...remainingColumns],
            });
            
            return {
              ...comp,
              componentConfig: {
                ...comp.componentConfig,
                usedColumns: [...reorderedColumns, ...remainingColumns],
              },
            };
          }
        }
        
        // componentConfig.columns 순서 변경
        if (comp.componentConfig?.columns && Array.isArray(comp.componentConfig.columns)) {
          const columns = comp.componentConfig.columns as any[];
          
          const reorderedColumns = newOrder.map(colName => {
            return columns.find((col: any) => {
              const name = typeof col === 'string' ? col : (col.field || col.columnName || col.name);
              return name?.toLowerCase() === colName.toLowerCase();
            });
          }).filter(Boolean);
          
          const remainingColumns = columns.filter((col: any) => {
            const name = typeof col === 'string' ? col : (col.field || col.columnName || col.name);
            return !newOrder.some(n => n.toLowerCase() === name?.toLowerCase());
          });
          
          if (reorderedColumns.length > 0) {
            orderChanged = true;
            console.log("[handleColumnReorder] componentConfig.columns 순서 변경", {
              compId: comp.id,
              before: columns.map((c: any) => typeof c === 'string' ? c : (c.field || c.columnName)),
              after: [...reorderedColumns, ...remainingColumns].map((c: any) => typeof c === 'string' ? c : (c.field || c.columnName)),
            });
            
            return {
              ...comp,
              componentConfig: {
                ...comp.componentConfig,
                columns: [...reorderedColumns, ...remainingColumns],
              },
            };
          }
        }
        
        return comp;
      });

      if (!orderChanged) {
        console.log("[handleColumnReorder] 순서 변경 없음");
        return;
      }

      // 3. 레이아웃 저장
      console.log("[handleColumnReorder] 레이아웃 저장");
      await screenApi.saveLayout(screenId, {
        ...currentLayout,
        components: updatedComponents,
      });

      console.log("[handleColumnReorder] 순서 변경 저장 완료");
      
      // 실시간 반영을 위해 콜백 호출
      onRefresh?.();
    } catch (error) {
      console.error("[handleColumnReorder] 순서 변경 저장 실패:", error);
      toast.error("컬럼 순서 변경 저장에 실패했습니다.");
    }
  }, [screenId, onRefresh]);

  // 통계 계산 (layoutItems의 컬럼 수도 포함)
  const stats = useMemo(() => {
    const totalJoins = filterTables.reduce(
      (sum, ft) => sum + (ft.joinColumnRefs?.length || 0),
      0
    );
    const totalFilters = filterTables.reduce(
      (sum, ft) => sum + (ft.filterColumns?.length || 0),
      0
    );

    // layoutItems에서 사용하는 컬럼 수 계산 (usedColumns + bindField)
    const layoutColumnsSet = new Set<string>();
    layoutItems.forEach((item) => {
      if (item.usedColumns) {
        item.usedColumns.forEach((col) => layoutColumnsSet.add(col));
      }
      // bindField도 포함 (인풋 필드 등)
      if (item.bindField) {
        layoutColumnsSet.add(item.bindField);
      }
    });
    const layoutColumnCount = layoutColumnsSet.size;

    return {
      tableCount: 1 + filterTables.length, // 메인 + 필터
      fieldCount: layoutColumnCount > 0 ? layoutColumnCount : fieldMappings.length,
      joinCount: totalJoins,
      filterCount: totalFilters,
      flowCount: dataFlows.length,
      usedFields: layoutColumnsSet, // 사용 중인 컬럼 Set
    };
  }, [filterTables, fieldMappings, dataFlows, layoutItems]);

  return (
    <div className="space-y-6">
      {/* 기본 정보 카드 */}
      <div className="grid grid-cols-2 gap-4 md:grid-cols-5">
        <div className="rounded-lg border bg-blue-50 p-4">
          <div className="text-2xl font-bold text-blue-600">{stats.tableCount}</div>
          <div className="text-xs text-blue-700">연결된 테이블</div>
        </div>
        <div className="rounded-lg border bg-purple-50 p-4">
          <div className="text-2xl font-bold text-purple-600">{stats.fieldCount}</div>
          <div className="text-xs text-purple-700">필드 매핑</div>
        </div>
        <div className="rounded-lg border bg-orange-50 p-4">
          <div className="text-2xl font-bold text-orange-600">{stats.joinCount}</div>
          <div className="text-xs text-orange-700">조인 설정</div>
        </div>
        <div className="rounded-lg border bg-green-50 p-4">
          <div className="text-2xl font-bold text-green-600">{stats.filterCount}</div>
          <div className="text-xs text-green-700">필터 컬럼</div>
        </div>
        <div className="rounded-lg border bg-pink-50 p-4">
          <div className="text-2xl font-bold text-pink-600">{stats.flowCount}</div>
          <div className="text-xs text-pink-700">데이터 흐름</div>
        </div>
      </div>

      {/* 메인 테이블 (아코디언 형식) */}
      <div className="space-y-2">
        <div className="flex items-center justify-between">
          <h3 className="flex items-center gap-2 text-sm font-semibold">
            <Database className="h-4 w-4 text-blue-500" />
            메인 테이블
          </h3>
          {mainTable && (
            <Button
              variant="outline"
              size="sm"
              className="h-7 gap-1 text-xs"
              onClick={() => onOpenTableSetting?.(mainTable, mainTableLabel)}
            >
              <Settings2 className="h-3 w-3" />
              테이블 설정
            </Button>
          )}
        </div>
        {mainTable ? (
          <TableColumnAccordion 
            tableName={mainTable} 
            tableLabel={mainTableLabel}
            tableType="main"
            usedFields={stats.usedFields}
            columnMappings={
              // layoutItems에서 컬럼 매핑 정보 추출 (y 좌표 순서대로)
              layoutItems
                .slice()
                .sort((a, b) => a.y - b.y) // 화면 순서대로 정렬
                .flatMap((item, idx) => {
                  const cols: string[] = [];
                  // usedColumns에서 가져오기
                  if (item.usedColumns) {
                    cols.push(...item.usedColumns);
                  }
                  // bindField도 포함
                  if (item.bindField && !cols.includes(item.bindField)) {
                    cols.push(item.bindField);
                  }
                  return cols.map(col => ({
                    columnName: col,
                    fieldLabel: col,
                    order: idx * 100 + cols.indexOf(col),
                  }));
                })
                // 중복 제거 (첫 번째 매핑만 유지)
                .filter((mapping, idx, arr) => 
                  arr.findIndex(m => m.columnName.toLowerCase() === mapping.columnName.toLowerCase()) === idx
                )
            }
            onColumnChange={handleColumnChange}
            onColumnReorder={(newOrder) => handleColumnReorder("main", newOrder)}
            onJoinSettingSaved={onRefresh}
          />
        ) : (
          <div className="rounded-lg border border-dashed p-4 text-center text-sm text-muted-foreground">
            메인 테이블이 설정되지 않았습니다.
          </div>
        )}
      </div>

      {/* 연결된 필터 테이블 (아코디언 형식) */}
      <div className="space-y-2">
        <h3 className="flex items-center gap-2 text-sm font-semibold">
          <Link2 className="h-4 w-4 text-purple-500" />
          필터 테이블 ({filterTables.length}개)
        </h3>
        {filterTables.length > 0 ? (
          <div className="space-y-2">
            {filterTables.map((ft, idx) => {
              // 이 필터 테이블에서 사용되는 컬럼 매핑 정보 추출
              // 1. layoutItems의 usedColumns에서 추출
              const usedColumnMappings: ColumnMapping[] = layoutItems
                .slice()
                .sort((a, b) => a.y - b.y)
                .flatMap((item, itemIdx) => 
                  (item.usedColumns || []).map(col => ({
                    columnName: col,
                    fieldLabel: col,
                    order: itemIdx * 100 + (item.usedColumns?.indexOf(col) || 0),
                  }))
                );
              
              // 2. 조인 컬럼도 필드로 추가 (화면에서 조인 테이블 데이터를 보여주므로)
              const joinColumnMappings: ColumnMapping[] = (ft.joinColumnRefs || []).map((ref, refIdx) => ({
                columnName: ref.column,
                fieldLabel: ref.column,
                order: 1000 + refIdx, // 조인 컬럼은 후순위
              }));
              
              // 3. 합치고 중복 제거
              const filterTableColumnMappings: ColumnMapping[] = [...usedColumnMappings, ...joinColumnMappings]
                .filter((mapping, i, arr) => 
                  arr.findIndex(m => m.columnName.toLowerCase() === mapping.columnName.toLowerCase()) === i
                );
              
              return (
                <TableColumnAccordion
                  key={`${ft.tableName}-${idx}`}
                  tableName={ft.tableName}
                  tableLabel={ft.tableLabel}
                  tableType="filter"
                  mainTable={mainTable}
                  filterKeyMapping={ft.filterKeyMapping}
                  joinColumnRefs={ft.joinColumnRefs}
                  columnMappings={filterTableColumnMappings}
                  onColumnChange={handleColumnChange}
                  onColumnReorder={(newOrder) => handleColumnReorder("filter", newOrder)}
                  onJoinSettingSaved={onRefresh}
                />
              );
            })}
          </div>
        ) : (
          <div className="rounded-lg border border-dashed p-4 text-center text-sm text-muted-foreground">
            연결된 필터 테이블이 없습니다.
          </div>
        )}
      </div>

      {/* 데이터 흐름 요약 */}
      <div className="space-y-2">
        <h3 className="flex items-center gap-2 text-sm font-semibold">
          <GitBranch className="h-4 w-4 text-pink-500" />
          데이터 흐름 ({dataFlows.length}개)
        </h3>
        {dataFlows.length > 0 ? (
          <div className="space-y-2">
            {dataFlows.slice(0, 3).map((flow) => (
              <div
                key={flow.id}
                className="flex items-center gap-2 rounded-lg border bg-pink-50/50 p-3 text-sm"
              >
                <Badge variant="outline" className="bg-pink-100 text-pink-700">
                  {flow.flow_type}
                </Badge>
                <span className="flex-1">{flow.description || "설명 없음"}</span>
                <ArrowRight className="h-4 w-4 text-muted-foreground" />
                <span className="text-muted-foreground">화면 {flow.target_screen_id}</span>
              </div>
            ))}
            {dataFlows.length > 3 && (
              <div className="text-center text-xs text-muted-foreground">
                +{dataFlows.length - 3}개 더 있음
              </div>
            )}
          </div>
        ) : (
          <div className="rounded-lg border border-dashed p-4 text-center text-sm text-muted-foreground">
            설정된 데이터 흐름이 없습니다.
          </div>
        )}
      </div>
    </div>
  );
}

// ============================================================
// 탭 2: 필드 매핑
// ============================================================

interface FieldMappingTabProps {
  screenId: number;
  mainTable?: string;
  fieldMappings: FieldMappingInfo[];
  layoutItems: LayoutItem[];
  loading: boolean;
}

function FieldMappingTab({
  screenId,
  mainTable,
  fieldMappings,
  layoutItems,
  loading,
}: FieldMappingTabProps) {
  // 편집 모드 상태
  const [isEditMode, setIsEditMode] = useState(false);
  // 테이블 컬럼 목록 (편집용)
  const [tableColumns, setTableColumns] = useState<ColumnTypeInfo[]>([]);
  const [loadingTableColumns, setLoadingTableColumns] = useState(false);
  // 편집 중인 컬럼 정보
  const [editingColumn, setEditingColumn] = useState<{
    componentIdx: number;
    columnIdx: number;
    currentColumn: string;
  } | null>(null);
  const [editPopoverOpen, setEditPopoverOpen] = useState(false);
  
  // 테이블 컬럼 로드
  const loadTableColumns = useCallback(async () => {
    if (!mainTable || tableColumns.length > 0) return;
    
    setLoadingTableColumns(true);
    try {
      const result = await tableManagementApi.getColumnList(mainTable);
      if (result.success && result.data?.columns) {
        setTableColumns(result.data.columns);
      }
    } catch (error) {
      console.error("테이블 컬럼 로드 실패:", error);
    } finally {
      setLoadingTableColumns(false);
    }
  }, [mainTable, tableColumns.length]);
  
  // 편집 모드 진입 시 컬럼 로드
  useEffect(() => {
    if (isEditMode) {
      loadTableColumns();
    }
  }, [isEditMode, loadTableColumns]);

  // 화면 컴포넌트에서 사용하는 컬럼 정보 추출
  const componentColumns = useMemo(() => {
    const result: Array<{
      componentKind: string;
      componentLabel?: string;
      columns: string[];
      joinColumns: string[];
    }> = [];

    layoutItems.forEach((item) => {
      if (item.usedColumns && item.usedColumns.length > 0) {
        result.push({
          componentKind: item.componentKind,
          componentLabel: item.label,
          columns: item.usedColumns,
          joinColumns: item.joinColumns || [],
        });
      }
    });

    return result;
  }, [layoutItems]);

  // 전체 컬럼 수 계산
  const totalColumns = useMemo(() => {
    const allColumns = new Set<string>();
    componentColumns.forEach((comp) => {
      comp.columns.forEach((col) => allColumns.add(col));
    });
    return allColumns.size;
  }, [componentColumns]);
  
  // 컬럼명 → 표시명 매핑 (테이블 컬럼에서 추출)
  const columnDisplayMap = useMemo(() => {
    const map: Record<string, string> = {};
    tableColumns.forEach((tc) => {
      map[tc.columnName] = tc.displayName || tc.columnName;
    });
    return map;
  }, [tableColumns]);

  // 컴포넌트 타입별 그룹핑 (기존 fieldMappings용)
  const groupedMappings = useMemo(() => {
    const grouped: Record<string, FieldMappingInfo[]> = {};

    fieldMappings.forEach((mapping) => {
      const type = mapping.componentType || "기타";
      if (!grouped[type]) {
        grouped[type] = [];
      }
      grouped[type].push(mapping);
    });

    return grouped;
  }, [fieldMappings]);

  const componentTypes = Object.keys(groupedMappings);

  if (loading) {
    return (
      <div className="flex h-64 items-center justify-center">
        <Loader2 className="h-8 w-8 animate-spin text-muted-foreground" />
      </div>
    );
  }

  return (
    <div className="space-y-6">
      {/* 화면 컴포넌트별 컬럼 사용 현황 */}
      <div className="space-y-4">
        <div className="flex items-center justify-between">
          <div>
            <h3 className="text-sm font-semibold">화면 컴포넌트별 컬럼 사용 현황</h3>
            <p className="text-xs text-muted-foreground">
              {isEditMode 
                ? "컬럼을 클릭하여 매핑을 변경할 수 있습니다."
                : "각 컴포넌트에서 사용하는 테이블 컬럼을 확인합니다."}
            </p>
          </div>
          <div className="flex items-center gap-2">
            <Badge variant="outline" className="text-xs">
              총 {totalColumns}개 컬럼
            </Badge>
            <Button
              variant={isEditMode ? "default" : "outline"}
              size="sm"
              onClick={() => setIsEditMode(!isEditMode)}
              className="h-7 text-xs"
            >
              {isEditMode ? (
                <>
                  <Eye className="mr-1 h-3 w-3" />
                  보기 모드
                </>
              ) : (
                <>
                  <Pencil className="mr-1 h-3 w-3" />
                  편집 모드
                </>
              )}
            </Button>
          </div>
        </div>

        {componentColumns.length === 0 ? (
          <div className="rounded-lg border border-dashed p-8 text-center text-muted-foreground">
            <Columns3 className="mx-auto mb-2 h-8 w-8" />
            <p className="text-sm">화면 컴포넌트에서 사용하는 컬럼 정보가 없습니다.</p>
          </div>
        ) : (
          <div className="space-y-3">
            {componentColumns.map((comp, idx) => (
              <div
                key={idx}
                className="rounded-lg border bg-white overflow-hidden"
              >
                {/* 컴포넌트 헤더 */}
                <div className="flex items-center justify-between px-3 py-2 bg-gray-50 border-b">
                  <div className="flex items-center gap-2">
                    <Table2 className="h-4 w-4 text-blue-500" />
                    <span className="text-sm font-medium">
                      {comp.componentLabel || comp.componentKind}
                    </span>
                    <Badge variant="outline" className="text-[10px]">
                      {comp.componentKind}
                    </Badge>
                  </div>
                  <Badge variant="outline" className="text-xs">
                    {comp.columns.length}개 필드
                  </Badge>
                </div>
                
                {/* 필드 → 컬럼 매핑 테이블 */}
                <div className="divide-y">
                  {/* 테이블 헤더 */}
                  <div className="grid grid-cols-[1fr_28px_1fr] gap-1 px-3 py-1.5 bg-gray-100 text-[10px] font-medium text-gray-500 uppercase">
                    <span>필드명 (화면 표시)</span>
                    <span></span>
                    <span>컬럼명 (데이터베이스)</span>
                  </div>
                  
                  {/* 매핑 행들 */}
                  {comp.columns.map((col, cIdx) => {
                    const isJoinColumn = comp.joinColumns.includes(col);
                    const displayName = columnDisplayMap[col] || col;
                    const isEditing = editingColumn?.componentIdx === idx && editingColumn?.columnIdx === cIdx;
                    
                    return (
                      <div
                        key={cIdx}
                        className={cn(
                          "grid grid-cols-[1fr_28px_1fr] gap-1 px-3 py-1.5 items-center text-xs",
                          isJoinColumn && "bg-orange-50"
                        )}
                      >
                        {/* 필드명 (화면 표시) */}
                        <div className="flex items-center gap-1.5 min-w-0">
                          <span className="font-medium text-gray-900 truncate">
                            {displayName}
                          </span>
                          {isJoinColumn && (
                            <Badge variant="outline" className="text-[9px] bg-orange-100 text-orange-700 px-1 py-0 flex-shrink-0">
                              조인
                            </Badge>
                          )}
                        </div>
                        
                        {/* 화살표 */}
                        <div className="flex justify-center">
                          <ArrowRight className="h-3 w-3 text-gray-400" />
                        </div>
                        
                        {/* 컬럼명 (데이터베이스) */}
                        {isEditMode ? (
                          <Popover
                            open={isEditing && editPopoverOpen}
                            onOpenChange={(open) => {
                              if (open) {
                                setEditingColumn({ componentIdx: idx, columnIdx: cIdx, currentColumn: col });
                              } else {
                                setEditingColumn(null);
                              }
                              setEditPopoverOpen(open);
                            }}
                          >
                            <PopoverTrigger asChild>
                              <button
                                className={cn(
                                  "flex items-center gap-1 px-2 py-0.5 rounded text-left min-w-0",
                                  "hover:bg-blue-50 border border-transparent hover:border-blue-300",
                                  "transition-colors cursor-pointer group"
                                )}
                              >
                                <code className="text-blue-700 font-mono text-[11px] truncate">{col}</code>
                                <Pencil className="h-3 w-3 text-gray-400 group-hover:text-blue-500 flex-shrink-0" />
                              </button>
                            </PopoverTrigger>
                            <PopoverContent className="w-64 p-0" align="start">
                              <Command>
                                <CommandInput 
                                  placeholder="컬럼 검색..." 
                                  className="text-xs"
                                />
                                <CommandList>
                                  <CommandEmpty className="text-xs py-2 text-center">
                                    컬럼을 찾을 수 없습니다.
                                  </CommandEmpty>
                                  <CommandGroup heading="테이블 컬럼">
                                    {loadingTableColumns ? (
                                      <div className="flex items-center justify-center py-4">
                                        <Loader2 className="h-4 w-4 animate-spin" />
                                      </div>
                                    ) : (
                                      tableColumns.map((tableCol) => (
                                        <CommandItem
                                          key={tableCol.columnName}
                                          value={tableCol.columnName}
                                          onSelect={(value) => {
                                            toast.info(`컬럼 변경: ${col} → ${value}`, {
                                              description: "저장 기능은 아직 구현 중입니다."
                                            });
                                            setEditPopoverOpen(false);
                                            setEditingColumn(null);
                                          }}
                                          className="text-xs"
                                        >
                                          <div className="flex flex-col">
                                            <span className={cn(
                                              "font-medium",
                                              tableCol.columnName === col && "text-blue-600"
                                            )}>
                                              {tableCol.displayName || tableCol.columnName}
                                            </span>
                                            {tableCol.displayName && tableCol.displayName !== tableCol.columnName && (
                                              <span className="text-[10px] text-muted-foreground font-mono">
                                                {tableCol.columnName}
                                              </span>
                                            )}
                                          </div>
                                          {tableCol.columnName === col && (
                                            <Check className="ml-auto h-3 w-3 text-blue-600" />
                                          )}
                                        </CommandItem>
                                      ))
                                    )}
                                  </CommandGroup>
                                </CommandList>
                              </Command>
                            </PopoverContent>
                          </Popover>
                        ) : (
                          <code className="text-blue-700 font-mono text-[11px] truncate">{col}</code>
                        )}
                      </div>
                    );
                  })}
                </div>
              </div>
            ))}
          </div>
        )}
      </div>

      {/* 서브 테이블 연결 관계 (기존 fieldMappings) */}
      {fieldMappings.length > 0 && (
        <div className="space-y-4">
          <div className="flex items-center justify-between">
            <div>
              <h3 className="text-sm font-semibold">서브 테이블 연결 관계</h3>
              <p className="text-xs text-muted-foreground">
                메인 테이블과 서브 테이블 간의 필드 연결 관계입니다.
              </p>
            </div>
            <Badge variant="outline" className="text-xs">
              총 {fieldMappings.length}개 연결
            </Badge>
          </div>

          <div className="rounded-lg border">
            <Table>
              <TableHeader>
                <TableRow>
                  <TableHead className="w-[50px] text-xs">#</TableHead>
                  <TableHead className="text-xs">메인 테이블 컬럼</TableHead>
                  <TableHead className="w-[60px] text-center text-xs"></TableHead>
                  <TableHead className="text-xs">서브 테이블</TableHead>
                  <TableHead className="text-xs">서브 테이블 컬럼</TableHead>
                  <TableHead className="text-xs">연결 타입</TableHead>
                </TableRow>
              </TableHeader>
              <TableBody>
                {fieldMappings.map((mapping, idx) => (
                  <TableRow key={idx}>
                    <TableCell className="text-xs text-muted-foreground">
                      {idx + 1}
                    </TableCell>
                    <TableCell className="text-xs font-medium">
                      <Badge variant="outline" className="bg-blue-50 text-blue-700">
                        {mainTable}.{mapping.targetField}
                      </Badge>
                    </TableCell>
                    <TableCell className="text-center">
                      <ArrowRight className="mx-auto h-3 w-3 text-gray-400" />
                    </TableCell>
                    <TableCell className="text-xs">
                      <Badge variant="outline" className="bg-purple-50 text-purple-700">
                        {mapping.sourceTable || "-"}
                      </Badge>
                    </TableCell>
                    <TableCell className="text-xs">
                      <Badge variant="outline" className="bg-green-50 text-green-700">
                        {mapping.sourceField}
                      </Badge>
                    </TableCell>
                    <TableCell className="text-xs text-muted-foreground">
                      {mapping.componentType || "-"}
                    </TableCell>
                  </TableRow>
                ))}
              </TableBody>
            </Table>
          </div>

          {/* 컴포넌트 타입별 요약 */}
          {componentTypes.length > 0 && (
            <div className="space-y-2">
              <h4 className="text-xs font-medium text-muted-foreground">연결 타입별 분류</h4>
              <div className="flex flex-wrap gap-2">
                {componentTypes.map((type) => (
                  <Badge
                    key={type}
                    variant="outline"
                    className="gap-1 bg-gray-50"
                  >
                    {type}
                    <span className="rounded-full bg-gray-200 px-1.5 text-[10px]">
                      {groupedMappings[type].length}
                    </span>
                  </Badge>
                ))}
              </div>
            </div>
          )}
        </div>
      )}
    </div>
  );
}

// ============================================================
// 탭 3: 데이터 흐름
// ============================================================

interface DataFlowTabProps {
  screenId: number;
  groupId?: number;
  dataFlows: DataFlow[];
  loading: boolean;
  onReload: () => void;
  onSaveSuccess?: () => void;
}

function DataFlowTab({
  screenId,
  groupId,
  dataFlows,
  loading,
  onReload,
  onSaveSuccess,
}: DataFlowTabProps) {
  const [isEditing, setIsEditing] = useState(false);
  const [editItem, setEditItem] = useState<DataFlow | null>(null);
  const [formData, setFormData] = useState({
    target_screen_id: "",
    action_type: "navigate",
    data_mapping: "",
    flow_type: "forward",
    description: "",
    is_active: "Y",
  });

  // 폼 초기화
  const resetForm = () => {
    setFormData({
      target_screen_id: "",
      action_type: "navigate",
      data_mapping: "",
      flow_type: "forward",
      description: "",
      is_active: "Y",
    });
    setEditItem(null);
    setIsEditing(false);
  };

  // 수정 모드
  const handleEdit = (item: DataFlow) => {
    setEditItem(item);
    setFormData({
      target_screen_id: String(item.target_screen_id),
      action_type: item.action_type,
      data_mapping: item.data_mapping || "",
      flow_type: item.flow_type,
      description: item.description || "",
      is_active: item.is_active,
    });
    setIsEditing(true);
  };

  // 저장
  const handleSave = async () => {
    if (!formData.target_screen_id) {
      toast.error("대상 화면을 선택해주세요.");
      return;
    }

    try {
      const payload = {
        source_screen_id: screenId,
        target_screen_id: parseInt(formData.target_screen_id),
        action_type: formData.action_type,
        data_mapping: formData.data_mapping || null,
        flow_type: formData.flow_type,
        description: formData.description || null,
        is_active: formData.is_active,
      };

      let response;
      if (editItem) {
        response = await updateDataFlow(editItem.id, payload);
      } else {
        response = await createDataFlow(payload);
      }

      if (response.success) {
        toast.success(editItem ? "데이터 흐름이 수정되었습니다." : "데이터 흐름이 추가되었습니다.");
        resetForm();
        onReload();
        onSaveSuccess?.();
      } else {
        toast.error(response.message || "저장에 실패했습니다.");
      }
    } catch (error) {
      console.error("저장 오류:", error);
      toast.error("저장 중 오류가 발생했습니다.");
    }
  };

  // 삭제
  const handleDelete = async (id: number) => {
    if (!confirm("정말로 삭제하시겠습니까?")) return;

    try {
      const response = await deleteDataFlow(id);
      if (response.success) {
        toast.success("데이터 흐름이 삭제되었습니다.");
        onReload();
        onSaveSuccess?.();
      } else {
        toast.error(response.message || "삭제에 실패했습니다.");
      }
    } catch (error) {
      console.error("삭제 오류:", error);
      toast.error("삭제 중 오류가 발생했습니다.");
    }
  };

  if (loading) {
    return (
      <div className="flex h-64 items-center justify-center">
        <Loader2 className="h-8 w-8 animate-spin text-muted-foreground" />
      </div>
    );
  }

  return (
    <div className="space-y-4">
      {/* 입력 폼 */}
      <div className="space-y-3 rounded-lg bg-muted/50 p-4">
        <div className="text-sm font-medium">
          {isEditing ? "데이터 흐름 수정" : "새 데이터 흐름 추가"}
        </div>

        <div className="grid grid-cols-1 gap-3 sm:grid-cols-3">
          <div>
            <Label className="text-xs">대상 화면 ID *</Label>
            <Input
              type="number"
              value={formData.target_screen_id}
              onChange={(e) =>
                setFormData({ ...formData, target_screen_id: e.target.value })
              }
              placeholder="화면 ID"
              className="h-8 text-xs"
            />
          </div>
          <div>
            <Label className="text-xs">액션 타입</Label>
            <SearchableSelect
              value={formData.action_type}
              onValueChange={(v) => setFormData({ ...formData, action_type: v })}
              options={[
                { value: "navigate", label: "화면 이동" },
                { value: "modal", label: "모달 열기" },
                { value: "callback", label: "콜백" },
                { value: "refresh", label: "새로고침" },
              ]}
              placeholder="액션 선택"
            />
          </div>
          <div>
            <Label className="text-xs">흐름 타입</Label>
            <SearchableSelect
              value={formData.flow_type}
              onValueChange={(v) => setFormData({ ...formData, flow_type: v })}
              options={[
                { value: "forward", label: "전달 (Forward)" },
                { value: "return", label: "반환 (Return)" },
                { value: "broadcast", label: "브로드캐스트" },
              ]}
              placeholder="흐름 선택"
            />
          </div>
        </div>

        <div>
          <Label className="text-xs">설명</Label>
          <Textarea
            value={formData.description}
            onChange={(e) =>
              setFormData({ ...formData, description: e.target.value })
            }
            placeholder="데이터 흐름에 대한 설명"
            className="h-16 resize-none text-xs"
          />
        </div>

        <div className="flex justify-end gap-2">
          {isEditing && (
            <Button variant="outline" size="sm" onClick={resetForm}>
              취소
            </Button>
          )}
          <Button size="sm" onClick={handleSave} className="gap-1">
            <Save className="h-4 w-4" />
            {isEditing ? "수정" : "추가"}
          </Button>
        </div>
      </div>

      {/* 목록 */}
      <div className="rounded-lg border">
        <Table>
          <TableHeader>
            <TableRow>
              <TableHead className="text-xs">대상 화면</TableHead>
              <TableHead className="text-xs">액션</TableHead>
              <TableHead className="text-xs">흐름 타입</TableHead>
              <TableHead className="text-xs">설명</TableHead>
              <TableHead className="w-[100px] text-xs">작업</TableHead>
            </TableRow>
          </TableHeader>
          <TableBody>
            {dataFlows.length === 0 ? (
              <TableRow>
                <TableCell
                  colSpan={5}
                  className="py-8 text-center text-sm text-muted-foreground"
                >
                  등록된 데이터 흐름이 없습니다.
                </TableCell>
              </TableRow>
            ) : (
              dataFlows.map((flow) => (
                <TableRow key={flow.id}>
                  <TableCell className="text-xs font-medium">
                    화면 {flow.target_screen_id}
                  </TableCell>
                  <TableCell className="text-xs">
                    <Badge variant="outline" className="text-xs">
                      {flow.action_type}
                    </Badge>
                  </TableCell>
                  <TableCell className="text-xs">
                    <Badge
                      variant="outline"
                      className={cn(
                        "text-xs",
                        flow.flow_type === "forward" && "bg-blue-50 text-blue-700",
                        flow.flow_type === "return" && "bg-green-50 text-green-700",
                        flow.flow_type === "broadcast" && "bg-purple-50 text-purple-700"
                      )}
                    >
                      {flow.flow_type}
                    </Badge>
                  </TableCell>
                  <TableCell className="text-xs text-muted-foreground">
                    {flow.description || "-"}
                  </TableCell>
                  <TableCell>
                    <div className="flex gap-1">
                      <Button
                        variant="ghost"
                        size="icon"
                        className="h-7 w-7"
                        onClick={() => handleEdit(flow)}
                      >
                        <Pencil className="h-3 w-3" />
                      </Button>
                      <Button
                        variant="ghost"
                        size="icon"
                        className="h-7 w-7 text-destructive"
                        onClick={() => handleDelete(flow.id)}
                      >
                        <Trash2 className="h-3 w-3" />
                      </Button>
                    </div>
                  </TableCell>
                </TableRow>
              ))
            )}
          </TableBody>
        </Table>
      </div>
    </div>
  );
}

// ============================================================
// 탭: 제어 관리
// ============================================================

interface ButtonControlInfo {
  id: string;
  label: string;
  actionType: string;
  targetTable?: string;
  operations?: string[];
  confirmMessage?: string;
  confirmationEnabled?: boolean;
  // 버튼 스타일
  backgroundColor?: string;
  textColor?: string;
  // 모달/네비게이션 관련
  modalScreenId?: number;
  navigateScreenId?: number;
  // 데이터 흐름 제어
  hasDataflowControl?: boolean;
  dataflowControlMode?: string;
  flowTiming?: "before" | "after";
  linkedExternalCall?: {
    id: number;
    name: string;
  };
  // 다중 플로우 지원
  linkedFlows?: {
    id: number;
    name: string;
    timing?: "before" | "after";
  }[];
  // 레거시 호환 (단일 플로우)
  linkedFlow?: {
    id: number;
    name: string;
  };
}

interface ControlManagementTabProps {
  screenId: number;
  groupId?: number;
  layoutItems: LayoutItem[];
  loading: boolean;
  onRefresh: () => void;
}

function ControlManagementTab({
  screenId,
  groupId,
  layoutItems,
  loading: parentLoading,
  onRefresh,
}: ControlManagementTabProps) {
  const [buttonControls, setButtonControls] = useState<ButtonControlInfo[]>([]);
  const [flows, setFlows] = useState<NodeFlow[]>([]);
  const [loading, setLoading] = useState(false);
  const [expandedButton, setExpandedButton] = useState<string | null>(null);
  const [editingButton, setEditingButton] = useState<string | null>(null);
  const [editedValues, setEditedValues] = useState<Record<string, any>>({});

  // 화면 목록 조회 (inGroup: 같은 그룹 내 화면인지)
  const [screenList, setScreenList] = useState<{ id: number; name: string; inGroup?: boolean }[]>([]);
  // 화면 검색 팝오버 상태
  const [openModalScreenSearch, setOpenModalScreenSearch] = useState<string | null>(null);
  const [openNavigateScreenSearch, setOpenNavigateScreenSearch] = useState<string | null>(null);
  const [openFlowSearch, setOpenFlowSearch] = useState<string | null>(null);
  
  // 플로우 에디터 모달 상태 (전체 화면 임베드)
  const [showFlowEditorModal, setShowFlowEditorModal] = useState(false);
  const [flowEditorTargetButtonId, setFlowEditorTargetButtonId] = useState<string | null>(null);
  
  // 플로우 빠른 생성 다이얼로그 상태 (골격 생성용 - 레거시)
  const [showQuickFlowDialog, setShowQuickFlowDialog] = useState(false);
  const [quickFlowData, setQuickFlowData] = useState({
    name: "",
    description: "",
    tableName: "",
    tableLabel: "",
    actionType: "update" as "insert" | "update" | "delete",
    autoLink: true,
    targetButtonId: null as string | null,
  });
  const [isCreatingFlow, setIsCreatingFlow] = useState(false);
  
  // 대기 중인 버튼 ID (새 창에서 플로우 생성 후 연동할 버튼)
  const [pendingLinkButtonId, setPendingLinkButtonId] = useState<string | null>(null);

  // postMessage 이벤트 리스너 (새 창에서 플로우 저장 완료 시)
  useEffect(() => {
    const handleMessage = async (event: MessageEvent) => {
      if (event.data?.type === "FLOW_SAVED") {
        const { flowId, flowName } = event.data;
        
        // 플로우 목록 새로고침
        const flowList = await getNodeFlows();
        setFlows(flowList);
        
        // 대기 중인 버튼에 연동
        if (pendingLinkButtonId) {
          const newFlow = {
            id: flowId,
            name: flowName,
            timing: "after" as const,
          };
          
          setEditedValues(prev => ({
            ...prev,
            [pendingLinkButtonId]: {
              ...prev[pendingLinkButtonId],
              linkedFlows: [
                ...(prev[pendingLinkButtonId]?.linkedFlows || 
                    buttonControls.find(b => b.id === pendingLinkButtonId)?.linkedFlows || []),
                newFlow,
              ],
            },
          }));
          
          toast.success(`플로우 "${flowName}"이(가) 버튼에 연동되었습니다`);
          setPendingLinkButtonId(null);
        } else {
          toast.success(`플로우 "${flowName}"이(가) 생성되었습니다`);
        }
      }
    };
    
    window.addEventListener("message", handleMessage);
    return () => window.removeEventListener("message", handleMessage);
  }, [pendingLinkButtonId, buttonControls]);
  
  // 제어 관리 페이지를 새 창으로 열기
  const openFlowEditorInNewWindow = (buttonId?: string) => {
    if (buttonId) {
      setPendingLinkButtonId(buttonId);
    }
    window.open("/admin/systemMng/dataflow", "_blank", "width=1400,height=900");
  };

  // 데이터 로드
  const loadData = useCallback(async () => {
    setLoading(true);
    try {
      // 1. 화면 레이아웃에서 버튼 정보 추출
      const layoutResponse = await screenApi.getLayout(screenId);
      
      if (layoutResponse?.components) {
        const buttons: ButtonControlInfo[] = [];
        
        // 컴포넌트에서 버튼 추출 (화면 디자이너 구조 기준)
        const extractButtons = (components: any[], depth = 0) => {
          for (const comp of components) {
            const config = comp.componentConfig || {};
            
            // 버튼 컴포넌트 필터링 (화면 디자이너 저장 구조 기준)
            // 1. 새 시스템: type="component" && widgetType="button"
            // 2. 새 시스템: componentConfig.webType="button"
            // 3. 레거시: type="button"
            const isButton = 
              comp.widgetType === "button" ||
              comp.webType === "button" ||
              comp.type === "button" ||
              config.webType === "button" ||
              comp.componentType?.includes("button") ||
              comp.componentKind?.includes("button");
            
            if (isButton) {
              const webTypeConfig = comp.webTypeConfig || {};
              const action = config.action || {};
              const style = comp.style || {};
              
              buttons.push({
                id: comp.id || comp.componentId || `btn-${buttons.length}`,
                label: config.text || comp.label || comp.title || comp.name || "버튼",
                actionType: typeof action === "string" ? action : (action.type || "custom"),
                targetTable: config.tableName || webTypeConfig.tableName || comp.tableName,
                operations: action.operations || [],
                confirmMessage: action.confirmationMessage || action.confirmMessage || config.confirmMessage,
                confirmationEnabled: action.confirmationEnabled ?? (!!action.confirmationMessage || !!action.confirmMessage),
                // 버튼 스타일 (webTypeConfig 우선)
                backgroundColor: webTypeConfig.backgroundColor || config.backgroundColor || style.backgroundColor,
                textColor: webTypeConfig.textColor || config.textColor || style.color || style.labelColor,
                // 모달/네비게이션 관련 (화면 디자이너는 targetScreenId 사용)
                modalScreenId: action.targetScreenId || action.modalScreenId,
                navigateScreenId: action.navigateScreenId || action.targetScreenId,
                // 데이터 흐름 제어
                hasDataflowControl: webTypeConfig.enableDataflowControl,
                dataflowControlMode: webTypeConfig.dataflowConfig?.controlMode,
                flowTiming: webTypeConfig.dataflowConfig?.flowConfig?.executionTiming,
                linkedExternalCall: undefined, // TODO: 연결 정보 조회
                // 다중 플로우 지원 (flowConfigs 배열 또는 단일 flowConfig)
                linkedFlows: webTypeConfig.dataflowConfig?.flowConfigs?.map((fc: any) => ({
                  id: fc.flowId,
                  name: fc.flowName,
                  timing: fc.executionTiming || "after",
                })) || (webTypeConfig.dataflowConfig?.flowConfig ? [{
                  id: webTypeConfig.dataflowConfig.flowConfig.flowId,
                  name: webTypeConfig.dataflowConfig.flowConfig.flowName,
                  timing: webTypeConfig.dataflowConfig.flowConfig.executionTiming || "after",
                }] : []),
                // 레거시 호환 (단일 플로우)
                linkedFlow: webTypeConfig.dataflowConfig?.flowConfig ? {
                  id: webTypeConfig.dataflowConfig.flowConfig.flowId,
                  name: webTypeConfig.dataflowConfig.flowConfig.flowName,
                } : undefined,
              });
            }
            
            // 자식 컴포넌트 처리 (여러 필드 확인)
            if (comp.children && Array.isArray(comp.children)) {
              extractButtons(comp.children, depth + 1);
            }
            // componentConfig 내 중첩된 컴포넌트 확인
            if (comp.componentConfig?.children && Array.isArray(comp.componentConfig.children)) {
              extractButtons(comp.componentConfig.children, depth + 1);
            }
            // items 배열 확인 (일부 레이아웃에서 사용)
            if (comp.items && Array.isArray(comp.items)) {
              extractButtons(comp.items, depth + 1);
            }
          }
        };
        
        extractButtons(layoutResponse.components);
        setButtonControls(buttons);
      }

      // 2. 플로우 목록 조회 (버튼 연동용) - node_flows 테이블에서 가져옴
      try {
        const flowList = await getNodeFlows();
        console.log("플로우 목록 응답:", flowList);
        setFlows(flowList);
      } catch (flowError) {
        console.error("플로우 목록 조회 실패:", flowError);
      }

      // 3. 화면 목록 조회 (모달/네비게이션용)
      // 먼저 전체 화면 목록 가져오기 (기존 연결된 화면이 다른 그룹에 있을 수 있음)
      // 모든 화면 데이터를 가져오기 위해 최대 크기로 조회
      const allScreensResponse = await screenApi.getScreens({ size: 1000 });
      const allScreensMap = new Map<number, string>();
      if (allScreensResponse.data && allScreensResponse.data.length > 0) {
        allScreensResponse.data.forEach((s: any) => {
          // ScreenDefinition 타입: screenId, screenName 필드 사용
          const sid = Number(s.screenId || s.screen_id || s.id);
          const sname = s.screenName || s.screen_name || s.name || `화면 ${sid}`;
          if (!isNaN(sid)) {
            allScreensMap.set(sid, sname);
          }
        });
      }

      // 그룹 내 화면 목록
      let groupScreenIds: number[] = [];
      if (groupId) {
        const groupResponse = await getScreenGroup(groupId);
        if (groupResponse.success && groupResponse.data?.screens) {
          // API 응답 필드명: screen_id, screen_name (snake_case) - 문자열일 수 있으므로 Number()로 변환
          groupScreenIds = groupResponse.data.screens.map((s: any) => Number(s.screen_id || s.screenId || s.id)).filter(id => !isNaN(id));
        }
      }

      // 그룹 내 화면 우선, 전체 화면도 포함
      const screenListResult: { id: number; name: string; inGroup: boolean }[] = [];
      
      // 그룹 내 화면 먼저 추가 (숫자로 변환된 ID로 Map에서 조회)
      groupScreenIds.forEach(sid => {
        const name = allScreensMap.get(sid) || `화면 ${sid}`;
        screenListResult.push({ id: sid, name, inGroup: true });
        allScreensMap.delete(sid); // 중복 제거
      });

      // 나머지 전체 화면 추가 (다른 그룹에 있는 화면도 선택 가능하게)
      allScreensMap.forEach((name, id) => {
        screenListResult.push({ id, name, inGroup: false });
      });

      setScreenList(screenListResult);
    } catch (error) {
      console.error("제어 관리 데이터 로드 실패:", error);
      toast.error("데이터 로드 실패");
    } finally {
      setLoading(false);
    }
  }, [screenId, groupId]);

  useEffect(() => {
    loadData();
  }, [loadData]);

  // 플로우 빠른 생성 함수
  const handleQuickCreateFlow = async () => {
    if (!quickFlowData.name.trim()) {
      toast.error("플로우 이름을 입력해주세요");
      return;
    }
    if (!quickFlowData.tableName) {
      toast.error("테이블을 선택해주세요");
      return;
    }

    setIsCreatingFlow(true);
    try {
      // 제어 플로우 에디터(FlowEditor.tsx onDrop)와 동일한 형식으로 flowData 생성
      const timestamp = Date.now();
      const sourceNodeId = `tableSource_${timestamp}`;
      const actionNodeId = `${quickFlowData.actionType}Action_${timestamp}`;
      
      // 액션 타입별 노드 타입 결정
      let actionNodeType: string;
      
      switch (quickFlowData.actionType) {
        case "insert":
          actionNodeType = "insertAction";
          break;
        case "update":
          actionNodeType = "updateAction";
          break;
        case "delete":
          actionNodeType = "deleteAction";
          break;
        default:
          actionNodeType = "updateAction";
      }

      // 액션 노드 기본 데이터 (FlowEditor.tsx onDrop 패턴과 동일)
      const actionNodeData: any = {
        displayName: quickFlowData.actionType === "insert" ? "데이터 추가" 
          : quickFlowData.actionType === "update" ? "데이터 수정" 
          : "데이터 삭제",
        // 🔥 FlowEditor.tsx와 동일한 기본값
        targetType: "internal",
        targetTable: quickFlowData.tableName,
        targetTableLabel: quickFlowData.tableLabel || quickFlowData.tableName,
        fieldMappings: [],
        options: {},
      };

      // update/delete는 whereConditions 추가
      if (quickFlowData.actionType === "update" || quickFlowData.actionType === "delete") {
        actionNodeData.whereConditions = [];
      }

      // delete는 fieldMappings 제거 (삭제에는 필드 매핑 불필요)
      if (quickFlowData.actionType === "delete") {
        delete actionNodeData.fieldMappings;
      }

      const flowData = {
        nodes: [
          {
            id: sourceNodeId,
            type: "tableSource",
            position: { x: 100, y: 150 },
            data: {
              // 🔥 FlowEditor.tsx와 동일한 기본값 (TableSourceProperties에서 테이블 선택 시 설정됨)
              displayName: quickFlowData.tableLabel || quickFlowData.tableName || "테이블 소스",
              tableName: quickFlowData.tableName,
              fields: [],
              // dataSourceType은 TableSourceProperties에서 기본값 "context-data" 사용
            },
          },
          {
            id: actionNodeId,
            type: actionNodeType,
            position: { x: 450, y: 150 },
            data: actionNodeData,
          },
        ],
        edges: [
          {
            id: `edge_${timestamp}`,
            source: sourceNodeId,
            target: actionNodeId,
            sourceHandle: null,
            targetHandle: null,
          },
        ],
      };

      // 플로우 생성 API 호출
      const actionLabel = quickFlowData.actionType === "insert" ? "데이터 추가" 
        : quickFlowData.actionType === "update" ? "데이터 수정" 
        : "데이터 삭제";
      
      const result = await createNodeFlow({
        flowName: quickFlowData.name,
        flowDescription: quickFlowData.description || `${quickFlowData.tableLabel || quickFlowData.tableName} ${actionLabel} 플로우`,
        flowData: JSON.stringify(flowData),
      });

      toast.success(`플로우 "${quickFlowData.name}" 생성 완료`);

      // 자동 연동 옵션이 켜져 있고 대상 버튼이 있으면 연동
      if (quickFlowData.autoLink && quickFlowData.targetButtonId) {
        const newFlow = {
          id: result.flowId,
          name: quickFlowData.name,
          timing: "after" as const,
        };
        
        // 해당 버튼의 linkedFlows에 추가
        setEditedValues(prev => ({
          ...prev,
          [quickFlowData.targetButtonId!]: {
            ...prev[quickFlowData.targetButtonId!],
            linkedFlows: [
              ...(prev[quickFlowData.targetButtonId!]?.linkedFlows || 
                  buttonControls.find(b => b.id === quickFlowData.targetButtonId)?.linkedFlows || []),
              newFlow,
            ],
          },
        }));
        
        toast.success(`버튼에 플로우 자동 연동 완료`);
      }

      // 플로우 목록 새로고침
      const flowList = await getNodeFlows();
      setFlows(flowList);

      // 다이얼로그 닫기 및 상태 초기화
      setShowQuickFlowDialog(false);
      setQuickFlowData({
        name: "",
        description: "",
        tableName: "",
        tableLabel: "",
        actionType: "update",
        autoLink: true,
        targetButtonId: null,
      });
    } catch (error) {
      console.error("플로우 생성 실패:", error);
      toast.error("플로우 생성 실패");
    } finally {
      setIsCreatingFlow(false);
    }
  };

  // 버튼 설정 저장
  const handleSaveButton = async (buttonId: string) => {
    const values = editedValues[buttonId];
    if (!values) return;

    try {
      // 레이아웃에서 해당 버튼 찾아서 업데이트
      const layoutResponse = await screenApi.getLayout(screenId);
      if (!layoutResponse?.components) {
        toast.error("레이아웃을 불러올 수 없습니다");
        return;
      }

      // 버튼 컴포넌트 업데이트 (화면 디자이너 구조 기준)
      const updateButton = (components: any[]): boolean => {
        for (const comp of components) {
          const config = comp.componentConfig || {};
          
          // 버튼 식별 조건 (화면 디자이너 저장 구조 기준)
          const isButton = 
            comp.widgetType === "button" ||
            comp.webType === "button" ||
            comp.type === "button" ||
            config.webType === "button" ||
            comp.componentType?.includes("button") ||
            comp.componentKind?.includes("button");
          
          if ((comp.id === buttonId || comp.componentId === buttonId) && isButton) {
            // componentConfig 업데이트
            if (!comp.componentConfig) comp.componentConfig = {};
            if (!comp.componentConfig.action) comp.componentConfig.action = {};
            
            // 버튼 라벨(텍스트) 업데이트
            if (values.label !== undefined) {
              comp.componentConfig.text = values.label;
              // 레거시 호환: 여러 위치에 저장
              comp.label = values.label;
              comp.title = values.label;
            }
            
            // 버튼 스타일(색상) 업데이트 (webTypeConfig에 저장해야 실제 버튼에 반영됨)
            if (!comp.webTypeConfig) comp.webTypeConfig = {};
            if (!comp.style) comp.style = {};
            if (values.backgroundColor !== undefined) {
              comp.webTypeConfig.backgroundColor = values.backgroundColor;
              comp.componentConfig.backgroundColor = values.backgroundColor;
              comp.style.backgroundColor = values.backgroundColor;
            }
            if (values.textColor !== undefined) {
              comp.webTypeConfig.textColor = values.textColor;
              comp.componentConfig.textColor = values.textColor;
              comp.style.color = values.textColor;
              comp.style.labelColor = values.textColor;
            }
            
            // 액션 타입 업데이트
            if (values.actionType) {
              comp.componentConfig.action.type = values.actionType;
            }
            
            // 대상 테이블 업데이트
            if (values.targetTable !== undefined) {
              comp.componentConfig.tableName = values.targetTable;
            }
            
            // 확인 다이얼로그 설정 (save/delete 액션에서만 유효)
            const currentActionType = values.actionType || comp.componentConfig.action?.type;
            if (currentActionType === "save" || currentActionType === "delete") {
              if (values.confirmMessage !== undefined) {
                comp.componentConfig.action.confirmMessage = values.confirmMessage;
              }
            } else {
              // save/delete가 아닌 경우 confirmMessage 제거
              if (comp.componentConfig.action) {
                delete comp.componentConfig.action.confirmMessage;
              }
            }
            
            // 모달/네비게이션 화면 설정 (화면 디자이너는 targetScreenId 사용)
            if (values.modalScreenId !== undefined) {
              comp.componentConfig.action.targetScreenId = values.modalScreenId || null;
            }
            
            if (values.navigateScreenId !== undefined) {
              comp.componentConfig.action.targetScreenId = values.navigateScreenId || null;
            }
            
            if (values.operations) {
              comp.componentConfig.action.operations = values.operations;
            }
            
            // webTypeConfig 업데이트 (플로우 연동 - 다중 플로우 지원)
            if (!comp.webTypeConfig) comp.webTypeConfig = {};
            
            // 다중 플로우 처리 (linkedFlows 배열)
            if (values.linkedFlows !== undefined) {
              if (values.linkedFlows && values.linkedFlows.length > 0) {
                comp.webTypeConfig.enableDataflowControl = true;
                comp.webTypeConfig.dataflowConfig = {
                  controlMode: "flow",
                  // 다중 플로우 저장
                  flowConfigs: values.linkedFlows.map((lf: any) => ({
                    flowId: lf.id,
                    flowName: lf.name,
                    executionTiming: lf.timing || "after",
                  })),
                  // 레거시 호환 - 첫 번째 플로우를 단일 flowConfig로도 저장
                  flowConfig: {
                    flowId: values.linkedFlows[0].id,
                    flowName: values.linkedFlows[0].name,
                    executionTiming: values.linkedFlows[0].timing || "after",
                  },
                };
              } else {
                // 플로우 연동 해제 (빈 배열)
                comp.webTypeConfig.enableDataflowControl = false;
                delete comp.webTypeConfig.dataflowConfig;
              }
            }
            // 레거시 단일 플로우 처리
            else if (values.linkedFlowId) {
              comp.webTypeConfig.enableDataflowControl = true;
              comp.webTypeConfig.dataflowConfig = {
                controlMode: "flow",
                flowConfig: {
                  flowId: values.linkedFlowId,
                  flowName: flows.find(f => f.flowId === values.linkedFlowId)?.flowName || "",
                  executionTiming: values.flowTiming || "after",
                },
              };
            } else if (values.linkedFlowId === null) {
              // 플로우 연동 해제
              comp.webTypeConfig.enableDataflowControl = false;
              delete comp.webTypeConfig.dataflowConfig;
            }
            
            return true;
          }
          
          // 자식 컴포넌트 처리
          if (comp.children && Array.isArray(comp.children)) {
            if (updateButton(comp.children)) return true;
          }
          if (comp.componentConfig?.children && Array.isArray(comp.componentConfig.children)) {
            if (updateButton(comp.componentConfig.children)) return true;
          }
          if (comp.items && Array.isArray(comp.items)) {
            if (updateButton(comp.items)) return true;
          }
        }
        return false;
      };

      if (updateButton(layoutResponse.components)) {
        // 레이아웃 저장
        await screenApi.saveLayout(screenId, layoutResponse);
        toast.success("버튼 설정이 저장되었습니다");
        setEditingButton(null);
        setEditedValues(prev => {
          const next = { ...prev };
          delete next[buttonId];
          return next;
        });
        loadData();
        onRefresh();
      } else {
        toast.error("버튼을 찾을 수 없습니다");
      }
    } catch (error) {
      console.error("버튼 설정 저장 실패:", error);
      toast.error("저장 실패");
    }
  };

  // 액션 타입 라벨 (화면 디자이너와 동일)
  const getActionTypeLabel = (type: string) => {
    const labels: Record<string, string> = {
      save: "저장",
      delete: "삭제",
      edit: "편집",
      copy: "복사",
      navigate: "페이지 이동",
      modal: "모달 열기",
      openModalWithData: "데이터+모달",
      openRelatedModal: "연관모달",
      transferData: "데이터전달",
      quickInsert: "즉시저장",
      control: "제어흐름",
      view_table_history: "이력보기",
      excel_download: "엑셀다운",
      excel_upload: "엑셀업로드",
      barcode_scan: "바코드스캔",
      code_merge: "코드병합",
      operation_control: "운행제어",
    };
    return labels[type] || type;
  };

  // 액션 타입 색상 (화면 디자이너와 동일) - hover 상태 포함
  const getActionTypeColor = (type: string) => {
    switch (type) {
      case "save":
      case "quickInsert":
        return "bg-green-100 text-green-700 hover:bg-green-100 hover:text-green-700";
      case "delete":
        return "bg-red-100 text-red-700 hover:bg-red-100 hover:text-red-700";
      case "edit":
      case "copy":
        return "bg-blue-100 text-blue-700 hover:bg-blue-100 hover:text-blue-700";
      case "modal":
      case "openModalWithData":
      case "openRelatedModal":
        return "bg-purple-100 text-purple-700 hover:bg-purple-100 hover:text-purple-700";
      case "navigate":
        return "bg-cyan-100 text-cyan-700 hover:bg-cyan-100 hover:text-cyan-700";
      case "transferData":
      case "control":
        return "bg-amber-100 text-amber-700 hover:bg-amber-100 hover:text-amber-700";
      case "excel_download":
      case "excel_upload":
        return "bg-emerald-100 text-emerald-700 hover:bg-emerald-100 hover:text-emerald-700";
      case "view_table_history":
        return "bg-slate-100 text-slate-700 hover:bg-slate-100 hover:text-slate-700";
      default:
        return "bg-gray-100 text-gray-700 hover:bg-gray-100 hover:text-gray-700";
    }
  };

  if (loading || parentLoading) {
    return (
      <div className="flex h-full items-center justify-center">
        <Loader2 className="h-6 w-6 animate-spin text-primary" />
      </div>
    );
  }

  return (
    <div className="space-y-6">
      {/* 버튼 액션 설정 - 구분된 섹션 */}
      <div className="rounded-lg border border-blue-200 bg-blue-50/30">
        <div className="flex items-center gap-2 px-3 py-2 border-b border-blue-200 bg-blue-100/50 rounded-t-lg">
          <MousePointer className="h-4 w-4 text-blue-600" />
          <span className="text-sm font-semibold text-blue-900">버튼 액션 설정</span>
          <Badge className="h-5 text-[10px] bg-blue-600 text-white hover:bg-blue-600">
            {buttonControls.length}개
          </Badge>
        </div>
        
        <div className="max-h-[350px] overflow-y-auto p-2">
          {buttonControls.length === 0 ? (
            <div className="flex flex-col items-center justify-center py-6 text-center">
              <MousePointer className="mb-2 h-6 w-6 text-muted-foreground/50" />
              <p className="text-sm text-muted-foreground">버튼이 없습니다</p>
              <p className="text-xs text-muted-foreground">화면 디자이너에서 버튼을 추가하세요</p>
            </div>
          ) : (
            <div className="divide-y">
              {buttonControls.map((btn) => {
                // 현재 편집 중인 값 또는 기본값
                const currentLabel = editedValues[btn.id]?.label ?? btn.label;
                const currentBgColor = editedValues[btn.id]?.backgroundColor ?? btn.backgroundColor ?? "#3b82f6";
                const currentTextColor = editedValues[btn.id]?.textColor ?? btn.textColor ?? "#ffffff";
                
                return (
                <div key={btn.id} className="py-3 px-1">
                  {/* 버튼 헤더: 프리뷰 + 이름 입력 + 저장 버튼 */}
                  <div className="flex items-center gap-3 mb-3">
                    {/* 버튼 프리뷰 */}
                    <div
                      className="flex items-center justify-center px-3 py-1.5 rounded text-xs font-medium min-w-[60px] shrink-0"
                      style={{
                        backgroundColor: currentBgColor,
                        color: currentTextColor,
                      }}
                    >
                      {currentLabel || "버튼"}
                    </div>
                    
                    {/* 버튼 이름 입력 */}
                    <div className="flex-1">
                      <Input
                        value={currentLabel}
                        onChange={(e) => setEditedValues(prev => ({
                          ...prev,
                          [btn.id]: { ...prev[btn.id], label: e.target.value }
                        }))}
                        className="h-7 text-sm"
                        placeholder="버튼 이름"
                      />
                    </div>
                    
                    {btn.hasDataflowControl && (
                      <Badge variant="outline" className="h-5 text-[10px] border-purple-300 text-purple-600 shrink-0">
                        <Zap className="mr-1 h-2.5 w-2.5" />
                        제어
                      </Badge>
                    )}
                    <Button
                      size="sm"
                      className="h-7 text-xs px-3 shrink-0"
                      onClick={() => handleSaveButton(btn.id)}
                      disabled={!editedValues[btn.id]}
                    >
                      <Save className="mr-1 h-3 w-3" />
                      저장
                    </Button>
                  </div>

                  {/* 버튼 설정 (상시 편집) */}
                  <div className="space-y-2">
                    {/* 액션 타입 */}
                    <div className="grid grid-cols-[80px_1fr] items-center gap-2">
                      <Label className="text-xs text-muted-foreground">액션 타입</Label>
                      <Select
                        value={editedValues[btn.id]?.actionType || btn.actionType || "save"}
                        onValueChange={(val) => setEditedValues(prev => ({
                          ...prev,
                          [btn.id]: { ...prev[btn.id], actionType: val }
                        }))}
                      >
                        <SelectTrigger className="h-7 text-xs">
                          <SelectValue placeholder="액션 선택" />
                        </SelectTrigger>
                        <SelectContent>
                          <SelectItem value="save" className="text-xs">저장</SelectItem>
                          <SelectItem value="delete" className="text-xs">삭제</SelectItem>
                          <SelectItem value="edit" className="text-xs">편집</SelectItem>
                          <SelectItem value="copy" className="text-xs">복사</SelectItem>
                          <SelectItem value="navigate" className="text-xs">페이지 이동</SelectItem>
                          <SelectItem value="modal" className="text-xs">모달 열기</SelectItem>
                          <SelectItem value="openModalWithData" className="text-xs">데이터 전달 + 모달</SelectItem>
                          <SelectItem value="openRelatedModal" className="text-xs">연관 데이터 모달</SelectItem>
                          <SelectItem value="transferData" className="text-xs">데이터 전달</SelectItem>
                          <SelectItem value="quickInsert" className="text-xs">즉시 저장</SelectItem>
                          <SelectItem value="control" className="text-xs">제어 흐름</SelectItem>
                          <SelectItem value="view_table_history" className="text-xs">테이블 이력</SelectItem>
                          <SelectItem value="excel_download" className="text-xs">엑셀 다운로드</SelectItem>
                          <SelectItem value="excel_upload" className="text-xs">엑셀 업로드</SelectItem>
                        </SelectContent>
                      </Select>
                    </div>
                    
                    {/* 버튼 스타일 (배경색 + 글자색) */}
                    <div className="grid grid-cols-[80px_1fr] items-center gap-2">
                      <Label className="text-xs text-muted-foreground">버튼 색상</Label>
                      <div className="flex items-center gap-2">
                        {/* 배경색 */}
                        <div className="flex items-center gap-1">
                          <span className="text-[10px] text-muted-foreground">배경</span>
                          <input
                            type="color"
                            value={currentBgColor}
                            onChange={(e) => setEditedValues(prev => ({
                              ...prev,
                              [btn.id]: { ...prev[btn.id], backgroundColor: e.target.value }
                            }))}
                            className="h-6 w-8 rounded border cursor-pointer"
                          />
                        </div>
                        {/* 글자색 */}
                        <div className="flex items-center gap-1">
                          <span className="text-[10px] text-muted-foreground">글자</span>
                          <input
                            type="color"
                            value={currentTextColor}
                            onChange={(e) => setEditedValues(prev => ({
                              ...prev,
                              [btn.id]: { ...prev[btn.id], textColor: e.target.value }
                            }))}
                            className="h-6 w-8 rounded border cursor-pointer"
                          />
                        </div>
                        {/* 프리셋 색상 */}
                        <div className="flex items-center gap-1 ml-2">
                          {[
                            { bg: "#3b82f6", text: "#ffffff", name: "파랑" },
                            { bg: "#22c55e", text: "#ffffff", name: "초록" },
                            { bg: "#ef4444", text: "#ffffff", name: "빨강" },
                            { bg: "#6b7280", text: "#ffffff", name: "회색" },
                            { bg: "#ffffff", text: "#374151", name: "흰색" },
                          ].map((preset) => (
                            <button
                              key={preset.name}
                              type="button"
                              onClick={() => setEditedValues(prev => ({
                                ...prev,
                                [btn.id]: { ...prev[btn.id], backgroundColor: preset.bg, textColor: preset.text }
                              }))}
                              className="h-5 w-5 rounded border border-gray-300 hover:ring-2 hover:ring-blue-300 transition-all"
                              style={{ backgroundColor: preset.bg }}
                              title={preset.name}
                            />
                          ))}
                        </div>
                      </div>
                    </div>

                    {/* 확인 메시지 설정 (save/delete 액션에서만 표시) */}
                    {((editedValues[btn.id]?.actionType || btn.actionType) === "save" ||
                      (editedValues[btn.id]?.actionType || btn.actionType) === "delete") && (
                      <div className="grid grid-cols-[80px_1fr] items-center gap-2">
                        <Label className="text-xs text-muted-foreground">확인 메시지</Label>
                        <Input
                          value={editedValues[btn.id]?.confirmMessage ?? btn.confirmMessage ?? ""}
                          onChange={(e) => setEditedValues(prev => ({
                            ...prev,
                            [btn.id]: { ...prev[btn.id], confirmMessage: e.target.value }
                          }))}
                          placeholder="커스텀 메시지 (예: 정말 삭제하시겠습니까?)"
                          className="h-7 text-xs"
                        />
                      </div>
                    )}

                    {/* 모달 화면 선택 (modal, openModalWithData, openRelatedModal 액션) */}
                    {((editedValues[btn.id]?.actionType || btn.actionType) === "modal" || 
                      (editedValues[btn.id]?.actionType || btn.actionType) === "openModalWithData" ||
                      (editedValues[btn.id]?.actionType || btn.actionType) === "openRelatedModal") && (
                      <div className="grid grid-cols-[80px_1fr] items-center gap-2">
                        <Label className="text-xs text-muted-foreground">모달 화면</Label>
                        <Popover open={openModalScreenSearch === btn.id} onOpenChange={(open) => setOpenModalScreenSearch(open ? btn.id : null)}>
                          <PopoverTrigger asChild>
                            <Button variant="outline" role="combobox" className="h-7 w-full justify-between text-xs">
                              {editedValues[btn.id]?.modalScreenId || btn.modalScreenId
                                ? screenList.find(s => s.id === Number(editedValues[btn.id]?.modalScreenId || btn.modalScreenId))?.name || "화면 선택"
                                : "화면 선택"
                              }
                              <ChevronsUpDown className="ml-2 h-3 w-3 shrink-0 opacity-50" />
                            </Button>
                          </PopoverTrigger>
                          <PopoverContent className="p-0" style={{ width: "var(--radix-popover-trigger-width)" }} align="start">
                            <Command>
                              <CommandInput placeholder="화면 검색..." className="text-xs" />
                              <CommandList>
                                <CommandEmpty className="text-xs py-2 text-center">화면을 찾을 수 없습니다</CommandEmpty>
                                <CommandItem 
                                  value="__none__"
                                  onSelect={() => {
                                    setEditedValues(prev => ({ ...prev, [btn.id]: { ...prev[btn.id], modalScreenId: null } }));
                                    setOpenModalScreenSearch(null);
                                  }}
                                  className="text-xs text-muted-foreground"
                                >
                                  <Check className={cn("mr-2 h-3 w-3", !(editedValues[btn.id]?.modalScreenId || btn.modalScreenId) ? "opacity-100" : "opacity-0")} />
                                  미설정
                                </CommandItem>
                                {screenList.filter(s => s && s.id != null && s.inGroup).length > 0 && (
                                  <CommandGroup heading="현재 그룹">
                                    {screenList.filter(s => s && s.id != null && s.inGroup).map((s) => (
                                      <CommandItem
                                        key={s.id}
                                        value={s.name}
                                        onSelect={() => {
                                          setEditedValues(prev => ({ ...prev, [btn.id]: { ...prev[btn.id], modalScreenId: s.id } }));
                                          setOpenModalScreenSearch(null);
                                        }}
                                        className="text-xs"
                                      >
                                        <Check className={cn("mr-2 h-3 w-3", Number(editedValues[btn.id]?.modalScreenId || btn.modalScreenId) === s.id ? "opacity-100" : "opacity-0")} />
                                        {s.name}
                                      </CommandItem>
                                    ))}
                                  </CommandGroup>
                                )}
                                {screenList.filter(s => s && s.id != null && !s.inGroup).length > 0 && (
                                  <CommandGroup heading="다른 그룹">
                                    {screenList.filter(s => s && s.id != null && !s.inGroup).map((s) => (
                                      <CommandItem
                                        key={s.id}
                                        value={s.name}
                                        onSelect={() => {
                                          setEditedValues(prev => ({ ...prev, [btn.id]: { ...prev[btn.id], modalScreenId: s.id } }));
                                          setOpenModalScreenSearch(null);
                                        }}
                                        className="text-xs text-muted-foreground"
                                      >
                                        <Check className={cn("mr-2 h-3 w-3", Number(editedValues[btn.id]?.modalScreenId || btn.modalScreenId) === s.id ? "opacity-100" : "opacity-0")} />
                                        {s.name}
                                      </CommandItem>
                                    ))}
                                  </CommandGroup>
                                )}
                              </CommandList>
                            </Command>
                          </PopoverContent>
                        </Popover>
                      </div>
                    )}

                    {/* 네비게이션 화면 선택 (navigate 액션) */}
                    {(editedValues[btn.id]?.actionType || btn.actionType) === "navigate" && (
                      <div className="grid grid-cols-[80px_1fr] items-center gap-2">
                        <Label className="text-xs text-muted-foreground">이동 화면</Label>
                        <Popover open={openNavigateScreenSearch === btn.id} onOpenChange={(open) => setOpenNavigateScreenSearch(open ? btn.id : null)}>
                          <PopoverTrigger asChild>
                            <Button variant="outline" role="combobox" className="h-7 w-full justify-between text-xs">
                              {editedValues[btn.id]?.navigateScreenId || btn.navigateScreenId
                                ? screenList.find(s => s.id === Number(editedValues[btn.id]?.navigateScreenId || btn.navigateScreenId))?.name || "화면 선택"
                                : "화면 선택"
                              }
                              <ChevronsUpDown className="ml-2 h-3 w-3 shrink-0 opacity-50" />
                            </Button>
                          </PopoverTrigger>
                          <PopoverContent className="p-0" style={{ width: "var(--radix-popover-trigger-width)" }} align="start">
                            <Command>
                              <CommandInput placeholder="화면 검색..." className="text-xs" />
                              <CommandList>
                                <CommandEmpty className="text-xs py-2 text-center">화면을 찾을 수 없습니다</CommandEmpty>
                                <CommandItem 
                                  value="__none__"
                                  onSelect={() => {
                                    setEditedValues(prev => ({ ...prev, [btn.id]: { ...prev[btn.id], navigateScreenId: null } }));
                                    setOpenNavigateScreenSearch(null);
                                  }}
                                  className="text-xs text-muted-foreground"
                                >
                                  <Check className={cn("mr-2 h-3 w-3", !(editedValues[btn.id]?.navigateScreenId || btn.navigateScreenId) ? "opacity-100" : "opacity-0")} />
                                  미설정
                                </CommandItem>
                                {screenList.filter(s => s && s.id != null && s.inGroup).length > 0 && (
                                  <CommandGroup heading="현재 그룹">
                                    {screenList.filter(s => s && s.id != null && s.inGroup).map((s) => (
                                      <CommandItem
                                        key={s.id}
                                        value={s.name}
                                        onSelect={() => {
                                          setEditedValues(prev => ({ ...prev, [btn.id]: { ...prev[btn.id], navigateScreenId: s.id } }));
                                          setOpenNavigateScreenSearch(null);
                                        }}
                                        className="text-xs"
                                      >
                                        <Check className={cn("mr-2 h-3 w-3", Number(editedValues[btn.id]?.navigateScreenId || btn.navigateScreenId) === s.id ? "opacity-100" : "opacity-0")} />
                                        {s.name}
                                      </CommandItem>
                                    ))}
                                  </CommandGroup>
                                )}
                                {screenList.filter(s => s && s.id != null && !s.inGroup).length > 0 && (
                                  <CommandGroup heading="다른 그룹">
                                    {screenList.filter(s => s && s.id != null && !s.inGroup).map((s) => (
                                      <CommandItem
                                        key={s.id}
                                        value={s.name}
                                        onSelect={() => {
                                          setEditedValues(prev => ({ ...prev, [btn.id]: { ...prev[btn.id], navigateScreenId: s.id } }));
                                          setOpenNavigateScreenSearch(null);
                                        }}
                                        className="text-xs text-muted-foreground"
                                      >
                                        <Check className={cn("mr-2 h-3 w-3", Number(editedValues[btn.id]?.navigateScreenId || btn.navigateScreenId) === s.id ? "opacity-100" : "opacity-0")} />
                                        {s.name}
                                      </CommandItem>
                                    ))}
                                  </CommandGroup>
                                )}
                              </CommandList>
                            </Command>
                          </PopoverContent>
                        </Popover>
                      </div>
                    )}

                    {/* 플로우 연동 - 세로 목록 형식 */}
                    <div className="grid grid-cols-[80px_1fr] items-start gap-2">
                      <Label className="text-xs text-muted-foreground pt-1">플로우</Label>
                      <div className="space-y-2">
                        {/* 연동된 플로우 목록 (세로 형식, 각각 타이밍 선택) */}
                        {(() => {
                          const currentFlows = editedValues[btn.id]?.linkedFlows || btn.linkedFlows || [];
                          return currentFlows.length > 0 ? (
                            <div className="space-y-1.5">
                              {currentFlows.map((lf: { id: number; name: string; timing?: string }, idx: number) => (
                                <div key={lf.id} className="flex items-center gap-2 p-1.5 border rounded-md bg-muted/30">
                                  <Workflow className="h-3 w-3 text-purple-500 shrink-0" />
                                  <span className="text-xs font-medium text-gray-700 flex-1 truncate">
                                    {lf.name}
                                  </span>
                                  {/* 타이밍 선택 */}
                                  <Select
                                    value={lf.timing || "after"}
                                    onValueChange={(val) => {
                                      const newFlows = [...currentFlows];
                                      newFlows[idx] = { ...lf, timing: val };
                                      setEditedValues(prev => ({ 
                                        ...prev, 
                                        [btn.id]: { ...prev[btn.id], linkedFlows: newFlows }
                                      }));
                                    }}
                                  >
                                    <SelectTrigger className="h-6 w-[70px] text-[10px]">
                                      <SelectValue />
                                    </SelectTrigger>
                                    <SelectContent>
                                      <SelectItem value="before" className="text-[10px]">실행 전</SelectItem>
                                      <SelectItem value="after" className="text-[10px]">실행 후</SelectItem>
                                    </SelectContent>
                                  </Select>
                                  {/* 삭제 버튼 */}
                                  <button
                                    type="button"
                                    className="h-5 w-5 rounded hover:bg-red-100 flex items-center justify-center text-gray-400 hover:text-red-500"
                                    onClick={() => {
                                      const newFlows = currentFlows.filter((f: any) => f.id !== lf.id);
                                      setEditedValues(prev => ({ 
                                        ...prev, 
                                        [btn.id]: { ...prev[btn.id], linkedFlows: newFlows }
                                      }));
                                    }}
                                  >
                                    <X className="h-3 w-3" />
                                  </button>
                                </div>
                              ))}
                            </div>
                          ) : null;
                        })()}
                        
                        {/* 플로우 추가 버튼 */}
                        <Popover open={openFlowSearch === btn.id} onOpenChange={(open) => setOpenFlowSearch(open ? btn.id : null)}>
                          <PopoverTrigger asChild>
                            <Button variant="outline" role="combobox" className="h-7 w-full justify-between text-xs">
                              <span className="flex items-center gap-1">
                                <Plus className="h-3 w-3" />
                                플로우 추가
                              </span>
                              <ChevronsUpDown className="ml-2 h-3 w-3 shrink-0 opacity-50" />
                            </Button>
                          </PopoverTrigger>
                          <PopoverContent className="p-0" style={{ width: "var(--radix-popover-trigger-width)" }} align="start">
                            <Command>
                              <CommandInput placeholder="플로우 검색..." className="text-xs" />
                              <CommandList>
                                <CommandEmpty className="text-xs py-2 text-center">플로우를 찾을 수 없습니다</CommandEmpty>
                                {/* 빠른 생성 옵션 */}
                                <CommandGroup>
                                  <CommandItem
                                    onSelect={() => {
                                      setOpenFlowSearch(null);
                                      // FlowEditor 모달 열기 (버튼 연동)
                                      setFlowEditorTargetButtonId(btn.id);
                                      setShowFlowEditorModal(true);
                                      setOpenFlowSearch(null);
                                    }}
                                    className="text-xs text-purple-700 bg-purple-50 hover:bg-purple-100"
                                  >
                                    <Plus className="mr-2 h-3 w-3 text-purple-500" />
                                    <div className="flex flex-col">
                                      <span className="font-medium">새 플로우 생성</span>
                                      <span className="text-[10px] text-purple-500">여기서 직접 만들고 자동 연동</span>
                                    </div>
                                  </CommandItem>
                                </CommandGroup>
                                {flows.length > 0 ? (
                                  <CommandGroup heading="플로우 목록">
                                    {flows.map((f) => {
                                      const currentFlows = editedValues[btn.id]?.linkedFlows || btn.linkedFlows || [];
                                      const isLinked = currentFlows.some((lf: any) => lf.id === f.flowId);
                                      const tableName = typeof f.flowData === 'object' 
                                        ? f.flowData?.nodes?.find((n: any) => n.type === 'tableSource')?.data?.tableName 
                                        : null;
                                      return (
                                        <CommandItem
                                          key={f.flowId}
                                          value={f.flowName}
                                          onSelect={() => {
                                            if (!isLinked) {
                                              const newFlows = [...currentFlows, { id: f.flowId, name: f.flowName, timing: "after" }];
                                              setEditedValues(prev => ({ 
                                                ...prev, 
                                                [btn.id]: { ...prev[btn.id], linkedFlows: newFlows }
                                              }));
                                            }
                                            setOpenFlowSearch(null);
                                          }}
                                          className={cn("text-xs", isLinked && "opacity-50")}
                                          disabled={isLinked}
                                        >
                                          <Check className={cn("mr-2 h-3 w-3", isLinked ? "opacity-100" : "opacity-0")} />
                                          <div className="flex flex-col">
                                            <span>{f.flowName}</span>
                                            {tableName && <span className="text-[10px] text-muted-foreground">{tableName}</span>}
                                          </div>
                                          {isLinked && <span className="ml-auto text-[10px] text-muted-foreground">연동됨</span>}
                                        </CommandItem>
                                      );
                                    })}
                                  </CommandGroup>
                                ) : (
                                  <div className="py-2 px-2 text-xs text-muted-foreground text-center">
                                    등록된 플로우가 없습니다
                                  </div>
                                )}
                              </CommandList>
                            </Command>
                          </PopoverContent>
                        </Popover>
                        
                      </div>
                    </div>
                  </div>
                </div>
              );
              })}
            </div>
          )}
        </div>
      </div>

      {/* 플로우 연동 - 구분된 섹션 */}
      <div className="rounded-lg border border-purple-200 bg-purple-50/30">
        <div className="flex items-center gap-2 px-3 py-2 border-b border-purple-200 bg-purple-100/50 rounded-t-lg">
          <Workflow className="h-4 w-4 text-purple-600" />
          <span className="text-sm font-semibold text-purple-900">플로우 연동 현황</span>
          <Badge className="h-5 text-[10px] bg-purple-600 text-white hover:bg-purple-600">
            {flows.length}개 플로우
          </Badge>
          <Badge className="h-5 text-[10px] bg-green-600 text-white hover:bg-green-600">
            {buttonControls.filter(b => (b.linkedFlows && b.linkedFlows.length > 0) || b.linkedFlow).length}개 연동
          </Badge>
          <span className="flex-1" />
          <Button
            variant="outline"
            size="sm"
            className="h-5 px-1.5 text-[10px] border-purple-300 text-purple-700 hover:text-purple-900 hover:bg-purple-100"
            onClick={() => {
              // FlowEditor 모달 열기 (버튼 연동 없이)
              setFlowEditorTargetButtonId(null);
              setShowFlowEditorModal(true);
            }}
            title="플로우 생성"
          >
            <Plus className="mr-1 h-3 w-3" />
            새 플로우
          </Button>
          <Button
            variant="ghost"
            size="sm"
            className="h-5 px-1.5 text-[10px] text-purple-700 hover:text-purple-900 hover:bg-purple-200"
            onClick={() => window.open("/admin/systemMng/dataflow", "_blank")}
            title="플로우 관리"
          >
            <ExternalLink className="mr-1 h-3 w-3" />
            상세 관리
          </Button>
        </div>
        
        <div className="max-h-[180px] overflow-y-auto p-2">
          {flows.length === 0 ? (
            <div className="flex flex-col items-center justify-center py-4 text-center">
              <Workflow className="mb-1 h-5 w-5 text-muted-foreground/50" />
              <p className="text-xs text-muted-foreground">사용 가능한 플로우가 없습니다</p>
            </div>
          ) : (
            <div className="space-y-1">
              {flows.map((flow) => {
                // 이 플로우가 연동된 버튼들 찾기 (다중 플로우 지원)
                const linkedButtons = buttonControls.filter(b => 
                  (b.linkedFlows && b.linkedFlows.some(lf => lf.id === flow.flowId)) ||
                  b.linkedFlow?.id === flow.flowId
                );
                const tableName = (flow as any).tableType || (flow as any).tableName;
                return (
                  <div key={`flow-list-${flow.flowId}`} className="flex items-center gap-2 px-2 py-1.5 rounded bg-white/50 hover:bg-white">
                    {/* 플로우 이름 - 일반 텍스트 */}
                    <Workflow className="h-3.5 w-3.5 text-purple-500 shrink-0" />
                    <span className="text-xs font-medium text-gray-700 shrink-0">
                      {flow.flowName}
                    </span>
                    {tableName && (
                      <span className="text-[10px] text-muted-foreground shrink-0">
                        ({tableName})
                      </span>
                    )}
                    <span className="flex-1" />
                    {linkedButtons.length > 0 ? (
                      <div className="flex items-center gap-1 shrink-0 flex-wrap justify-end">
                        {linkedButtons.map((btn, idx) => {
                          // 해당 버튼에서 이 플로우의 타이밍 정보 추출
                          const flowInfo = btn.linkedFlows?.find(lf => lf.id === flow.flowId);
                          const timing = flowInfo?.timing || btn.flowTiming || "after";
                          return (
                            <div key={`${flow.flowId}-${btn.id}`} className="flex items-center gap-1">
                              {idx === 0 && <ArrowRight className="h-3 w-3 text-green-500" />}
                              <span className="text-xs text-green-600 font-medium">
                                [{btn.label}]
                              </span>
                              <Badge className={cn("h-4 text-[9px]", getActionTypeColor(btn.actionType))}>
                                {getActionTypeLabel(btn.actionType)}
                              </Badge>
                              <span className="text-[10px] text-muted-foreground">
                                ({timing === "before" ? "전" : "후"})
                              </span>
                            </div>
                          );
                        })}
                      </div>
                    ) : (
                      /* 미연동 - 보라색 뱃지 */
                      <Badge variant="outline" className="h-5 text-[10px] border-purple-300 bg-purple-100 text-purple-600 shrink-0">
                        미연동
                      </Badge>
                    )}
                  </div>
                );
              })}
            </div>
          )}
        </div>
      </div>

      {/* 플로우 빠른 생성 다이얼로그 */}
      <Dialog open={showQuickFlowDialog} onOpenChange={setShowQuickFlowDialog}>
        <DialogContent className="max-w-[95vw] sm:max-w-[500px]">
          <DialogHeader>
            <DialogTitle className="text-base sm:text-lg">플로우 빠른 생성</DialogTitle>
            <DialogDescription className="text-xs sm:text-sm">
              플로우의 <strong>기본 골격</strong>만 생성합니다.
            </DialogDescription>
          </DialogHeader>
          
          {/* 중요 안내 */}
          <div className="p-2 rounded-md bg-amber-50 border border-amber-200 text-xs text-amber-800">
            <div className="flex items-start gap-2">
              <span className="text-amber-500 mt-0.5">&#9888;</span>
              <div>
                <p className="font-medium">생성 후 제어 관리에서 추가 설정이 필요합니다</p>
                <p className="mt-1 text-amber-700">
                  필드 매핑, WHERE 조건 등을 설정해야 실제로 동작합니다.
                </p>
              </div>
            </div>
          </div>

          <div className="space-y-4">
            {/* 플로우 이름 */}
            <div>
              <Label className="text-xs sm:text-sm">플로우 이름 *</Label>
              <Input
                value={quickFlowData.name}
                onChange={(e) => setQuickFlowData(prev => ({ ...prev, name: e.target.value }))}
                placeholder="예: 고객정보 수정 플로우"
                className="h-8 text-xs sm:h-10 sm:text-sm mt-1"
              />
            </div>

            {/* 테이블 선택/입력 */}
            <div>
              <Label className="text-xs sm:text-sm">대상 테이블 *</Label>
              {(() => {
                const availableTables = Array.from(new Set(buttonControls.filter(b => b.targetTable).map(b => b.targetTable)));
                
                return availableTables.length > 0 ? (
                  <>
                    <Popover>
                      <PopoverTrigger asChild>
                        <Button
                          variant="outline"
                          role="combobox"
                          className="h-8 w-full justify-between text-xs sm:h-10 sm:text-sm mt-1"
                        >
                          {quickFlowData.tableName 
                            ? (quickFlowData.tableLabel || quickFlowData.tableName)
                            : "테이블 선택..."}
                          <ChevronsUpDown className="ml-2 h-4 w-4 shrink-0 opacity-50" />
                        </Button>
                      </PopoverTrigger>
                      <PopoverContent className="p-0" style={{ width: "var(--radix-popover-trigger-width)" }} align="start">
                        <Command>
                          <CommandInput placeholder="테이블 검색..." className="text-xs" />
                          <CommandList>
                            <CommandEmpty className="text-xs py-2 text-center">테이블을 찾을 수 없습니다</CommandEmpty>
                            <CommandGroup>
                              {availableTables.map((table) => (
                                <CommandItem
                                  key={table}
                                  value={table}
                                  onSelect={() => {
                                    setQuickFlowData(prev => ({ 
                                      ...prev, 
                                      tableName: table || "",
                                      tableLabel: table || "",
                                    }));
                                  }}
                                  className="text-xs"
                                >
                                  <Check className={cn("mr-2 h-3 w-3", quickFlowData.tableName === table ? "opacity-100" : "opacity-0")} />
                                  <Database className="mr-2 h-3 w-3 text-blue-500" />
                                  {table}
                                </CommandItem>
                              ))}
                            </CommandGroup>
                          </CommandList>
                        </Command>
                      </PopoverContent>
                    </Popover>
                    <p className="text-[10px] text-muted-foreground mt-1">화면에서 사용 중인 테이블 목록입니다</p>
                  </>
                ) : (
                  <>
                    <Input
                      value={quickFlowData.tableName}
                      onChange={(e) => setQuickFlowData(prev => ({ 
                        ...prev, 
                        tableName: e.target.value,
                        tableLabel: e.target.value,
                      }))}
                      placeholder="테이블명 입력 (예: customer_mng)"
                      className="h-8 text-xs sm:h-10 sm:text-sm mt-1"
                    />
                    <p className="text-[10px] text-muted-foreground mt-1">테이블명을 직접 입력하세요</p>
                  </>
                );
              })()}
            </div>

            {/* 액션 타입 */}
            <div>
              <Label className="text-xs sm:text-sm">액션 타입</Label>
              <div className="flex gap-2 mt-2">
                {[
                  { value: "insert", label: "INSERT", color: "bg-green-100 text-green-700 border-green-300" },
                  { value: "update", label: "UPDATE", color: "bg-blue-100 text-blue-700 border-blue-300" },
                  { value: "delete", label: "DELETE", color: "bg-red-100 text-red-700 border-red-300" },
                ].map((action) => (
                  <button
                    key={action.value}
                    type="button"
                    onClick={() => setQuickFlowData(prev => ({ ...prev, actionType: action.value as any }))}
                    className={cn(
                      "flex-1 py-2 px-3 text-xs font-medium rounded-md border transition-all",
                      quickFlowData.actionType === action.value
                        ? action.color + " ring-2 ring-offset-1"
                        : "bg-gray-50 text-gray-600 border-gray-200 hover:bg-gray-100"
                    )}
                  >
                    {action.label}
                  </button>
                ))}
              </div>
            </div>

            {/* 설명 (선택) */}
            <div>
              <Label className="text-xs sm:text-sm">설명 (선택)</Label>
              <Textarea
                value={quickFlowData.description}
                onChange={(e) => setQuickFlowData(prev => ({ ...prev, description: e.target.value }))}
                placeholder="플로우에 대한 설명을 입력하세요"
                className="h-16 text-xs sm:text-sm mt-1 resize-none"
              />
            </div>

            {/* 자동 연동 옵션 */}
            {quickFlowData.targetButtonId && (
              <div className="flex items-center gap-2 p-2 rounded-md bg-purple-50 border border-purple-200">
                <input
                  type="checkbox"
                  id="autoLink"
                  checked={quickFlowData.autoLink}
                  onChange={(e) => setQuickFlowData(prev => ({ ...prev, autoLink: e.target.checked }))}
                  className="h-4 w-4 rounded border-gray-300"
                />
                <label htmlFor="autoLink" className="text-xs text-purple-700">
                  생성 후 [{buttonControls.find(b => b.id === quickFlowData.targetButtonId)?.label}] 버튼에 자동 연동
                </label>
              </div>
            )}
          </div>

          {/* 버튼 영역 */}
          <div className="flex flex-col gap-2 pt-2 border-t">
            {/* 제어 관리에서 직접 생성 (권장) */}
            <Button
              variant="default"
              onClick={() => {
                if (quickFlowData.targetButtonId) {
                  setPendingLinkButtonId(quickFlowData.targetButtonId);
                }
                setShowQuickFlowDialog(false);
                openFlowEditorInNewWindow(quickFlowData.targetButtonId || undefined);
              }}
              className="h-10 w-full text-sm font-medium"
            >
              <ExternalLink className="mr-2 h-4 w-4" />
              제어 관리에서 직접 생성 (권장)
            </Button>
            <p className="text-[10px] text-center text-muted-foreground -mt-1">
              필드 매핑, WHERE 조건 등을 직접 설정할 수 있습니다. 저장 시 자동 연동됩니다.
            </p>
            
            {/* 구분선 */}
            <div className="flex items-center gap-2 my-1">
              <div className="flex-1 h-px bg-border" />
              <span className="text-[10px] text-muted-foreground">또는</span>
              <div className="flex-1 h-px bg-border" />
            </div>
            
            {/* 하단 버튼들 */}
            <div className="flex justify-end gap-2">
              <Button
                variant="outline"
                onClick={() => setShowQuickFlowDialog(false)}
                className="h-8 text-xs"
              >
                취소
              </Button>
              <Button
                variant="outline"
                onClick={handleQuickCreateFlow}
                disabled={isCreatingFlow || !quickFlowData.name.trim() || !quickFlowData.tableName}
                className="h-8 text-xs"
              >
                {isCreatingFlow ? (
                  <>
                    <Loader2 className="mr-1 h-3 w-3 animate-spin" />
                    생성 중...
                  </>
                ) : (
                  "골격만 생성"
                )}
              </Button>
            </div>
          </div>
        </DialogContent>
      </Dialog>

      {/* FlowEditor 전체 화면 모달 */}
      <Dialog open={showFlowEditorModal} onOpenChange={setShowFlowEditorModal}>
        <DialogContent className="max-w-[98vw] h-[95vh] p-0 overflow-hidden">
          <div className="flex flex-col h-full">
            {/* 헤더 */}
            <div className="flex items-center justify-between px-4 py-3 border-b bg-background">
              <div>
                <h2 className="text-lg font-semibold">플로우 생성</h2>
                <p className="text-xs text-muted-foreground">
                  저장하면 자동으로 버튼에 연동됩니다
                  {flowEditorTargetButtonId && (
                    <span className="ml-1 text-purple-600">
                      (대상: {buttonControls.find(b => b.id === flowEditorTargetButtonId)?.label})
                    </span>
                  )}
                </p>
              </div>
              <Button
                variant="ghost"
                size="sm"
                onClick={() => setShowFlowEditorModal(false)}
              >
                <X className="h-4 w-4" />
              </Button>
            </div>
            
            {/* FlowEditor */}
            <div className="flex-1 overflow-hidden">
              <FlowEditor
                embedded={true}
                onSaveComplete={(flowId, flowName) => {
                  // 플로우 목록 새로고침
                  getNodeFlows().then(setFlows);
                  
                  // 대상 버튼에 연동
                  if (flowEditorTargetButtonId) {
                    const newFlow = {
                      id: flowId,
                      name: flowName,
                      timing: "after" as const,
                    };
                    
                    setEditedValues(prev => ({
                      ...prev,
                      [flowEditorTargetButtonId]: {
                        ...prev[flowEditorTargetButtonId],
                        linkedFlows: [
                          ...(prev[flowEditorTargetButtonId]?.linkedFlows || 
                              buttonControls.find(b => b.id === flowEditorTargetButtonId)?.linkedFlows || []),
                          newFlow,
                        ],
                      },
                    }));
                    
                    toast.success(`플로우 "${flowName}"이(가) 버튼에 연동되었습니다`);
                  } else {
                    toast.success(`플로우 "${flowName}"이(가) 생성되었습니다`);
                  }
                  
                  // 모달 닫기
                  setShowFlowEditorModal(false);
                  setFlowEditorTargetButtonId(null);
                }}
              />
            </div>
          </div>
        </DialogContent>
      </Dialog>

    </div>
  );
}

// ============================================================
// 탭 4: 화면 프리뷰 (iframe)
// ============================================================

interface PreviewTabProps {
  screenId: number;
  screenName: string;
  companyCode?: string;
  iframeKey?: number; // iframe 새로고침용 키
  canvasWidth?: number; // 화면 캔버스 너비
  canvasHeight?: number; // 화면 캔버스 높이
}

function PreviewTab({ screenId, screenName, companyCode, iframeKey = 0, canvasWidth, canvasHeight }: PreviewTabProps) {
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState<string | null>(null);
  const containerRef = useRef<HTMLDivElement>(null);
  
  // 화면 디자인 크기 (실제 캔버스 크기 사용, 없으면 기본값)
  // 좌우/상하 여유 마진 추가: 모달 패딩, 헤더, 하단 체크박스 등
  // 좌우: +120px (양쪽 패딩 + 여유), 상하: +250px (헤더 + 버튼 + 체크박스 + 패딩)
  const designWidth = Math.max((canvasWidth || 400) + 120, 500);
  const designHeight = Math.max((canvasHeight || 400) + 250, 650);
  
  // 컨테이너에 맞는 초기 스케일 계산
  const [initialScale, setInitialScale] = useState(0.7);
  
  // 컨테이너 크기에 맞춰 초기 스케일 계산
  useEffect(() => {
    const updateInitialScale = () => {
      if (containerRef.current) {
        const containerWidth = containerRef.current.offsetWidth;
        const containerHeight = containerRef.current.offsetHeight;
        
        // 여백 5px씩만 적용하여 꽉 차게
        const scaleX = (containerWidth - 10) / designWidth;
        const scaleY = (containerHeight - 10) / designHeight;
        const newScale = Math.min(scaleX, scaleY);
        
        setInitialScale(newScale);
      }
    };
    
    // 초기 측정 (약간의 딜레이)
    const timer = setTimeout(updateInitialScale, 200);
    
    // 리사이즈 감지
    const resizeObserver = new ResizeObserver(updateInitialScale);
    if (containerRef.current) {
      resizeObserver.observe(containerRef.current);
    }
    
    return () => {
      clearTimeout(timer);
      resizeObserver.disconnect();
    };
  }, []);
  

  // 화면 URL 생성 (preview=true로 사이드바 없이 화면만 표시, company_code 전달)
  const previewUrl = useMemo(() => {
    // 현재 호스트 기반으로 URL 생성
    const params = new URLSearchParams({ preview: "true" });
    // 프리뷰용 회사 코드 추가 (데이터 조회에 필요)
    if (companyCode) {
      params.set("company_code", companyCode);
    }
    if (typeof window !== "undefined") {
      const baseUrl = window.location.origin;
      return `${baseUrl}/screens/${screenId}?${params.toString()}`;
    }
    return `/screens/${screenId}?${params.toString()}`;
  }, [screenId, companyCode]);

  const handleIframeLoad = () => {
    setLoading(false);
  };

  const handleIframeError = () => {
    setLoading(false);
    setError("화면을 불러오는데 실패했습니다.");
  };

  const openInNewTab = () => {
    window.open(previewUrl, "_blank");
  };

  return (
    <div className="flex min-h-0 flex-1 flex-col">
      {/* 상단 툴바 (최소화) */}
      <div className="flex h-7 shrink-0 items-center justify-between border-b px-2">
        <div className="flex items-center gap-1.5">
          <Eye className="h-3 w-3 text-blue-500" />
          <span className="truncate text-xs font-medium">{screenName}</span>
          <span className="text-[10px] text-muted-foreground">(휠: 확대/축소, 드래그: 이동)</span>
        </div>
        <div className="flex items-center gap-1">
          <Button
            variant="ghost"
            size="sm"
            onClick={() => {
              setLoading(true);
              const iframe = document.getElementById("screen-preview-iframe") as HTMLIFrameElement;
              if (iframe) {
                iframe.src = iframe.src;
              }
            }}
            className="h-5 w-5 p-0"
            title="새로고침"
          >
            <RefreshCw className={cn("h-3 w-3", loading && "animate-spin")} />
          </Button>
          <Button variant="ghost" size="sm" onClick={openInNewTab} className="h-5 w-5 p-0" title="새 탭에서 열기">
            <ExternalLink className="h-3 w-3" />
          </Button>
        </div>
      </div>

      {/* iframe 영역 - Ctrl+휠로 확대/축소, 내부 버튼/목록 클릭 가능 */}
      <div 
        ref={containerRef} 
        className="relative min-h-0 flex-1 overflow-hidden flex items-center justify-center bg-gray-100"
      >
        {loading && (
          <div className="absolute inset-0 z-10 flex items-center justify-center bg-white/80">
            <div className="text-center">
              <Loader2 className="mx-auto h-8 w-8 animate-spin text-primary" />
              <p className="mt-2 text-sm text-muted-foreground">화면 로딩 중...</p>
            </div>
          </div>
        )}

        {error ? (
          <div className="flex h-full items-center justify-center">
            <div className="text-center">
              <div className="mx-auto mb-4 flex h-16 w-16 items-center justify-center rounded-full bg-destructive/10">
                <span className="text-2xl">⚠️</span>
              </div>
              <p className="text-sm text-destructive">{error}</p>
              <Button
                variant="outline"
                size="sm"
                className="mt-4"
                onClick={() => {
                  setError(null);
                  setLoading(true);
                }}
              >
                다시 시도
              </Button>
            </div>
          </div>
        ) : (
          <TransformWrapper
            initialScale={initialScale}
            minScale={0.2}
            maxScale={3}
            centerOnInit={true}
            wheel={{ step: 0.05 }}
            panning={{ velocityDisabled: true }}
          >
            {({ state }) => (
              <TransformComponent
                wrapperStyle={{ width: "100%", height: "100%" }}
                contentStyle={{ display: "flex", alignItems: "center", justifyContent: "center" }}
              >
                <div 
                  className="relative"
                  style={{
                    width: `${designWidth}px`,
                    height: `${designHeight}px`,
                  }}
                >
                  <iframe
                    key={iframeKey}
                    id="screen-preview-iframe"
                    src={previewUrl}
                    className="border-0 shadow-lg rounded bg-white pointer-events-none"
                    style={{
                      width: "100%",
                      height: "100%",
                    }}
                    onLoad={handleIframeLoad}
                    onError={handleIframeError}
                    title={`화면 프리뷰: ${screenName}`}
                    sandbox="allow-scripts allow-same-origin allow-forms allow-popups"
                  />
                  {/* 클릭/드래그 분리 오버레이 */}
                  <div
                    className="absolute inset-0"
                    style={{ cursor: "grab" }}
                    onMouseDown={(e) => {
                      const overlay = e.currentTarget;
                      const iframe = overlay.previousElementSibling as HTMLIFrameElement;
                      const startX = e.clientX;
                      const startY = e.clientY;
                      let moved = false;

                      const handleMouseMove = (moveEvent: MouseEvent) => {
                        const dx = Math.abs(moveEvent.clientX - startX);
                        const dy = Math.abs(moveEvent.clientY - startY);
                        if (dx > 5 || dy > 5) {
                          moved = true;
                          overlay.style.cursor = "grabbing";
                        }
                      };

                      const handleMouseUp = (upEvent: MouseEvent) => {
                        document.removeEventListener("mousemove", handleMouseMove);
                        document.removeEventListener("mouseup", handleMouseUp);
                        overlay.style.cursor = "grab";

                        // 이동 없이 클릭만 했으면 iframe에 클릭 전달
                        if (!moved) {
                          const rect = iframe.getBoundingClientRect();
                          // 실제 표시된 크기와 원본 크기의 비율로 좌표 변환
                          const scaleX = designWidth / rect.width;
                          const scaleY = designHeight / rect.height;
                          const x = (upEvent.clientX - rect.left) * scaleX;
                          const y = (upEvent.clientY - rect.top) * scaleY;
                          
                          // iframe 내부로 클릭 이벤트 전달
                          try {
                            const iframeDoc = iframe.contentDocument || iframe.contentWindow?.document;
                            if (iframeDoc) {
                              let elem = iframeDoc.elementFromPoint(x, y) as HTMLElement | null;
                              if (elem) {
                                // SVG 내부 요소(path, line 등)면 가장 가까운 버튼/앵커 찾기
                                const clickable = elem.closest("button, a, [role='button'], [onclick]") as HTMLElement | null;
                                const target = clickable || elem;
                                
                                // 인풋 요소면 포커스 먼저
                                if (target.tagName === "INPUT" || target.tagName === "TEXTAREA" || target.tagName === "SELECT") {
                                  target.focus();
                                }
                                // 전체 마우스 이벤트 시퀀스 발생
                                target.dispatchEvent(new MouseEvent("mousedown", { bubbles: true, cancelable: true, view: iframe.contentWindow }));
                                target.dispatchEvent(new MouseEvent("mouseup", { bubbles: true, cancelable: true, view: iframe.contentWindow }));
                                target.click();
                              }
                            }
                          } catch {
                            // cross-origin 제한시 무시
                          }
                        }
                      };

                      document.addEventListener("mousemove", handleMouseMove);
                      document.addEventListener("mouseup", handleMouseUp);
                    }}
                  />
                </div>
              </TransformComponent>
            )}
          </TransformWrapper>
        )}
      </div>
    </div>
  );
}

export default ScreenSettingModal;