"use client";

import React, { useCallback, useEffect, useMemo, useState, useRef } from "react";
import { FlowComponent } from "@/types/screen-management";
import { Badge } from "@/components/ui/badge";
import { Button } from "@/components/ui/button";
import { 
  AlertCircle, 
  Loader2, 
  ChevronUp, 
  Filter, 
  X, 
  Layers, 
  ChevronDown, 
  ChevronRight,
  ChevronLeft,
  Edit,
  FileSpreadsheet,
  FileText,
  Copy,
  RefreshCw,
} from "lucide-react";
import * as XLSX from "xlsx";
import {
  getFlowById,
  getAllStepCounts,
  getStepDataList,
  getFlowSteps,
  getFlowConnections,
  getStepColumnLabels,
} from "@/lib/api/flow";
import type { FlowDefinition, FlowStep } from "@/types/flow";
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table";
import { Checkbox } from "@/components/ui/checkbox";
import { SingleTableWithSticky } from "@/lib/registry/components/table-list/SingleTableWithSticky";
import type { ColumnConfig } from "@/lib/registry/components/table-list/types";
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
import { toast } from "sonner";
import {
  Pagination,
  PaginationContent,
  PaginationItem,
  PaginationLink,
  PaginationNext,
  PaginationPrevious,
} from "@/components/ui/pagination";
import { useFlowStepStore } from "@/stores/flowStepStore";
import {
  Dialog,
  DialogContent,
  DialogDescription,
  DialogFooter,
  DialogHeader,
  DialogTitle,
} from "@/components/ui/dialog";
import { Label } from "@/components/ui/label";
import { Input } from "@/components/ui/input";
import { useScreenPreview } from "@/contexts/ScreenPreviewContext";
import { useAuth } from "@/hooks/useAuth";
import { useTableOptions } from "@/contexts/TableOptionsContext";
import { TableFilter, ColumnVisibility } from "@/types/table-options";

// 그룹화된 데이터 인터페이스
interface GroupedData {
  groupKey: string;
  groupValues: Record<string, any>;
  items: any[];
  count: number;
}

interface FlowWidgetProps {
  component: FlowComponent;
  onStepClick?: (stepId: number, stepName: string) => void;
  onSelectedDataChange?: (selectedData: any[], stepId: number | null) => void;
  flowRefreshKey?: number; // 새로고침 키
  onFlowRefresh?: () => void; // 새로고침 완료 콜백
}

export function FlowWidget({
  component,
  onStepClick,
  onSelectedDataChange,
  flowRefreshKey,
  onFlowRefresh,
}: FlowWidgetProps) {
  const { isPreviewMode } = useScreenPreview(); // 프리뷰 모드 확인
  const { user } = useAuth(); // 사용자 정보 가져오기
  const { registerTable, unregisterTable } = useTableOptions(); // Context 훅

  // TableOptions 상태
  const [filters, setFilters] = useState<TableFilter[]>([]);
  const [grouping, setGrouping] = useState<string[]>([]);
  const [columnVisibility, setColumnVisibility] = useState<ColumnVisibility[]>([]);

  // 숫자 포맷팅 함수
  const formatValue = (value: any): string => {
    if (value === null || value === undefined || value === "") {
      return "-";
    }

    // 숫자 타입이거나 숫자로 변환 가능한 문자열인 경우 포맷팅
    if (typeof value === "number") {
      return value.toLocaleString("ko-KR");
    }

    if (typeof value === "string") {
      const numValue = parseFloat(value);
      // 숫자로 변환 가능하고, 변환 후 원래 값과 같은 경우에만 포맷팅
      if (!isNaN(numValue) && numValue.toString() === value.trim()) {
        return numValue.toLocaleString("ko-KR");
      }
    }

    return String(value);
  };

  // 🆕 전역 상태 관리
  const setSelectedStep = useFlowStepStore((state) => state.setSelectedStep);
  const resetFlow = useFlowStepStore((state) => state.resetFlow);

  const [flowData, setFlowData] = useState<FlowDefinition | null>(null);
  const [steps, setSteps] = useState<FlowStep[]>([]);
  const [stepCounts, setStepCounts] = useState<Record<number, number>>({});
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState<string | null>(null);
  const [connections, setConnections] = useState<any[]>([]); // 플로우 연결 정보

  // 선택된 스텝의 데이터 리스트 상태
  const [selectedStepId, setSelectedStepId] = useState<number | null>(null);
  const [stepData, setStepData] = useState<any[]>([]);
  const [stepDataColumns, setStepDataColumns] = useState<string[]>([]);
  const [stepDataLoading, setStepDataLoading] = useState(false);
  const [selectedRows, setSelectedRows] = useState<Set<string>>(new Set()); // Primary Key 값으로 선택 관리
  const [columnLabels, setColumnLabels] = useState<Record<string, string>>({}); // 컬럼명 -> 라벨 매핑

  // 🆕 검색 필터 관련 상태
  const [searchFilterColumns, setSearchFilterColumns] = useState<Set<string>>(new Set()); // 검색 필터로 사용할 컬럼
  const [isFilterSettingOpen, setIsFilterSettingOpen] = useState(false); // 필터 설정 다이얼로그
  const [searchValues, setSearchValues] = useState<Record<string, string>>({}); // 검색 값
  const [allAvailableColumns, setAllAvailableColumns] = useState<string[]>([]); // 전체 컬럼 목록
  const [filteredData, setFilteredData] = useState<any[]>([]); // 필터링된 데이터

  // 🆕 그룹 설정 관련 상태
  const [isGroupSettingOpen, setIsGroupSettingOpen] = useState(false); // 그룹 설정 다이얼로그
  const [groupByColumns, setGroupByColumns] = useState<string[]>([]); // 그룹화할 컬럼 목록
  const [collapsedGroups, setCollapsedGroups] = useState<Set<string>>(new Set()); // 접힌 그룹

  /**
   * 🆕 컬럼 표시 결정 함수
   * 1순위: 플로우 스텝 기본 설정 (displayConfig)
   * 2순위: 모든 컬럼 표시
   */
  const getVisibleColumns = (stepId: number, allColumns: string[], stepsArray?: FlowStep[]): string[] => {
    // stepsArray가 제공되지 않으면 state의 steps 사용
    const effectiveSteps = stepsArray || steps;

    // 1순위: 플로우 스텝 기본 설정
    const currentStep = effectiveSteps.find((s) => s.id === stepId);

    if (currentStep?.displayConfig?.visibleColumns && currentStep.displayConfig.visibleColumns.length > 0) {
      return currentStep.displayConfig.visibleColumns;
    }

    // 2순위: 모든 컬럼 표시
    return allColumns;
  };

  // 🆕 스텝 데이터 페이지네이션 상태
  const [stepDataPage, setStepDataPage] = useState(1);
  const [stepDataPageSize, setStepDataPageSize] = useState(10);

  // 🆕 정렬 상태 (SingleTableWithSticky용)
  const [sortColumn, setSortColumn] = useState<string | null>(null);
  const [sortDirection, setSortDirection] = useState<"asc" | "desc">("asc");

  // 🆕 툴바 관련 상태
  const [isSearchPanelOpen, setIsSearchPanelOpen] = useState(false);
  const [globalSearchTerm, setGlobalSearchTerm] = useState("");
  const [searchHighlights, setSearchHighlights] = useState<Set<string>>(new Set());
  const [currentSearchIndex, setCurrentSearchIndex] = useState(0);

  // 🆕 인라인 편집 관련 상태
  const [editingCell, setEditingCell] = useState<{
    rowIndex: number;
    colIndex: number;
    columnName: string;
    originalValue: any;
  } | null>(null);
  const [editingValue, setEditingValue] = useState<string>("");
  const editInputRef = useRef<HTMLInputElement>(null);

  // componentConfig에서 플로우 설정 추출 (DynamicComponentRenderer에서 전달됨)
  const config = (component as any).componentConfig || (component as any).config || {};
  const flowId = config.flowId || component.flowId;
  const flowName = config.flowName || component.flowName;
  const displayMode = config.displayMode || component.displayMode || "horizontal";
  const showStepCount = config.showStepCount !== false && component.showStepCount !== false; // 기본값 true
  const allowDataMove = config.allowDataMove || component.allowDataMove || false;

  // 🆕 플로우 컴포넌트 ID (버튼이 이 플로우를 참조할 때 사용)
  const flowComponentId = component.id;

  // 🆕 localStorage 키 생성 (사용자별로 저장)
  const filterSettingKey = useMemo(() => {
    if (!flowId || selectedStepId === null || !user?.userId) return null;
    return `flowWidget_searchFilters_${user.userId}_${flowId}_${selectedStepId}`;
  }, [flowId, selectedStepId, user?.userId]);

  // 🆕 그룹 설정 localStorage 키 생성
  const groupSettingKey = useMemo(() => {
    if (!selectedStepId) return null;
    return `flowWidget_groupSettings_step_${selectedStepId}`;
  }, [selectedStepId]);

  // 🆕 저장된 필터 설정 불러오기
  useEffect(() => {
    if (!filterSettingKey || stepDataColumns.length === 0 || !user?.userId) return;

    try {
      // 현재 사용자의 필터 설정만 불러오기
      const saved = localStorage.getItem(filterSettingKey);
      if (saved) {
        const savedFilters = JSON.parse(saved);
        // 현재 단계에 표시되는 컬럼만 필터링
        const validFilters = savedFilters.filter((col: string) => stepDataColumns.includes(col));
        setSearchFilterColumns(new Set(validFilters));
      } else {
        // 초기값: 빈 필터 (사용자가 선택해야 함)
        setSearchFilterColumns(new Set());
      }
    } catch (error) {
      console.error("필터 설정 불러오기 실패:", error);
      setSearchFilterColumns(new Set());
    }
  }, [filterSettingKey, stepDataColumns, user?.userId]);

  // 🆕 저장된 그룹 설정 불러오기
  useEffect(() => {
    if (!groupSettingKey || stepDataColumns.length === 0) return;

    try {
      const saved = localStorage.getItem(groupSettingKey);
      if (saved) {
        const savedGroups = JSON.parse(saved);
        // 현재 단계에 표시되는 컬럼만 필터링
        const validGroups = savedGroups.filter((col: string) => stepDataColumns.includes(col));
        setGroupByColumns(validGroups);
      }
    } catch (error) {
      console.error("그룹 설정 불러오기 실패:", error);
      setGroupByColumns([]);
    }
  }, [groupSettingKey, stepDataColumns]);

  // 🆕 필터 설정 저장
  const saveFilterSettings = useCallback(() => {
    if (!filterSettingKey) return;

    try {
      localStorage.setItem(filterSettingKey, JSON.stringify(Array.from(searchFilterColumns)));
      setIsFilterSettingOpen(false);
      toast.success("검색 필터 설정이 저장되었습니다");

      // 검색 값 초기화
      setSearchValues({});
    } catch (error) {
      console.error("필터 설정 저장 실패:", error);
      toast.error("설정 저장에 실패했습니다");
    }
  }, [filterSettingKey, searchFilterColumns]);

  // 🆕 필터 컬럼 토글
  const toggleFilterColumn = useCallback((columnName: string) => {
    setSearchFilterColumns((prev) => {
      const newSet = new Set(prev);
      if (newSet.has(columnName)) {
        newSet.delete(columnName);
      } else {
        newSet.add(columnName);
      }
      return newSet;
    });
  }, []);

  // 🆕 전체 선택/해제
  const toggleAllFilters = useCallback(() => {
    if (searchFilterColumns.size === stepDataColumns.length) {
      // 전체 해제
      setSearchFilterColumns(new Set());
    } else {
      // 전체 선택
      setSearchFilterColumns(new Set(stepDataColumns));
    }
  }, [searchFilterColumns, stepDataColumns]);

  // 🆕 검색 초기화
  const handleClearSearch = useCallback(() => {
    setSearchValues({});
    setFilteredData([]);
  }, []);

  // 🆕 그룹 설정 저장
  const saveGroupSettings = useCallback(() => {
    if (!groupSettingKey) return;

    try {
      localStorage.setItem(groupSettingKey, JSON.stringify(groupByColumns));
      setIsGroupSettingOpen(false);
      toast.success("그룹 설정이 저장되었습니다");
    } catch (error) {
      console.error("그룹 설정 저장 실패:", error);
      toast.error("설정 저장에 실패했습니다");
    }
  }, [groupSettingKey, groupByColumns]);

  // 🆕 그룹 컬럼 토글
  const toggleGroupColumn = useCallback((columnName: string) => {
    setGroupByColumns((prev) => {
      if (prev.includes(columnName)) {
        return prev.filter((col) => col !== columnName);
      } else {
        return [...prev, columnName];
      }
    });
  }, []);

  // 🆕 그룹 펼치기/접기 토글
  const toggleGroupCollapse = useCallback((groupKey: string) => {
    setCollapsedGroups((prev) => {
      const newSet = new Set(prev);
      if (newSet.has(groupKey)) {
        newSet.delete(groupKey);
      } else {
        newSet.add(groupKey);
      }
      return newSet;
    });
  }, []);

  // 🆕 그룹 해제
  const clearGrouping = useCallback(() => {
    setGroupByColumns([]);
    setCollapsedGroups(new Set());
    if (groupSettingKey) {
      localStorage.removeItem(groupSettingKey);
    }
    toast.success("그룹이 해제되었습니다");
  }, [groupSettingKey]);

  // 테이블 등록 (선택된 스텝이 있을 때)
  useEffect(() => {
    if (!selectedStepId || !stepDataColumns || stepDataColumns.length === 0) {
      return;
    }

    const tableId = `flow-widget-${component.id}-step-${selectedStepId}`;
    const currentStep = steps.find((s) => s.id === selectedStepId);

    registerTable({
      tableId,
      label: `${flowName || "플로우"} - ${currentStep?.name || "스텝"}`,
      tableName: "flow_step_data",
      columns: stepDataColumns.map((col) => ({
        columnName: col,
        columnLabel: columnLabels[col] || col,
        inputType: "text",
        visible: true,
        width: 150,
        sortable: true,
        filterable: true,
      })),
      onFilterChange: setFilters,
      onGroupChange: setGrouping,
      onColumnVisibilityChange: setColumnVisibility,
    });

    return () => unregisterTable(tableId);
  }, [selectedStepId, stepDataColumns, columnLabels, flowName, steps, component.id]);

  // 🆕 데이터 그룹화
  const groupedData = useMemo((): GroupedData[] => {
    const dataToGroup = filteredData.length > 0 ? filteredData : stepData;
    
    if (groupByColumns.length === 0 || dataToGroup.length === 0) return [];

    const grouped = new Map<string, any[]>();

    dataToGroup.forEach((item) => {
      // 그룹 키 생성: "통화:KRW > 단위:EA"
      const keyParts = groupByColumns.map((col) => {
        const value = item[col];
        const label = columnLabels[col] || col;
        return `${label}:${value !== null && value !== undefined ? value : "-"}`;
      });
      const groupKey = keyParts.join(" > ");

      if (!grouped.has(groupKey)) {
        grouped.set(groupKey, []);
      }
      grouped.get(groupKey)!.push(item);
    });

    return Array.from(grouped.entries()).map(([groupKey, items]) => {
      const groupValues: Record<string, any> = {};
      groupByColumns.forEach((col) => {
        groupValues[col] = items[0]?.[col];
      });

      return {
        groupKey,
        groupValues,
        items,
        count: items.length,
      };
    });
  }, [filteredData, stepData, groupByColumns, columnLabels]);

  // 🆕 검색 값이 변경될 때마다 자동 검색 (useEffect로 직접 처리)
  useEffect(() => {
    if (!stepData || stepData.length === 0) {
      setFilteredData([]);
      return;
    }

    // 검색 값이 하나라도 있는지 확인
    const hasSearchValue = Object.values(searchValues).some((val) => val && String(val).trim() !== "");

    if (!hasSearchValue) {
      // 검색 값이 없으면 필터링 해제
      setFilteredData([]);
      return;
    }

    // 필터링 실행
    const filtered = stepData.filter((row) => {
      // 모든 검색 조건을 만족하는지 확인
      return Object.entries(searchValues).every(([col, searchValue]) => {
        if (!searchValue || String(searchValue).trim() === "") return true; // 빈 값은 필터링하지 않음

        const cellValue = row[col];
        if (cellValue === null || cellValue === undefined) return false;

        // 문자열로 변환하여 대소문자 무시 검색
        return String(cellValue).toLowerCase().includes(String(searchValue).toLowerCase());
      });
    });

    setFilteredData(filtered);
    console.log("🔍 검색 실행:", {
      totalRows: stepData.length,
      filteredRows: filtered.length,
      searchValues,
      hasSearchValue,
    });
  }, [searchValues, stepData]); // stepData와 searchValues가 변경될 때마다 실행

  // 선택된 스텝의 데이터를 다시 로드하는 함수
  const refreshStepData = async () => {
    if (!flowId) return;

    try {
      // 스텝 카운트는 항상 업데이트 (선택된 스텝 유무와 관계없이)
      const countsResponse = await getAllStepCounts(flowId);

      if (countsResponse.success && countsResponse.data) {
        // Record 형태로 변환
        const countsMap: Record<number, number> = {};
        if (Array.isArray(countsResponse.data)) {
          countsResponse.data.forEach((item: any) => {
            countsMap[item.stepId] = item.count;
          });
        } else if (typeof countsResponse.data === "object") {
          Object.assign(countsMap, countsResponse.data);
        }

        setStepCounts(countsMap);
      }

      // 선택된 스텝이 있으면 해당 스텝의 데이터도 새로고침
      if (selectedStepId) {
        setStepDataLoading(true);

        // 컬럼 라벨 조회
        const labelsResponse = await getStepColumnLabels(flowId, selectedStepId);
        if (labelsResponse.success && labelsResponse.data) {
          setColumnLabels(labelsResponse.data);
        }

        const response = await getStepDataList(flowId, selectedStepId, 1, 100);

        if (!response.success) {
          throw new Error(response.message || "데이터를 불러올 수 없습니다");
        }

        const rows = response.data?.records || [];
        setStepData(rows);

        // 🆕 컬럼 추출 및 우선순위 적용
        if (rows.length > 0) {
          const allColumns = Object.keys(rows[0]);
          setAllAvailableColumns(allColumns); // 전체 컬럼 목록 저장
          const visibleColumns = getVisibleColumns(selectedStepId, allColumns);
          setStepDataColumns(visibleColumns);
        } else {
          setAllAvailableColumns([]);
          setStepDataColumns([]);
        }

        // 선택 초기화
        setSelectedRows(new Set());
        setSearchValues({}); // 검색 값도 초기화
        setFilteredData([]); // 필터링된 데이터 초기화
        onSelectedDataChange?.([], selectedStepId);
      }
    } catch (err: any) {
      console.error("❌ 플로우 새로고침 실패:", err);
      toast.error(err.message || "데이터를 새로고치는데 실패했습니다");
    } finally {
      if (selectedStepId) {
        setStepDataLoading(false);
      }
    }
  };

  useEffect(() => {
    if (!flowId) {
      setLoading(false);
      return;
    }

    const loadFlowData = async () => {
      try {
        setLoading(true);
        setError(null);

        // 프리뷰 모드에서는 샘플 데이터만 표시
        if (isPreviewMode) {
          console.log("🔒 프리뷰 모드: 플로우 데이터 로드 차단 - 샘플 데이터 표시");
          setFlowData({
            id: flowId || 0,
            flowName: flowName || "샘플 플로우",
            description: "프리뷰 모드 샘플",
            isActive: true,
            createdAt: new Date().toISOString(),
            updatedAt: new Date().toISOString(),
          } as FlowDefinition);

          const sampleSteps: FlowStep[] = [
            {
              id: 1,
              flowId: flowId || 0,
              stepName: "시작 단계",
              stepOrder: 1,
              stepType: "start",
              stepConfig: {},
              createdAt: new Date().toISOString(),
              updatedAt: new Date().toISOString(),
            },
            {
              id: 2,
              flowId: flowId || 0,
              stepName: "진행 중",
              stepOrder: 2,
              stepType: "process",
              stepConfig: {},
              createdAt: new Date().toISOString(),
              updatedAt: new Date().toISOString(),
            },
            {
              id: 3,
              flowId: flowId || 0,
              stepName: "완료",
              stepOrder: 3,
              stepType: "end",
              stepConfig: {},
              createdAt: new Date().toISOString(),
              updatedAt: new Date().toISOString(),
            },
          ];
          setSteps(sampleSteps);
          setStepCounts({ 1: 5, 2: 3, 3: 2 });
          setConnections([]);
          setLoading(false);
          return;
        }

        // 플로우 정보 조회
        const flowResponse = await getFlowById(flowId!);
        if (!flowResponse.success || !flowResponse.data) {
          throw new Error("플로우를 찾을 수 없습니다");
        }

        setFlowData(flowResponse.data);

        // 스텝 목록 조회
        const stepsResponse = await getFlowSteps(flowId);
        if (!stepsResponse.success) {
          throw new Error("스텝 목록을 불러올 수 없습니다");
        }
        if (stepsResponse.data) {
          const sortedSteps = stepsResponse.data.sort((a: FlowStep, b: FlowStep) => a.stepOrder - b.stepOrder);
          setSteps(sortedSteps);

          // 연결 정보 조회
          const connectionsResponse = await getFlowConnections(flowId);
          if (connectionsResponse.success && connectionsResponse.data) {
            setConnections(connectionsResponse.data);
          }

          // 스텝별 데이터 건수 조회
          if (showStepCount) {
            const countsResponse = await getAllStepCounts(flowId!);
            if (countsResponse.success && countsResponse.data) {
              // 배열을 Record<number, number>로 변환
              const countsMap: Record<number, number> = {};
              countsResponse.data.forEach((item: any) => {
                countsMap[item.stepId] = item.count;
              });
              setStepCounts(countsMap);
            }
          }

          // 🆕 플로우 로드 후 첫 번째 스텝 자동 선택
          if (sortedSteps.length > 0) {
            const firstStep = sortedSteps[0];
            setSelectedStepId(firstStep.id);
            setSelectedStep(flowComponentId, firstStep.id);

            // 첫 번째 스텝의 데이터 로드
            try {
              // 컬럼 라벨 조회
              const labelsResponse = await getStepColumnLabels(flowId!, firstStep.id);
              if (labelsResponse.success && labelsResponse.data) {
                setColumnLabels(labelsResponse.data);
              }

              const response = await getStepDataList(flowId!, firstStep.id, 1, 100);
              if (response.success) {
                const rows = response.data?.records || [];
                setStepData(rows);
                if (rows.length > 0) {
                  const allColumns = Object.keys(rows[0]);
                  setAllAvailableColumns(allColumns); // 전체 컬럼 목록 저장
                  // sortedSteps를 직접 전달하여 타이밍 이슈 해결
                  const visibleColumns = getVisibleColumns(firstStep.id, allColumns, sortedSteps);
                  setStepDataColumns(visibleColumns);
                }
              }
            } catch (err) {
              console.error("첫 번째 스텝 데이터 로드 실패:", err);
            }
          }
        }
      } catch (err: any) {
        console.error("Failed to load flow data:", err);
        setError(err.message || "플로우 데이터를 불러오는데 실패했습니다");
      } finally {
        setLoading(false);
      }
    };

    loadFlowData();
  }, [flowId, showStepCount]);

  // flowRefreshKey가 변경될 때마다 스텝 데이터 새로고침
  useEffect(() => {
    if (flowRefreshKey !== undefined && flowRefreshKey > 0 && flowId) {
      refreshStepData();
    }
  }, [flowRefreshKey]);

  // 🆕 언마운트 시 전역 상태 초기화
  useEffect(() => {
    return () => {
      resetFlow(flowComponentId);
    };
  }, [flowComponentId, resetFlow]);

  // 🆕 스텝 클릭 핸들러 (전역 상태 업데이트 추가)
  const handleStepClick = async (stepId: number, stepName: string) => {
    // 프리뷰 모드에서는 스텝 클릭 차단
    if (isPreviewMode) {
      return;
    }

    // 외부 콜백 실행
    if (onStepClick) {
      onStepClick(stepId, stepName);
    }

    // 같은 스텝을 다시 클릭하면 접기
    if (selectedStepId === stepId) {
      setSelectedStepId(null);
      setSelectedStep(flowComponentId, null); // 🆕 전역 상태 업데이트
      setStepData([]);
      setStepDataColumns([]);
      setSelectedRows(new Set());
      setStepDataPage(1); // 🆕 페이지 리셋
      onSelectedDataChange?.([], null);

      return;
    }

    // 새로운 스텝 선택 - 데이터 로드
    setSelectedStepId(stepId);
    setSelectedStep(flowComponentId, stepId); // 🆕 전역 상태 업데이트
    setStepDataLoading(true);
    setSelectedRows(new Set());
    setStepDataPage(1); // 🆕 페이지 리셋
    onSelectedDataChange?.([], stepId);

    try {
      // 컬럼 라벨 조회
      const labelsResponse = await getStepColumnLabels(flowId!, stepId);
      console.log("🏷️ 컬럼 라벨 조회 결과:", {
        stepId,
        success: labelsResponse.success,
        labelsCount: labelsResponse.data ? Object.keys(labelsResponse.data).length : 0,
        labels: labelsResponse.data,
      });
      if (labelsResponse.success && labelsResponse.data) {
        setColumnLabels(labelsResponse.data);
      } else {
        console.warn("⚠️ 컬럼 라벨 조회 실패 또는 데이터 없음:", labelsResponse);
        setColumnLabels({});
      }

      // 데이터 조회
      const response = await getStepDataList(flowId!, stepId, 1, 100);

      if (!response.success) {
        throw new Error(response.message || "데이터를 불러올 수 없습니다");
      }

      const rows = response.data?.records || [];
      setStepData(rows);

      // 🆕 컬럼 추출 및 우선순위 적용
      if (rows.length > 0) {
        const allColumns = Object.keys(rows[0]);
        setAllAvailableColumns(allColumns); // 전체 컬럼 목록 저장
        const visibleColumns = getVisibleColumns(stepId, allColumns);
        setStepDataColumns(visibleColumns);
      } else {
        setAllAvailableColumns([]);
        setStepDataColumns([]);
      }
    } catch (err: any) {
      console.error("Failed to load step data:", err);
      toast.error(err.message || "데이터를 불러오는데 실패했습니다");
    } finally {
      setStepDataLoading(false);
    }
  };

  // Primary Key 컬럼명 (플로우 정의에서 가져오거나 기본값 id)
  const primaryKeyColumn = flowData?.primaryKey || "id";

  // 행의 Primary Key 값 가져오기
  const getRowKey = useCallback((row: any): string => {
    const keyValue = row[primaryKeyColumn] || row.id;
    return String(keyValue);
  }, [primaryKeyColumn]);

  // 체크박스 토글 (Primary Key 기반)
  const toggleRowSelection = (row: any) => {
    // 프리뷰 모드에서는 행 선택 차단
    if (isPreviewMode) {
      return;
    }

    const rowKey = getRowKey(row);
    const newSelected = new Set(selectedRows);
    if (newSelected.has(rowKey)) {
      newSelected.delete(rowKey);
    } else {
      newSelected.add(rowKey);
    }
    setSelectedRows(newSelected);

    // 선택된 데이터를 상위로 전달 (stepData에서 선택된 행들 찾기)
    const selectedData = stepData.filter((r) => newSelected.has(getRowKey(r)));
    console.log("🌊 FlowWidget - 체크박스 토글, 상위로 전달:", {
      rowKey,
      newSelectedSize: newSelected.size,
      selectedData,
      selectedStepId,
      hasCallback: !!onSelectedDataChange,
    });
    onSelectedDataChange?.(selectedData, selectedStepId);
  };

  // 전체 선택/해제 (Primary Key 기반)
  const toggleAllRows = () => {
    let newSelected: Set<string>;
    if (selectedRows.size === stepData.length) {
      newSelected = new Set();
    } else {
      newSelected = new Set(stepData.map((row) => getRowKey(row)));
    }
    setSelectedRows(newSelected);

    // 선택된 데이터를 상위로 전달
    const selectedData = stepData.filter((row) => newSelected.has(getRowKey(row)));
    onSelectedDataChange?.(selectedData, selectedStepId);
  };

  // 🆕 표시할 데이터 결정
  // - 검색 값이 있으면 → filteredData 사용 (결과가 0건이어도 filteredData 사용)
  // - 검색 값이 없으면 → stepData 사용 (전체 데이터)
  const hasSearchValue = Object.values(searchValues).some((val) => val && String(val).trim() !== "");
  const displayData = hasSearchValue ? filteredData : stepData;

  // 🆕 정렬된 데이터
  const sortedDisplayData = useMemo(() => {
    if (!sortColumn) return displayData;
    
    return [...displayData].sort((a, b) => {
      const aVal = a[sortColumn];
      const bVal = b[sortColumn];
      
      // null/undefined 처리
      if (aVal == null && bVal == null) return 0;
      if (aVal == null) return sortDirection === "asc" ? 1 : -1;
      if (bVal == null) return sortDirection === "asc" ? -1 : 1;
      
      // 숫자 비교
      if (typeof aVal === "number" && typeof bVal === "number") {
        return sortDirection === "asc" ? aVal - bVal : bVal - aVal;
      }
      
      // 문자열 비교
      const aStr = String(aVal).toLowerCase();
      const bStr = String(bVal).toLowerCase();
      if (sortDirection === "asc") {
        return aStr.localeCompare(bStr, "ko");
      }
      return bStr.localeCompare(aStr, "ko");
    });
  }, [displayData, sortColumn, sortDirection]);

  // 🆕 페이지네이션된 스텝 데이터 (정렬된 데이터 기반)
  const paginatedStepData = sortedDisplayData.slice((stepDataPage - 1) * stepDataPageSize, stepDataPage * stepDataPageSize);
  const totalStepDataPages = Math.ceil(sortedDisplayData.length / stepDataPageSize);

  // 🆕 정렬 핸들러
  const handleSort = useCallback((columnName: string) => {
    if (sortColumn === columnName) {
      // 같은 컬럼 클릭 시 방향 토글
      setSortDirection((prev) => (prev === "asc" ? "desc" : "asc"));
    } else {
      // 다른 컬럼 클릭 시 해당 컬럼으로 오름차순 정렬
      setSortColumn(columnName);
      setSortDirection("asc");
    }
  }, [sortColumn]);

  // 🆕 SingleTableWithSticky용 컬럼 설정 생성
  const tableColumns: ColumnConfig[] = useMemo(() => {
    const cols: ColumnConfig[] = [];
    
    // 체크박스 컬럼 추가 (allowDataMove가 true일 때)
    if (allowDataMove) {
      cols.push({
        columnName: "__checkbox__",
        displayName: "",
        visible: true,
        sortable: false,
        searchable: false,
        width: 50,
        align: "center",
        order: 0,
      });
    }
    
    // 데이터 컬럼들 추가
    stepDataColumns.forEach((col, index) => {
      cols.push({
        columnName: col,
        displayName: columnLabels[col] || col,
        visible: true,
        sortable: true,
        searchable: true,
        width: 150,
        align: "left",
        order: index + 1,
      });
    });
    
    return cols;
  }, [stepDataColumns, columnLabels, allowDataMove]);

  // 🆕 SingleTableWithSticky용 테이블 설정
  const tableConfig = useMemo(() => ({
    stickyHeader: true,
    checkbox: {
      enabled: allowDataMove,
      selectAll: allowDataMove,
      multiple: true,
      position: "left" as const,
    },
    tableStyle: {
      hoverEffect: true,
      alternateRows: false,
    },
  }), [allowDataMove]);

  // 🆕 현재 페이지 기준으로 변환된 검색 하이라이트
  const pageSearchHighlights = useMemo(() => {
    if (searchHighlights.size === 0) return new Set<string>();
    
    const pageStartIndex = (stepDataPage - 1) * stepDataPageSize;
    const pageEndIndex = pageStartIndex + stepDataPageSize;
    const pageHighlights = new Set<string>();
    
    searchHighlights.forEach((key) => {
      const [rowIndexStr, colIndexStr] = key.split("-");
      const rowIndex = parseInt(rowIndexStr);
      
      // 현재 페이지에 해당하는 항목만 포함
      if (rowIndex >= pageStartIndex && rowIndex < pageEndIndex) {
        // 페이지 내 상대 인덱스로 변환
        const pageRowIndex = rowIndex - pageStartIndex;
        pageHighlights.add(`${pageRowIndex}-${colIndexStr}`);
      }
    });
    
    return pageHighlights;
  }, [searchHighlights, stepDataPage, stepDataPageSize]);

  // 🆕 현재 페이지 기준 검색 인덱스
  const pageCurrentSearchIndex = useMemo(() => {
    if (searchHighlights.size === 0) return 0;
    
    const highlightArray = Array.from(searchHighlights);
    const currentKey = highlightArray[currentSearchIndex];
    if (!currentKey) return -1;
    
    const [rowIndexStr, colIndexStr] = currentKey.split("-");
    const rowIndex = parseInt(rowIndexStr);
    const pageStartIndex = (stepDataPage - 1) * stepDataPageSize;
    const pageRowIndex = rowIndex - pageStartIndex;
    
    // 현재 페이지에 있는지 확인
    if (pageRowIndex < 0 || pageRowIndex >= stepDataPageSize) return -1;
    
    // pageSearchHighlights에서의 인덱스 찾기
    const pageKey = `${pageRowIndex}-${colIndexStr}`;
    const pageHighlightArray = Array.from(pageSearchHighlights);
    return pageHighlightArray.indexOf(pageKey);
  }, [searchHighlights, currentSearchIndex, stepDataPage, stepDataPageSize, pageSearchHighlights]);

  // 🆕 컬럼 너비 계산 함수
  const getColumnWidth = useCallback((column: ColumnConfig) => {
    if (column.columnName === "__checkbox__") return 50;
    return column.width || 150;
  }, []);

  // 🆕 셀 값 포맷팅 함수
  const formatCellValue = useCallback((value: any, format?: string, columnName?: string) => {
    return formatValue(value);
  }, []);

  // 🆕 전체 선택 핸들러 (Primary Key 기반)
  const handleSelectAll = useCallback((checked: boolean) => {
    if (checked) {
      const allKeys = new Set(sortedDisplayData.map((row) => getRowKey(row)));
      setSelectedRows(allKeys);
      // 선택된 데이터를 상위로 전달
      onSelectedDataChange?.(sortedDisplayData, selectedStepId);
    } else {
      setSelectedRows(new Set());
      onSelectedDataChange?.([], selectedStepId);
    }
  }, [sortedDisplayData, getRowKey, onSelectedDataChange, selectedStepId]);

  // 🆕 행 클릭 핸들러
  const handleRowClick = useCallback((row: any) => {
    // 필요 시 행 클릭 로직 추가
  }, []);

  // 🆕 체크박스 셀 렌더링 (Primary Key 기반)
  // index 파라미터는 SingleTableWithSticky 인터페이스 호환을 위해 유지하지만 사용하지 않음
  const renderCheckboxCell = useCallback((row: any, _index: number) => {
    const rowKey = getRowKey(row);
    return (
      <Checkbox
        checked={selectedRows.has(rowKey)}
        onCheckedChange={() => toggleRowSelection(row)}
      />
    );
  }, [selectedRows, toggleRowSelection, getRowKey]);

  // 🆕 Excel 내보내기 (Primary Key 기반)
  const exportToExcel = useCallback(() => {
    try {
      const exportData = selectedRows.size > 0 
        ? sortedDisplayData.filter((row) => selectedRows.has(getRowKey(row)))
        : sortedDisplayData;

      if (exportData.length === 0) {
        toast.warning("내보낼 데이터가 없습니다.");
        return;
      }

      // 컬럼 라벨 적용
      const formattedData = exportData.map((row) => {
        const newRow: Record<string, any> = {};
        stepDataColumns.forEach((col) => {
          const label = columnLabels[col] || col;
          newRow[label] = row[col];
        });
        return newRow;
      });

      const ws = XLSX.utils.json_to_sheet(formattedData);
      const wb = XLSX.utils.book_new();
      XLSX.utils.book_append_sheet(wb, ws, "Data");

      const fileName = `${flowName || "flow"}_data_${new Date().toISOString().split("T")[0]}.xlsx`;
      XLSX.writeFile(wb, fileName);

      toast.success(`${exportData.length}개 행이 Excel로 내보내기 되었습니다.`);
    } catch (error) {
      console.error("Excel 내보내기 오류:", error);
      toast.error("Excel 내보내기에 실패했습니다.");
    }
  }, [sortedDisplayData, selectedRows, stepDataColumns, columnLabels, flowName, getRowKey]);

  // 🆕 PDF 내보내기 (html2canvas 사용으로 한글 지원)
  const exportToPdf = useCallback(async () => {
    try {
      const exportData = selectedRows.size > 0 
        ? sortedDisplayData.filter((row) => selectedRows.has(getRowKey(row)))
        : sortedDisplayData;

      if (exportData.length === 0) {
        toast.warning("내보낼 데이터가 없습니다.");
        return;
      }

      toast.loading("PDF 생성 중...", { id: "pdf-export" });

      // html2canvas와 jspdf 동적 로드
      const [{ default: html2canvas }, { default: jsPDF }] = await Promise.all([
        import("html2canvas"),
        import("jspdf"),
      ]);

      // 임시 테이블 HTML 생성
      const tempContainer = document.createElement("div");
      tempContainer.style.cssText = `
        position: absolute;
        left: -9999px;
        top: 0;
        background: white;
        padding: 20px;
        font-family: 'Malgun Gothic', 'Apple SD Gothic Neo', sans-serif;
      `;

      // 제목
      const title = document.createElement("h2");
      title.textContent = flowName || "Flow Data";
      title.style.cssText = "margin-bottom: 10px; font-size: 18px; color: #333;";
      tempContainer.appendChild(title);

      // 날짜
      const dateInfo = document.createElement("p");
      dateInfo.textContent = `내보내기 일시: ${new Date().toLocaleString("ko-KR")}`;
      dateInfo.style.cssText = "margin-bottom: 15px; font-size: 12px; color: #666;";
      tempContainer.appendChild(dateInfo);

      // 테이블 생성
      const table = document.createElement("table");
      table.style.cssText = `
        border-collapse: collapse;
        width: 100%;
        font-size: 11px;
      `;

      // 헤더
      const thead = document.createElement("thead");
      const headerRow = document.createElement("tr");
      stepDataColumns.forEach((col) => {
        const th = document.createElement("th");
        th.textContent = columnLabels[col] || col;
        th.style.cssText = `
          background: #4a90d9;
          color: white;
          padding: 8px 12px;
          text-align: left;
          border: 1px solid #3a7bc8;
          white-space: nowrap;
        `;
        headerRow.appendChild(th);
      });
      thead.appendChild(headerRow);
      table.appendChild(thead);

      // 바디
      const tbody = document.createElement("tbody");
      exportData.forEach((row, idx) => {
        const tr = document.createElement("tr");
        tr.style.cssText = idx % 2 === 0 ? "background: #fff;" : "background: #f9f9f9;";
        stepDataColumns.forEach((col) => {
          const td = document.createElement("td");
          td.textContent = String(row[col] ?? "");
          td.style.cssText = `
            padding: 6px 12px;
            border: 1px solid #ddd;
            white-space: nowrap;
          `;
          tr.appendChild(td);
        });
        tbody.appendChild(tr);
      });
      table.appendChild(tbody);
      tempContainer.appendChild(table);

      document.body.appendChild(tempContainer);

      // HTML을 캔버스로 변환
      const canvas = await html2canvas(tempContainer, {
        scale: 2,
        useCORS: true,
        logging: false,
        backgroundColor: "#ffffff",
      });

      document.body.removeChild(tempContainer);

      // 캔버스를 PDF로 변환
      const imgData = canvas.toDataURL("image/png");
      const imgWidth = canvas.width;
      const imgHeight = canvas.height;

      // A4 가로 방향 (297mm x 210mm)
      const pdfWidth = 297;
      const pdfHeight = 210;
      const ratio = Math.min(pdfWidth / (imgWidth / 3.78), pdfHeight / (imgHeight / 3.78));
      
      const doc = new jsPDF({
        orientation: imgWidth > imgHeight ? "landscape" : "portrait",
        unit: "mm",
        format: "a4",
      });

      const scaledWidth = (imgWidth / 3.78) * ratio * 0.9;
      const scaledHeight = (imgHeight / 3.78) * ratio * 0.9;

      // 이미지가 페이지보다 크면 여러 페이지로 분할
      const pageWidth = doc.internal.pageSize.getWidth();
      const pageHeight = doc.internal.pageSize.getHeight();
      
      if (scaledHeight <= pageHeight - 20) {
        // 한 페이지에 들어가는 경우
        doc.addImage(imgData, "PNG", 10, 10, scaledWidth, scaledHeight);
      } else {
        // 여러 페이지로 분할
        let remainingHeight = scaledHeight;
        let yOffset = 0;
        let pageNum = 0;

        while (remainingHeight > 0) {
          if (pageNum > 0) {
            doc.addPage();
          }
          
          const drawHeight = Math.min(pageHeight - 20, remainingHeight);
          doc.addImage(
            imgData, 
            "PNG", 
            10, 
            10 - yOffset, 
            scaledWidth, 
            scaledHeight
          );
          
          remainingHeight -= (pageHeight - 20);
          yOffset += (pageHeight - 20);
          pageNum++;
        }
      }

      const fileName = `${flowName || "flow"}_data_${new Date().toISOString().split("T")[0]}.pdf`;
      doc.save(fileName);

      toast.success(`${exportData.length}개 행이 PDF로 내보내기 되었습니다.`, { id: "pdf-export" });
    } catch (error) {
      console.error("PDF 내보내기 오류:", error);
      toast.error("PDF 내보내기에 실패했습니다.", { id: "pdf-export" });
    }
  }, [sortedDisplayData, selectedRows, stepDataColumns, columnLabels, flowName, getRowKey]);

  // 🆕 복사 기능 (Primary Key 기반)
  const handleCopy = useCallback(() => {
    try {
      const copyData = selectedRows.size > 0 
        ? sortedDisplayData.filter((row) => selectedRows.has(getRowKey(row)))
        : [];

      if (copyData.length === 0) {
        toast.warning("복사할 데이터를 선택해주세요.");
        return;
      }

      // 헤더 + 데이터를 탭 구분 텍스트로 변환
      const headers = stepDataColumns.map((col) => columnLabels[col] || col).join("\t");
      const rows = copyData.map((row) => 
        stepDataColumns.map((col) => String(row[col] ?? "")).join("\t")
      ).join("\n");

      const text = `${headers}\n${rows}`;
      navigator.clipboard.writeText(text);

      toast.success(`${copyData.length}개 행이 클립보드에 복사되었습니다.`);
    } catch (error) {
      console.error("복사 오류:", error);
      toast.error("복사에 실패했습니다.");
    }
  }, [sortedDisplayData, selectedRows, stepDataColumns, columnLabels, getRowKey]);

  // 🆕 통합 검색 실행
  const executeGlobalSearch = useCallback((term: string) => {
    if (!term.trim()) {
      setSearchHighlights(new Set());
      return;
    }

    const highlights = new Set<string>();
    const lowerTerm = term.toLowerCase();

    // 전체 데이터에서 검색하여 페이지 이동 및 하이라이트 정보 저장
    sortedDisplayData.forEach((row, rowIndex) => {
      stepDataColumns.forEach((col, colIndex) => {
        const value = String(row[col] ?? "").toLowerCase();
        if (value.includes(lowerTerm)) {
          // 체크박스 컬럼 offset 고려 (allowDataMove가 true면 +1)
          const adjustedColIndex = allowDataMove ? colIndex + 1 : colIndex;
          highlights.add(`${rowIndex}-${adjustedColIndex}`);
        }
      });
    });

    setSearchHighlights(highlights);
    setCurrentSearchIndex(0);

    if (highlights.size === 0) {
      toast.info("검색 결과가 없습니다.");
    } else {
      // 첫 번째 검색 결과가 있는 페이지로 이동
      const firstHighlight = Array.from(highlights)[0];
      const [rowIndexStr] = firstHighlight.split("-");
      const rowIndex = parseInt(rowIndexStr);
      const targetPage = Math.floor(rowIndex / stepDataPageSize) + 1;
      setStepDataPage(targetPage);
      
      toast.success(`${highlights.size}개 결과를 찾았습니다.`);
    }
  }, [sortedDisplayData, stepDataColumns, allowDataMove, stepDataPageSize]);

  // 🆕 검색 결과 이동
  const goToNextSearchResult = useCallback(() => {
    if (searchHighlights.size === 0) return;
    const newIndex = (currentSearchIndex + 1) % searchHighlights.size;
    setCurrentSearchIndex(newIndex);
    
    // 해당 검색 결과가 있는 페이지로 이동
    const highlightArray = Array.from(searchHighlights);
    const [rowIndexStr] = highlightArray[newIndex].split("-");
    const rowIndex = parseInt(rowIndexStr);
    const targetPage = Math.floor(rowIndex / stepDataPageSize) + 1;
    if (targetPage !== stepDataPage) {
      setStepDataPage(targetPage);
    }
  }, [searchHighlights, currentSearchIndex, stepDataPageSize, stepDataPage]);

  const goToPrevSearchResult = useCallback(() => {
    if (searchHighlights.size === 0) return;
    const newIndex = (currentSearchIndex - 1 + searchHighlights.size) % searchHighlights.size;
    setCurrentSearchIndex(newIndex);
    
    // 해당 검색 결과가 있는 페이지로 이동
    const highlightArray = Array.from(searchHighlights);
    const [rowIndexStr] = highlightArray[newIndex].split("-");
    const rowIndex = parseInt(rowIndexStr);
    const targetPage = Math.floor(rowIndex / stepDataPageSize) + 1;
    if (targetPage !== stepDataPage) {
      setStepDataPage(targetPage);
    }
  }, [searchHighlights, currentSearchIndex, stepDataPageSize, stepDataPage]);


  // 🆕 검색 초기화
  const clearGlobalSearch = useCallback(() => {
    setGlobalSearchTerm("");
    setSearchHighlights(new Set());
    setIsSearchPanelOpen(false);
    setCurrentSearchIndex(0);
  }, []);

  // 🆕 새로고침
  const handleRefresh = useCallback(async () => {
    if (!selectedStepId) return;
    
    setStepDataLoading(true);
    try {
      const response = await getStepDataList(selectedStepId);
      if (response.success && response.data) {
        setStepData(response.data.data || []);
        if (response.data.columns) {
          const currentStep = steps.find((s) => s.id === selectedStepId);
          const visibleCols = getVisibleColumns(selectedStepId, response.data.columns, steps);
          setStepDataColumns(visibleCols);
          setAllAvailableColumns(response.data.columns);
        }
      }
      toast.success("데이터를 새로고침했습니다.");
    } catch (error) {
      console.error("새로고침 오류:", error);
      toast.error("새로고침에 실패했습니다.");
    } finally {
      setStepDataLoading(false);
    }
  }, [selectedStepId, steps, getVisibleColumns]);

  // 🆕 셀 더블클릭 시 편집 모드 진입
  const handleCellDoubleClick = useCallback((rowIndex: number, colIndex: number, columnName: string, value: any) => {
    // 체크박스 컬럼은 편집 불가
    if (columnName === "__checkbox__") return;
    
    setEditingCell({ rowIndex, colIndex, columnName, originalValue: value });
    setEditingValue(value !== null && value !== undefined ? String(value) : "");
  }, []);

  // 🆕 편집 취소
  const cancelEditing = useCallback(() => {
    setEditingCell(null);
    setEditingValue("");
  }, []);

  // 🆕 편집 저장 (플로우 스텝 데이터 업데이트)
  const saveEditing = useCallback(async () => {
    if (!editingCell || !selectedStepId || !flowId) return;

    const { rowIndex, columnName, originalValue } = editingCell;
    const newValue = editingValue;

    // 값이 변경되지 않았으면 그냥 닫기
    if (String(originalValue ?? "") === newValue) {
      cancelEditing();
      return;
    }

    try {
      // 페이지네이션을 고려한 실제 인덱스 계산
      const actualIndex = (stepDataPage - 1) * stepDataPageSize + rowIndex;
      
      // 현재 행의 데이터 가져오기 (정렬된 전체 데이터에서)
      const currentRow = paginatedStepData[rowIndex];
      if (!currentRow) {
        toast.error("데이터를 찾을 수 없습니다.");
        cancelEditing();
        return;
      }

      // Primary Key 값 찾기 (일반적으로 id 또는 첫 번째 컬럼)
      // 플로우 정의에서 primaryKey를 가져오거나, 기본값으로 id 사용
      const primaryKeyColumn = flowData?.primaryKey || "id";
      const recordId = currentRow[primaryKeyColumn] || currentRow.id;
      
      if (!recordId) {
        toast.error("레코드 ID를 찾을 수 없습니다. Primary Key 설정을 확인해주세요.");
        cancelEditing();
        return;
      }

      // API 호출하여 데이터 업데이트
      const { updateFlowStepData } = await import("@/lib/api/flow");
      const response = await updateFlowStepData(flowId, selectedStepId, recordId, { [columnName]: newValue });

      if (response.success) {
        // 로컬 상태 업데이트
        setStepData((prev) => {
          const newData = [...prev];
          // 원본 데이터에서 해당 레코드 찾기
          const targetIndex = newData.findIndex((row) => {
            const rowRecordId = row[primaryKeyColumn] || row.id;
            return rowRecordId === recordId;
          });
          if (targetIndex !== -1) {
            newData[targetIndex] = { ...newData[targetIndex], [columnName]: newValue };
          }
          return newData;
        });
        toast.success("데이터가 저장되었습니다.");
      } else {
        toast.error(response.error || "저장에 실패했습니다.");
      }
    } catch (error) {
      console.error("편집 저장 오류:", error);
      toast.error("저장 중 오류가 발생했습니다.");
    }

    cancelEditing();
  }, [editingCell, editingValue, selectedStepId, flowId, flowData, paginatedStepData, stepDataPage, stepDataPageSize, cancelEditing]);

  // 🆕 편집 키보드 핸들러
  const handleEditKeyDown = useCallback((e: React.KeyboardEvent<HTMLInputElement>) => {
    switch (e.key) {
      case "Enter":
        e.preventDefault();
        saveEditing();
        break;
      case "Escape":
        e.preventDefault();
        cancelEditing();
        break;
      case "Tab":
        e.preventDefault();
        saveEditing();
        break;
    }
  }, [saveEditing, cancelEditing]);

  // 🆕 편집 입력 필드 자동 포커스
  useEffect(() => {
    if (editingCell && editInputRef.current) {
      editInputRef.current.focus();
      editInputRef.current.select();
    }
  }, [editingCell]);

  if (loading) {
    return (
      <div className="flex items-center justify-center p-8">
        <Loader2 className="text-muted-foreground h-6 w-6 animate-spin" />
        <span className="text-muted-foreground ml-2 text-sm">플로우 로딩 중...</span>
      </div>
    );
  }

  if (error) {
    return (
      <div className="border-destructive/50 bg-destructive/10 flex items-center gap-2 rounded-lg border p-4">
        <AlertCircle className="text-destructive h-5 w-5" />
        <span className="text-destructive text-sm">{error}</span>
      </div>
    );
  }

  if (!flowId || !flowData) {
    return (
      <div className="border-muted-foreground/25 flex items-center justify-center rounded-lg border-2 border-dashed p-8">
        <span className="text-muted-foreground text-sm">플로우를 선택해주세요</span>
      </div>
    );
  }

  if (steps.length === 0) {
    return (
      <div className="border-muted flex items-center justify-center rounded-lg border p-8">
        <span className="text-muted-foreground text-sm">플로우에 스텝이 없습니다</span>
      </div>
    );
  }

  // 반응형 컨테이너 클래스
  const containerClass =
    displayMode === "horizontal"
      ? "flex flex-col sm:flex-row sm:flex-wrap items-center justify-center gap-3 sm:gap-4"
      : "flex flex-col items-center gap-4";

  return (
    <div className="@container flex w-full flex-col p-2 sm:p-4 lg:p-6">
      {/* 플로우 스텝 목록 */}
      <div className={`${containerClass} flex-shrink-0`}>
        {steps.map((step, index) => (
          <React.Fragment key={step.id}>
            {/* 스텝 카드 */}
            <div
              className="group relative w-full cursor-pointer pb-4 transition-all duration-300 sm:w-auto sm:min-w-[200px] lg:min-w-[240px]"
              onClick={() => handleStepClick(step.id, step.stepName)}
            >
              {/* 콘텐츠 */}
              <div className="relative flex flex-col items-center justify-center gap-2 pb-5 sm:gap-2.5 sm:pb-6">
              {/* 스텝 이름 */}
                <h4
                  className={`text-base font-semibold leading-tight transition-colors duration-300 sm:text-lg lg:text-xl ${
                    selectedStepId === step.id ? "text-primary" : "text-foreground group-hover:text-primary/80"
                  }`}
                >
                {step.stepName}
              </h4>

              {/* 데이터 건수 */}
              {showStepCount && (
                  <div
                    className={`flex items-center gap-1.5 transition-all duration-300 ${
                      selectedStepId === step.id
                        ? "text-primary"
                        : "text-muted-foreground group-hover:text-primary"
                    }`}
                  >
                    <span className="text-sm font-medium sm:text-base">
                      {(stepCounts[step.id] || 0).toLocaleString("ko-KR")}
                    </span>
                    <span className="text-xs font-normal sm:text-sm">건</span>
                </div>
              )}
              </div>

              {/* 하단 선 */}
              <div
                className={`h-0.5 transition-all duration-300 ${
                  selectedStepId === step.id
                    ? "bg-primary"
                    : "bg-border group-hover:bg-primary/50"
                }`}
              />
            </div>

            {/* 화살표 (마지막 스텝 제외) */}
            {index < steps.length - 1 && (
              <div className="flex shrink-0 items-center justify-center py-2 sm:py-0">
                {displayMode === "horizontal" ? (
                  <div className="flex items-center gap-1">
                    <div className="h-0.5 w-6 bg-border sm:w-8" />
                  <svg
                      className="h-4 w-4 text-muted-foreground sm:h-5 sm:w-5"
                    fill="none"
                    viewBox="0 0 24 24"
                    stroke="currentColor"
                  >
                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 5l7 7-7 7" />
                  </svg>
                    <div className="h-0.5 w-6 bg-border sm:w-8" />
                  </div>
                ) : (
                  <div className="flex flex-col items-center gap-1">
                    <div className="h-6 w-0.5 bg-border sm:h-8" />
                    <svg
                      className="h-4 w-4 text-muted-foreground sm:h-5 sm:w-5"
                      fill="none"
                      viewBox="0 0 24 24"
                      stroke="currentColor"
                    >
                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 9l-7 7-7-7" />
                  </svg>
                    <div className="h-6 w-0.5 bg-border sm:h-8" />
                  </div>
                )}
              </div>
            )}
          </React.Fragment>
        ))}
      </div>

      {/* 선택된 스텝의 데이터 리스트 */}
      {selectedStepId !== null && (
        <div className="mt-4 flex w-full flex-col sm:mt-6 lg:mt-8 border rounded-lg overflow-hidden">
          {/* 🆕 DevExpress 스타일 기능 툴바 */}
          {stepDataColumns.length > 0 && (
            <>
              <div className="border-border bg-muted/20 flex flex-wrap items-center gap-1 border-b px-2 py-1.5 sm:gap-2 sm:px-4 sm:py-2">
                {/* 내보내기 버튼들 */}
                <div className="flex items-center gap-1 border-r border-border pr-2">
                  <Button
                    variant="ghost"
                    size="sm"
                    onClick={exportToExcel}
                    className="h-7 text-xs"
                    title="Excel 내보내기"
                  >
                    <FileSpreadsheet className="mr-1 h-3 w-3 text-green-600" />
                    Excel
                  </Button>
                  <Button
                    variant="ghost"
                    size="sm"
                    onClick={exportToPdf}
                    className="h-7 text-xs"
                    title="PDF 내보내기"
                  >
                    <FileText className="mr-1 h-3 w-3 text-red-600" />
                    PDF
                  </Button>
                </div>

                {/* 복사 버튼 */}
                <div className="flex items-center gap-1 border-r border-border pr-2">
                  <Button
                    variant="ghost"
                    size="sm"
                    onClick={handleCopy}
                    disabled={selectedRows.size === 0}
                    className="h-7 text-xs"
                    title="복사 (Ctrl+C)"
                  >
                    <Copy className="mr-1 h-3 w-3" />
                    복사
                  </Button>
                </div>

                {/* 선택 정보 */}
                {selectedRows.size > 0 && (
                  <div className="flex items-center gap-1 border-r border-border pr-2">
                    <span className="bg-primary/10 text-primary rounded px-2 py-0.5 text-xs">
                      {selectedRows.size}개 선택됨
                    </span>
                    <Button
                      variant="ghost"
                      size="sm"
                      onClick={() => setSelectedRows(new Set())}
                      className="h-6 w-6 p-0"
                      title="선택 해제"
                    >
                      <X className="h-3 w-3" />
                    </Button>
                  </div>
                )}

                {/* 🆕 통합 검색 패널 */}
                <div className="flex items-center gap-1 border-r border-border pr-2">
                  {isSearchPanelOpen ? (
                    <div className="flex items-center gap-1">
                      <input
                        type="text"
                        value={globalSearchTerm}
                        onChange={(e) => setGlobalSearchTerm(e.target.value)}
                        onKeyDown={(e) => {
                          if (e.key === "Enter") {
                            executeGlobalSearch(globalSearchTerm);
                          } else if (e.key === "Escape") {
                            clearGlobalSearch();
                          }
                        }}
                        placeholder="검색어 입력... (Enter)"
                        className="border-input bg-background h-7 w-32 rounded border px-2 text-xs focus:outline-none focus:ring-1 focus:ring-primary sm:w-48"
                        autoFocus
                      />
                      {searchHighlights.size > 0 && (
                        <span className="text-muted-foreground text-xs whitespace-nowrap">
                          {currentSearchIndex + 1}/{searchHighlights.size}
                        </span>
                      )}
                      <Button
                        variant="ghost"
                        size="sm"
                        onClick={goToPrevSearchResult}
                        disabled={searchHighlights.size === 0}
                        className="h-6 w-6 p-0"
                        title="이전"
                      >
                        <ChevronLeft className="h-3 w-3" />
                      </Button>
                      <Button
                        variant="ghost"
                        size="sm"
                        onClick={goToNextSearchResult}
                        disabled={searchHighlights.size === 0}
                        className="h-6 w-6 p-0"
                        title="다음"
                      >
                        <ChevronRight className="h-3 w-3" />
                      </Button>
                      <Button
                        variant="ghost"
                        size="sm"
                        onClick={clearGlobalSearch}
                        className="h-6 w-6 p-0"
                        title="닫기 (Esc)"
                      >
                        <X className="h-3 w-3" />
                      </Button>
                    </div>
                  ) : (
                    <Button
                      variant="ghost"
                      size="sm"
                      onClick={() => setIsSearchPanelOpen(true)}
                      className="h-7 text-xs"
                      title="통합 검색 (Ctrl+F)"
                    >
                      <Filter className="mr-1 h-3 w-3" />
                      검색
                        </Button>
                      )}
                </div>
                  
                  {/* 필터/그룹 설정 버튼 */}
                <div className="flex items-center gap-1 border-r border-border pr-2">
                    <Button
                    variant={searchFilterColumns.size > 0 ? "default" : "ghost"}
                      size="sm"
                      onClick={() => {
                      if (!isPreviewMode) {
                        setIsFilterSettingOpen(true);
                      }
                      }}
                      disabled={isPreviewMode}
                    className="h-7 text-xs"
                    title="검색 필터 설정"
                    >
                    <Filter className="mr-1 h-3 w-3" />
                    필터
                      {searchFilterColumns.size > 0 && (
                      <span className="ml-1 rounded-full bg-white/20 px-1.5 text-[10px]">
                          {searchFilterColumns.size}
                      </span>
                      )}
                    </Button>
                  <Button
                    variant={groupByColumns.length > 0 ? "default" : "ghost"}
                      size="sm"
                      onClick={() => {
                      if (!isPreviewMode) {
                        setIsGroupSettingOpen(true);
                      }
                      }}
                      disabled={isPreviewMode}
                    className="h-7 text-xs"
                    title="그룹 설정"
                    >
                    <Layers className="mr-1 h-3 w-3" />
                    그룹
                      {groupByColumns.length > 0 && (
                      <span className="ml-1 rounded-full bg-white/20 px-1.5 text-[10px]">
                          {groupByColumns.length}
                      </span>
                    )}
                  </Button>
                  </div>

                {/* 새로고침 */}
                <div className="ml-auto flex items-center gap-1">
                  <Button
                    variant="ghost"
                    size="sm"
                    onClick={handleRefresh}
                    disabled={stepDataLoading}
                    className="h-7 text-xs"
                    title="새로고침"
                  >
                    <RefreshCw className={`mr-1 h-3 w-3 ${stepDataLoading ? "animate-spin" : ""}`} />
                    새로고침
                  </Button>
                </div>
          </div>

              {/* 검색 필터 입력 영역 */}
              {searchFilterColumns.size > 0 && (
                <div className="bg-background flex-shrink-0 border-b px-4 py-2">
                  <div className="flex items-center gap-2 flex-wrap">
                    {Array.from(searchFilterColumns).map((col) => (
                      <Input
                        key={col}
                        value={searchValues[col] || ""}
                        onChange={(e) =>
                          setSearchValues((prev) => ({
                            ...prev,
                            [col]: e.target.value,
                          }))
                        }
                        placeholder={`${columnLabels[col] || col} 검색...`}
                        className="h-8 text-xs w-40"
                      />
                    ))}
                    {Object.keys(searchValues).length > 0 && (
                      <Button variant="ghost" size="sm" onClick={handleClearSearch} className="h-8 text-xs">
                        <X className="mr-1 h-3 w-3" />
                        초기화
                      </Button>
                    )}
                  </div>
                </div>
              )}

              {/* 🆕 그룹 표시 배지 */}
              {groupByColumns.length > 0 && (
              <div className="border-b border-border bg-muted/30 px-4 py-2">
                <div className="flex items-center gap-2 text-xs sm:text-sm">
                  <span className="text-muted-foreground">그룹:</span>
                  <div className="flex flex-wrap items-center gap-2">
                    {groupByColumns.map((col, idx) => (
                      <span key={col} className="flex items-center">
                        {idx > 0 && <span className="text-muted-foreground mx-1">→</span>}
                        <span className="bg-primary/10 text-primary rounded px-2 py-1 text-xs font-medium">
                          {columnLabels[col] || col}
                        </span>
                      </span>
                    ))}
                  </div>
                  <button
                    onClick={() => {
                      if (!isPreviewMode) {
                        clearGrouping();
                      }
                    }}
                    disabled={isPreviewMode}
                    className="hover:bg-destructive/10 text-destructive ml-auto rounded p-1"
                    title="그룹 해제"
                  >
                    <X className="h-4 w-4" />
                  </button>
                </div>
              </div>
            )}
            </>
          )}

          {/* 데이터 영역 - 고정 높이 + 스크롤 */}
          {stepDataLoading ? (
            <div className="flex h-64 items-center justify-center">
              <Loader2 className="text-primary h-6 w-6 animate-spin sm:h-8 sm:w-8" />
              <span className="text-muted-foreground ml-2 text-sm">데이터 로딩 중...</span>
            </div>
          ) : stepData.length === 0 ? (
            <div className="flex h-64 flex-col items-center justify-center">
              <svg
                className="text-muted-foreground/50 mb-3 h-12 w-12"
                fill="none"
                viewBox="0 0 24 24"
                stroke="currentColor"
              >
                <path
                  strokeLinecap="round"
                  strokeLinejoin="round"
                  strokeWidth={1.5}
                  d="M20 13V6a2 2 0 00-2-2H6a2 2 0 00-2 2v7m16 0v5a2 2 0 01-2 2H6a2 2 0 01-2-2v-5m16 0h-2.586a1 1 0 00-.707.293l-2.414 2.414a1 1 0 01-.707.293h-3.172a1 1 0 01-.707-.293l-2.414-2.414A1 1 0 006.586 13H4"
                />
              </svg>
              <span className="text-muted-foreground text-sm">데이터가 없습니다</span>
            </div>
          ) : (
            <>
              {/* 모바일: 카드 뷰 - 고정 높이 + 스크롤 */}
              <div className="overflow-y-auto @sm:hidden" style={{ height: "450px" }}>
                <div className="space-y-2 p-3">
                  {paginatedStepData.map((row, pageIndex) => {
                    const actualIndex = (stepDataPage - 1) * stepDataPageSize + pageIndex;
                    return (
                      <div
                        key={actualIndex}
                        className={`bg-card rounded-md border p-3 transition-colors ${
                          selectedRows.has(getRowKey(row)) ? "bg-primary/5 border-primary/30" : ""
                        }`}
                      >
                    {allowDataMove && (
                      <div className="mb-2 flex items-center justify-between border-b pb-2">
                        <span className="text-muted-foreground text-xs font-medium">선택</span>
                            <Checkbox
                              checked={selectedRows.has(getRowKey(row))}
                              onCheckedChange={() => toggleRowSelection(row)}
                            />
                      </div>
                    )}
                        <div className="space-y-1.5">
                      {stepDataColumns.map((col) => (
                            <div key={col} className="flex justify-between gap-2 text-xs">
                              <span className="text-muted-foreground font-medium">{columnLabels[col] || col}:</span>
                              <span className="text-foreground truncate">{formatValue(row[col])}</span>
                        </div>
                      ))}
                    </div>
                  </div>
                    );
                  })}
                </div>
              </div>

              {/* 데스크톱: 테이블 뷰 - SingleTableWithSticky 사용 */}
              <div className="relative hidden @sm:block">
                {groupByColumns.length > 0 && groupedData.length > 0 ? (
                  // 그룹화된 렌더링 (기존 방식 유지)
                  <div className="overflow-x-auto">
                <Table noWrapper>
                      <TableHeader className="sticky top-0 z-30 bg-background shadow-sm">
                    <TableRow className="hover:bg-muted/50">
                      {allowDataMove && (
                            <TableHead className="bg-background sticky left-0 z-40 w-12 border-b px-6 py-3 text-center">
                          <Checkbox
                            checked={selectedRows.size === stepData.length && stepData.length > 0}
                            onCheckedChange={toggleAllRows}
                          />
                        </TableHead>
                      )}
                      {stepDataColumns.map((col) => (
                        <TableHead
                          key={col}
                              className="bg-background border-b px-6 py-3 text-sm font-semibold whitespace-nowrap cursor-pointer hover:bg-muted/50"
                              onClick={() => handleSort(col)}
                            >
                              <div className="flex items-center gap-2">
                                <span>{columnLabels[col] || col}</span>
                                {sortColumn === col && (
                                  <span className="text-primary">
                                    {sortDirection === "asc" ? "↑" : "↓"}
                                  </span>
                                )}
                              </div>
                        </TableHead>
                      ))}
                    </TableRow>
                  </TableHeader>
                  <TableBody>
                        {groupedData.flatMap((group) => {
                        const isCollapsed = collapsedGroups.has(group.groupKey);
                        const groupRows = [
                          <TableRow key={`group-${group.groupKey}`}>
                            <TableCell
                              colSpan={stepDataColumns.length + (allowDataMove ? 1 : 0)}
                              className="bg-muted/50 border-b"
                            >
                              <div
                                className="flex items-center gap-3 p-2 cursor-pointer hover:bg-muted"
                                onClick={() => toggleGroupCollapse(group.groupKey)}
                              >
                                {isCollapsed ? (
                                  <ChevronRight className="h-4 w-4 flex-shrink-0" />
                                ) : (
                                  <ChevronDown className="h-4 w-4 flex-shrink-0" />
                                )}
                                <span className="font-medium text-sm flex-1">{group.groupKey}</span>
                                <span className="text-muted-foreground text-xs">({group.count}건)</span>
                              </div>
                            </TableCell>
                          </TableRow>,
                        ];

                        if (!isCollapsed) {
                          const dataRows = group.items.map((row, itemIndex) => {
                              const actualIndex = sortedDisplayData.indexOf(row);
                            return (
                      <TableRow
                                key={`${group.groupKey}-${itemIndex}`}
                                className={`h-16 transition-colors hover:bg-muted/50 ${selectedRows.has(getRowKey(row)) ? "bg-primary/5" : ""}`}
                      >
                        {allowDataMove && (
                                  <TableCell className="bg-background sticky left-0 z-10 border-b px-6 py-3 text-center">
                            <Checkbox
                                      checked={selectedRows.has(getRowKey(row))}
                                      onCheckedChange={() => toggleRowSelection(row)}
                            />
                          </TableCell>
                        )}
                        {stepDataColumns.map((col) => (
                                  <TableCell key={col} className="h-16 border-b px-6 py-3 text-sm whitespace-nowrap">
                                    {formatValue(row[col])}
                                  </TableCell>
                                ))}
                              </TableRow>
                            );
                          });
                          groupRows.push(...dataRows);
                        }

                        return groupRows;
                        })}
                      </TableBody>
                    </Table>
                  </div>
                    ) : (
                  // 일반 렌더링 - SingleTableWithSticky 사용
                  <SingleTableWithSticky
                    visibleColumns={tableColumns}
                    columns={tableColumns}
                    data={paginatedStepData}
                    columnLabels={columnLabels}
                    sortColumn={sortColumn}
                    sortDirection={sortDirection}
                    tableConfig={tableConfig}
                    isDesignMode={false}
                    isAllSelected={selectedRows.size === sortedDisplayData.length && sortedDisplayData.length > 0}
                    onSort={handleSort}
                    handleSelectAll={handleSelectAll}
                    handleRowClick={handleRowClick}
                    renderCheckboxCell={renderCheckboxCell}
                    formatCellValue={formatCellValue}
                    getColumnWidth={getColumnWidth}
                    loading={stepDataLoading}
                    // 인라인 편집 props
                    onCellDoubleClick={handleCellDoubleClick}
                    editingCell={editingCell}
                    editingValue={editingValue}
                    onEditingValueChange={setEditingValue}
                    onEditKeyDown={handleEditKeyDown}
                    editInputRef={editInputRef}
                    // 검색 하이라이트 props (현재 페이지 기준으로 변환된 값)
                    searchHighlights={pageSearchHighlights}
                    currentSearchIndex={pageCurrentSearchIndex}
                    searchTerm={globalSearchTerm}
                  />
                )}
              </div>
            </>
          )}

          {/* 페이지네이션 - 항상 하단에 고정 */}
          {!stepDataLoading && stepData.length > 0 && (
            <div className="bg-background flex-shrink-0 border-t px-4 py-3 sm:px-6">
              <div className="flex flex-col items-center justify-between gap-3 sm:flex-row">
                {/* 왼쪽: 페이지 정보 + 페이지 크기 선택 */}
                <div className="flex flex-col items-center gap-2 sm:flex-row sm:gap-4">
                  <div className="text-muted-foreground text-xs sm:text-sm">
                    페이지 {stepDataPage} / {totalStepDataPages} (총 {stepData.length.toLocaleString("ko-KR")}건)
        </div>
                  <div className="flex items-center gap-2">
                    <span className="text-muted-foreground text-xs">표시 개수:</span>
                    <Select
                      value={stepDataPageSize.toString()}
                      onValueChange={(value) => {
                        setStepDataPageSize(Number(value));
                        setStepDataPage(1); // 페이지 크기 변경 시 첫 페이지로
                      }}
                    >
                      <SelectTrigger className="h-6 w-full px-2 py-0 text-xs">
                        <SelectValue />
                      </SelectTrigger>
                      <SelectContent>
                        <SelectItem value="10">10개</SelectItem>
                        <SelectItem value="20">20개</SelectItem>
                        <SelectItem value="50">50개</SelectItem>
                        <SelectItem value="100">100개</SelectItem>
                      </SelectContent>
                    </Select>
                  </div>
                </div>

                {/* 오른쪽: 페이지네이션 */}
                {totalStepDataPages > 1 && (
                  <Pagination>
                    <PaginationContent>
                      <PaginationItem>
                        <PaginationPrevious
                          onClick={() => {
                            if (isPreviewMode) {
                              return;
                            }
                            setStepDataPage((p) => Math.max(1, p - 1));
                          }}
                          className={
                            stepDataPage === 1 || isPreviewMode ? "pointer-events-none opacity-50" : "cursor-pointer"
                          }
                        />
                      </PaginationItem>
                      {totalStepDataPages <= 7 ? (
                        Array.from({ length: totalStepDataPages }, (_, i) => i + 1).map((page) => (
                          <PaginationItem key={page}>
                            <PaginationLink
                              onClick={() => {
                                if (isPreviewMode) {
                                  return;
                                }
                                setStepDataPage(page);
                              }}
                              isActive={stepDataPage === page}
                              className={isPreviewMode ? "pointer-events-none opacity-50" : "cursor-pointer"}
                            >
                              {page}
                            </PaginationLink>
                          </PaginationItem>
                        ))
                      ) : (
                        <>
                          {Array.from({ length: totalStepDataPages }, (_, i) => i + 1)
                            .filter((page) => {
                              return (
                                page === 1 ||
                                page === totalStepDataPages ||
                                (page >= stepDataPage - 2 && page <= stepDataPage + 2)
                              );
                            })
                            .map((page, idx, arr) => (
                              <React.Fragment key={page}>
                                {idx > 0 && arr[idx - 1] !== page - 1 && (
                                  <PaginationItem>
                                    <span className="text-muted-foreground px-2">...</span>
                                  </PaginationItem>
                                )}
                                <PaginationItem>
                                  <PaginationLink
                                    onClick={() => {
                                      if (isPreviewMode) {
                                        return;
                                      }
                                      setStepDataPage(page);
                                    }}
                                    isActive={stepDataPage === page}
                                    className={isPreviewMode ? "pointer-events-none opacity-50" : "cursor-pointer"}
                                  >
                                    {page}
                                  </PaginationLink>
                                </PaginationItem>
                              </React.Fragment>
                            ))}
                        </>
                      )}
                      <PaginationItem>
                        <PaginationNext
                          onClick={() => {
                            if (isPreviewMode) {
                              return;
                            }
                            setStepDataPage((p) => Math.min(totalStepDataPages, p + 1));
                          }}
                          className={
                            stepDataPage === totalStepDataPages || isPreviewMode
                              ? "pointer-events-none opacity-50"
                              : "cursor-pointer"
                          }
                        />
                      </PaginationItem>
                    </PaginationContent>
                  </Pagination>
                )}
              </div>
            </div>
          )}
        </div>
      )}

      {/* 🆕 검색 필터 설정 다이얼로그 */}
      <Dialog open={isFilterSettingOpen} onOpenChange={setIsFilterSettingOpen}>
        <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">
              검색 필터로 사용할 컬럼을 선택하세요. 선택한 컬럼의 검색 입력 필드가 표시됩니다.
            </DialogDescription>
          </DialogHeader>

          <div className="space-y-3 sm:space-y-4">
            {/* 전체 선택/해제 */}
            <div className="bg-muted/50 flex items-center gap-3 rounded border p-3">
              <Checkbox
                id="select-all-filters"
                checked={searchFilterColumns.size === stepDataColumns.length && stepDataColumns.length > 0}
                onCheckedChange={toggleAllFilters}
              />
              <Label htmlFor="select-all-filters" className="flex-1 cursor-pointer text-xs font-semibold sm:text-sm">
                전체 선택/해제
              </Label>
              <span className="text-muted-foreground text-xs">
                {searchFilterColumns.size} / {stepDataColumns.length}개
              </span>
            </div>

            {/* 컬럼 목록 */}
            <div className="max-h-[50vh] space-y-2 overflow-y-auto rounded border p-2">
              {stepDataColumns.map((col) => (
                <div key={col} className="hover:bg-muted/50 flex items-center gap-3 rounded p-2">
                  <Checkbox
                    id={`filter-${col}`}
                    checked={searchFilterColumns.has(col)}
                    onCheckedChange={() => toggleFilterColumn(col)}
                  />
                  <Label htmlFor={`filter-${col}`} className="flex-1 cursor-pointer text-xs font-normal sm:text-sm">
                    {columnLabels[col] || col}
                  </Label>
                </div>
              ))}
            </div>

            {/* 선택된 컬럼 개수 안내 */}
            <div className="text-muted-foreground bg-muted/30 rounded p-3 text-center text-xs">
              {searchFilterColumns.size === 0 ? (
                <span>검색 필터를 사용하려면 최소 1개 이상의 컬럼을 선택하세요</span>
              ) : (
                <span>
                  총 <span className="text-primary font-semibold">{searchFilterColumns.size}개</span>의 검색 필터가
                  표시됩니다
                </span>
              )}
            </div>
          </div>

          <DialogFooter className="gap-2 sm:gap-0">
            <Button
              variant="outline"
              onClick={() => setIsFilterSettingOpen(false)}
              className="h-8 flex-1 text-xs sm:h-10 sm:flex-none sm:text-sm"
            >
              취소
            </Button>
            <Button onClick={saveFilterSettings} className="h-8 flex-1 text-xs sm:h-10 sm:flex-none sm:text-sm">
              저장
            </Button>
          </DialogFooter>
        </DialogContent>
      </Dialog>

      {/* 🆕 그룹 설정 다이얼로그 */}
      <Dialog open={isGroupSettingOpen} onOpenChange={setIsGroupSettingOpen}>
        <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">
              데이터를 그룹화할 컬럼을 선택하세요. 여러 컬럼을 선택하면 계층적으로 그룹화됩니다.
            </DialogDescription>
          </DialogHeader>

          <div className="space-y-3 sm:space-y-4">
            {/* 컬럼 목록 */}
            <div className="max-h-[50vh] space-y-2 overflow-y-auto rounded border p-2">
              {stepDataColumns.map((col) => (
                <div key={col} className="hover:bg-muted/50 flex items-center gap-3 rounded p-2">
                  <Checkbox
                    id={`group-${col}`}
                    checked={groupByColumns.includes(col)}
                    onCheckedChange={() => toggleGroupColumn(col)}
                  />
                  <Label htmlFor={`group-${col}`} className="flex-1 cursor-pointer text-xs font-normal sm:text-sm">
                    {columnLabels[col] || col}
                  </Label>
                </div>
              ))}
            </div>

            {/* 선택된 그룹 안내 */}
            <div className="text-muted-foreground bg-muted/30 rounded p-3 text-xs">
              {groupByColumns.length === 0 ? (
                <span>그룹화할 컬럼을 선택하세요</span>
              ) : (
                <span>
                  선택된 그룹:{" "}
                  <span className="text-primary font-semibold">
                    {groupByColumns.map((col) => columnLabels[col] || col).join(" → ")}
                  </span>
                </span>
              )}
            </div>
          </div>

          <DialogFooter className="gap-2 sm:gap-0">
            <Button
              variant="outline"
              onClick={() => setIsGroupSettingOpen(false)}
              className="h-8 flex-1 text-xs sm:h-10 sm:flex-none sm:text-sm"
            >
              취소
            </Button>
            <Button onClick={saveGroupSettings} className="h-8 flex-1 text-xs sm:h-10 sm:flex-none sm:text-sm">
              적용
            </Button>
          </DialogFooter>
        </DialogContent>
      </Dialog>
    </div>
  );
}