"use client";

import React, { useState, useEffect, useCallback, useMemo } from "react";
import { ComponentRendererProps } from "@/types/component";
import { SplitPanelLayout2Config, ColumnConfig, DataTransferField, ActionButtonConfig, JoinTableConfig, GroupingConfig, ColumnDisplayConfig, TabConfig } from "./types";
import { Badge } from "@/components/ui/badge";
import { defaultConfig } from "./config";
import { cn } from "@/lib/utils";
import {
  Search,
  Plus,
  ChevronRight,
  ChevronDown,
  Edit,
  Trash2,
  Users,
  Building2,
  Check,
  MoreHorizontal,
} from "lucide-react";
import { Checkbox } from "@/components/ui/checkbox";
import {
  AlertDialog,
  AlertDialogAction,
  AlertDialogCancel,
  AlertDialogContent,
  AlertDialogDescription,
  AlertDialogFooter,
  AlertDialogHeader,
  AlertDialogTitle,
} from "@/components/ui/alert-dialog";
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table";
import { Input } from "@/components/ui/input";
import { Button } from "@/components/ui/button";
import { Card, CardContent } from "@/components/ui/card";
import { toast } from "sonner";
import { useScreenContextOptional } from "@/contexts/ScreenContext";
import { apiClient } from "@/lib/api/client";

export interface SplitPanelLayout2ComponentProps extends ComponentRendererProps {
  // 추가 props
}

/**
 * SplitPanelLayout2 컴포넌트
 * 마스터-디테일 패턴의 좌우 분할 레이아웃 (개선 버전)
 */
export const SplitPanelLayout2Component: React.FC<SplitPanelLayout2ComponentProps> = ({
  component,
  isDesignMode = false,
  isSelected = false,
  isPreview = false,
  onClick,
  ...props
}) => {
  const config = useMemo(() => {
    return {
      ...defaultConfig,
      ...component.componentConfig,
    } as SplitPanelLayout2Config;
  }, [component.componentConfig]);

  // ScreenContext (데이터 전달용)
  const screenContext = useScreenContextOptional();

  // 상태 관리
  const [leftData, setLeftData] = useState<any[]>([]);
  const [rightData, setRightData] = useState<any[]>([]);
  const [selectedLeftItem, setSelectedLeftItem] = useState<any>(null);
  const [leftSearchTerm, setLeftSearchTerm] = useState("");
  const [rightSearchTerm, setRightSearchTerm] = useState("");
  const [leftLoading, setLeftLoading] = useState(false);
  const [rightLoading, setRightLoading] = useState(false);
  const [expandedItems, setExpandedItems] = useState<Set<string>>(new Set());
  const [splitPosition, setSplitPosition] = useState(config.splitRatio || 30);
  const [isResizing, setIsResizing] = useState(false);

  // 좌측 패널 컬럼 라벨 매핑
  const [leftColumnLabels, setLeftColumnLabels] = useState<Record<string, string>>({});
  const [rightColumnLabels, setRightColumnLabels] = useState<Record<string, string>>({});

  // 우측 패널 선택 상태 (체크박스용)
  const [selectedRightItems, setSelectedRightItems] = useState<Set<string | number>>(new Set());

  // 삭제 확인 다이얼로그 상태
  const [deleteDialogOpen, setDeleteDialogOpen] = useState(false);
  const [itemToDelete, setItemToDelete] = useState<any>(null);
  const [isBulkDelete, setIsBulkDelete] = useState(false);
  const [deleteTargetPanel, setDeleteTargetPanel] = useState<"left" | "right">("right");

  // 탭 상태 (좌측/우측 각각)
  const [leftActiveTab, setLeftActiveTab] = useState<string | null>(null);
  const [rightActiveTab, setRightActiveTab] = useState<string | null>(null);

  // 프론트엔드 그룹핑 함수
  const groupData = useCallback(
    (data: Record<string, any>[], groupingConfig: GroupingConfig, columns: ColumnConfig[]): Record<string, any>[] => {
      if (!groupingConfig.enabled || !groupingConfig.groupByColumn) {
        return data;
      }

      const groupByColumn = groupingConfig.groupByColumn;
      const groupMap = new Map<string, Record<string, any>>();

      // 데이터를 그룹별로 수집
      data.forEach((item) => {
        const groupKey = String(item[groupByColumn] ?? "");

        if (!groupMap.has(groupKey)) {
          // 첫 번째 항목을 기준으로 그룹 초기화
          const groupedItem: Record<string, any> = { ...item };

          // 각 컬럼의 displayConfig 확인하여 집계 준비
          columns.forEach((col) => {
            if (col.displayConfig?.aggregate?.enabled) {
              // 집계가 활성화된 컬럼은 배열로 초기화
              groupedItem[`__agg_${col.name}`] = [item[col.name]];
            }
          });

          groupMap.set(groupKey, groupedItem);
        } else {
          // 기존 그룹에 값 추가
          const existingGroup = groupMap.get(groupKey)!;

          columns.forEach((col) => {
            if (col.displayConfig?.aggregate?.enabled) {
              const aggKey = `__agg_${col.name}`;
              if (!existingGroup[aggKey]) {
                existingGroup[aggKey] = [];
              }
              existingGroup[aggKey].push(item[col.name]);
            }
          });
        }
      });

      // 집계 처리 및 결과 변환
      const result: Record<string, any>[] = [];

      groupMap.forEach((groupedItem) => {
        columns.forEach((col) => {
          if (col.displayConfig?.aggregate?.enabled) {
            const aggKey = `__agg_${col.name}`;
            const values = groupedItem[aggKey] || [];

            if (col.displayConfig.aggregate.function === "DISTINCT") {
              // 중복 제거 후 배열로 저장
              const uniqueValues = [...new Set(values.filter((v: any) => v !== null && v !== undefined))];
              groupedItem[col.name] = uniqueValues;
            } else if (col.displayConfig.aggregate.function === "COUNT") {
              // 개수를 숫자로 저장
              groupedItem[col.name] = values.filter((v: any) => v !== null && v !== undefined).length;
            }

            // 임시 집계 키 제거
            delete groupedItem[aggKey];
          }
        });

        result.push(groupedItem);
      });

      console.log(`[SplitPanelLayout2] 그룹핑 완료: ${data.length}건 → ${result.length}개 그룹`);
      return result;
    },
    [],
  );

  // 탭 목록 생성 함수 (데이터에서 고유값 추출)
  const generateTabs = useCallback(
    (data: Record<string, unknown>[], tabConfig: TabConfig | undefined): { id: string; label: string; count: number }[] => {
      if (!tabConfig?.enabled || !tabConfig.tabSourceColumn) {
        return [];
      }

      const sourceColumn = tabConfig.tabSourceColumn;

      // 데이터에서 고유값 추출 및 개수 카운트
      const valueCount = new Map<string, number>();
      data.forEach((item) => {
        const value = String(item[sourceColumn] ?? "");
        if (value) {
          valueCount.set(value, (valueCount.get(value) || 0) + 1);
        }
      });

      // 탭 목록 생성
      const tabs = Array.from(valueCount.entries()).map(([value, count]) => ({
        id: value,
        label: value,
        count: tabConfig.showCount ? count : 0,
      }));

      console.log(`[SplitPanelLayout2] 탭 생성: ${tabs.length}개 탭 (컬럼: ${sourceColumn})`);
      return tabs;
    },
    [],
  );

  // 탭으로 필터링된 데이터 반환
  const filterDataByTab = useCallback(
    (data: Record<string, unknown>[], activeTab: string | null, tabConfig: TabConfig | undefined): Record<string, unknown>[] => {
      if (!tabConfig?.enabled || !activeTab || !tabConfig.tabSourceColumn) {
        return data;
      }

      const sourceColumn = tabConfig.tabSourceColumn;
      return data.filter((item) => String(item[sourceColumn] ?? "") === activeTab);
    },
    [],
  );

  // 좌측 패널 탭 목록 (메모이제이션)
  const leftTabs = useMemo(() => {
    if (!config.leftPanel?.tabConfig?.enabled || !config.leftPanel?.tabConfig?.tabSourceColumn) {
      return [];
    }
    return generateTabs(leftData, config.leftPanel.tabConfig);
  }, [leftData, config.leftPanel?.tabConfig, generateTabs]);

  // 우측 패널 탭 목록 (메모이제이션)
  const rightTabs = useMemo(() => {
    if (!config.rightPanel?.tabConfig?.enabled || !config.rightPanel?.tabConfig?.tabSourceColumn) {
      return [];
    }
    return generateTabs(rightData, config.rightPanel.tabConfig);
  }, [rightData, config.rightPanel?.tabConfig, generateTabs]);

  // 탭 기본값 설정 (탭 목록이 변경되면 기본 탭 선택)
  useEffect(() => {
    if (leftTabs.length > 0 && !leftActiveTab) {
      const defaultTab = config.leftPanel?.tabConfig?.defaultTab;
      if (defaultTab && leftTabs.some((t) => t.id === defaultTab)) {
        setLeftActiveTab(defaultTab);
      } else {
        setLeftActiveTab(leftTabs[0].id);
      }
    }
  }, [leftTabs, leftActiveTab, config.leftPanel?.tabConfig?.defaultTab]);

  useEffect(() => {
    if (rightTabs.length > 0 && !rightActiveTab) {
      const defaultTab = config.rightPanel?.tabConfig?.defaultTab;
      if (defaultTab && rightTabs.some((t) => t.id === defaultTab)) {
        setRightActiveTab(defaultTab);
      } else {
        setRightActiveTab(rightTabs[0].id);
      }
    }
  }, [rightTabs, rightActiveTab, config.rightPanel?.tabConfig?.defaultTab]);

  // 탭 필터링된 데이터 (메모이제이션)
  const filteredLeftDataByTab = useMemo(() => {
    return filterDataByTab(leftData, leftActiveTab, config.leftPanel?.tabConfig);
  }, [leftData, leftActiveTab, config.leftPanel?.tabConfig, filterDataByTab]);

  const filteredRightDataByTab = useMemo(() => {
    return filterDataByTab(rightData, rightActiveTab, config.rightPanel?.tabConfig);
  }, [rightData, rightActiveTab, config.rightPanel?.tabConfig, filterDataByTab]);

  // 좌측 데이터 로드
  const loadLeftData = useCallback(async () => {
    if (!config.leftPanel?.tableName || isDesignMode) return;

    setLeftLoading(true);
    try {
      const response = await apiClient.post(`/table-management/tables/${config.leftPanel.tableName}/data`, {
        page: 1,
        size: 1000, // 전체 데이터 로드
        // 멀티테넌시: 자동으로 company_code 필터링 적용
        autoFilter: {
          enabled: true,
          filterColumn: "company_code",
          filterType: "company",
        },
      });
      if (response.data.success) {
        // API 응답 구조: { success: true, data: { data: [...], total, page, ... } }
        let data = response.data.data?.data || [];

        // 계층 구조 처리
        if (config.leftPanel.hierarchyConfig?.enabled) {
          data = buildHierarchy(
            data,
            config.leftPanel.hierarchyConfig.idColumn,
            config.leftPanel.hierarchyConfig.parentColumn,
          );
        }

        // 조인 테이블 처리 (좌측 패널) - 인라인 처리
        if (config.leftPanel.joinTables && config.leftPanel.joinTables.length > 0) {
          for (const joinTableConfig of config.leftPanel.joinTables) {
            if (!joinTableConfig.joinTable || !joinTableConfig.mainColumn || !joinTableConfig.joinColumn) {
              continue;
            }
            // 메인 데이터에서 조인할 키 값들 추출
            const joinKeys = [
              ...new Set(data.map((item: Record<string, unknown>) => item[joinTableConfig.mainColumn]).filter(Boolean)),
            ];
            if (joinKeys.length === 0) continue;

            try {
              const joinResponse = await apiClient.post(`/table-management/tables/${joinTableConfig.joinTable}/data`, {
                page: 1,
                size: 1000,
                dataFilter: {
                  enabled: true,
                  matchType: "any",
                  filters: joinKeys.map((key, idx) => ({
                    id: `join_key_${idx}`,
                    columnName: joinTableConfig.joinColumn,
                    operator: "equals",
                    value: String(key),
                    valueType: "static",
                  })),
                },
                autoFilter: {
                  enabled: true,
                  filterColumn: "company_code",
                  filterType: "company",
                },
              });

              if (joinResponse.data.success) {
                const joinDataArray = joinResponse.data.data?.data || [];
                const joinDataMap = new Map<string, Record<string, unknown>>();
                joinDataArray.forEach((item: Record<string, unknown>) => {
                  const key = item[joinTableConfig.joinColumn];
                  if (key) joinDataMap.set(String(key), item);
                });

                if (joinDataMap.size > 0) {
                  data = data.map((item: Record<string, unknown>) => {
                    const joinKey = item[joinTableConfig.mainColumn];
                    const joinData = joinDataMap.get(String(joinKey));
                    if (joinData) {
                      const mergedData = { ...item };
                      joinTableConfig.selectColumns.forEach((col) => {
                        // 테이블.컬럼명 형식으로 저장
                        mergedData[`${joinTableConfig.joinTable}.${col}`] = joinData[col];
                        // 컬럼명만으로도 저장 (기존 값이 없을 때)
                        if (!(col in mergedData)) {
                          mergedData[col] = joinData[col];
                        }
                      });
                      return mergedData;
                    }
                    return item;
                  });
                }
                console.log(`[SplitPanelLayout2] 좌측 조인 테이블 로드: ${joinTableConfig.joinTable}, ${joinDataArray.length}건`);
              }
            } catch (error) {
              console.error(`[SplitPanelLayout2] 좌측 조인 테이블 로드 실패 (${joinTableConfig.joinTable}):`, error);
            }
          }
        }

        // 그룹핑 처리
        if (config.leftPanel.grouping?.enabled && config.leftPanel.grouping.groupByColumn) {
          data = groupData(data, config.leftPanel.grouping, config.leftPanel.displayColumns || []);
        }

        setLeftData(data);
        console.log(`[SplitPanelLayout2] 좌측 데이터 로드: ${data.length}건 (company_code 필터 적용)`);
      }
    } catch (error) {
      console.error("[SplitPanelLayout2] 좌측 데이터 로드 실패:", error);
      toast.error("좌측 패널 데이터를 불러오는데 실패했습니다.");
    } finally {
      setLeftLoading(false);
    }
  }, [config.leftPanel?.tableName, config.leftPanel?.hierarchyConfig, config.leftPanel?.grouping, config.leftPanel?.displayColumns, config.leftPanel?.joinTables, isDesignMode, groupData]);

  // 조인 테이블 데이터 로드 (단일 테이블)
  const loadJoinTableData = useCallback(
    async (joinConfig: JoinTableConfig, mainData: any[]): Promise<Map<string, any>> => {
      const resultMap = new Map<string, any>();
      if (!joinConfig.joinTable || !joinConfig.mainColumn || !joinConfig.joinColumn || mainData.length === 0) {
        return resultMap;
      }

      // 메인 데이터에서 조인할 키 값들 추출
      const joinKeys = [...new Set(mainData.map((item) => item[joinConfig.mainColumn]).filter(Boolean))];
      if (joinKeys.length === 0) return resultMap;

      try {
        console.log(`[SplitPanelLayout2] 조인 테이블 로드: ${joinConfig.joinTable}, 키: ${joinKeys.length}개`);

        const response = await apiClient.post(`/table-management/tables/${joinConfig.joinTable}/data`, {
          page: 1,
          size: 1000,
          // 조인 키 값들로 필터링
          dataFilter: {
            enabled: true,
            matchType: "any", // OR 조건으로 여러 키 매칭
            filters: joinKeys.map((key, idx) => ({
              id: `join_key_${idx}`,
              columnName: joinConfig.joinColumn,
              operator: "equals",
              value: String(key),
              valueType: "static",
            })),
          },
          autoFilter: {
            enabled: true,
            filterColumn: "company_code",
            filterType: "company",
          },
        });

        if (response.data.success) {
          const joinData = response.data.data?.data || [];
          // 조인 컬럼 값을 키로 하는 Map 생성
          joinData.forEach((item: any) => {
            const key = item[joinConfig.joinColumn];
            if (key) {
              resultMap.set(String(key), item);
            }
          });
          console.log(`[SplitPanelLayout2] 조인 테이블 로드 완료: ${joinData.length}건`);
        }
      } catch (error) {
        console.error(`[SplitPanelLayout2] 조인 테이블 로드 실패 (${joinConfig.joinTable}):`, error);
      }

      return resultMap;
    },
    [],
  );

  // 메인 데이터에 조인 테이블 데이터 병합
  const mergeJoinData = useCallback(
    (mainData: any[], joinConfig: JoinTableConfig, joinDataMap: Map<string, any>): any[] => {
      return mainData.map((item) => {
        const joinKey = item[joinConfig.mainColumn];
        const joinRow = joinDataMap.get(String(joinKey));

        if (joinRow && joinConfig.selectColumns) {
          // 선택된 컬럼만 병합
          const mergedItem = { ...item };
          joinConfig.selectColumns.forEach((col) => {
            // 조인 테이블명.컬럼명 형식으로 저장 (sourceTable 참조용)
            const tableColumnKey = `${joinConfig.joinTable}.${col}`;
            mergedItem[tableColumnKey] = joinRow[col];

            // alias가 있으면 alias_컬럼명, 없으면 그냥 컬럼명으로도 저장 (하위 호환성)
            const targetKey = joinConfig.alias ? `${joinConfig.alias}_${col}` : col;
            // 메인 테이블에 같은 컬럼이 없으면 추가
            if (!(col in mergedItem)) {
              mergedItem[col] = joinRow[col];
            } else if (joinConfig.alias) {
              // 메인 테이블에 같은 컬럼이 있으면 alias로 추가
              mergedItem[targetKey] = joinRow[col];
            }
          });
          console.log(`[SplitPanelLayout2] 조인 데이터 병합:`, {
            mainKey: joinKey,
            mergedKeys: Object.keys(mergedItem),
          });
          return mergedItem;
        }

        return item;
      });
    },
    [],
  );

  // 우측 데이터 로드 (좌측 선택 항목 기반)
  const loadRightData = useCallback(
    async (selectedItem: any) => {
      if (!config.rightPanel?.tableName || !selectedItem) {
        setRightData([]);
        return;
      }

      // 복합키 또는 단일키 처리
      const joinKeys = config.joinConfig?.keys || [];
      const hasCompositeKeys = joinKeys.length > 0;
      const hasSingleKey = config.joinConfig?.leftColumn && config.joinConfig?.rightColumn;

      if (!hasCompositeKeys && !hasSingleKey) {
        console.log(`[SplitPanelLayout2] 조인 설정이 없음`);
        setRightData([]);
        return;
      }

      // 필터 배열 생성
      const filters: any[] = [];

      if (hasCompositeKeys) {
        // 복합키 처리
        for (let i = 0; i < joinKeys.length; i++) {
          const key = joinKeys[i];
          const joinValue = selectedItem[key.leftColumn];
          if (joinValue === undefined || joinValue === null) {
            console.log(`[SplitPanelLayout2] 복합키 조인 값이 없음: ${key.leftColumn}`);
            setRightData([]);
            return;
          }
          filters.push({
            id: `join_filter_${i}`,
            columnName: key.rightColumn,
            operator: "equals",
            value: String(joinValue),
            valueType: "static",
          });
        }
        console.log(
          `[SplitPanelLayout2] 복합키 조인: ${joinKeys.map((k) => `${k.leftColumn}→${k.rightColumn}`).join(", ")}`,
        );
      } else {
        // 단일키 처리 (하위 호환성)
        const joinValue = selectedItem[config.joinConfig!.leftColumn!];
        if (joinValue === undefined || joinValue === null) {
          console.log(`[SplitPanelLayout2] 조인 값이 없음: ${config.joinConfig!.leftColumn}`);
          setRightData([]);
          return;
        }
        filters.push({
          id: "join_filter",
          columnName: config.joinConfig!.rightColumn,
          operator: "equals",
          value: String(joinValue),
          valueType: "static",
        });
      }

      setRightLoading(true);
      try {
        console.log(
          `[SplitPanelLayout2] 우측 데이터 로드 시작: ${config.rightPanel.tableName}, 필터 ${filters.length}개`,
        );

        const response = await apiClient.post(`/table-management/tables/${config.rightPanel.tableName}/data`, {
          page: 1,
          size: 1000, // 전체 데이터 로드
          // dataFilter를 사용하여 정확한 값 매칭 (Entity 타입 검색 문제 회피)
          dataFilter: {
            enabled: true,
            matchType: "all",
            filters,
          },
          // 멀티테넌시: 자동으로 company_code 필터링 적용
          autoFilter: {
            enabled: true,
            filterColumn: "company_code",
            filterType: "company",
          },
        });

        if (response.data.success) {
          // API 응답 구조: { success: true, data: { data: [...], total, page, ... } }
          let data = response.data.data?.data || [];
          console.log(`[SplitPanelLayout2] 메인 데이터 로드 완료: ${data.length}건`);

          // 추가 조인 테이블 처리
          const joinTables = config.rightPanel?.joinTables || [];
          if (joinTables.length > 0 && data.length > 0) {
            console.log(`[SplitPanelLayout2] 조인 테이블 처리 시작: ${joinTables.length}개`);

            for (const joinTableConfig of joinTables) {
              const joinDataMap = await loadJoinTableData(joinTableConfig, data);
              if (joinDataMap.size > 0) {
                data = mergeJoinData(data, joinTableConfig, joinDataMap);
              }
            }

            console.log(`[SplitPanelLayout2] 조인 데이터 병합 완료`);
          }

          setRightData(data);
          console.log(`[SplitPanelLayout2] 우측 데이터 로드 완료: ${data.length}건`);
        } else {
          console.error("[SplitPanelLayout2] 우측 데이터 로드 실패:", response.data.message);
          setRightData([]);
        }
      } catch (error: any) {
        console.error("[SplitPanelLayout2] 우측 데이터 로드 에러:", {
          message: error?.message,
          status: error?.response?.status,
          statusText: error?.response?.statusText,
          data: error?.response?.data,
          config: {
            url: error?.config?.url,
            method: error?.config?.method,
            data: error?.config?.data,
          },
        });
        setRightData([]);
      } finally {
        setRightLoading(false);
      }
    },
    [config.rightPanel?.tableName, config.rightPanel?.joinTables, config.joinConfig, loadJoinTableData, mergeJoinData],
  );

  // 좌측 패널 추가 버튼 클릭
  const handleLeftAddClick = useCallback(() => {
    if (!config.leftPanel?.addModalScreenId) {
      toast.error("연결된 모달 화면이 없습니다.");
      return;
    }

    // EditModal 열기 이벤트 발생
    const event = new CustomEvent("openEditModal", {
      detail: {
        screenId: config.leftPanel.addModalScreenId,
        title: config.leftPanel?.addButtonLabel || "추가",
        modalSize: "lg",
        editData: {},
        isCreateMode: true, // 생성 모드
        onSave: () => {
          loadLeftData();
        },
      },
    });
    window.dispatchEvent(event);
    console.log("[SplitPanelLayout2] 좌측 추가 모달 열기:", config.leftPanel.addModalScreenId);
  }, [config.leftPanel?.addModalScreenId, config.leftPanel?.addButtonLabel, loadLeftData]);

  // 우측 패널 추가 버튼 클릭
  const handleRightAddClick = useCallback(() => {
    if (!config.rightPanel?.addModalScreenId) {
      toast.error("연결된 모달 화면이 없습니다.");
      return;
    }

    // 데이터 전달 필드 설정
    const initialData: Record<string, any> = {};
    if (selectedLeftItem && config.dataTransferFields) {
      for (const field of config.dataTransferFields) {
        if (field.sourceColumn && field.targetColumn) {
          initialData[field.targetColumn] = selectedLeftItem[field.sourceColumn];
        }
      }
    }

    // EditModal 열기 이벤트 발생
    const event = new CustomEvent("openEditModal", {
      detail: {
        screenId: config.rightPanel.addModalScreenId,
        title: config.rightPanel?.addButtonLabel || "추가",
        modalSize: "lg",
        editData: initialData,
        isCreateMode: true, // 생성 모드
        onSave: () => {
          if (selectedLeftItem) {
            loadRightData(selectedLeftItem);
          }
        },
      },
    });
    window.dispatchEvent(event);
  }, [
    config.rightPanel?.addModalScreenId,
    config.rightPanel?.addButtonLabel,
    config.dataTransferFields,
    selectedLeftItem,
    loadRightData,
  ]);

  // 기본키 컬럼명 가져오기 (우측 패널)
  const getPrimaryKeyColumn = useCallback(() => {
    return config.rightPanel?.primaryKeyColumn || "id";
  }, [config.rightPanel?.primaryKeyColumn]);

  // 기본키 컬럼명 가져오기 (좌측 패널)
  const getLeftPrimaryKeyColumn = useCallback(() => {
    return config.leftPanel?.primaryKeyColumn || config.leftPanel?.hierarchyConfig?.idColumn || "id";
  }, [config.leftPanel?.primaryKeyColumn, config.leftPanel?.hierarchyConfig?.idColumn]);

  // 우측 패널 수정 버튼 클릭
  const handleEditItem = useCallback(
    async (item: any) => {
      // 수정용 모달 화면 ID 결정 (editModalScreenId 우선, 없으면 addModalScreenId 사용)
      const modalScreenId = config.rightPanel?.editModalScreenId || config.rightPanel?.addModalScreenId;

      if (!modalScreenId) {
        toast.error("연결된 모달 화면이 없습니다.");
        return;
      }

      // 메인 테이블 데이터 조회 (우측 패널이 서브 테이블인 경우)
      let editData = { ...item };
      
      // 연결 설정이 있고, 메인 테이블이 설정되어 있으면 메인 테이블 데이터도 조회
      if (config.rightPanel?.mainTableForEdit) {
        const { tableName, linkColumn } = config.rightPanel.mainTableForEdit;
        const linkValue = item[linkColumn?.subColumn || ""];
        
        if (tableName && linkValue) {
          try {
            const response = await apiClient.get(`/table-management/tables/${tableName}/data`, {
              params: {
                filters: JSON.stringify({ [linkColumn?.mainColumn || linkColumn?.subColumn || ""]: linkValue }),
                page: 1,
                pageSize: 1,
              },
            });
            
            if (response.data?.success && response.data?.data?.items?.[0]) {
              // 메인 테이블 데이터를 editData에 병합 (서브 테이블 데이터 우선)
              editData = { ...response.data.data.items[0], ...item };
              console.log("[SplitPanelLayout2] 메인 테이블 데이터 병합:", editData);
            }
          } catch (error) {
            console.error("[SplitPanelLayout2] 메인 테이블 데이터 조회 실패:", error);
          }
        }
      }

      // EditModal 열기 이벤트 발생 (수정 모드)
      const event = new CustomEvent("openEditModal", {
        detail: {
          screenId: modalScreenId,
          title: "수정",
          modalSize: "lg",
          editData: editData, // 병합된 데이터 전달
          isCreateMode: false, // 수정 모드
          onSave: () => {
            if (selectedLeftItem) {
              loadRightData(selectedLeftItem);
            }
          },
        },
      });
      window.dispatchEvent(event);
      console.log("[SplitPanelLayout2] 우측 수정 모달 열기:", editData);
    },
    [config.rightPanel?.editModalScreenId, config.rightPanel?.addModalScreenId, config.rightPanel?.mainTableForEdit, selectedLeftItem, loadRightData],
  );

  // 좌측 패널 수정 버튼 클릭
  const handleLeftEditItem = useCallback(
    (item: any) => {
      // 수정용 모달 화면 ID 결정 (editModalScreenId 우선, 없으면 addModalScreenId 사용)
      const modalScreenId = config.leftPanel?.editModalScreenId || config.leftPanel?.addModalScreenId;

      if (!modalScreenId) {
        toast.error("연결된 모달 화면이 없습니다.");
        return;
      }

      // EditModal 열기 이벤트 발생 (수정 모드)
      const event = new CustomEvent("openEditModal", {
        detail: {
          screenId: modalScreenId,
          title: "수정",
          modalSize: "lg",
          editData: item, // 기존 데이터 전달
          isCreateMode: false, // 수정 모드
          onSave: () => {
            loadLeftData();
          },
        },
      });
      window.dispatchEvent(event);
      console.log("[SplitPanelLayout2] 좌측 수정 모달 열기:", item);
    },
    [config.leftPanel?.editModalScreenId, config.leftPanel?.addModalScreenId, loadLeftData],
  );

  // 우측 패널 삭제 버튼 클릭 (확인 다이얼로그 표시)
  const handleDeleteClick = useCallback((item: any) => {
    setItemToDelete(item);
    setIsBulkDelete(false);
    setDeleteTargetPanel("right");
    setDeleteDialogOpen(true);
  }, []);

  // 좌측 패널 삭제 버튼 클릭 (확인 다이얼로그 표시)
  const handleLeftDeleteClick = useCallback((item: any) => {
    setItemToDelete(item);
    setIsBulkDelete(false);
    setDeleteTargetPanel("left");
    setDeleteDialogOpen(true);
  }, []);

  // 일괄 삭제 버튼 클릭 (확인 다이얼로그 표시)
  const handleBulkDeleteClick = useCallback(() => {
    if (selectedRightItems.size === 0) {
      toast.error("삭제할 항목을 선택해주세요.");
      return;
    }
    setIsBulkDelete(true);
    setDeleteTargetPanel("right");
    setDeleteDialogOpen(true);
  }, [selectedRightItems.size]);

  // 실제 삭제 실행
  const executeDelete = useCallback(async () => {
    // 대상 패널에 따라 테이블명과 기본키 컬럼 결정
    const tableName = deleteTargetPanel === "left" 
      ? config.leftPanel?.tableName 
      : config.rightPanel?.tableName;
    const pkColumn = deleteTargetPanel === "left" 
      ? getLeftPrimaryKeyColumn() 
      : getPrimaryKeyColumn();

    if (!tableName) {
      toast.error("테이블 설정이 없습니다.");
      return;
    }

    try {
      if (isBulkDelete) {
        // 일괄 삭제 - 선택된 항목들의 데이터를 body로 전달
        const itemsToDelete = rightData.filter((item) => selectedRightItems.has(item[pkColumn] as string | number));
        console.log("[SplitPanelLayout2] 일괄 삭제:", itemsToDelete);

        // 백엔드 API는 body로 삭제할 데이터를 받음
        await apiClient.delete(`/table-management/tables/${tableName}/delete`, {
          data: itemsToDelete,
        });

        toast.success(`${itemsToDelete.length}개 항목이 삭제되었습니다.`);
        setSelectedRightItems(new Set<string | number>());
      } else if (itemToDelete) {
        // 단일 삭제 - 해당 항목 데이터를 배열로 감싸서 body로 전달 (백엔드가 배열을 기대함)
        console.log(`[SplitPanelLayout2] ${deleteTargetPanel === "left" ? "좌측" : "우측"} 단일 삭제:`, itemToDelete);

        await apiClient.delete(`/table-management/tables/${tableName}/delete`, {
          data: [itemToDelete],
        });
        toast.success("항목이 삭제되었습니다.");
      }

      // 데이터 새로고침
      if (deleteTargetPanel === "left") {
        loadLeftData();
        setSelectedLeftItem(null); // 좌측 선택 초기화
        setRightData([]); // 우측 데이터도 초기화
      } else if (selectedLeftItem) {
        loadRightData(selectedLeftItem);
      }
    } catch (error: any) {
      console.error("[SplitPanelLayout2] 삭제 실패:", error);
      toast.error(`삭제 실패: ${error.message}`);
    } finally {
      setDeleteDialogOpen(false);
      setItemToDelete(null);
      setIsBulkDelete(false);
    }
  }, [
    deleteTargetPanel,
    config.leftPanel?.tableName,
    config.rightPanel?.tableName,
    getLeftPrimaryKeyColumn,
    getPrimaryKeyColumn,
    isBulkDelete,
    selectedRightItems,
    itemToDelete,
    selectedLeftItem,
    loadLeftData,
    loadRightData,
    rightData,
  ]);

  // 개별 체크박스 선택/해제
  const handleSelectItem = useCallback((itemId: string | number, checked: boolean) => {
    setSelectedRightItems((prev) => {
      const newSet = new Set(prev);
      if (checked) {
        newSet.add(itemId);
      } else {
        newSet.delete(itemId);
      }
      return newSet;
    });
  }, []);

  // 액션 버튼 클릭 핸들러
  const handleActionButton = useCallback(
    (btn: ActionButtonConfig) => {
      switch (btn.action) {
        case "add":
          if (btn.modalScreenId) {
            // 데이터 전달 필드 설정
            const initialData: Record<string, any> = {};
            if (selectedLeftItem && config.dataTransferFields) {
              for (const field of config.dataTransferFields) {
                if (field.sourceColumn && field.targetColumn) {
                  initialData[field.targetColumn] = selectedLeftItem[field.sourceColumn];
                }
              }
            }

            const event = new CustomEvent("openEditModal", {
              detail: {
                screenId: btn.modalScreenId,
                title: btn.label || "추가",
                modalSize: "lg",
                editData: initialData,
                isCreateMode: true,
                onSave: () => {
                  if (selectedLeftItem) {
                    loadRightData(selectedLeftItem);
                  }
                },
              },
            });
            window.dispatchEvent(event);
          }
          break;

        case "edit":
          // 선택된 항목이 1개일 때만 수정
          if (selectedRightItems.size === 1) {
            const pkColumn = getPrimaryKeyColumn();
            const selectedId = Array.from(selectedRightItems)[0];
            const item = rightData.find((d) => d[pkColumn] === selectedId);
            if (item) {
              // 액션 버튼에 모달 화면이 설정되어 있으면 해당 화면 사용
              const modalScreenId = btn.modalScreenId || config.rightPanel?.editModalScreenId || config.rightPanel?.addModalScreenId;
              
              if (!modalScreenId) {
                toast.error("연결된 모달 화면이 없습니다.");
                return;
              }

              const event = new CustomEvent("openEditModal", {
                detail: {
                  screenId: modalScreenId,
                  title: btn.label || "수정",
                  modalSize: "lg",
                  editData: item,
                  isCreateMode: false,
                  onSave: () => {
                    if (selectedLeftItem) {
                      loadRightData(selectedLeftItem);
                    }
                  },
                },
              });
              window.dispatchEvent(event);
            }
          } else if (selectedRightItems.size > 1) {
            toast.error("수정할 항목을 1개만 선택해주세요.");
          } else {
            toast.error("수정할 항목을 선택해주세요.");
          }
          break;

        case "delete":
        case "bulk-delete":
          handleBulkDeleteClick();
          break;

        case "custom":
          // 커스텀 액션 (추후 확장)
          console.log("[SplitPanelLayout2] 커스텀 액션:", btn);
          break;

        default:
          break;
      }
    },
    [
      selectedLeftItem,
      config.dataTransferFields,
      loadRightData,
      selectedRightItems,
      getPrimaryKeyColumn,
      rightData,
      handleEditItem,
      handleBulkDeleteClick,
    ],
  );

  // 좌측 패널 액션 버튼 클릭 핸들러
  const handleLeftActionButton = useCallback(
    (btn: ActionButtonConfig) => {
      switch (btn.action) {
        case "add":
          // 액션 버튼에 설정된 modalScreenId 우선 사용
          const modalScreenId = btn.modalScreenId || config.leftPanel?.addModalScreenId;
          
          if (!modalScreenId) {
            toast.error("연결된 모달 화면이 없습니다.");
            return;
          }

          // EditModal 열기 이벤트 발생
          const event = new CustomEvent("openEditModal", {
            detail: {
              screenId: modalScreenId,
              title: btn.label || "추가",
              modalSize: "lg",
              editData: {},
              isCreateMode: true,
              onSave: () => {
                loadLeftData();
              },
            },
          });
          window.dispatchEvent(event);
          console.log("[SplitPanelLayout2] 좌측 액션 버튼 모달 열기:", modalScreenId);
          break;

        case "edit":
          // 좌측 패널에서 수정 (필요시 구현)
          console.log("[SplitPanelLayout2] 좌측 수정 액션:", btn);
          break;

        case "delete":
          // 좌측 패널에서 삭제 (필요시 구현)
          console.log("[SplitPanelLayout2] 좌측 삭제 액션:", btn);
          break;

        case "custom":
          console.log("[SplitPanelLayout2] 좌측 커스텀 액션:", btn);
          break;

        default:
          break;
      }
    },
    [config.leftPanel?.addModalScreenId, loadLeftData],
  );

  // 컬럼 라벨 로드
  const loadColumnLabels = useCallback(
    async (tableName: string, setLabels: (labels: Record<string, string>) => void) => {
      if (!tableName) return;

      try {
        const response = await apiClient.get(`/table-management/tables/${tableName}/columns`);
        if (response.data.success) {
          const labels: Record<string, string> = {};
          // API 응답 구조: { success: true, data: { columns: [...] } }
          const columns = response.data.data?.columns || [];
          columns.forEach((col: any) => {
            const colName = col.column_name || col.columnName;
            const colLabel = col.column_label || col.columnLabel || colName;
            if (colName) {
              labels[colName] = colLabel;
            }
          });
          setLabels(labels);
        }
      } catch (error) {
        console.error("[SplitPanelLayout2] 컬럼 라벨 로드 실패:", error);
      }
    },
    [],
  );

  // 계층 구조 빌드
  const buildHierarchy = (data: any[], idColumn: string, parentColumn: string): any[] => {
    const itemMap = new Map<string, any>();
    const roots: any[] = [];

    // 모든 항목을 맵에 저장
    data.forEach((item) => {
      itemMap.set(item[idColumn], { ...item, children: [] });
    });

    // 부모-자식 관계 설정
    data.forEach((item) => {
      const current = itemMap.get(item[idColumn]);
      const parentId = item[parentColumn];

      if (parentId && itemMap.has(parentId)) {
        itemMap.get(parentId).children.push(current);
      } else {
        roots.push(current);
      }
    });

    return roots;
  };

  // 좌측 항목 선택 핸들러
  const handleLeftItemSelect = useCallback(
    (item: any) => {
      setSelectedLeftItem(item);
      loadRightData(item);

      // ScreenContext DataProvider 등록 (버튼에서 접근 가능하도록)
      if (screenContext && !isDesignMode) {
        screenContext.registerDataProvider(component.id, {
          componentId: component.id,
          componentType: "split-panel-layout2",
          getSelectedData: () => [item],
          getAllData: () => leftData,
          clearSelection: () => setSelectedLeftItem(null),
        });
        console.log(`[SplitPanelLayout2] DataProvider 등록: ${component.id}`);
      }
    },
    [isDesignMode, screenContext, component.id, leftData, loadRightData],
  );

  // 항목 확장/축소 토글
  const toggleExpand = useCallback((itemId: string) => {
    setExpandedItems((prev) => {
      const newSet = new Set(prev);
      if (newSet.has(itemId)) {
        newSet.delete(itemId);
      } else {
        newSet.add(itemId);
      }
      return newSet;
    });
  }, []);

  // 검색 필터링 (탭 필터링 후 적용)
  const filteredLeftData = useMemo(() => {
    // 1. 먼저 탭 필터링 적용
    const data = filteredLeftDataByTab;

    // 2. 검색어가 없으면 탭 필터링된 데이터 반환
    if (!leftSearchTerm) return data;

    // 복수 검색 컬럼 지원 (searchColumns 우선, 없으면 searchColumn 사용)
    const searchColumns = config.leftPanel?.searchColumns?.map((c) => c.columnName).filter(Boolean) || [];
    const legacyColumn = config.leftPanel?.searchColumn;
    const columnsToSearch = searchColumns.length > 0 ? searchColumns : legacyColumn ? [legacyColumn] : [];

    if (columnsToSearch.length === 0) return data;

    const filterRecursive = (items: any[]): any[] => {
      return items.filter((item) => {
        // 여러 컬럼 중 하나라도 매칭되면 포함
        const matches = columnsToSearch.some((col) => {
          const value = String(item[col] || "").toLowerCase();
          return value.includes(leftSearchTerm.toLowerCase());
        });

        if (item.children?.length > 0) {
          const filteredChildren = filterRecursive(item.children);
          if (filteredChildren.length > 0) {
            item.children = filteredChildren;
            return true;
          }
        }

        return matches;
      });
    };

    return filterRecursive([...data]);
  }, [filteredLeftDataByTab, leftSearchTerm, config.leftPanel?.searchColumns, config.leftPanel?.searchColumn]);

  const filteredRightData = useMemo(() => {
    // 1. 먼저 탭 필터링 적용
    const data = filteredRightDataByTab;

    // 2. 검색어가 없으면 탭 필터링된 데이터 반환
    if (!rightSearchTerm) return data;

    // 복수 검색 컬럼 지원 (searchColumns 우선, 없으면 searchColumn 사용)
    const searchColumns = config.rightPanel?.searchColumns?.map((c) => c.columnName).filter(Boolean) || [];
    const legacyColumn = config.rightPanel?.searchColumn;
    const columnsToSearch = searchColumns.length > 0 ? searchColumns : legacyColumn ? [legacyColumn] : [];

    if (columnsToSearch.length === 0) return data;

    return data.filter((item) => {
      // 여러 컬럼 중 하나라도 매칭되면 포함
      return columnsToSearch.some((col) => {
        const value = String(item[col] || "").toLowerCase();
        return value.includes(rightSearchTerm.toLowerCase());
      });
    });
  }, [filteredRightDataByTab, rightSearchTerm, config.rightPanel?.searchColumns, config.rightPanel?.searchColumn]);

  // 체크박스 전체 선택/해제 (filteredRightData 정의 이후에 위치해야 함)
  const handleSelectAll = useCallback(
    (checked: boolean) => {
      if (checked) {
        const pkColumn = getPrimaryKeyColumn();
        const allIds = new Set<string | number>(filteredRightData.map((item) => item[pkColumn] as string | number));
        setSelectedRightItems(allIds);
      } else {
        setSelectedRightItems(new Set<string | number>());
      }
    },
    [filteredRightData, getPrimaryKeyColumn],
  );

  // 리사이즈 핸들러
  const handleResizeStart = useCallback(
    (e: React.MouseEvent) => {
      if (!config.resizable) return;
      e.preventDefault();
      setIsResizing(true);
    },
    [config.resizable],
  );

  const handleResizeMove = useCallback(
    (e: MouseEvent) => {
      if (!isResizing) return;

      const container = document.getElementById(`split-panel-${component.id}`);
      if (!container) return;

      const rect = container.getBoundingClientRect();
      const newPosition = ((e.clientX - rect.left) / rect.width) * 100;
      const minLeft = ((config.minLeftWidth || 200) / rect.width) * 100;
      const minRight = ((config.minRightWidth || 300) / rect.width) * 100;

      setSplitPosition(Math.max(minLeft, Math.min(100 - minRight, newPosition)));
    },
    [isResizing, component.id, config.minLeftWidth, config.minRightWidth],
  );

  const handleResizeEnd = useCallback(() => {
    setIsResizing(false);
  }, []);

  // 리사이즈 이벤트 리스너
  useEffect(() => {
    if (isResizing) {
      window.addEventListener("mousemove", handleResizeMove);
      window.addEventListener("mouseup", handleResizeEnd);
    }
    return () => {
      window.removeEventListener("mousemove", handleResizeMove);
      window.removeEventListener("mouseup", handleResizeEnd);
    };
  }, [isResizing, handleResizeMove, handleResizeEnd]);

  // 초기 데이터 로드
  useEffect(() => {
    if (config.autoLoad && !isDesignMode) {
      loadLeftData();
      loadColumnLabels(config.leftPanel?.tableName || "", setLeftColumnLabels);
      loadColumnLabels(config.rightPanel?.tableName || "", setRightColumnLabels);
    }
  }, [
    config.autoLoad,
    isDesignMode,
    loadLeftData,
    loadColumnLabels,
    config.leftPanel?.tableName,
    config.rightPanel?.tableName,
  ]);

  // 컴포넌트 언마운트 시 DataProvider 해제
  useEffect(() => {
    return () => {
      if (screenContext) {
        screenContext.unregisterDataProvider(component.id);
      }
    };
  }, [screenContext, component.id]);

  // 컬럼 값 가져오기 (sourceTable 및 엔티티 참조 고려)
  const getColumnValue = useCallback(
    (item: any, col: ColumnConfig): any => {
      // col.name이 "테이블명.컬럼명" 형식인 경우 처리
      const actualColName = col.name.includes(".") ? col.name.split(".")[1] : col.name;
      const tableFromName = col.name.includes(".") ? col.name.split(".")[0] : null;
      const effectiveSourceTable = col.sourceTable || tableFromName;

      // 기본 값 가져오기
      let baseValue: any;

      // sourceTable이 설정되어 있고, 메인 테이블이 아닌 경우
      if (effectiveSourceTable && effectiveSourceTable !== config.rightPanel?.tableName) {
        // 1. 테이블명.컬럼명 형식으로 먼저 시도 (mergeJoinData에서 저장한 형식)
        const tableColumnKey = `${effectiveSourceTable}.${actualColName}`;
        if (item[tableColumnKey] !== undefined) {
          baseValue = item[tableColumnKey];
        } else {
          // 2. 조인 테이블의 alias가 설정된 경우 alias_컬럼명으로 시도
          const joinTable = config.rightPanel?.joinTables?.find((jt) => jt.joinTable === effectiveSourceTable);
          if (joinTable?.alias) {
            const aliasKey = `${joinTable.alias}_${actualColName}`;
            if (item[aliasKey] !== undefined) {
              baseValue = item[aliasKey];
            }
          }
          // 3. 그냥 컬럼명으로 시도 (메인 테이블에 없는 경우 조인 데이터가 직접 들어감)
          if (baseValue === undefined && item[actualColName] !== undefined) {
            baseValue = item[actualColName];
          }
        }
      } else {
        // 4. 기본: 컬럼명으로 직접 접근
        baseValue = item[actualColName];
      }

      // 엔티티 참조 설정이 있는 경우 - 선택된 컬럼들의 값을 결합
      if (col.entityReference?.displayColumns && col.entityReference.displayColumns.length > 0) {
        // 엔티티 참조 컬럼들의 값을 수집
        // 백엔드에서 entity 조인을 통해 "컬럼명_참조테이블컬럼" 형태로 데이터가 들어옴
        const entityValues: string[] = [];
        
        for (const displayCol of col.entityReference.displayColumns) {
          // 다양한 형식으로 값을 찾아봄
          // 1. 직접 컬럼명 (entity 조인 결과)
          if (item[displayCol] !== undefined && item[displayCol] !== null) {
            entityValues.push(String(item[displayCol]));
          }
          // 2. 컬럼명_참조컬럼 형식
          else if (item[`${actualColName}_${displayCol}`] !== undefined) {
            entityValues.push(String(item[`${actualColName}_${displayCol}`]));
          }
          // 3. 참조테이블.컬럼 형식
          else if (col.entityReference.entityId) {
            const refTableCol = `${col.entityReference.entityId}.${displayCol}`;
            if (item[refTableCol] !== undefined && item[refTableCol] !== null) {
              entityValues.push(String(item[refTableCol]));
            }
          }
        }

        // 엔티티 값들이 있으면 결합하여 반환
        if (entityValues.length > 0) {
          return entityValues.join(" - ");
        }
      }

      return baseValue;
    },
    [config.rightPanel?.tableName, config.rightPanel?.joinTables],
  );

  // 값 포맷팅
  const formatValue = (value: any, format?: ColumnConfig["format"]): string => {
    if (value === null || value === undefined) return "-";
    if (!format) return String(value);

    switch (format.type) {
      case "number":
        const num = Number(value);
        if (isNaN(num)) return String(value);
        let formatted = format.decimalPlaces !== undefined ? num.toFixed(format.decimalPlaces) : String(num);
        if (format.thousandSeparator) {
          formatted = formatted.replace(/\B(?=(\d{3})+(?!\d))/g, ",");
        }
        return `${format.prefix || ""}${formatted}${format.suffix || ""}`;

      case "currency":
        const currency = Number(value);
        if (isNaN(currency)) return String(value);
        const currencyFormatted = currency.toLocaleString("ko-KR");
        return `${format.prefix || ""}${currencyFormatted}${format.suffix || "원"}`;

      case "date":
        try {
          const date = new Date(value);
          return date.toLocaleDateString("ko-KR");
        } catch {
          return String(value);
        }

      default:
        return String(value);
    }
  };

  // 좌측 패널 항목 렌더링
  const renderLeftItem = (item: any, level: number = 0, index: number = 0) => {
    // ID 컬럼 결정: 설정값 > 데이터에 존재하는 일반적인 ID 컬럼 > 폴백
    const configIdColumn = config.leftPanel?.hierarchyConfig?.idColumn;
    const idColumn = configIdColumn || 
      (item["id"] !== undefined ? "id" : 
       item["dept_code"] !== undefined ? "dept_code" :
       item["code"] !== undefined ? "code" : "id");
    const itemId = item[idColumn] ?? `item-${level}-${index}`;
    const hasChildren = item.children?.length > 0;
    const isExpanded = expandedItems.has(String(itemId));
    // 선택 상태 확인: 동일한 객체이거나 idColumn 값이 일치해야 함
    const isSelected = selectedLeftItem && (
      selectedLeftItem === item ||
      (item[idColumn] !== undefined && 
       selectedLeftItem[idColumn] !== undefined &&
       selectedLeftItem[idColumn] === item[idColumn])
    );

    // displayRow 설정에 따라 컬럼 분류
    const displayColumns = config.leftPanel?.displayColumns || [];
    const nameRowColumns = displayColumns.filter(
      (col, idx) => col.displayRow === "name" || (!col.displayRow && idx === 0),
    );
    const infoRowColumns = displayColumns.filter(
      (col, idx) => col.displayRow === "info" || (!col.displayRow && idx > 0),
    );

    // 이름 행의 첫 번째 값 (주요 표시 값)
    const primaryValue = nameRowColumns[0]
      ? item[nameRowColumns[0].name]
      : Object.values(item).find((v) => typeof v === "string" && v.length > 0);

    return (
      <div key={itemId}>
        <div
          className={cn(
            "flex cursor-pointer items-center gap-3 rounded-md px-4 py-3 transition-colors",
            "hover:bg-accent",
            isSelected && "bg-primary/10 border-primary border-l-2",
          )}
          style={{ paddingLeft: `${level * 16 + 16}px` }}
          onClick={() => handleLeftItemSelect(item)}
        >
          {/* 확장/축소 버튼 */}
          {hasChildren ? (
            <button
              className="hover:bg-accent rounded p-0.5"
              onClick={(e) => {
                e.stopPropagation();
                toggleExpand(String(itemId));
              }}
            >
              {isExpanded ? (
                <ChevronDown className="text-muted-foreground h-4 w-4" />
              ) : (
                <ChevronRight className="text-muted-foreground h-4 w-4" />
              )}
            </button>
          ) : (
            <div className="w-5" />
          )}

          {/* 아이콘 */}
          <Building2 className="text-muted-foreground h-5 w-5" />

            {/* 내용 */}
          <div className="min-w-0 flex-1">
            {/* 이름 행 (Name Row) */}
            <div className="flex flex-wrap items-center gap-2">
              <span className="truncate text-base font-medium">{primaryValue || "이름 없음"}</span>
              {/* 이름 행의 추가 컬럼들 */}
              {nameRowColumns.slice(1).map((col, idx) => {
                const value = item[col.name];
                if (value === null || value === undefined) return null;

                // 배지 타입이고 배열인 경우
                if (col.displayConfig?.displayType === "badge" && Array.isArray(value)) {
                  return (
                    <div key={idx} className="flex flex-wrap gap-1">
                      {value.map((v, vIdx) => (
                        <Badge key={vIdx} variant="secondary" className="shrink-0 text-xs">
                          {formatValue(v, col.format)}
                        </Badge>
                      ))}
                    </div>
                  );
                }

                // 배지 타입이지만 단일 값인 경우
                if (col.displayConfig?.displayType === "badge") {
                  return (
                    <Badge key={idx} variant="secondary" className="shrink-0 text-xs">
                      {formatValue(value, col.format)}
                    </Badge>
                  );
                }

                // 기본 텍스트 스타일
                return (
                  <span key={idx} className="bg-muted shrink-0 rounded px-1.5 py-0.5 text-xs">
                    {formatValue(value, col.format)}
                  </span>
                );
              })}
            </div>
            {/* 정보 행 (Info Row) */}
            {infoRowColumns.length > 0 && (
              <div className="text-muted-foreground flex flex-wrap items-center gap-2 text-sm">
                {infoRowColumns
                  .map((col, idx) => {
                    const value = item[col.name];
                    if (value === null || value === undefined) return null;

                    // 배지 타입이고 배열인 경우
                    if (col.displayConfig?.displayType === "badge" && Array.isArray(value)) {
                      return (
                        <div key={idx} className="flex flex-wrap gap-1">
                          {value.map((v, vIdx) => (
                            <Badge key={vIdx} variant="outline" className="text-xs">
                              {formatValue(v, col.format)}
                            </Badge>
                          ))}
                        </div>
                      );
                    }

                    // 배지 타입이지만 단일 값인 경우
                    if (col.displayConfig?.displayType === "badge") {
                      return (
                        <Badge key={idx} variant="outline" className="text-xs">
                          {formatValue(value, col.format)}
                        </Badge>
                      );
                    }

                    // 기본 텍스트
                    return <span key={idx}>{formatValue(value, col.format)}</span>;
                  })
                  .filter(Boolean)
                  .reduce((acc: React.ReactNode[], curr, idx) => {
                    if (idx > 0 && !React.isValidElement(curr))
                      acc.push(
                        <span key={`sep-${idx}`} className="text-muted-foreground/50">
                          |
                        </span>,
                      );
                    acc.push(curr);
                    return acc;
                  }, [])}
              </div>
            )}
          </div>

          {/* 좌측 패널 수정/삭제 버튼 */}
          {(config.leftPanel?.showEditButton || config.leftPanel?.showDeleteButton) && (
            <div className="flex gap-1" onClick={(e) => e.stopPropagation()}>
              {config.leftPanel?.showEditButton && (
                <Button variant="ghost" size="icon" className="h-8 w-8" onClick={() => handleLeftEditItem(item)}>
                  <Edit className="h-4 w-4" />
                </Button>
              )}
              {config.leftPanel?.showDeleteButton && (
                <Button
                  variant="ghost"
                  size="icon"
                  className="text-destructive hover:text-destructive h-8 w-8"
                  onClick={() => handleLeftDeleteClick(item)}
                >
                  <Trash2 className="h-4 w-4" />
                </Button>
              )}
            </div>
          )}
        </div>

        {/* 자식 항목 */}
        {hasChildren && isExpanded && (
          <div>
            {item.children.map((child: any, childIndex: number) => renderLeftItem(child, level + 1, childIndex))}
          </div>
        )}
      </div>
    );
  };

  // 왼쪽 패널 테이블 렌더링
  const renderLeftTable = () => {
    const displayColumns = config.leftPanel?.displayColumns || [];
    const pkColumn = getLeftPrimaryKeyColumn();

    // 값 렌더링 (배지 지원)
    const renderCellValue = (item: any, col: ColumnConfig) => {
      const value = item[col.name];
      if (value === null || value === undefined) return "-";

      // 배지 타입이고 배열인 경우
      if (col.displayConfig?.displayType === "badge" && Array.isArray(value)) {
        return (
          <div className="flex flex-wrap gap-1">
            {value.map((v, vIdx) => (
              <Badge key={vIdx} variant="secondary" className="text-xs">
                {formatValue(v, col.format)}
              </Badge>
            ))}
          </div>
        );
      }

      // 배지 타입이지만 단일 값인 경우
      if (col.displayConfig?.displayType === "badge") {
        return (
          <Badge variant="secondary" className="text-xs">
            {formatValue(value, col.format)}
          </Badge>
        );
      }

      // 기본 텍스트
      return formatValue(value, col.format);
    };

    return (
      <div className="rounded-md border">
        <Table>
          <TableHeader>
            <TableRow>
              {displayColumns.map((col, idx) => (
                <TableHead key={idx} style={{ width: col.width ? `${col.width}px` : "auto" }}>
                  {col.label || col.name}
                </TableHead>
              ))}
            </TableRow>
          </TableHeader>
          <TableBody>
            {filteredLeftData.length === 0 ? (
              <TableRow>
                <TableCell colSpan={displayColumns.length} className="text-muted-foreground h-24 text-center">
                  데이터가 없습니다
                </TableCell>
              </TableRow>
            ) : (
              filteredLeftData.map((item, index) => {
                const itemId = item[pkColumn];
                const isItemSelected =
                  selectedLeftItem &&
                  (selectedLeftItem === item ||
                    (item[pkColumn] !== undefined &&
                      selectedLeftItem[pkColumn] !== undefined &&
                      selectedLeftItem[pkColumn] === item[pkColumn]));

                return (
                  <TableRow
                    key={itemId ?? index}
                    className={cn("cursor-pointer hover:bg-muted/50", isItemSelected && "bg-primary/10")}
                    onClick={() => handleLeftItemSelect(item)}
                  >
                    {displayColumns.map((col, colIdx) => (
                      <TableCell key={colIdx}>{renderCellValue(item, col)}</TableCell>
                    ))}
                  </TableRow>
                );
              })
            )}
          </TableBody>
        </Table>
      </div>
    );
  };

  // 우측 패널 카드 렌더링
  const renderRightCard = (item: any, index: number) => {
    const displayColumns = config.rightPanel?.displayColumns || [];
    const showLabels = config.rightPanel?.showLabels ?? false;
    const showCheckbox = config.rightPanel?.showCheckbox ?? false;
    const pkColumn = getPrimaryKeyColumn();
    const itemId = item[pkColumn];

    // displayRow 설정에 따라 컬럼 분류
    // displayRow가 "name"이면 이름 행, "info"이면 정보 행 (기본값: 첫 번째는 name, 나머지는 info)
    const nameRowColumns = displayColumns.filter(
      (col, idx) => col.displayRow === "name" || (!col.displayRow && idx === 0),
    );
    const infoRowColumns = displayColumns.filter(
      (col, idx) => col.displayRow === "info" || (!col.displayRow && idx > 0),
    );

    return (
      <Card key={index} className="mb-2 py-0 transition-shadow hover:shadow-md">
        <CardContent className="px-4 py-2">
          <div className="flex items-start gap-3">
            {/* 체크박스 */}
            {showCheckbox && (
              <Checkbox
                checked={selectedRightItems.has(itemId)}
                onCheckedChange={(checked) => handleSelectItem(itemId, !!checked)}
                className="mt-1"
              />
            )}

            <div className="flex-1">
              {/* showLabels가 true이면 라벨: 값 형식으로 가로 배치 */}
              {showLabels ? (
                <div className="space-y-1">
                  {/* 이름 행: 라벨: 값, 라벨: 값 형식으로 가로 배치 */}
                  {nameRowColumns.length > 0 && (
                    <div className="flex flex-wrap items-center gap-x-4 gap-y-1">
                      {nameRowColumns.map((col, idx) => {
                        const value = getColumnValue(item, col);
                        if (value === null || value === undefined) return null;
                        return (
                          <span key={idx} className="flex items-center gap-1">
                            <span className="text-muted-foreground text-sm">{col.label || col.name}:</span>
                            <span className="text-sm font-semibold">{formatValue(value, col.format)}</span>
                          </span>
                        );
                      })}
                    </div>
                  )}
                  {/* 정보 행: 라벨: 값, 라벨: 값 형식으로 가로 배치 */}
                  {infoRowColumns.length > 0 && (
                    <div className="text-muted-foreground flex flex-wrap items-center gap-x-4 gap-y-1">
                      {infoRowColumns.map((col, idx) => {
                        const value = getColumnValue(item, col);
                        if (value === null || value === undefined) return null;
                        return (
                          <span key={idx} className="flex items-center gap-1">
                            <span className="text-sm">{col.label || col.name}:</span>
                            <span className="text-sm">{formatValue(value, col.format)}</span>
                          </span>
                        );
                      })}
                    </div>
                  )}
                </div>
              ) : (
                // showLabels가 false일 때 기존 방식 유지 (라벨 없이 값만)
                <div className="space-y-1">
                  {/* 이름 행 */}
                  {nameRowColumns.length > 0 && (
                    <div className="flex flex-wrap items-center gap-2">
                      {nameRowColumns.map((col, idx) => {
                        const value = getColumnValue(item, col);
                        if (value === null || value === undefined) return null;
                        if (idx === 0) {
                          return (
                            <span key={idx} className="text-base font-semibold">
                              {formatValue(value, col.format)}
                            </span>
                          );
                        }
                        return (
                          <span key={idx} className="bg-muted rounded px-2 py-0.5 text-sm">
                            {formatValue(value, col.format)}
                          </span>
                        );
                      })}
                    </div>
                  )}
                  {/* 정보 행 */}
                  {infoRowColumns.length > 0 && (
                    <div className="text-muted-foreground flex flex-wrap items-center gap-x-4 gap-y-1">
                      {infoRowColumns.map((col, idx) => {
                        const value = getColumnValue(item, col);
                        if (value === null || value === undefined) return null;
                        return (
                          <span key={idx} className="text-sm">
                            {formatValue(value, col.format)}
                          </span>
                        );
                      })}
                    </div>
                  )}
                </div>
              )}
            </div>

            {/* 액션 버튼 (개별 수정/삭제) */}
            <div className="flex gap-1">
              {config.rightPanel?.showEditButton && (
                <Button variant="ghost" size="icon" className="h-8 w-8" onClick={() => handleEditItem(item)}>
                  <Edit className="h-4 w-4" />
                </Button>
              )}
              {config.rightPanel?.showDeleteButton && (
                <Button
                  variant="ghost"
                  size="icon"
                  className="text-destructive hover:text-destructive h-8 w-8"
                  onClick={() => handleDeleteClick(item)}
                >
                  <Trash2 className="h-4 w-4" />
                </Button>
              )}
            </div>
          </div>
        </CardContent>
      </Card>
    );
  };

  // 우측 패널 테이블 렌더링
  const renderRightTable = () => {
    const displayColumns = config.rightPanel?.displayColumns || [];
    const showCheckbox = config.rightPanel?.showCheckbox ?? true; // 테이블 모드는 기본 체크박스 표시
    const pkColumn = getPrimaryKeyColumn();
    const allSelected =
      filteredRightData.length > 0 && filteredRightData.every((item) => selectedRightItems.has(item[pkColumn] as string | number));
    const someSelected = filteredRightData.some((item) => selectedRightItems.has(item[pkColumn] as string | number));

    return (
      <div className="rounded-md border">
        <Table>
          <TableHeader>
            <TableRow>
              {showCheckbox && (
                <TableHead className="w-12">
                  <Checkbox
                    checked={allSelected}
                    ref={(el) => {
                      if (el) {
                        (el as any).indeterminate = someSelected && !allSelected;
                      }
                    }}
                    onCheckedChange={handleSelectAll}
                  />
                </TableHead>
              )}
              {displayColumns.map((col, idx) => (
                <TableHead key={idx} style={{ width: col.width ? `${col.width}px` : "auto" }}>
                  {col.label || col.name}
                </TableHead>
              ))}
              {(config.rightPanel?.showEditButton || config.rightPanel?.showDeleteButton) && (
                <TableHead className="w-24 text-center">작업</TableHead>
              )}
            </TableRow>
          </TableHeader>
          <TableBody>
            {filteredRightData.length === 0 ? (
              <TableRow>
                <TableCell
                  colSpan={
                    displayColumns.length +
                    (showCheckbox ? 1 : 0) +
                    (config.rightPanel?.showEditButton || config.rightPanel?.showDeleteButton ? 1 : 0)
                  }
                  className="text-muted-foreground h-24 text-center"
                >
                  등록된 항목이 없습니다
                </TableCell>
              </TableRow>
            ) : (
              filteredRightData.map((item, index) => {
                const itemId = item[pkColumn] as string | number;
                return (
                  <TableRow key={index} className="hover:bg-muted/50">
                    {showCheckbox && (
                      <TableCell>
                        <Checkbox
                          checked={selectedRightItems.has(itemId)}
                          onCheckedChange={(checked) => handleSelectItem(itemId, !!checked)}
                        />
                      </TableCell>
                    )}
                    {displayColumns.map((col, colIdx) => (
                      <TableCell key={colIdx}>{formatValue(getColumnValue(item, col), col.format)}</TableCell>
                    ))}
                    {(config.rightPanel?.showEditButton || config.rightPanel?.showDeleteButton) && (
                      <TableCell className="text-center">
                        <div className="flex justify-center gap-1">
                          {config.rightPanel?.showEditButton && (
                            <Button
                              variant="ghost"
                              size="icon"
                              className="h-7 w-7"
                              onClick={() => handleEditItem(item)}
                            >
                              <Edit className="h-3.5 w-3.5" />
                            </Button>
                          )}
                          {config.rightPanel?.showDeleteButton && (
                            <Button
                              variant="ghost"
                              size="icon"
                              className="text-destructive hover:text-destructive h-7 w-7"
                              onClick={() => handleDeleteClick(item)}
                            >
                              <Trash2 className="h-3.5 w-3.5" />
                            </Button>
                          )}
                        </div>
                      </TableCell>
                    )}
                  </TableRow>
                );
              })
            )}
          </TableBody>
        </Table>
      </div>
    );
  };

  // 액션 버튼 렌더링
  const renderActionButtons = () => {
    const actionButtons = config.rightPanel?.actionButtons;
    if (!actionButtons || actionButtons.length === 0) return null;

    return (
      <div className="flex gap-2">
        {actionButtons.map((btn) => (
          <Button
            key={btn.id}
            variant={btn.variant || "default"}
            size="sm"
            className="h-8 text-sm"
            onClick={() => handleActionButton(btn)}
            disabled={
              // 일괄 삭제 버튼은 선택된 항목이 없으면 비활성화
              (btn.action === "bulk-delete" || btn.action === "delete") && selectedRightItems.size === 0
            }
          >
            {btn.icon === "Plus" && <Plus className="mr-1 h-4 w-4" />}
            {btn.icon === "Edit" && <Edit className="mr-1 h-4 w-4" />}
            {btn.icon === "Trash2" && <Trash2 className="mr-1 h-4 w-4" />}
            {btn.label}
          </Button>
        ))}
      </div>
    );
  };

  // 디자인 모드 렌더링
  if (isDesignMode) {
    const leftButtons = config.leftPanel?.actionButtons || [];
    const rightButtons = config.rightPanel?.actionButtons || [];
    const leftDisplayColumns = config.leftPanel?.displayColumns || [];
    const rightDisplayColumns = config.rightPanel?.displayColumns || [];

    return (
      <div
        className={cn(
          "flex h-full w-full rounded-lg border-2 border-dashed",
          isSelected ? "border-primary" : "border-muted-foreground/30",
        )}
        onClick={onClick}
        style={{ minHeight: "300px" }}
      >
        {/* 좌측 패널 미리보기 */}
        <div className="bg-muted/20 flex flex-col border-r" style={{ width: `${splitPosition}%` }}>
          {/* 헤더 */}
          <div className="flex items-center justify-between border-b px-3 py-2">
            <div>
              <div className="text-sm font-medium">{config.leftPanel?.title || "좌측 패널"}</div>
              <div className="text-muted-foreground text-[10px]">
                {config.leftPanel?.tableName || "테이블 미설정"}
              </div>
            </div>
            {leftButtons.length > 0 && (
              <div className="flex gap-1">
                {leftButtons.slice(0, 2).map((btn) => (
                  <div
                    key={btn.id}
                    className="bg-primary/10 text-primary rounded px-2 py-0.5 text-[10px]"
                  >
                    {btn.label}
                  </div>
                ))}
                {leftButtons.length > 2 && (
                  <div className="text-muted-foreground text-[10px]">+{leftButtons.length - 2}</div>
                )}
              </div>
            )}
          </div>

          {/* 검색 표시 */}
          {config.leftPanel?.showSearch && (
            <div className="border-b px-3 py-2">
              <div className="bg-muted h-7 w-full rounded text-[10px] leading-7 text-center text-muted-foreground">
                검색
              </div>
            </div>
          )}

          {/* 컬럼 미리보기 */}
          <div className="flex-1 overflow-hidden p-3">
            {leftDisplayColumns.length > 0 ? (
              <div className="space-y-2">
                {/* 샘플 카드 */}
                {[1, 2, 3].map((i) => (
                  <div key={i} className="rounded-md border bg-background/50 p-2">
                    <div className="flex items-center gap-2">
                      {leftDisplayColumns
                        .filter((col) => col.displayRow === "name" || !col.displayRow)
                        .slice(0, 2)
                        .map((col, idx) => (
                          <div
                            key={col.name}
                            className={cn(
                              "text-[10px]",
                              idx === 0 ? "font-medium" : "text-muted-foreground"
                            )}
                          >
                            {col.label || col.name}
                          </div>
                        ))}
                    </div>
                    {leftDisplayColumns.filter((col) => col.displayRow === "info").length > 0 && (
                      <div className="text-muted-foreground mt-1 flex gap-2 text-[10px]">
                        {leftDisplayColumns
                          .filter((col) => col.displayRow === "info")
                          .slice(0, 3)
                          .map((col) => (
                            <span key={col.name}>{col.label || col.name}</span>
                          ))}
                      </div>
                    )}
                  </div>
                ))}
              </div>
            ) : (
              <div className="flex h-full items-center justify-center">
                <div className="text-muted-foreground text-xs">컬럼 미설정</div>
              </div>
            )}
          </div>
        </div>

        {/* 우측 패널 미리보기 */}
        <div className="flex flex-1 flex-col">
          {/* 헤더 */}
          <div className="flex items-center justify-between border-b px-3 py-2">
            <div>
              <div className="text-sm font-medium">{config.rightPanel?.title || "우측 패널"}</div>
              <div className="text-muted-foreground text-[10px]">
                {config.rightPanel?.tableName || "테이블 미설정"}
              </div>
            </div>
            {rightButtons.length > 0 && (
              <div className="flex gap-1">
                {rightButtons.slice(0, 2).map((btn) => (
                  <div
                    key={btn.id}
                    className={cn(
                      "rounded px-2 py-0.5 text-[10px]",
                      btn.variant === "destructive"
                        ? "bg-destructive/10 text-destructive"
                        : "bg-primary/10 text-primary"
                    )}
                  >
                    {btn.label}
                  </div>
                ))}
                {rightButtons.length > 2 && (
                  <div className="text-muted-foreground text-[10px]">+{rightButtons.length - 2}</div>
                )}
              </div>
            )}
          </div>

          {/* 검색 표시 */}
          {config.rightPanel?.showSearch && (
            <div className="border-b px-3 py-2">
              <div className="bg-muted h-7 w-full rounded text-[10px] leading-7 text-center text-muted-foreground">
                검색
              </div>
            </div>
          )}

          {/* 컬럼 미리보기 */}
          <div className="flex-1 overflow-hidden p-3">
            {rightDisplayColumns.length > 0 ? (
              config.rightPanel?.displayMode === "table" ? (
                // 테이블 모드 미리보기
                <div className="rounded-md border">
                  <div className="bg-muted/50 flex border-b px-2 py-1">
                    {config.rightPanel?.showCheckbox && (
                      <div className="w-8 text-[10px]"></div>
                    )}
                    {rightDisplayColumns.slice(0, 4).map((col) => (
                      <div key={col.name} className="flex-1 text-[10px] font-medium">
                        {col.label || col.name}
                      </div>
                    ))}
                  </div>
                  {[1, 2, 3].map((i) => (
                    <div key={i} className="flex border-b px-2 py-1 last:border-b-0">
                      {config.rightPanel?.showCheckbox && (
                        <div className="w-8">
                          <div className="border h-3 w-3 rounded-sm"></div>
                        </div>
                      )}
                      {rightDisplayColumns.slice(0, 4).map((col) => (
                        <div key={col.name} className="text-muted-foreground flex-1 text-[10px]">
                          ---
                        </div>
                      ))}
                    </div>
                  ))}
                </div>
              ) : (
                // 카드 모드 미리보기
                <div className="space-y-2">
                  {[1, 2].map((i) => (
                    <div key={i} className="rounded-md border bg-background/50 p-2">
                      <div className="flex items-center gap-2">
                        {rightDisplayColumns
                          .filter((col) => col.displayRow === "name" || !col.displayRow)
                          .slice(0, 2)
                          .map((col, idx) => (
                            <div
                              key={col.name}
                              className={cn(
                                "text-[10px]",
                                idx === 0 ? "font-medium" : "text-muted-foreground"
                              )}
                            >
                              {col.label || col.name}
                            </div>
                          ))}
                      </div>
                      {rightDisplayColumns.filter((col) => col.displayRow === "info").length > 0 && (
                        <div className="text-muted-foreground mt-1 flex gap-2 text-[10px]">
                          {rightDisplayColumns
                            .filter((col) => col.displayRow === "info")
                            .slice(0, 3)
                            .map((col) => (
                              <span key={col.name}>{col.label || col.name}</span>
                            ))}
                        </div>
                      )}
                    </div>
                  ))}
                </div>
              )
            ) : (
              <div className="flex h-full items-center justify-center">
                <div className="text-muted-foreground text-xs">컬럼 미설정</div>
              </div>
            )}
          </div>

          {/* 연결 설정 표시 */}
          {(config.joinConfig?.leftColumn || config.joinConfig?.keys?.length) && (
            <div className="border-t px-3 py-1">
              <div className="text-muted-foreground text-[10px]">
                연결: {config.joinConfig?.leftColumn || config.joinConfig?.keys?.[0]?.leftColumn} →{" "}
                {config.joinConfig?.rightColumn || config.joinConfig?.keys?.[0]?.rightColumn}
              </div>
            </div>
          )}
        </div>
      </div>
    );
  }

  return (
    <div
      id={`split-panel-${component.id}`}
      className="bg-background flex h-full w-full overflow-hidden rounded-lg border"
      style={{ minHeight: "400px" }}
    >
      {/* 좌측 패널 */}
      <div
        className="bg-card flex flex-col border-r"
        style={{ width: `${splitPosition}%`, minWidth: config.minLeftWidth }}
      >
        {/* 헤더 */}
        <div className="bg-muted/30 border-b p-4">
          <div className="mb-3 flex items-center justify-between">
            <h3 className="text-base font-semibold">{config.leftPanel?.title || "목록"}</h3>
            {/* actionButtons 배열이 정의되어 있으면(빈 배열 포함) 해당 배열 사용, undefined면 기존 showAddButton 사용 (하위호환) */}
            {config.leftPanel?.actionButtons !== undefined ? (
              // 새로운 actionButtons 배열 기반 렌더링 (빈 배열이면 버튼 없음)
              config.leftPanel.actionButtons.length > 0 && (
                <div className="flex items-center gap-2">
                  {config.leftPanel.actionButtons.map((btn, idx) => (
                    <Button
                      key={idx}
                      size="sm"
                      variant={btn.variant || "default"}
                      className="h-8 text-sm"
                      onClick={() => handleLeftActionButton(btn)}
                    >
                      {btn.icon && <span className="mr-1">{btn.icon}</span>}
                      {btn.label || "버튼"}
                    </Button>
                  ))}
                </div>
              )
            ) : config.leftPanel?.showAddButton ? (
              // 기존 showAddButton 기반 렌더링 (하위호환 - actionButtons가 undefined일 때만)
              <Button size="sm" variant="default" className="h-8 text-sm" onClick={handleLeftAddClick}>
                <Plus className="mr-1 h-4 w-4" />
                {config.leftPanel?.addButtonLabel || "추가"}
              </Button>
            ) : null}
          </div>

          {/* 검색 */}
          {config.leftPanel?.showSearch && (
            <div className="relative">
              <Search className="text-muted-foreground absolute top-1/2 left-3 h-4 w-4 -translate-y-1/2" />
              <Input
                placeholder="검색..."
                value={leftSearchTerm}
                onChange={(e) => setLeftSearchTerm(e.target.value)}
                className="h-9 pl-9 text-sm"
              />
            </div>
          )}
        </div>

        {/* 좌측 패널 탭 */}
        {config.leftPanel?.tabConfig?.enabled && leftTabs.length > 0 && (
          <div className="flex flex-wrap gap-2 border-b px-4 py-3">
            {leftTabs.map((tab) => (
              <button
                key={tab.id}
                onClick={() => setLeftActiveTab(tab.id)}
                className={cn(
                  "inline-flex items-center gap-2 rounded-lg border-2 px-4 py-2 text-sm font-medium transition-all",
                  leftActiveTab === tab.id
                    ? "border-primary bg-primary/5 text-primary"
                    : "border-muted bg-background text-muted-foreground hover:border-primary/50 hover:text-foreground"
                )}
              >
                <span>{tab.label}</span>
                {config.leftPanel?.tabConfig?.showCount && (
                  <span
                    className={cn(
                      "rounded-full px-2 py-0.5 text-xs",
                      leftActiveTab === tab.id ? "bg-primary text-primary-foreground" : "bg-muted text-muted-foreground"
                    )}
                  >
                    {tab.count}
                  </span>
                )}
              </button>
            ))}
          </div>
        )}

        {/* 목록 */}
        <div className="flex-1 overflow-auto p-2">
          {leftLoading ? (
            <div className="text-muted-foreground flex h-full items-center justify-center text-base">로딩 중...</div>
          ) : (config.leftPanel?.displayMode || "card") === "table" ? (
            // 테이블 모드
            renderLeftTable()
          ) : filteredLeftData.length === 0 ? (
            <div className="text-muted-foreground flex h-full items-center justify-center text-base">
              데이터가 없습니다
            </div>
          ) : (
            // 카드 모드 (기본)
            <div className="py-1">{filteredLeftData.map((item, index) => renderLeftItem(item, 0, index))}</div>
          )}
        </div>
      </div>

      {/* 리사이저 */}
      {config.resizable && (
        <div
          className={cn("hover:bg-primary/50 w-1 cursor-col-resize transition-colors", isResizing && "bg-primary/50")}
          onMouseDown={handleResizeStart}
        />
      )}

      {/* 우측 패널 */}
      <div className="bg-card flex flex-1 flex-col">
        {/* 헤더 */}
        <div className="bg-muted/30 border-b p-4">
          <div className="mb-3 flex items-center justify-between">
            <div className="flex items-center gap-3">
              <h3 className="text-base font-semibold">
                {selectedLeftItem
                  ? config.leftPanel?.displayColumns?.[0]
                    ? selectedLeftItem[config.leftPanel.displayColumns[0].name]
                    : config.rightPanel?.title || "상세"
                  : config.rightPanel?.title || "상세"}
              </h3>
              {selectedLeftItem && <span className="text-muted-foreground text-sm">({rightData.length}건)</span>}
              {/* 선택된 항목 수 표시 */}
              {selectedRightItems.size > 0 && (
                <span className="text-primary text-sm font-medium">{selectedRightItems.size}개 선택됨</span>
              )}
            </div>
            <div className="flex items-center gap-2">
              {/* actionButtons 배열이 정의되어 있으면(빈 배열 포함) 해당 배열 사용, undefined면 기존 showAddButton 사용 (하위호환) */}
              {selectedLeftItem && (
                config.rightPanel?.actionButtons !== undefined ? (
                  // 새로운 actionButtons 배열 기반 렌더링 (빈 배열이면 버튼 없음)
                  config.rightPanel.actionButtons.length > 0 && renderActionButtons()
                ) : config.rightPanel?.showAddButton ? (
                  // 기존 showAddButton 기반 렌더링 (하위호환 - actionButtons가 undefined일 때만)
                  <Button size="sm" variant="default" className="h-8 text-sm" onClick={handleRightAddClick}>
                    <Plus className="mr-1 h-4 w-4" />
                    {config.rightPanel?.addButtonLabel || "추가"}
                  </Button>
                ) : null
              )}
            </div>
          </div>

          {/* 검색 */}
          {config.rightPanel?.showSearch && selectedLeftItem && (
            <div className="relative">
              <Search className="text-muted-foreground absolute top-1/2 left-3 h-4 w-4 -translate-y-1/2" />
              <Input
                placeholder="검색..."
                value={rightSearchTerm}
                onChange={(e) => setRightSearchTerm(e.target.value)}
                className="h-9 pl-9 text-sm"
              />
            </div>
          )}
        </div>

        {/* 우측 패널 탭 */}
        {config.rightPanel?.tabConfig?.enabled && rightTabs.length > 0 && selectedLeftItem && (
          <div className="flex flex-wrap gap-2 border-b px-4 py-3">
            {rightTabs.map((tab) => (
              <button
                key={tab.id}
                onClick={() => setRightActiveTab(tab.id)}
                className={cn(
                  "inline-flex items-center gap-2 rounded-lg border-2 px-4 py-2 text-sm font-medium transition-all",
                  rightActiveTab === tab.id
                    ? "border-primary bg-primary/5 text-primary"
                    : "border-muted bg-background text-muted-foreground hover:border-primary/50 hover:text-foreground"
                )}
              >
                <span>{tab.label}</span>
                {config.rightPanel?.tabConfig?.showCount && (
                  <span
                    className={cn(
                      "rounded-full px-2 py-0.5 text-xs",
                      rightActiveTab === tab.id ? "bg-primary text-primary-foreground" : "bg-muted text-muted-foreground"
                    )}
                  >
                    {tab.count}
                  </span>
                )}
              </button>
            ))}
          </div>
        )}

        {/* 내용 */}
        <div className="flex-1 overflow-auto p-4">
          {!selectedLeftItem ? (
            <div className="text-muted-foreground flex h-full flex-col items-center justify-center">
              <Users className="mb-3 h-16 w-16 opacity-30" />
              <span className="text-base">{config.rightPanel?.emptyMessage || "좌측에서 항목을 선택해주세요"}</span>
            </div>
          ) : rightLoading ? (
            <div className="text-muted-foreground flex h-full items-center justify-center text-base">로딩 중...</div>
          ) : (
            <>
              {/* displayMode에 따라 카드 또는 테이블 렌더링 */}
              {config.rightPanel?.displayMode === "table" ? (
                renderRightTable()
              ) : filteredRightData.length === 0 ? (
                <div className="text-muted-foreground flex h-full flex-col items-center justify-center">
                  <Users className="mb-3 h-16 w-16 opacity-30" />
                  <span className="text-base">등록된 항목이 없습니다</span>
                </div>
              ) : (
                <div>{filteredRightData.map((item, index) => renderRightCard(item, index))}</div>
              )}
            </>
          )}
        </div>
      </div>

      {/* 삭제 확인 다이얼로그 */}
      <AlertDialog open={deleteDialogOpen} onOpenChange={setDeleteDialogOpen}>
        <AlertDialogContent>
          <AlertDialogHeader>
            <AlertDialogTitle>삭제 확인</AlertDialogTitle>
            <AlertDialogDescription>
              {isBulkDelete
                ? `선택한 ${selectedRightItems.size}개 항목을 삭제하시겠습니까?`
                : "이 항목을 삭제하시겠습니까?"}
              <br />이 작업은 되돌릴 수 없습니다.
            </AlertDialogDescription>
          </AlertDialogHeader>
          <AlertDialogFooter>
            <AlertDialogCancel>취소</AlertDialogCancel>
            <AlertDialogAction
              onClick={executeDelete}
              className="bg-destructive text-destructive-foreground hover:bg-destructive/90"
            >
              삭제
            </AlertDialogAction>
          </AlertDialogFooter>
        </AlertDialogContent>
      </AlertDialog>
    </div>
  );
};

/**
 * SplitPanelLayout2 래퍼 컴포넌트
 */
export const SplitPanelLayout2Wrapper: React.FC<SplitPanelLayout2ComponentProps> = (props) => {
  return <SplitPanelLayout2Component {...props} />;
};