"use client";

import React, { useState, useEffect } from "react";
import { Input } from "@/components/ui/input";
import { Label } from "@/components/ui/label";
import { Checkbox } from "@/components/ui/checkbox";
import { Button } from "@/components/ui/button";
import { Badge } from "@/components/ui/badge";
import { TableListConfig, ColumnConfig } from "./types";
import { entityJoinApi } from "@/lib/api/entityJoin";
import { tableTypeApi } from "@/lib/api/screen";
import { tableManagementApi } from "@/lib/api/tableManagement";
import {
  Plus,
  Trash2,
  ArrowUp,
  ArrowDown,
  ChevronsUpDown,
  Check,
  Lock,
  Unlock,
  Database,
  Table2,
  Link2,
  GripVertical,
  X,
} from "lucide-react";
import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover";
import { Command, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList } from "@/components/ui/command";
import { cn } from "@/lib/utils";
import { DataFilterConfigPanel } from "@/components/screen/config-panels/DataFilterConfigPanel";
import { DndContext, closestCenter, type DragEndEvent } from "@dnd-kit/core";
import { SortableContext, useSortable, verticalListSortingStrategy, arrayMove } from "@dnd-kit/sortable";
import { CSS } from "@dnd-kit/utilities";

/**
 * 드래그 가능한 선택된 컬럼 행 (v2-split-panel-layout의 SortableColumnRow 동일 패턴)
 */
function SortableColumnRow({
  id,
  col,
  index,
  isEntityJoin,
  onLabelChange,
  onWidthChange,
  onRemove,
}: {
  id: string;
  col: ColumnConfig;
  index: number;
  isEntityJoin?: boolean;
  onLabelChange: (value: string) => void;
  onWidthChange: (value: number) => void;
  onRemove: () => void;
}) {
  const { attributes, listeners, setNodeRef, transform, transition, isDragging } = useSortable({ id });
  const style = { transform: CSS.Transform.toString(transform), transition };

  return (
    <div
      ref={setNodeRef}
      style={style}
      className={cn(
        "bg-card flex items-center gap-1.5 rounded-md border px-2 py-1.5",
        isDragging && "z-50 opacity-50 shadow-md",
        isEntityJoin && "border-blue-200 bg-blue-50/30",
      )}
    >
      <div {...attributes} {...listeners} className="text-muted-foreground hover:text-foreground cursor-grab touch-none">
        <GripVertical className="h-3 w-3" />
      </div>
      {isEntityJoin ? (
        <Link2 className="h-3 w-3 shrink-0 text-blue-500" />
      ) : (
        <span className="text-muted-foreground w-5 shrink-0 text-center text-[10px] font-medium">#{index + 1}</span>
      )}
      <Input
        value={col.displayName || col.columnName}
        onChange={(e) => onLabelChange(e.target.value)}
        placeholder="표시명"
        className="h-6 min-w-0 flex-1 text-xs"
      />
      <Input
        value={col.width || ""}
        onChange={(e) => onWidthChange(parseInt(e.target.value) || 100)}
        placeholder="너비"
        className="h-6 w-14 shrink-0 text-xs"
      />
      <Button type="button" variant="ghost" size="sm" onClick={onRemove} className="text-muted-foreground hover:text-destructive h-5 w-5 shrink-0 p-0">
        <X className="h-3 w-3" />
      </Button>
    </div>
  );
}

export interface TableListConfigPanelProps {
  config: TableListConfig;
  onChange: (config: Partial<TableListConfig>) => void;
  screenTableName?: string; // 화면에 연결된 테이블명
  tableColumns?: any[]; // 테이블 컬럼 정보
}

/**
 * TableList 설정 패널
 * 컴포넌트의 설정값들을 편집할 수 있는 UI 제공
 */
export const TableListConfigPanel: React.FC<TableListConfigPanelProps> = ({
  config: configProp,
  onChange,
  screenTableName,
  tableColumns,
}) => {
  // config가 undefined인 경우 빈 객체로 초기화
  const config = configProp || {};

  // console.log("🔍 TableListConfigPanel props:", {
  //   config,
  //   configType: typeof config,
  //   configSelectedTable: config?.selectedTable,
  //   configPagination: config?.pagination,
  //   paginationEnabled: config?.pagination?.enabled,
  //   paginationPageSize: config?.pagination?.pageSize,
  //   configKeys: typeof config === 'object' ? Object.keys(config || {}) : 'not object',
  //   screenTableName,
  //   tableColumns: tableColumns?.length,
  //   tableColumnsSample: tableColumns?.[0],
  // });

  const [availableTables, setAvailableTables] = useState<Array<{ tableName: string; displayName: string }>>([]);
  const [loadingTables, setLoadingTables] = useState(false);
  const [tableComboboxOpen, setTableComboboxOpen] = useState(false); // 테이블 Combobox 열림 상태
  const [availableColumns, setAvailableColumns] = useState<
    Array<{ columnName: string; dataType: string; label?: string; input_type?: string }>
  >([]);
  const [entityJoinColumns, setEntityJoinColumns] = useState<{
    availableColumns: Array<{
      tableName: string;
      columnName: string;
      columnLabel: string;
      dataType: string;
      joinAlias: string;
      suggestedLabel: string;
    }>;
    joinTables: Array<{
      tableName: string;
      currentDisplayColumn: string;
      availableColumns: Array<{
        columnName: string;
        columnLabel: string;
        dataType: string;
        description?: string;
      }>;
    }>;
  }>({ availableColumns: [], joinTables: [] });

  const [loadingEntityJoins, setLoadingEntityJoins] = useState(false);

  // 🆕 제외 필터용 참조 테이블 컬럼 목록
  const [referenceTableColumns, setReferenceTableColumns] = useState<
    Array<{ columnName: string; dataType: string; label?: string }>
  >([]);
  const [loadingReferenceColumns, setLoadingReferenceColumns] = useState(false);

  // 🔄 외부에서 config가 변경될 때 내부 상태 동기화 (표의 페이지네이션 변경 감지)
  useEffect(() => {
    // console.log("🔄 TableListConfigPanel - 외부 config 변경 감지:", {
    //   configPagination: config?.pagination,
    //   configPageSize: config?.pagination?.pageSize,
    // });
    // 현재는 별도 내부 상태가 없어서 자동으로 UI가 업데이트됨
    // 만약 내부 상태가 있다면 여기서 동기화 처리
  }, [config]);

  // 🎯 엔티티 컬럼 표시 설정을 위한 상태
  const [entityDisplayConfigs, setEntityDisplayConfigs] = useState<
    Record<
      string,
      {
        sourceColumns: Array<{ columnName: string; displayName: string; dataType: string }>;
        joinColumns: Array<{ columnName: string; displayName: string; dataType: string }>;
        selectedColumns: string[];
        separator: string;
      }
    >
  >({});

  // 화면 테이블명이 있으면 자동으로 설정 (초기 한 번만)
  useEffect(() => {
    if (screenTableName && !config.selectedTable) {
      // 기존 config의 모든 속성을 유지하면서 selectedTable만 추가/업데이트
      const updatedConfig = {
        ...config,
        selectedTable: screenTableName,
        // 컬럼이 있으면 유지, 없으면 빈 배열
        columns: config.columns || [],
      };
      onChange(updatedConfig);
    }
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [screenTableName]); // config.selectedTable이 없을 때만 실행되도록 의존성 최소화

  // 테이블 목록 가져오기
  useEffect(() => {
    const fetchTables = async () => {
      setLoadingTables(true);
      try {
        // API 클라이언트를 사용하여 올바른 포트로 호출
        const response = await tableTypeApi.getTables();
        setAvailableTables(
          response.map((table: any) => ({
            tableName: table.tableName,
            displayName: table.displayName || table.tableName,
          })),
        );
      } catch (error) {
        console.error("테이블 목록 가져오기 실패:", error);
      } finally {
        setLoadingTables(false);
      }
    };

    fetchTables();
  }, []);

  // 🆕 실제 사용할 테이블 이름 계산 (customTableName 우선)
  const targetTableName = React.useMemo(() => {
    if (config.useCustomTable && config.customTableName) {
      return config.customTableName;
    }
    return config.selectedTable || screenTableName;
  }, [config.useCustomTable, config.customTableName, config.selectedTable, screenTableName]);

  // 선택된 테이블의 컬럼 목록 설정
  useEffect(() => {
    console.log(
      "🔍 useEffect 실행됨 - targetTableName:",
      targetTableName,
      "config.useCustomTable:",
      config.useCustomTable,
      "config.customTableName:",
      config.customTableName,
      "config.selectedTable:",
      config.selectedTable,
      "screenTableName:",
      screenTableName,
    );

    if (!targetTableName) {
      console.log("🔧 컬럼 목록 숨김 - 테이블이 선택되지 않음");
      setAvailableColumns([]);
      return;
    }

    // tableColumns prop은 화면의 기본 테이블 컬럼이므로,
    // 다른 테이블을 선택한 경우 반드시 API에서 가져오기
    const isUsingDifferentTable = config.selectedTable && screenTableName && config.selectedTable !== screenTableName;
    const shouldUseTableColumnsProp = !config.useCustomTable && !isUsingDifferentTable && tableColumns && tableColumns.length > 0;

    if (shouldUseTableColumnsProp) {
      const mappedColumns = tableColumns.map((column: any) => ({
        columnName: column.columnName || column.name,
        dataType: column.dataType || column.type || "text",
        label: column.label || column.displayName || column.columnLabel || column.columnName || column.name,
        input_type: column.input_type || column.inputType,
      }));
      setAvailableColumns(mappedColumns);

      // selectedTable이 없으면 screenTableName으로 설정
      if (!config.selectedTable && screenTableName) {
        onChange({
          ...config,
          selectedTable: screenTableName,
          columns: config.columns || [],
        });
      }
    } else {
      // API에서 컬럼 정보 가져오기 - tableManagementApi 사용
      const fetchColumns = async () => {
        console.log("🔧 API에서 컬럼 정보 가져오기 (tableManagementApi):", targetTableName);
        try {
          const result = await tableManagementApi.getColumnList(targetTableName);
          console.log("🔧 tableManagementApi 응답:", result);

          if (result.success && result.data) {
            // API 응답 구조: { columns: [...], total, page, ... }
            const columns = Array.isArray(result.data) ? result.data : result.data.columns;
            console.log("🔧 컬럼 배열:", columns);

            if (columns && Array.isArray(columns)) {
              setAvailableColumns(
                columns.map((col: any) => ({
                  columnName: col.columnName,
                  dataType: col.dataType,
                  label: col.displayName || col.columnLabel || col.columnName,
                  input_type: col.input_type || col.inputType,
                })),
              );
            } else {
              console.error("🔧 컬럼 배열을 찾을 수 없음:", result.data);
              setAvailableColumns([]);
            }
          } else {
            console.error("🔧 컬럼 조회 실패:", result.message);
            setAvailableColumns([]);
          }
        } catch (error) {
          console.error("컬럼 목록 가져오기 실패:", error);
          setAvailableColumns([]);
        }
      };

      fetchColumns();
    }
  }, [targetTableName, config.useCustomTable, tableColumns]);

  // Entity 조인 컬럼 정보 가져오기 - targetTableName 사용
  useEffect(() => {
    const fetchEntityJoinColumns = async () => {
      if (!targetTableName) {
        setEntityJoinColumns({ availableColumns: [], joinTables: [] });
        return;
      }

      setLoadingEntityJoins(true);
      try {
        console.log("🔗 Entity 조인 컬럼 정보 가져오기:", targetTableName);
        const result = await entityJoinApi.getEntityJoinColumns(targetTableName);
        console.log("✅ Entity 조인 컬럼 응답:", result);

        setEntityJoinColumns({
          availableColumns: result.availableColumns || [],
          joinTables: result.joinTables || [],
        });
      } catch (error) {
        console.error("❌ Entity 조인 컬럼 조회 오류:", error);
        setEntityJoinColumns({ availableColumns: [], joinTables: [] });
      } finally {
        setLoadingEntityJoins(false);
      }
    };

    fetchEntityJoinColumns();
  }, [targetTableName]);

  // 🆕 제외 필터용 참조 테이블 컬럼 가져오기
  useEffect(() => {
    const fetchReferenceColumns = async () => {
      const refTable = config.excludeFilter?.referenceTable;
      if (!refTable) {
        setReferenceTableColumns([]);
        return;
      }

      setLoadingReferenceColumns(true);
      try {
        console.log("🔗 참조 테이블 컬럼 정보 가져오기:", refTable);
        const result = await tableManagementApi.getColumnList(refTable);
        if (result.success && result.data) {
          // result.data는 { columns: [], total, page, size, totalPages } 형태
          const columns = result.data.columns || [];
          setReferenceTableColumns(
            columns.map((col: any) => ({
              columnName: col.columnName || col.column_name,
              dataType: col.dataType || col.data_type || "text",
              label: col.displayName || col.columnLabel || col.column_label || col.columnName || col.column_name,
            })),
          );
          console.log("✅ 참조 테이블 컬럼 로드 완료:", columns.length, "개");
        }
      } catch (error) {
        console.error("❌ 참조 테이블 컬럼 조회 오류:", error);
        setReferenceTableColumns([]);
      } finally {
        setLoadingReferenceColumns(false);
      }
    };

    fetchReferenceColumns();
  }, [config.excludeFilter?.referenceTable]);

  // 🎯 엔티티 컬럼 자동 로드
  useEffect(() => {
    const entityColumns = config.columns?.filter((col) => col.isEntityJoin && col.entityDisplayConfig);

    if (!entityColumns || entityColumns.length === 0) return;

    // 각 엔티티 컬럼에 대해 자동으로 loadEntityDisplayConfig 호출
    entityColumns.forEach((column) => {
      // 이미 로드된 경우 스킵
      if (entityDisplayConfigs[column.columnName]) {
        return;
      }

      loadEntityDisplayConfig(column);
    });
  }, [config.columns]);

  const handleChange = (key: keyof TableListConfig, value: any) => {
    // 기존 config와 병합하여 전달 (다른 속성 손실 방지)
    const newConfig = { ...config, [key]: value };
    console.log("📊 TableListConfigPanel handleChange:", { key, value, newConfig });
    onChange(newConfig);
  };

  const handleNestedChange = (parentKey: keyof TableListConfig, childKey: string, value: any) => {
    // console.log("🔧 TableListConfigPanel handleNestedChange:", {
    //   parentKey,
    //   childKey,
    //   value,
    //   parentValue: config[parentKey],
    //   hasOnChange: !!onChange,
    //   onChangeType: typeof onChange,
    // });

    const parentValue = config[parentKey] as any;
    // 전체 config와 병합하여 다른 속성 유지
    const newConfig = {
      ...config,
      [parentKey]: {
        ...parentValue,
        [childKey]: value,
      },
    };

    // console.log("📤 TableListConfigPanel onChange 호출:", newConfig);
    onChange(newConfig);
  };

  // 컬럼 추가
  const addColumn = (columnName: string) => {
    const existingColumn = config.columns?.find((col) => col.columnName === columnName);
    if (existingColumn) return;

    // tableColumns → availableColumns 순서로 한국어 라벨 찾기
    const columnInfo = tableColumns?.find((col: any) => (col.columnName || col.name) === columnName);
    const availableColumnInfo = availableColumns.find((col) => col.columnName === columnName);

    const displayName = columnInfo?.label || columnInfo?.displayName || availableColumnInfo?.label || columnName;

    const newColumn: ColumnConfig = {
      columnName,
      displayName,
      visible: true,
      sortable: true,
      searchable: true,
      align: "left",
      format: "text",
      order: config.columns?.length || 0,
    };

    handleChange("columns", [...(config.columns || []), newColumn]);
  };

  // 🎯 조인 컬럼 추가 (조인 탭에서 추가하는 컬럼들은 일반 컬럼으로 처리)
  const addEntityColumn = (joinColumn: (typeof entityJoinColumns.availableColumns)[0]) => {
    console.log("🔗 조인 컬럼 추가 요청:", {
      joinColumn,
      joinAlias: joinColumn.joinAlias,
      columnLabel: joinColumn.columnLabel,
      tableName: joinColumn.tableName,
      columnName: joinColumn.columnName,
    });

    const existingColumn = config.columns?.find((col) => col.columnName === joinColumn.joinAlias);
    if (existingColumn) {
      console.warn("⚠️ 이미 존재하는 컬럼:", joinColumn.joinAlias);
      return;
    }

    // 🎯 joinTables에서 sourceColumn 찾기
    const joinTableInfo = entityJoinColumns.joinTables?.find((jt: any) => jt.tableName === joinColumn.tableName);
    const sourceColumn = joinTableInfo?.joinConfig?.sourceColumn || "";

    console.log("🔍 조인 정보 추출:", {
      tableName: joinColumn.tableName,
      foundJoinTable: !!joinTableInfo,
      sourceColumn,
      joinConfig: joinTableInfo?.joinConfig,
    });

    // 조인 탭에서 추가하는 컬럼들은 일반 컬럼으로 처리 (isEntityJoin: false)
    const newColumn: ColumnConfig = {
      columnName: joinColumn.joinAlias,
      displayName: joinColumn.columnLabel,
      visible: true,
      sortable: true,
      searchable: true,
      align: "left",
      format: "text",
      order: config.columns?.length || 0,
      isEntityJoin: false, // 조인 탭에서 추가하는 컬럼은 엔티티 타입이 아님
      // 🎯 추가 조인 정보 저장
      additionalJoinInfo: {
        sourceTable: config.selectedTable || screenTableName || "", // 기준 테이블 (예: user_info)
        sourceColumn: sourceColumn, // 기준 컬럼 (예: dept_code) - joinTables에서 추출
        referenceTable: joinColumn.tableName, // 참조 테이블 (예: dept_info)
        joinAlias: joinColumn.joinAlias, // 조인 별칭 (예: dept_code_company_name)
      },
    };

    handleChange("columns", [...(config.columns || []), newColumn]);
    console.log("✅ 조인 컬럼 추가 완료:", {
      columnName: newColumn.columnName,
      displayName: newColumn.displayName,
      totalColumns: (config.columns?.length || 0) + 1,
    });
  };

  // 컬럼 제거
  const removeColumn = (columnName: string) => {
    const updatedColumns = config.columns?.filter((col) => col.columnName !== columnName) || [];
    handleChange("columns", updatedColumns);
  };

  // 컬럼 업데이트
  const updateColumn = (columnName: string, updates: Partial<ColumnConfig>) => {
    const updatedColumns =
      config.columns?.map((col) => (col.columnName === columnName ? { ...col, ...updates } : col)) || [];
    handleChange("columns", updatedColumns);
  };

  // 🎯 기존 컬럼들을 체크하여 엔티티 타입인 경우 isEntityJoin 플래그 설정
  // useRef로 이전 컬럼 개수를 추적하여 새 컬럼 추가 시에만 실행
  const prevColumnsLengthRef = React.useRef<number>(0);

  useEffect(() => {
    const currentLength = config.columns?.length || 0;
    const prevLength = prevColumnsLengthRef.current;

    console.log("🔍 엔티티 컬럼 감지 useEffect 실행:", {
      hasColumns: !!config.columns,
      columnsCount: currentLength,
      prevColumnsCount: prevLength,
      hasTableColumns: !!tableColumns,
      tableColumnsCount: tableColumns?.length || 0,
      selectedTable: config.selectedTable,
    });

    if (!config.columns || !tableColumns || config.columns.length === 0) {
      console.log("⚠️ 컬럼 또는 테이블 컬럼 정보가 없어서 엔티티 감지 스킵");
      prevColumnsLengthRef.current = currentLength;
      return;
    }

    // 컬럼 개수가 변경되지 않았고, 이미 체크한 적이 있으면 스킵
    if (currentLength === prevLength && prevLength > 0) {
      console.log("ℹ️ 컬럼 개수 변경 없음, 엔티티 감지 스킵");
      return;
    }

    const updatedColumns = config.columns.map((column) => {
      // 이미 isEntityJoin이 설정된 경우 스킵
      if (column.isEntityJoin) {
        console.log("✅ 이미 엔티티 플래그 설정됨:", column.columnName);
        return column;
      }

      // 테이블 컬럼 정보에서 해당 컬럼 찾기
      const tableColumn = tableColumns.find((tc) => tc.columnName === column.columnName);
      console.log("🔍 컬럼 검색:", {
        columnName: column.columnName,
        found: !!tableColumn,
        inputType: tableColumn?.input_type,
        webType: tableColumn?.web_type,
      });

      // 엔티티 타입인 경우 isEntityJoin 플래그 설정 (input_type 또는 web_type 확인)
      if (tableColumn && (tableColumn.input_type === "entity" || tableColumn.web_type === "entity")) {
        console.log("🎯 엔티티 컬럼 감지 및 플래그 설정:", {
          columnName: column.columnName,
          referenceTable: tableColumn.reference_table,
          referenceTableAlt: tableColumn.referenceTable,
          allTableColumnKeys: Object.keys(tableColumn),
        });

        return {
          ...column,
          isEntityJoin: true,
          entityJoinInfo: {
            sourceTable: config.selectedTable || screenTableName || "",
            sourceColumn: column.columnName,
            joinAlias: column.columnName,
          },
          entityDisplayConfig: {
            displayColumns: [], // 빈 배열로 초기화
            separator: " - ",
            sourceTable: config.selectedTable || screenTableName || "",
            joinTable: tableColumn.reference_table || tableColumn.referenceTable || "",
          },
        };
      }

      return column;
    });

    // 변경사항이 있는 경우에만 업데이트
    const hasChanges = updatedColumns.some((col, index) => col.isEntityJoin !== config.columns![index].isEntityJoin);

    if (hasChanges) {
      console.log("🎯 엔티티 컬럼 플래그 업데이트:", updatedColumns);
      handleChange("columns", updatedColumns);
    } else {
      console.log("ℹ️ 엔티티 컬럼 변경사항 없음");
    }

    // 현재 컬럼 개수를 저장
    prevColumnsLengthRef.current = currentLength;
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [config.columns?.length, tableColumns, config.selectedTable]); // 컬럼 개수 변경 시에만 실행

  // 🎯 엔티티 컬럼의 표시 컬럼 정보 로드
  const loadEntityDisplayConfig = async (column: ColumnConfig) => {
    const configKey = `${column.columnName}`;

    // 이미 로드된 경우 스킵
    if (entityDisplayConfigs[configKey]) return;

    if (!column.isEntityJoin) {
      // 엔티티 컬럼이 아니면 빈 상태로 설정하여 로딩 상태 해제
      setEntityDisplayConfigs((prev) => ({
        ...prev,
        [configKey]: {
          sourceColumns: [],
          joinColumns: [],
          selectedColumns: [],
          separator: " - ",
        },
      }));
      return;
    }

    // sourceTable 결정 우선순위:
    // 1. entityDisplayConfig.sourceTable
    // 2. entityJoinInfo.sourceTable
    // 3. config.selectedTable
    // 4. screenTableName
    const sourceTable =
      column.entityDisplayConfig?.sourceTable ||
      column.entityJoinInfo?.sourceTable ||
      config.selectedTable ||
      screenTableName;

    // sourceTable이 비어있으면 빈 상태로 설정
    if (!sourceTable) {
      console.warn("⚠️ sourceTable을 찾을 수 없음:", column.columnName);
      setEntityDisplayConfigs((prev) => ({
        ...prev,
        [configKey]: {
          sourceColumns: [],
          joinColumns: [],
          selectedColumns: column.entityDisplayConfig?.displayColumns || [],
          separator: column.entityDisplayConfig?.separator || " - ",
        },
      }));
      return;
    }

    let joinTable = column.entityDisplayConfig?.joinTable;

    // joinTable이 없으면 tableTypeApi로 조회해서 설정
    if (!joinTable) {
      try {
        console.log("🔍 tableTypeApi로 컬럼 정보 조회:", {
          tableName: sourceTable,
          columnName: column.columnName,
        });

        const columnList = await tableTypeApi.getColumns(sourceTable);
        const columnInfo = columnList.find((col: any) => (col.column_name || col.columnName) === column.columnName);

        console.log("🔍 컬럼 정보 조회 결과:", {
          columnInfo: columnInfo,
          referenceTable: columnInfo?.reference_table || columnInfo?.referenceTable,
          referenceColumn: columnInfo?.reference_column || columnInfo?.referenceColumn,
        });

        if (columnInfo?.reference_table || columnInfo?.referenceTable) {
          joinTable = columnInfo.reference_table || columnInfo.referenceTable;
          console.log("✅ tableTypeApi에서 조인 테이블 정보 찾음:", joinTable);

          // entityDisplayConfig 업데이트
          const updatedConfig = {
            ...column.entityDisplayConfig,
            sourceTable: sourceTable,
            joinTable: joinTable,
            displayColumns: column.entityDisplayConfig?.displayColumns || [],
            separator: column.entityDisplayConfig?.separator || " - ",
          };

          // 컬럼 설정 업데이트
          const updatedColumns = config.columns?.map((col) =>
            col.columnName === column.columnName ? { ...col, entityDisplayConfig: updatedConfig } : col,
          );

          if (updatedColumns) {
            handleChange("columns", updatedColumns);
          }
        } else {
          console.warn("⚠️ tableTypeApi에서 조인 테이블 정보를 찾지 못함:", column.columnName);
        }
      } catch (error) {
        console.error("tableTypeApi 컬럼 정보 조회 실패:", error);
      }
    }

    console.log("🔍 최종 추출한 값:", { sourceTable, joinTable });

    try {
      // 기본 테이블 컬럼 정보는 항상 로드
      const sourceResult = await entityJoinApi.getReferenceTableColumns(sourceTable);
      const sourceColumns = sourceResult.columns || [];

      // joinTable이 있으면 조인 테이블 컬럼도 로드
      let joinColumns: Array<{ columnName: string; displayName: string; dataType: string }> = [];
      if (joinTable) {
        try {
          const joinResult = await entityJoinApi.getReferenceTableColumns(joinTable);
          joinColumns = joinResult.columns || [];
        } catch (joinError) {
          console.warn("⚠️ 조인 테이블 컬럼 로드 실패:", joinTable, joinError);
          // 조인 테이블 로드 실패해도 소스 테이블 컬럼은 표시
        }
      }

      setEntityDisplayConfigs((prev) => ({
        ...prev,
        [configKey]: {
          sourceColumns,
          joinColumns,
          selectedColumns: column.entityDisplayConfig?.displayColumns || [],
          separator: column.entityDisplayConfig?.separator || " - ",
        },
      }));
    } catch (error) {
      console.error("엔티티 표시 컬럼 정보 로드 실패:", error);
      // 에러 발생 시에도 빈 상태로 설정하여 로딩 상태 해제
      setEntityDisplayConfigs((prev) => ({
        ...prev,
        [configKey]: {
          sourceColumns: [],
          joinColumns: [],
          selectedColumns: column.entityDisplayConfig?.displayColumns || [],
          separator: column.entityDisplayConfig?.separator || " - ",
        },
      }));
    }
  };

  // 🎯 엔티티 표시 컬럼 선택 토글
  const toggleEntityDisplayColumn = (columnName: string, selectedColumn: string) => {
    const configKey = `${columnName}`;
    const localConfig = entityDisplayConfigs[configKey];
    if (!localConfig) return;

    const newSelectedColumns = localConfig.selectedColumns.includes(selectedColumn)
      ? localConfig.selectedColumns.filter((col) => col !== selectedColumn)
      : [...localConfig.selectedColumns, selectedColumn];

    // 로컬 상태 업데이트
    setEntityDisplayConfigs((prev) => ({
      ...prev,
      [configKey]: {
        ...prev[configKey],
        selectedColumns: newSelectedColumns,
      },
    }));

    // 실제 컬럼 설정도 업데이트
    const updatedColumns = config.columns?.map((col) => {
      if (col.columnName === columnName && col.entityDisplayConfig) {
        return {
          ...col,
          entityDisplayConfig: {
            ...col.entityDisplayConfig,
            displayColumns: newSelectedColumns,
          },
        };
      }
      return col;
    });

    if (updatedColumns) {
      handleChange("columns", updatedColumns);
    }
  };

  // 🎯 엔티티 표시 구분자 업데이트
  const updateEntityDisplaySeparator = (columnName: string, separator: string) => {
    const configKey = `${columnName}`;
    const localConfig = entityDisplayConfigs[configKey];
    if (!localConfig) return;

    // 로컬 상태 업데이트
    setEntityDisplayConfigs((prev) => ({
      ...prev,
      [configKey]: {
        ...prev[configKey],
        separator,
      },
    }));

    // 실제 컬럼 설정도 업데이트
    const updatedColumns = config.columns?.map((col) => {
      if (col.columnName === columnName && col.entityDisplayConfig) {
        return {
          ...col,
          entityDisplayConfig: {
            ...col.entityDisplayConfig,
            separator,
          },
        };
      }
      return col;
    });

    if (updatedColumns) {
      handleChange("columns", updatedColumns);
    }
  };

  // 컬럼 순서 변경
  const moveColumn = (columnName: string, direction: "up" | "down") => {
    const columns = [...(config.columns || [])];
    const index = columns.findIndex((col) => col.columnName === columnName);

    if (index === -1) return;

    const targetIndex = direction === "up" ? index - 1 : index + 1;
    if (targetIndex < 0 || targetIndex >= columns.length) return;

    [columns[index], columns[targetIndex]] = [columns[targetIndex], columns[index]];

    // order 값 재정렬
    columns.forEach((col, idx) => {
      col.order = idx;
    });

    handleChange("columns", columns);
  };

  // 테이블 변경 핸들러 - 테이블 변경 시 컬럼 설정 초기화
  const handleTableChange = (newTableName: string) => {
    if (newTableName === targetTableName) return;

    const updatedConfig = {
      ...config,
      selectedTable: newTableName,
      // 테이블이 변경되면 컬럼 설정 초기화
      columns: [],
    };
    onChange(updatedConfig);
    setTableComboboxOpen(false);
  };

  return (
    <div className="space-y-4">
      <div className="text-sm font-medium">테이블 리스트 설정</div>

      <div className="space-y-6">
        {/* 테이블 선택 */}
        <div className="space-y-3">
          <div>
            <h3 className="text-sm font-semibold">데이터 소스</h3>
            <p className="text-muted-foreground text-[10px]">
              테이블을 선택하세요. 미선택 시 화면 메인 테이블을 사용합니다.
            </p>
          </div>
          <hr className="border-border" />
          <div className="space-y-2">
            <Label className="text-xs">테이블 선택</Label>
            <Popover open={tableComboboxOpen} onOpenChange={setTableComboboxOpen}>
              <PopoverTrigger asChild>
                <Button
                  variant="outline"
                  role="combobox"
                  aria-expanded={tableComboboxOpen}
                  className="h-8 w-full justify-between text-xs"
                  disabled={loadingTables}
                >
                  <div className="flex items-center gap-2 truncate">
                    <Table2 className="h-3 w-3 shrink-0" />
                    <span className="truncate">
                      {loadingTables
                        ? "테이블 로딩 중..."
                        : targetTableName
                          ? availableTables.find((t) => t.tableName === targetTableName)?.displayName ||
                            targetTableName
                          : "테이블 선택"}
                    </span>
                  </div>
                  <ChevronsUpDown className="ml-2 h-3 w-3 shrink-0 opacity-50" />
                </Button>
              </PopoverTrigger>
              <PopoverContent
                className="p-0"
                style={{ width: "var(--radix-popover-trigger-width)" }}
                align="start"
              >
                <Command>
                  <CommandInput placeholder="테이블 검색..." className="text-xs" />
                  <CommandList>
                    <CommandEmpty className="text-xs">테이블을 찾을 수 없습니다.</CommandEmpty>
                    <CommandGroup>
                      {availableTables.map((table) => (
                        <CommandItem
                          key={table.tableName}
                          value={`${table.tableName} ${table.displayName}`}
                          onSelect={() => handleTableChange(table.tableName)}
                          className="text-xs"
                        >
                          <Check
                            className={cn(
                              "mr-2 h-3 w-3",
                              targetTableName === table.tableName ? "opacity-100" : "opacity-0",
                            )}
                          />
                          <div className="flex flex-col">
                            <span>{table.displayName}</span>
                            {table.displayName !== table.tableName && (
                              <span className="text-[10px] text-gray-400">{table.tableName}</span>
                            )}
                          </div>
                        </CommandItem>
                      ))}
                    </CommandGroup>
                  </CommandList>
                </Command>
              </PopoverContent>
            </Popover>
            {screenTableName && targetTableName !== screenTableName && (
              <div className="flex items-center justify-between rounded bg-amber-50 px-2 py-1">
                <span className="text-[10px] text-amber-700">
                  화면 기본 테이블({screenTableName})과 다른 테이블을 사용 중
                </span>
                <Button
                  variant="ghost"
                  size="sm"
                  className="h-5 px-1.5 text-[10px] text-amber-700 hover:text-amber-900"
                  onClick={() => handleTableChange(screenTableName)}
                >
                  기본으로
                </Button>
              </div>
            )}
          </div>
        </div>

        {/* 툴바 버튼 설정 */}
        <div className="space-y-3">
          <div>
            <h3 className="text-sm font-semibold">툴바 버튼 설정</h3>
            <p className="text-muted-foreground text-[10px]">테이블 상단에 표시할 버튼을 선택합니다</p>
          </div>
          <hr className="border-border" />
          <div className="grid grid-cols-2 gap-2">
            <div className="flex items-center space-x-2">
              <Checkbox
                id="showEditMode"
                checked={config.toolbar?.showEditMode ?? false}
                onCheckedChange={(checked) => handleNestedChange("toolbar", "showEditMode", checked)}
              />
              <Label htmlFor="showEditMode" className="text-xs">
                즉시 저장
              </Label>
            </div>
            <div className="flex items-center space-x-2">
              <Checkbox
                id="showExcel"
                checked={config.toolbar?.showExcel ?? false}
                onCheckedChange={(checked) => handleNestedChange("toolbar", "showExcel", checked)}
              />
              <Label htmlFor="showExcel" className="text-xs">
                Excel
              </Label>
            </div>
            <div className="flex items-center space-x-2">
              <Checkbox
                id="showPdf"
                checked={config.toolbar?.showPdf ?? false}
                onCheckedChange={(checked) => handleNestedChange("toolbar", "showPdf", checked)}
              />
              <Label htmlFor="showPdf" className="text-xs">
                PDF
              </Label>
            </div>
            <div className="flex items-center space-x-2">
              <Checkbox
                id="showCopy"
                checked={config.toolbar?.showCopy ?? false}
                onCheckedChange={(checked) => handleNestedChange("toolbar", "showCopy", checked)}
              />
              <Label htmlFor="showCopy" className="text-xs">
                복사
              </Label>
            </div>
            <div className="flex items-center space-x-2">
              <Checkbox
                id="showSearch"
                checked={config.toolbar?.showSearch ?? false}
                onCheckedChange={(checked) => handleNestedChange("toolbar", "showSearch", checked)}
              />
              <Label htmlFor="showSearch" className="text-xs">
                검색
              </Label>
            </div>
            <div className="flex items-center space-x-2">
              <Checkbox
                id="showFilter"
                checked={config.toolbar?.showFilter ?? false}
                onCheckedChange={(checked) => handleNestedChange("toolbar", "showFilter", checked)}
              />
              <Label htmlFor="showFilter" className="text-xs">
                필터
              </Label>
            </div>
            <div className="flex items-center space-x-2">
              <Checkbox
                id="showRefresh"
                checked={config.toolbar?.showRefresh ?? false}
                onCheckedChange={(checked) => handleNestedChange("toolbar", "showRefresh", checked)}
              />
              <Label htmlFor="showRefresh" className="text-xs">
                새로고침 (상단)
              </Label>
            </div>
            <div className="flex items-center space-x-2">
              <Checkbox
                id="showPaginationRefresh"
                checked={config.toolbar?.showPaginationRefresh ?? true}
                onCheckedChange={(checked) => handleNestedChange("toolbar", "showPaginationRefresh", checked)}
              />
              <Label htmlFor="showPaginationRefresh" className="text-xs">
                새로고침 (하단)
              </Label>
            </div>
          </div>
        </div>

        {/* 체크박스 설정 */}
        <div className="space-y-3">
          <div>
            <h3 className="text-sm font-semibold">체크박스 설정</h3>
          </div>
          <hr className="border-border" />
          <div className="space-y-2">
            <div className="flex items-center space-x-2">
              <Checkbox
                id="checkboxEnabled"
                checked={config.checkbox?.enabled ?? true}
                onCheckedChange={(checked) => handleNestedChange("checkbox", "enabled", checked)}
              />
              <Label htmlFor="checkboxEnabled">체크박스 표시</Label>
            </div>

            {config.checkbox?.enabled && (
              <>
                <div className="flex items-center space-x-2">
                  <Checkbox
                    id="checkboxSelectAll"
                    checked={config.checkbox?.selectAll ?? true}
                    onCheckedChange={(checked) => handleNestedChange("checkbox", "selectAll", checked)}
                  />
                  <Label htmlFor="checkboxSelectAll">전체 선택 체크박스 표시</Label>
                </div>

                <div className="space-y-1">
                  <Label htmlFor="checkboxPosition" className="text-xs">
                    체크박스 위치
                  </Label>
                  <select
                    id="checkboxPosition"
                    value={config.checkbox?.position || "left"}
                    onChange={(e) => handleNestedChange("checkbox", "position", e.target.value)}
                    className="h-8 w-full rounded-md border px-2 text-xs"
                  >
                    <option value="left">왼쪽</option>
                    <option value="right">오른쪽</option>
                  </select>
                </div>
              </>
            )}
          </div>
        </div>

        {/* 기본 정렬 설정 */}
        <div className="space-y-3">
          <div>
            <h3 className="text-sm font-semibold">기본 정렬 설정</h3>
            <p className="text-muted-foreground text-[10px]">테이블 로드 시 기본 정렬 순서를 지정합니다</p>
          </div>
          <hr className="border-border" />
          <div className="space-y-2">
            <div className="space-y-1">
              <Label htmlFor="defaultSortColumn" className="text-xs">
                정렬 컬럼
              </Label>
              <select
                id="defaultSortColumn"
                value={config.defaultSort?.columnName || ""}
                onChange={(e) => {
                  if (e.target.value) {
                    handleChange("defaultSort", {
                      columnName: e.target.value,
                      direction: config.defaultSort?.direction || "asc",
                    });
                  } else {
                    handleChange("defaultSort", undefined);
                  }
                }}
                className="h-8 w-full rounded-md border px-2 text-xs"
              >
                <option value="">정렬 없음</option>
                {availableColumns.map((col) => (
                  <option key={col.columnName} value={col.columnName}>
                    {col.label || col.columnName}
                  </option>
                ))}
              </select>
            </div>

            {config.defaultSort?.columnName && (
              <div className="space-y-1">
                <Label htmlFor="defaultSortDirection" className="text-xs">
                  정렬 방향
                </Label>
                <select
                  id="defaultSortDirection"
                  value={config.defaultSort?.direction || "asc"}
                  onChange={(e) =>
                    handleChange("defaultSort", {
                      ...config.defaultSort,
                      columnName: config.defaultSort?.columnName || "",
                      direction: e.target.value as "asc" | "desc",
                    })
                  }
                  className="h-8 w-full rounded-md border px-2 text-xs"
                >
                  <option value="asc">오름차순 (A→Z, 1→9)</option>
                  <option value="desc">내림차순 (Z→A, 9→1)</option>
                </select>
              </div>
            )}
          </div>
        </div>

        {/* 가로 스크롤 및 컬럼 고정 */}
        <div className="space-y-3">
          <div>
            <h3 className="text-sm font-semibold">가로 스크롤 및 컬럼 고정</h3>
          </div>
          <hr className="border-border" />
          <div className="flex items-center space-x-2">
            <Checkbox
              id="horizontalScrollEnabled"
              checked={config.horizontalScroll?.enabled}
              onCheckedChange={(checked) => handleNestedChange("horizontalScroll", "enabled", checked)}
            />
            <Label htmlFor="horizontalScrollEnabled">가로 스크롤 사용</Label>
          </div>

          {config.horizontalScroll?.enabled && (
            <div className="space-y-3">
              <div className="space-y-1">
                <Label htmlFor="maxVisibleColumns" className="text-sm">
                  최대 표시 컬럼 수
                </Label>
                <Input
                  id="maxVisibleColumns"
                  type="number"
                  value={config.horizontalScroll?.maxVisibleColumns || 8}
                  onChange={(e) =>
                    handleNestedChange("horizontalScroll", "maxVisibleColumns", parseInt(e.target.value) || 8)
                  }
                  min={3}
                  max={20}
                  placeholder="8"
                  className="h-8"
                />
                <div className="text-xs text-gray-500">이 수를 넘는 컬럼이 있으면 가로 스크롤이 생성됩니다</div>
              </div>
            </div>
          )}
        </div>

        {/* 컬럼 설정 */}
        {/* 🎯 엔티티 컬럼 표시 설정 섹션 */}
        {config.columns?.some((col) => col.isEntityJoin) && (
          <div className="space-y-3">
            {config.columns
              ?.filter((col) => col.isEntityJoin && col.entityDisplayConfig)
              .map((column) => (
                <div key={column.columnName} className="space-y-2">
                  <div className="mb-2">
                    <span className="truncate text-xs font-medium" style={{ fontSize: "12px" }}>
                      {column.displayName || column.columnName}
                    </span>
                  </div>

                  {entityDisplayConfigs[column.columnName] ? (
                    <div className="space-y-2">
                      {/* 구분자 설정 */}
                      <div className="space-y-1">
                        <Label className="text-xs">구분자</Label>
                        <Input
                          value={entityDisplayConfigs[column.columnName].separator}
                          onChange={(e) => updateEntityDisplaySeparator(column.columnName, e.target.value)}
                          className="h-6 w-full text-xs"
                          style={{ fontSize: "12px" }}
                          placeholder=" - "
                        />
                      </div>

                      {/* 표시 컬럼 선택 (다중 선택) */}
                      <div className="space-y-1">
                        <Label className="text-xs">표시할 컬럼 선택</Label>
                        {entityDisplayConfigs[column.columnName].sourceColumns.length === 0 &&
                        entityDisplayConfigs[column.columnName].joinColumns.length === 0 ? (
                          <div className="py-2 text-center text-xs text-gray-400">
                            표시 가능한 컬럼이 없습니다.
                            {!column.entityDisplayConfig?.joinTable && (
                              <p className="mt-1 text-[10px]">
                                테이블 타입 관리에서 참조 테이블을 설정하면 더 많은 컬럼을 선택할 수 있습니다.
                              </p>
                            )}
                          </div>
                        ) : (
                          <Popover>
                            <PopoverTrigger asChild>
                              <Button
                                variant="outline"
                                className="h-6 w-full justify-between text-xs"
                                style={{ fontSize: "12px" }}
                              >
                                {entityDisplayConfigs[column.columnName].selectedColumns.length > 0
                                  ? `${entityDisplayConfigs[column.columnName].selectedColumns.length}개 선택됨`
                                  : "컬럼 선택"}
                                <ChevronsUpDown className="ml-2 h-4 w-4 shrink-0 opacity-50" />
                              </Button>
                            </PopoverTrigger>
                            <PopoverContent className="w-full p-0" align="start">
                              <Command>
                                <CommandInput placeholder="컬럼 검색..." className="text-xs" />
                                <CommandList>
                                  <CommandEmpty className="text-xs">컬럼을 찾을 수 없습니다.</CommandEmpty>
                                  {entityDisplayConfigs[column.columnName].sourceColumns.length > 0 && (
                                    <CommandGroup
                                      heading={`기본 테이블: ${column.entityDisplayConfig?.sourceTable || config.selectedTable || screenTableName}`}
                                    >
                                      {entityDisplayConfigs[column.columnName].sourceColumns.map((col) => (
                                        <CommandItem
                                          key={`source-${col.columnName}`}
                                          onSelect={() => toggleEntityDisplayColumn(column.columnName, col.columnName)}
                                          className="text-xs"
                                        >
                                          <Check
                                            className={cn(
                                              "mr-2 h-4 w-4",
                                              entityDisplayConfigs[column.columnName].selectedColumns.includes(
                                                col.columnName,
                                              )
                                                ? "opacity-100"
                                                : "opacity-0",
                                            )}
                                          />
                                          {col.displayName}
                                        </CommandItem>
                                      ))}
                                    </CommandGroup>
                                  )}
                                  {entityDisplayConfigs[column.columnName].joinColumns.length > 0 && (
                                    <CommandGroup heading={`참조 테이블: ${column.entityDisplayConfig?.joinTable}`}>
                                      {entityDisplayConfigs[column.columnName].joinColumns.map((col) => (
                                        <CommandItem
                                          key={`join-${col.columnName}`}
                                          onSelect={() => toggleEntityDisplayColumn(column.columnName, col.columnName)}
                                          className="text-xs"
                                        >
                                          <Check
                                            className={cn(
                                              "mr-2 h-4 w-4",
                                              entityDisplayConfigs[column.columnName].selectedColumns.includes(
                                                col.columnName,
                                              )
                                                ? "opacity-100"
                                                : "opacity-0",
                                            )}
                                          />
                                          {col.displayName}
                                        </CommandItem>
                                      ))}
                                    </CommandGroup>
                                  )}
                                </CommandList>
                              </Command>
                            </PopoverContent>
                          </Popover>
                        )}
                      </div>

                      {/* 참조 테이블 미설정 안내 */}
                      {!column.entityDisplayConfig?.joinTable &&
                        entityDisplayConfigs[column.columnName].sourceColumns.length > 0 && (
                          <div className="rounded bg-blue-50 p-2 text-[10px] text-blue-600">
                            현재 기본 테이블 컬럼만 표시됩니다. 테이블 타입 관리에서 참조 테이블을 설정하면 조인된
                            테이블의 컬럼도 선택할 수 있습니다.
                          </div>
                        )}

                      {/* 선택된 컬럼 미리보기 */}
                      {entityDisplayConfigs[column.columnName].selectedColumns.length > 0 && (
                        <div className="space-y-1">
                          <Label className="text-xs">미리보기</Label>
                          <div className="flex flex-wrap gap-1 rounded bg-gray-50 p-2 text-xs">
                            {entityDisplayConfigs[column.columnName].selectedColumns.map((colName, idx) => (
                              <React.Fragment key={colName}>
                                <Badge variant="secondary" className="text-xs">
                                  {colName}
                                </Badge>
                                {idx < entityDisplayConfigs[column.columnName].selectedColumns.length - 1 && (
                                  <span className="text-gray-400">
                                    {entityDisplayConfigs[column.columnName].separator}
                                  </span>
                                )}
                              </React.Fragment>
                            ))}
                          </div>
                        </div>
                      )}
                    </div>
                  ) : (
                    <div className="py-4 text-center text-xs text-gray-400">컬럼 정보 로딩 중...</div>
                  )}
                </div>
              ))}
          </div>
        )}

        {!targetTableName ? (
          <div className="space-y-3">
            <div className="text-center text-gray-500">
              <p>테이블이 선택되지 않았습니다.</p>
              <p className="text-sm">위 데이터 소스에서 테이블을 선택하세요.</p>
            </div>
          </div>
        ) : availableColumns.length === 0 ? (
          <div className="space-y-3">
            <div className="text-center text-gray-500">
              <p>컬럼을 추가하려면 먼저 컴포넌트에 테이블을 명시적으로 선택하거나</p>
              <p className="text-sm">기본 설정 탭에서 테이블을 설정해주세요.</p>
              <p className="mt-2 text-xs text-blue-600">현재 화면 테이블: {screenTableName}</p>
            </div>
          </div>
        ) : (
          <>
            <div className="space-y-2">
              <div>
                <h3 className="text-sm font-semibold">컬럼 선택</h3>
                <p className="text-muted-foreground text-[10px]">표시할 컬럼을 선택하세요</p>
              </div>
              <hr className="border-border" />
              {availableColumns.length > 0 ? (
                <div className="max-h-48 space-y-0.5 overflow-y-auto rounded-md border p-2">
                  {availableColumns.map((column) => {
                    const isAdded = config.columns?.some((c) => c.columnName === column.columnName);
                    return (
                      <div
                        key={column.columnName}
                        className={cn(
                          "hover:bg-muted/50 flex cursor-pointer items-center gap-2 rounded px-2 py-1",
                          isAdded && "bg-primary/10",
                        )}
                        onClick={() => {
                          if (isAdded) {
                            // 컬럼 제거
                            handleChange(
                              "columns",
                              config.columns?.filter((c) => c.columnName !== column.columnName) || [],
                            );
                          } else {
                            // 컬럼 추가
                            addColumn(column.columnName);
                          }
                        }}
                      >
                        <Checkbox
                          checked={isAdded}
                          onCheckedChange={() => {
                            if (isAdded) {
                              handleChange(
                                "columns",
                                config.columns?.filter((c) => c.columnName !== column.columnName) || [],
                              );
                            } else {
                              addColumn(column.columnName);
                            }
                          }}
                          className="pointer-events-none h-3.5 w-3.5"
                        />
                        <Database className="text-muted-foreground h-3 w-3 flex-shrink-0" />
                        <span className="truncate text-xs">{column.label || column.columnName}</span>
                        {isAdded && (
                          <button
                            type="button"
                            title={
                              config.columns?.find((c) => c.columnName === column.columnName)?.editable === false
                                ? "편집 잠금 (클릭하여 해제)"
                                : "편집 가능 (클릭하여 잠금)"
                            }
                            className={cn(
                              "ml-auto flex-shrink-0 rounded p-0.5 transition-colors",
                              config.columns?.find((c) => c.columnName === column.columnName)?.editable === false
                                ? "text-destructive hover:bg-destructive/10"
                                : "text-muted-foreground hover:bg-muted",
                            )}
                            onClick={(e) => {
                              e.stopPropagation();
                              const currentCol = config.columns?.find((c) => c.columnName === column.columnName);
                              if (currentCol) {
                                updateColumn(column.columnName, {
                                  editable: currentCol.editable === false ? undefined : false,
                                });
                              }
                            }}
                          >
                            {config.columns?.find((c) => c.columnName === column.columnName)?.editable === false ? (
                              <Lock className="h-3 w-3" />
                            ) : (
                              <Unlock className="h-3 w-3" />
                            )}
                          </button>
                        )}
                        <span className={cn("text-[10px] text-gray-400", !isAdded && "ml-auto")}>
                          {column.input_type || column.dataType}
                        </span>
                      </div>
                    );
                  })}
                </div>
              ) : (
                <div className="text-muted-foreground py-2 text-center text-xs">컬럼 정보를 불러오는 중...</div>
              )}
            </div>

            {/* Entity 조인 컬럼 추가 */}
            {entityJoinColumns.joinTables.length > 0 && (
              <div className="space-y-2">
                <div>
                  <h3 className="text-sm font-semibold">Entity 조인 컬럼</h3>
                  <p className="text-muted-foreground text-[10px]">연관 테이블의 컬럼을 선택하세요</p>
                </div>
                <hr className="border-border" />
                <div className="space-y-3">
                  {entityJoinColumns.joinTables.map((joinTable, tableIndex) => (
                    <div key={tableIndex} className="space-y-1">
                      <div className="mb-1 flex items-center gap-2 text-[10px] font-medium text-blue-600">
                        <Link2 className="h-3 w-3" />
                        <span>{joinTable.tableName}</span>
                        <Badge variant="outline" className="text-[10px]">
                          {joinTable.currentDisplayColumn}
                        </Badge>
                      </div>
                      <div className="max-h-28 space-y-0.5 overflow-y-auto rounded-md border border-blue-200 bg-blue-50/30 p-2">
                        {joinTable.availableColumns.map((column, colIndex) => {
                          const matchingJoinColumn = entityJoinColumns.availableColumns.find(
                            (jc) => jc.tableName === joinTable.tableName && jc.columnName === column.columnName,
                          );

                          const isAlreadyAdded = config.columns?.some(
                            (col) => col.columnName === matchingJoinColumn?.joinAlias,
                          );

                          if (!matchingJoinColumn) return null;

                          return (
                            <div
                              key={colIndex}
                              className={cn(
                                "flex cursor-pointer items-center gap-2 rounded px-2 py-1 hover:bg-blue-100/50",
                                isAlreadyAdded && "bg-blue-100",
                              )}
                              onClick={() => {
                                if (isAlreadyAdded) {
                                  // 컬럼 제거
                                  handleChange(
                                    "columns",
                                    config.columns?.filter((c) => c.columnName !== matchingJoinColumn.joinAlias) || [],
                                  );
                                } else {
                                  // 컬럼 추가
                                  addEntityColumn(matchingJoinColumn);
                                }
                              }}
                            >
                              <Checkbox
                                checked={isAlreadyAdded}
                                onCheckedChange={() => {
                                  if (isAlreadyAdded) {
                                    handleChange(
                                      "columns",
                                      config.columns?.filter((c) => c.columnName !== matchingJoinColumn.joinAlias) ||
                                        [],
                                    );
                                  } else {
                                    addEntityColumn(matchingJoinColumn);
                                  }
                                }}
                                className="pointer-events-none h-3.5 w-3.5"
                              />
                              <Link2 className="h-3 w-3 flex-shrink-0 text-blue-500" />
                              <span className="truncate text-xs">{column.columnLabel}</span>
                              <span className="ml-auto text-[10px] text-blue-400">
                                {column.inputType || column.dataType}
                              </span>
                            </div>
                          );
                        })}
                      </div>
                    </div>
                  ))}
                </div>
              </div>
            )}
          </>
        )}

        {/* 선택된 컬럼 순서 변경 (DnD) */}
        {config.columns && config.columns.length > 0 && (
          <div className="space-y-3">
            <div>
              <h3 className="text-sm font-semibold">표시할 컬럼 ({config.columns.length}개 선택)</h3>
              <p className="text-muted-foreground text-[10px]">
                드래그하여 순서를 변경하거나 표시명/너비를 수정할 수 있습니다
              </p>
            </div>
            <hr className="border-border" />
            <DndContext
              collisionDetection={closestCenter}
              onDragEnd={(event: DragEndEvent) => {
                const { active, over } = event;
                if (!over || active.id === over.id) return;
                const columns = [...(config.columns || [])];
                const oldIndex = columns.findIndex((c) => c.columnName === active.id);
                const newIndex = columns.findIndex((c) => c.columnName === over.id);
                if (oldIndex !== -1 && newIndex !== -1) {
                  const reordered = arrayMove(columns, oldIndex, newIndex);
                  reordered.forEach((col, idx) => { col.order = idx; });
                  handleChange("columns", reordered);
                }
              }}
            >
              <SortableContext
                items={(config.columns || []).map((c) => c.columnName)}
                strategy={verticalListSortingStrategy}
              >
                <div className="space-y-1">
                  {(config.columns || []).map((column, idx) => {
                    // displayName이 columnName과 같으면 한국어 라벨 미설정 → availableColumns에서 찾기
                    const resolvedLabel =
                      column.displayName && column.displayName !== column.columnName
                        ? column.displayName
                        : availableColumns.find((c) => c.columnName === column.columnName)?.label || column.displayName || column.columnName;

                    const colWithLabel = { ...column, displayName: resolvedLabel };
                    return (
                      <SortableColumnRow
                        key={column.columnName}
                        id={column.columnName}
                        col={colWithLabel}
                        index={idx}
                        isEntityJoin={!!column.isEntityJoin}
                        onLabelChange={(value) => updateColumn(column.columnName, { displayName: value })}
                        onWidthChange={(value) => updateColumn(column.columnName, { width: value })}
                        onRemove={() => removeColumn(column.columnName)}
                      />
                    );
                  })}
                </div>
              </SortableContext>
            </DndContext>
          </div>
        )}

        {/* 🆕 데이터 필터링 설정 */}
        <div className="space-y-3">
          <div>
            <h3 className="text-sm font-semibold">데이터 필터링</h3>
            <p className="text-muted-foreground mt-1 text-xs">특정 컬럼 값으로 데이터를 필터링합니다</p>
          </div>
          <hr className="border-border" />
          <DataFilterConfigPanel
            tableName={config.selectedTable || screenTableName}
            columns={availableColumns.map(
              (col) =>
                ({
                  columnName: col.columnName,
                  columnLabel: col.label || col.columnName,
                  dataType: col.dataType,
                  input_type: col.input_type, // 🆕 실제 input_type 전달
                }) as any,
            )}
            config={config.dataFilter}
            onConfigChange={(dataFilter) => handleChange("dataFilter", dataFilter)}
          />
        </div>
      </div>
    </div>
  );
};