"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 { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
import { Button } from "@/components/ui/button";
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
import { Badge } from "@/components/ui/badge";
import { ScrollArea } from "@/components/ui/scroll-area";
import { TableListConfig, ColumnConfig } from "./types";
import { entityJoinApi } from "@/lib/api/entityJoin";
import { tableTypeApi } from "@/lib/api/screen";
import { Plus, Trash2, ArrowUp, ArrowDown, Settings, Columns, Filter, Palette, MousePointer } from "lucide-react";

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

/**
 * TableList 설정 패널
 * 컴포넌트의 설정값들을 편집할 수 있는 UI 제공
 */
export const TableListConfigPanel: React.FC<TableListConfigPanelProps> = ({
  config,
  onChange,
  screenTableName,
  tableColumns,
}) => {
  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 [availableColumns, setAvailableColumns] = useState<
    Array<{ columnName: string; dataType: string; label?: 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 [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 !== screenTableName)) {
      console.log("🔄 화면 테이블명 자동 설정:", screenTableName);
      onChange({ selectedTable: screenTableName });
    }
  }, [screenTableName, config.selectedTable, onChange]);

  // 테이블 목록 가져오기
  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();
  }, []);

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

    // 컴포넌트에 명시적으로 테이블이 선택되었거나, 화면에 연결된 테이블이 있는 경우에만 컬럼 목록 표시
    const shouldShowColumns = config.selectedTable || (screenTableName && config.columns && config.columns.length > 0);

    if (!shouldShowColumns) {
      console.log("🔧 컬럼 목록 숨김 - 명시적 테이블 선택 또는 설정된 컬럼이 없음");
      setAvailableColumns([]);
      return;
    }

    // tableColumns prop을 우선 사용하되, 컴포넌트가 명시적으로 설정되었을 때만
    if (tableColumns && tableColumns.length > 0 && (config.selectedTable || config.columns?.length > 0)) {
      console.log("🔧 tableColumns prop 사용:", tableColumns);
      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,
      }));
      console.log("🏷️ availableColumns 설정됨:", mappedColumns);
      setAvailableColumns(mappedColumns);
    } else if (config.selectedTable || screenTableName) {
      // API에서 컬럼 정보 가져오기
      const fetchColumns = async () => {
        const tableName = config.selectedTable || screenTableName;
        if (!tableName) {
          setAvailableColumns([]);
          return;
        }

        console.log("🔧 API에서 컬럼 정보 가져오기:", tableName);
        try {
          const response = await fetch(`/api/tables/${tableName}/columns`);
          if (response.ok) {
            const result = await response.json();
            if (result.success && result.data) {
              console.log("🔧 API 응답 컬럼 데이터:", result.data);
              setAvailableColumns(
                result.data.map((col: any) => ({
                  columnName: col.columnName,
                  dataType: col.dataType,
                  label: col.displayName || col.columnName,
                })),
              );
            }
          }
        } catch (error) {
          console.error("컬럼 목록 가져오기 실패:", error);
        }
      };

      fetchColumns();
    } else {
      setAvailableColumns([]);
    }
  }, [config.selectedTable, screenTableName, tableColumns, config.columns]);

  // Entity 조인 컬럼 정보 가져오기
  useEffect(() => {
    const fetchEntityJoinColumns = async () => {
      const tableName = config.selectedTable || screenTableName;
      if (!tableName) {
        setEntityJoinColumns({ availableColumns: [], joinTables: [] });
        return;
      }

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

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

    fetchEntityJoinColumns();
  }, [config.selectedTable, screenTableName]);

  const handleChange = (key: keyof TableListConfig, value: any) => {
    onChange({ [key]: value });
  };

  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;
    const newConfig = {
      [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에서 해당 컬럼의 라벨 정보 찾기
    const columnInfo = tableColumns?.find((col: any) => (col.columnName || col.name) === columnName);

    // 라벨명 우선 사용, 없으면 컬럼명 사용
    const displayName = columnInfo?.label || columnInfo?.displayName || 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]) => {
    const existingColumn = config.columns?.find((col) => col.columnName === joinColumn.joinAlias);
    if (existingColumn) return;

    // 조인 탭에서 추가하는 컬럼들은 일반 컬럼으로 처리 (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, // 조인 탭에서 추가하는 컬럼은 엔티티 타입이 아님
    };

    handleChange("columns", [...(config.columns || []), newColumn]);
    console.log("🔗 조인 컬럼 추가됨 (일반 컬럼으로 처리):", newColumn);
  };

  // 컬럼 제거
  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 플래그 설정
  useEffect(() => {
    console.log("🔍 엔티티 컬럼 감지 useEffect 실행:", {
      hasColumns: !!config.columns,
      columnsCount: config.columns?.length || 0,
      hasTableColumns: !!tableColumns,
      tableColumnsCount: tableColumns?.length || 0,
      selectedTable: config.selectedTable,
    });

    if (!config.columns || !tableColumns) {
      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 || "",
            sourceColumn: column.columnName,
            joinAlias: column.columnName,
          },
          entityDisplayConfig: {
            displayColumns: [], // 빈 배열로 초기화
            separator: " - ",
            sourceTable: config.selectedTable || "",
            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("ℹ️ 엔티티 컬럼 변경사항 없음");
    }
  }, [config.columns, tableColumns, config.selectedTable]);

  // 🎯 엔티티 컬럼의 표시 컬럼 정보 로드
  const loadEntityDisplayConfig = async (column: ColumnConfig) => {
    console.log("🔍 loadEntityDisplayConfig 시작:", {
      columnName: column.columnName,
      isEntityJoin: column.isEntityJoin,
      entityJoinInfo: column.entityJoinInfo,
      entityDisplayConfig: column.entityDisplayConfig,
      configSelectedTable: config.selectedTable,
    });

    if (!column.isEntityJoin || !column.entityJoinInfo) {
      console.log("⚠️ 엔티티 컬럼 조건 불만족:", {
        isEntityJoin: column.isEntityJoin,
        entityJoinInfo: column.entityJoinInfo,
      });
      return;
    }

    // entityDisplayConfig가 없으면 초기화
    if (!column.entityDisplayConfig) {
      console.log("🔧 entityDisplayConfig 초기화:", column.columnName);
      const updatedColumns = config.columns?.map((col) => {
        if (col.columnName === column.columnName) {
          return {
            ...col,
            entityDisplayConfig: {
              displayColumns: [],
              separator: " - ",
              sourceTable: config.selectedTable || "",
              joinTable: "",
            },
          };
        }
        return col;
      });

      if (updatedColumns) {
        handleChange("columns", updatedColumns);
        // 업데이트된 컬럼으로 다시 시도
        const updatedColumn = updatedColumns.find((col) => col.columnName === column.columnName);
        if (updatedColumn) {
          console.log("🔄 업데이트된 컬럼으로 재시도:", updatedColumn.entityDisplayConfig);
          return loadEntityDisplayConfig(updatedColumn);
        }
      }
      return;
    }

    console.log("🔍 entityDisplayConfig 전체 구조:", column.entityDisplayConfig);
    console.log("🔍 entityDisplayConfig 키들:", Object.keys(column.entityDisplayConfig));

    // sourceTable과 joinTable이 없으면 entityJoinInfo에서 가져오기
    let sourceTable = column.entityDisplayConfig.sourceTable;
    let joinTable = column.entityDisplayConfig.joinTable;

    if (!sourceTable && column.entityJoinInfo) {
      sourceTable = column.entityJoinInfo.sourceTable;
    }

    if (!joinTable) {
      // joinTable이 없으면 tableTypeApi로 조회해서 설정
      try {
        console.log("🔍 joinTable이 없어서 tableTypeApi로 조회:", sourceTable);
        const columnList = await tableTypeApi.getColumns(sourceTable);
        const columnInfo = columnList.find((col: any) => (col.column_name || col.columnName) === column.columnName);

        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,
          };

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

          if (updatedColumns) {
            handleChange("columns", updatedColumns);
          }
        }
      } catch (error) {
        console.error("tableTypeApi 컬럼 정보 조회 실패:", error);
      }
    }

    console.log("🔍 최종 추출한 값:", { sourceTable, joinTable });
    const configKey = `${column.columnName}`;

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

    // joinTable이 비어있으면 tableTypeApi로 컬럼 정보를 다시 가져와서 referenceTable 정보를 찾기
    let actualJoinTable = joinTable;
    if (!actualJoinTable && sourceTable) {
      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) {
          actualJoinTable = columnInfo.reference_table || columnInfo.referenceTable;
          console.log("✅ tableTypeApi에서 조인 테이블 정보 찾음:", actualJoinTable);

          // entityDisplayConfig 업데이트
          const updatedConfig = {
            ...column.entityDisplayConfig,
            joinTable: actualJoinTable,
          };

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

          if (updatedColumns) {
            handleChange("columns", updatedColumns);
          }
        } else {
          console.log("⚠️ tableTypeApi에서도 referenceTable을 찾을 수 없음:", {
            columnName: column.columnName,
            columnInfo: columnInfo,
          });
        }
      } catch (error) {
        console.error("tableTypeApi 컬럼 정보 조회 실패:", error);
      }
    }

    // sourceTable과 joinTable이 모두 있어야 로드
    if (!sourceTable || !actualJoinTable) {
      console.log("⚠️ sourceTable 또는 joinTable이 비어있어서 로드 스킵:", { sourceTable, joinTable: actualJoinTable });
      return;
    }

    try {
      // 기본 테이블과 조인 테이블의 컬럼 정보를 병렬로 로드
      const [sourceResult, joinResult] = await Promise.all([
        entityJoinApi.getReferenceTableColumns(sourceTable),
        entityJoinApi.getReferenceTableColumns(actualJoinTable),
      ]);

      const sourceColumns = sourceResult.columns || [];
      const joinColumns = joinResult.columns || [];

      setEntityDisplayConfigs((prev) => ({
        ...prev,
        [configKey]: {
          sourceColumns,
          joinColumns,
          selectedColumns: column.entityDisplayConfig?.displayColumns || [],
          separator: column.entityDisplayConfig?.separator || " - ",
        },
      }));
    } catch (error) {
      console.error("엔티티 표시 컬럼 정보 로드 실패:", error);
    }
  };

  // 🎯 엔티티 표시 컬럼 선택 토글
  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);
      console.log("🎯 엔티티 표시 컬럼 설정 업데이트:", {
        columnName,
        selectedColumns: newSelectedColumns,
        updatedColumn: updatedColumns.find((col) => col.columnName === columnName),
      });
    }
  };

  // 🎯 엔티티 표시 구분자 업데이트
  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);
      console.log("🎯 엔티티 표시 구분자 설정 업데이트:", {
        columnName,
        separator,
        updatedColumn: updatedColumns.find((col) => col.columnName === columnName),
      });
    }
  };

  // 컬럼 순서 변경
  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 addFilter = (columnName: string) => {
    const existingFilter = config.filter?.filters?.find((f) => f.columnName === columnName);
    if (existingFilter) return;

    const column = availableColumns.find((col) => col.columnName === columnName);
    if (!column) return;

    // tableColumns에서 해당 컬럼의 메타정보 찾기
    const tableColumn = tableColumns?.find((tc) => tc.columnName === columnName);

    // 컬럼의 데이터 타입과 웹타입에 따라 위젯 타입 결정
    const inferWidgetType = (dataType: string, webType?: string): string => {
      // 웹타입이 있으면 우선 사용
      if (webType) {
        return webType;
      }

      // 데이터 타입으로 추론
      const type = dataType.toLowerCase();
      if (type.includes("int") || type.includes("numeric") || type.includes("decimal")) return "number";
      if (type.includes("date") || type.includes("timestamp")) return "date";
      if (type.includes("bool")) return "boolean";
      return "text";
    };

    const widgetType = inferWidgetType(column.dataType, tableColumn?.webType || tableColumn?.web_type);

    const newFilter = {
      columnName,
      widgetType,
      label: column.label || column.columnName,
      gridColumns: 3,
      numberFilterMode: "range" as const,
      // 코드 타입인 경우 코드 카테고리 추가
      ...(widgetType === "code" && {
        codeCategory: tableColumn?.codeCategory || tableColumn?.code_category,
      }),
      // 엔티티 타입인 경우 참조 정보 추가
      ...(widgetType === "entity" && {
        referenceTable: tableColumn?.referenceTable || tableColumn?.reference_table,
        referenceColumn: tableColumn?.referenceColumn || tableColumn?.reference_column,
        displayColumn: tableColumn?.displayColumn || tableColumn?.display_column,
      }),
    };

    console.log("🔍 필터 추가:", newFilter);

    const currentFilters = config.filter?.filters || [];
    handleNestedChange("filter", "filters", [...currentFilters, newFilter]);
  };

  // 필터 제거
  const removeFilter = (index: number) => {
    const currentFilters = config.filter?.filters || [];
    const updatedFilters = currentFilters.filter((_, i) => i !== index);
    handleNestedChange("filter", "filters", updatedFilters);
  };

  // 필터 업데이트
  const updateFilter = (index: number, key: string, value: any) => {
    const currentFilters = config.filter?.filters || [];
    const updatedFilters = currentFilters.map((filter, i) => (i === index ? { ...filter, [key]: value } : filter));
    handleNestedChange("filter", "filters", updatedFilters);
  };

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

      <Tabs defaultValue="basic" className="w-full">
        <TabsList className="grid w-full grid-cols-6">
          <TabsTrigger value="basic" className="flex items-center gap-1">
            <Settings className="h-3 w-3" />
            기본
          </TabsTrigger>
          <TabsTrigger value="columns" className="flex items-center gap-1">
            <Columns className="h-3 w-3" />
            컬럼
          </TabsTrigger>
          <TabsTrigger value="join-columns" className="flex items-center gap-1">
            <Plus className="h-3 w-3" />
            조인
          </TabsTrigger>
          <TabsTrigger value="filter" className="flex items-center gap-1">
            <Filter className="h-3 w-3" />
            필터
          </TabsTrigger>
          <TabsTrigger value="actions" className="flex items-center gap-1">
            <MousePointer className="h-3 w-3" />
            액션
          </TabsTrigger>
          <TabsTrigger value="style" className="flex items-center gap-1">
            <Palette className="h-3 w-3" />
            스타일
          </TabsTrigger>
        </TabsList>

        {/* 기본 설정 탭 */}
        <TabsContent value="basic" className="space-y-4">
          <ScrollArea className="h-[600px] pr-4">
            <Card>
              <CardHeader>
                <CardTitle className="text-base">연결된 테이블</CardTitle>
                <CardDescription>화면에 연결된 테이블 정보가 자동으로 매핑됩니다</CardDescription>
              </CardHeader>
              <CardContent className="space-y-4">
                <div className="space-y-2">
                  <Label>현재 연결된 테이블</Label>
                  <div className="rounded-md bg-gray-50 p-3">
                    <div className="text-sm font-medium">
                      {screenTableName ? (
                        <span className="text-blue-600">{screenTableName}</span>
                      ) : (
                        <span className="text-gray-500">테이블이 연결되지 않았습니다</span>
                      )}
                    </div>
                    {screenTableName && (
                      <div className="mt-1 text-xs text-gray-500">화면 설정에서 자동으로 연결된 테이블입니다</div>
                    )}
                  </div>
                </div>

                <div className="space-y-2">
                  <Label htmlFor="title">제목</Label>
                  <Input
                    id="title"
                    value={config.title || ""}
                    onChange={(e) => handleChange("title", e.target.value)}
                    placeholder="테이블 제목 (선택사항)"
                  />
                </div>
              </CardContent>
            </Card>

            <Card>
              <CardHeader>
                <CardTitle className="text-base">표시 설정</CardTitle>
              </CardHeader>
              <CardContent className="space-y-4">
                <div className="flex items-center space-x-2">
                  <Checkbox
                    id="showHeader"
                    checked={config.showHeader}
                    onCheckedChange={(checked) => handleChange("showHeader", checked)}
                  />
                  <Label htmlFor="showHeader">헤더 표시</Label>
                </div>

                <div className="flex items-center space-x-2">
                  <Checkbox
                    id="showFooter"
                    checked={config.showFooter}
                    onCheckedChange={(checked) => handleChange("showFooter", checked)}
                  />
                  <Label htmlFor="showFooter">푸터 표시</Label>
                </div>

                <div className="flex items-center space-x-2">
                  <Checkbox
                    id="autoLoad"
                    checked={config.autoLoad}
                    onCheckedChange={(checked) => handleChange("autoLoad", checked)}
                  />
                  <Label htmlFor="autoLoad">자동 데이터 로드</Label>
                </div>
              </CardContent>
            </Card>

            <Card>
              <CardHeader>
                <CardTitle className="text-base">높이 설정</CardTitle>
              </CardHeader>
              <CardContent className="space-y-4">
                <div className="space-y-2">
                  <Label>높이 모드</Label>
                  <Select
                    value={config.height}
                    onValueChange={(value: "auto" | "fixed" | "viewport") => handleChange("height", value)}
                  >
                    <SelectTrigger>
                      <SelectValue />
                    </SelectTrigger>
                    <SelectContent>
                      <SelectItem value="auto">자동</SelectItem>
                      <SelectItem value="fixed">고정</SelectItem>
                      <SelectItem value="viewport">화면 높이</SelectItem>
                    </SelectContent>
                  </Select>
                </div>

                {config.height === "fixed" && (
                  <div className="space-y-2">
                    <Label htmlFor="fixedHeight">고정 높이 (px)</Label>
                    <Input
                      id="fixedHeight"
                      type="number"
                      value={config.fixedHeight || 400}
                      onChange={(e) => handleChange("fixedHeight", parseInt(e.target.value) || 400)}
                      min={200}
                      max={1000}
                    />
                  </div>
                )}
              </CardContent>
            </Card>

            <Card>
              <CardHeader>
                <CardTitle className="text-base">페이지네이션</CardTitle>
              </CardHeader>
              <CardContent className="space-y-4">
                <div className="flex items-center space-x-2">
                  <Checkbox
                    id="paginationEnabled"
                    checked={config.pagination?.enabled}
                    onCheckedChange={(checked) => handleNestedChange("pagination", "enabled", checked)}
                  />
                  <Label htmlFor="paginationEnabled">페이지네이션 사용</Label>
                </div>

                {config.pagination?.enabled && (
                  <>
                    <div className="space-y-2">
                      <Label htmlFor="pageSize">페이지 크기</Label>
                      <Select
                        value={config.pagination?.pageSize?.toString() || "20"}
                        onValueChange={(value) => handleNestedChange("pagination", "pageSize", parseInt(value))}
                      >
                        <SelectTrigger>
                          <SelectValue />
                        </SelectTrigger>
                        <SelectContent>
                          <SelectItem value="10">10개씩</SelectItem>
                          <SelectItem value="20">20개씩</SelectItem>
                          <SelectItem value="50">50개씩</SelectItem>
                          <SelectItem value="100">100개씩</SelectItem>
                        </SelectContent>
                      </Select>
                    </div>

                    <div className="flex items-center space-x-2">
                      <Checkbox
                        id="showSizeSelector"
                        checked={config.pagination?.showSizeSelector}
                        onCheckedChange={(checked) => handleNestedChange("pagination", "showSizeSelector", checked)}
                      />
                      <Label htmlFor="showSizeSelector">페이지 크기 선택기 표시</Label>
                    </div>

                    <div className="flex items-center space-x-2">
                      <Checkbox
                        id="showPageInfo"
                        checked={config.pagination?.showPageInfo}
                        onCheckedChange={(checked) => handleNestedChange("pagination", "showPageInfo", checked)}
                      />
                      <Label htmlFor="showPageInfo">페이지 정보 표시</Label>
                    </div>
                  </>
                )}
              </CardContent>
            </Card>

            <Card>
              <CardHeader>
                <CardTitle className="text-base">가로 스크롤 및 컬럼 고정</CardTitle>
                <CardDescription>컬럼이 많을 때 가로 스크롤과 컬럼 고정 기능을 설정하세요</CardDescription>
              </CardHeader>
              <CardContent className="space-y-3">
                <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 className="grid grid-cols-2 gap-2">
                      <div className="space-y-1">
                        <Label htmlFor="minColumnWidth" className="text-sm">
                          최소 너비 (px)
                        </Label>
                        <Input
                          id="minColumnWidth"
                          type="number"
                          value={config.horizontalScroll?.minColumnWidth || 100}
                          onChange={(e) =>
                            handleNestedChange("horizontalScroll", "minColumnWidth", parseInt(e.target.value) || 100)
                          }
                          min={50}
                          max={500}
                          placeholder="100"
                          className="h-8"
                        />
                      </div>

                      <div className="space-y-1">
                        <Label htmlFor="maxColumnWidth" className="text-sm">
                          최대 너비 (px)
                        </Label>
                        <Input
                          id="maxColumnWidth"
                          type="number"
                          value={config.horizontalScroll?.maxColumnWidth || 300}
                          onChange={(e) =>
                            handleNestedChange("horizontalScroll", "maxColumnWidth", parseInt(e.target.value) || 300)
                          }
                          min={100}
                          max={800}
                          placeholder="300"
                          className="h-8"
                        />
                      </div>
                    </div>
                  </div>
                )}
              </CardContent>
            </Card>

            <Card>
              <CardHeader>
                <CardTitle className="text-base">체크박스 설정</CardTitle>
                <CardDescription>행 선택을 위한 체크박스 기능을 설정하세요</CardDescription>
              </CardHeader>
              <CardContent className="space-y-3">
                <div className="flex items-center space-x-2">
                  <Checkbox
                    id="checkboxEnabled"
                    checked={config.checkbox?.enabled}
                    onCheckedChange={(checked) => handleNestedChange("checkbox", "enabled", checked)}
                  />
                  <Label htmlFor="checkboxEnabled">체크박스 사용</Label>
                </div>

                {config.checkbox?.enabled && (
                  <div className="space-y-3">
                    <div className="flex items-center space-x-2">
                      <Checkbox
                        id="checkboxMultiple"
                        checked={config.checkbox?.multiple}
                        onCheckedChange={(checked) => handleNestedChange("checkbox", "multiple", checked)}
                      />
                      <Label htmlFor="checkboxMultiple">다중 선택 (체크박스)</Label>
                    </div>

                    <div className="space-y-1">
                      <Label htmlFor="checkboxPosition" className="text-sm">
                        체크박스 위치
                      </Label>
                      <Select
                        value={config.checkbox?.position || "left"}
                        onValueChange={(value) => handleNestedChange("checkbox", "position", value)}
                      >
                        <SelectTrigger className="h-8">
                          <SelectValue placeholder="위치 선택" />
                        </SelectTrigger>
                        <SelectContent>
                          <SelectItem value="left">왼쪽</SelectItem>
                          <SelectItem value="right">오른쪽</SelectItem>
                        </SelectContent>
                      </Select>
                    </div>

                    <div className="flex items-center space-x-2">
                      <Checkbox
                        id="checkboxSelectAll"
                        checked={config.checkbox?.selectAll}
                        onCheckedChange={(checked) => handleNestedChange("checkbox", "selectAll", checked)}
                      />
                      <Label htmlFor="checkboxSelectAll">전체 선택/해제 버튼 표시</Label>
                    </div>
                  </div>
                )}
              </CardContent>
            </Card>
          </ScrollArea>
        </TabsContent>

        {/* 컬럼 설정 탭 */}
        <TabsContent value="columns" className="space-y-4">
          <ScrollArea className="h-[600px] pr-4">
            {/* 🎯 엔티티 컬럼 표시 설정 섹션 - 컬럼 설정 패널 바깥으로 분리 */}
            {config.columns?.some((col) => col.isEntityJoin) && (
              <Card className="border-l-4 border-l-orange-500">
                <CardHeader>
                  <CardTitle className="flex items-center gap-2 text-base">🎯 엔티티 컬럼 표시 설정</CardTitle>
                  <CardDescription>엔티티 타입 컬럼의 표시할 컬럼들을 조합하여 설정하세요</CardDescription>
                </CardHeader>
                <CardContent className="space-y-4">
                  {config.columns
                    ?.filter((col) => col.isEntityJoin && col.entityDisplayConfig)
                    .map((column) => (
                      <div key={column.columnName} className="space-y-3 rounded-lg border bg-orange-50 p-3">
                        <div className="flex items-center justify-between">
                          <div className="flex items-center gap-2">
                            <Badge variant="outline" className="border-orange-300 text-orange-600">
                              {column.columnName}
                            </Badge>
                            <span className="text-sm font-medium">{column.displayName}</span>
                          </div>
                          <Button
                            variant="outline"
                            size="sm"
                            onClick={() => loadEntityDisplayConfig(column)}
                            className="h-6 text-xs"
                          >
                            <Plus className="mr-1 h-3 w-3" />
                            컬럼 로드
                          </Button>
                        </div>

                        {entityDisplayConfigs[column.columnName] && (
                          <div className="space-y-3">
                            {/* 구분자 설정 */}
                            <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-7 text-xs"
                                placeholder=" - "
                              />
                            </div>

                            {/* 기본 테이블 컬럼 */}
                            <div className="space-y-1">
                              <Label className="text-xs text-blue-600">
                                기본 테이블: {column.entityDisplayConfig?.sourceTable}
                              </Label>
                              <div className="grid max-h-20 grid-cols-2 gap-1 overflow-y-auto">
                                {entityDisplayConfigs[column.columnName].sourceColumns.map((col) => (
                                  <div key={col.columnName} className="flex items-center space-x-1">
                                    <Checkbox
                                      id={`source-${column.columnName}-${col.columnName}`}
                                      checked={entityDisplayConfigs[column.columnName].selectedColumns.includes(
                                        col.columnName,
                                      )}
                                      onCheckedChange={() =>
                                        toggleEntityDisplayColumn(column.columnName, col.columnName)
                                      }
                                      className="h-3 w-3"
                                    />
                                    <Label
                                      htmlFor={`source-${column.columnName}-${col.columnName}`}
                                      className="flex-1 cursor-pointer text-xs"
                                    >
                                      {col.displayName}
                                    </Label>
                                  </div>
                                ))}
                              </div>
                            </div>

                            {/* 조인 테이블 컬럼 */}
                            <div className="space-y-1">
                              <Label className="text-xs text-green-600">
                                조인 테이블: {column.entityDisplayConfig?.joinTable}
                              </Label>
                              <div className="grid max-h-20 grid-cols-2 gap-1 overflow-y-auto">
                                {entityDisplayConfigs[column.columnName].joinColumns.map((col) => (
                                  <div key={col.columnName} className="flex items-center space-x-1">
                                    <Checkbox
                                      id={`join-${column.columnName}-${col.columnName}`}
                                      checked={entityDisplayConfigs[column.columnName].selectedColumns.includes(
                                        col.columnName,
                                      )}
                                      onCheckedChange={() =>
                                        toggleEntityDisplayColumn(column.columnName, col.columnName)
                                      }
                                      className="h-3 w-3"
                                    />
                                    <Label
                                      htmlFor={`join-${column.columnName}-${col.columnName}`}
                                      className="flex-1 cursor-pointer text-xs"
                                    >
                                      {col.displayName}
                                    </Label>
                                  </div>
                                ))}
                              </div>
                            </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>
                    ))}
                </CardContent>
              </Card>
            )}

            {!screenTableName ? (
              <Card>
                <CardContent className="pt-6">
                  <div className="text-center text-gray-500">
                    <p>테이블이 연결되지 않았습니다.</p>
                    <p className="text-sm">화면에 테이블을 연결한 후 컬럼을 설정할 수 있습니다.</p>
                  </div>
                </CardContent>
              </Card>
            ) : availableColumns.length === 0 ? (
              <Card>
                <CardContent className="pt-6">
                  <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>
                </CardContent>
              </Card>
            ) : (
              <>
                <Card>
                  <CardHeader>
                    <CardTitle className="text-base">컬럼 추가 - {screenTableName}</CardTitle>
                    <CardDescription>
                      {availableColumns.length > 0
                        ? `${availableColumns.length}개의 사용 가능한 컬럼에서 선택하세요`
                        : "컬럼 정보를 불러오는 중..."}
                    </CardDescription>
                  </CardHeader>
                  <CardContent>
                    {availableColumns.length > 0 ? (
                      <div className="flex flex-wrap gap-2">
                        {availableColumns
                          .filter((col) => !config.columns?.find((c) => c.columnName === col.columnName))
                          .map((column) => (
                            <Button
                              key={column.columnName}
                              variant="outline"
                              size="sm"
                              onClick={() => addColumn(column.columnName)}
                              className="flex items-center gap-1"
                            >
                              <Plus className="h-3 w-3" />
                              {column.label || column.columnName}
                              <Badge variant="secondary" className="text-xs">
                                {column.dataType}
                              </Badge>
                            </Button>
                          ))}
                      </div>
                    ) : (
                      <div className="py-4 text-center text-gray-500">
                        <p>컬럼 정보를 불러오는 중입니다...</p>
                      </div>
                    )}
                  </CardContent>
                </Card>
              </>
            )}

            {screenTableName && (
              <Card>
                <CardHeader>
                  <CardTitle className="text-base">컬럼 설정</CardTitle>
                  <CardDescription>선택된 컬럼들의 표시 옵션을 설정하세요</CardDescription>
                </CardHeader>
                <CardContent>
                  <ScrollArea className="h-96">
                    <div className="space-y-3">
                      {config.columns?.map((column, index) => (
                        <div key={column.columnName} className="space-y-3 rounded-lg border p-3">
                          <div className="flex items-center justify-between">
                            <div className="flex items-center space-x-2">
                              <Checkbox
                                checked={column.visible}
                                onCheckedChange={(checked) =>
                                  updateColumn(column.columnName, { visible: checked as boolean })
                                }
                              />
                              <span className="font-medium">
                                {availableColumns.find((col) => col.columnName === column.columnName)?.label ||
                                  column.displayName ||
                                  column.columnName}
                              </span>
                            </div>

                            <div className="flex items-center space-x-1">
                              <Button
                                variant="ghost"
                                size="sm"
                                onClick={() => moveColumn(column.columnName, "up")}
                                disabled={index === 0}
                              >
                                <ArrowUp className="h-3 w-3" />
                              </Button>
                              <Button
                                variant="ghost"
                                size="sm"
                                onClick={() => moveColumn(column.columnName, "down")}
                                disabled={index === (config.columns?.length || 0) - 1}
                              >
                                <ArrowDown className="h-3 w-3" />
                              </Button>
                              <Button
                                variant="ghost"
                                size="sm"
                                onClick={() => removeColumn(column.columnName)}
                                className="text-red-500 hover:text-red-600"
                              >
                                <Trash2 className="h-3 w-3" />
                              </Button>
                            </div>
                          </div>

                          {column.visible && (
                            <div className="grid grid-cols-2 gap-3">
                              <div className="space-y-1">
                                <Label className="text-xs">표시명</Label>
                                <Input
                                  value={
                                    availableColumns.find((col) => col.columnName === column.columnName)?.label ||
                                    column.displayName ||
                                    column.columnName
                                  }
                                  onChange={(e) => updateColumn(column.columnName, { displayName: e.target.value })}
                                  className="h-8"
                                />
                              </div>

                              {/* 엔티티 타입 컬럼 표시 */}
                              {column.isEntityJoin && (
                                <div className="col-span-2">
                                  <div className="flex items-center gap-2 rounded bg-orange-50 p-2">
                                    <Badge variant="outline" className="border-orange-300 text-orange-600">
                                      엔티티 타입
                                    </Badge>
                                    <span className="text-xs text-orange-600">
                                      표시 컬럼 설정은 상단의 "🎯 엔티티 컬럼 표시 설정" 섹션에서 하세요
                                    </span>
                                  </div>
                                </div>
                              )}

                              <div className="space-y-1">
                                <Label className="text-xs">정렬</Label>
                                <Select
                                  value={column.align}
                                  onValueChange={(value: "left" | "center" | "right") =>
                                    updateColumn(column.columnName, { align: value })
                                  }
                                >
                                  <SelectTrigger className="h-8">
                                    <SelectValue />
                                  </SelectTrigger>
                                  <SelectContent>
                                    <SelectItem value="left">왼쪽</SelectItem>
                                    <SelectItem value="center">가운데</SelectItem>
                                    <SelectItem value="right">오른쪽</SelectItem>
                                  </SelectContent>
                                </Select>
                              </div>

                              <div className="space-y-1">
                                <Label className="text-xs">형식</Label>
                                <Select
                                  value={column.format}
                                  onValueChange={(value: "text" | "number" | "date" | "currency" | "boolean") =>
                                    updateColumn(column.columnName, { format: value })
                                  }
                                >
                                  <SelectTrigger className="h-8">
                                    <SelectValue />
                                  </SelectTrigger>
                                  <SelectContent>
                                    <SelectItem value="text">텍스트</SelectItem>
                                    <SelectItem value="number">숫자</SelectItem>
                                    <SelectItem value="date">날짜</SelectItem>
                                    <SelectItem value="currency">통화</SelectItem>
                                    <SelectItem value="boolean">불린</SelectItem>
                                  </SelectContent>
                                </Select>
                              </div>

                              <div className="space-y-1">
                                <Label className="text-xs">너비 (px)</Label>
                                <Input
                                  type="number"
                                  value={column.width || ""}
                                  onChange={(e) =>
                                    updateColumn(column.columnName, {
                                      width: e.target.value ? parseInt(e.target.value) : undefined,
                                    })
                                  }
                                  placeholder="자동"
                                  className="h-8"
                                />
                              </div>

                              <div className="space-y-1">
                                <Label className="text-xs">컬럼 고정</Label>
                                <Select
                                  value={column.fixed === false ? "none" : column.fixed || "none"}
                                  onValueChange={(value: string) => {
                                    const fixedValue = value === "none" ? false : (value as "left" | "right");
                                    updateColumn(column.columnName, {
                                      fixed: fixedValue,
                                      fixedOrder: fixedValue ? column.fixedOrder || 0 : undefined,
                                    });
                                  }}
                                >
                                  <SelectTrigger className="h-8">
                                    <SelectValue />
                                  </SelectTrigger>
                                  <SelectContent>
                                    <SelectItem value="none">고정 안함</SelectItem>
                                    <SelectItem value="left">왼쪽 고정</SelectItem>
                                    <SelectItem value="right">오른쪽 고정</SelectItem>
                                  </SelectContent>
                                </Select>
                              </div>

                              {(column.fixed === "left" || column.fixed === "right") && (
                                <div className="space-y-1">
                                  <Label className="text-xs">고정 순서</Label>
                                  <Input
                                    type="number"
                                    value={column.fixedOrder || 0}
                                    onChange={(e) =>
                                      updateColumn(column.columnName, {
                                        fixedOrder: parseInt(e.target.value) || 0,
                                      })
                                    }
                                    placeholder="0"
                                    className="h-8"
                                    min="0"
                                  />
                                </div>
                              )}

                              <div className="flex items-center space-x-4">
                                <div className="flex items-center space-x-1">
                                  <Checkbox
                                    checked={column.sortable}
                                    onCheckedChange={(checked) =>
                                      updateColumn(column.columnName, { sortable: checked as boolean })
                                    }
                                  />
                                  <Label className="text-xs">정렬 가능</Label>
                                </div>
                                <div className="flex items-center space-x-1">
                                  <Checkbox
                                    checked={column.searchable}
                                    onCheckedChange={(checked) =>
                                      updateColumn(column.columnName, { searchable: checked as boolean })
                                    }
                                  />
                                  <Label className="text-xs">검색 가능</Label>
                                </div>
                              </div>
                            </div>
                          )}
                        </div>
                      ))}
                    </div>
                  </ScrollArea>
                </CardContent>
              </Card>
            )}
          </ScrollArea>
        </TabsContent>

        {/* Entity 조인 컬럼 추가 탭 */}
        <TabsContent value="join-columns" className="space-y-4">
          <ScrollArea className="h-[600px] pr-4">
            <Card>
              <CardHeader>
                <CardTitle className="text-base">Entity 조인 컬럼 추가</CardTitle>
                <CardDescription>Entity 조인된 테이블의 다른 컬럼들을 추가로 표시할 수 있습니다.</CardDescription>
              </CardHeader>
              <CardContent className="space-y-4">
                <ScrollArea className="max-h-96 pr-4">
                  {loadingEntityJoins ? (
                    <div className="text-muted-foreground py-4 text-center">조인 정보를 가져오는 중...</div>
                  ) : entityJoinColumns.joinTables.length === 0 ? (
                    <div className="text-muted-foreground py-8 text-center">
                      <div className="text-sm">Entity 조인이 설정된 컬럼이 없습니다.</div>
                      <div className="mt-1 text-xs">
                        먼저 컬럼의 웹타입을 'entity'로 설정하고 참조 테이블을 지정해주세요.
                      </div>
                    </div>
                  ) : (
                    <div className="space-y-4">
                      {/* 조인 테이블별 그룹 */}
                      {entityJoinColumns.joinTables.map((joinTable, tableIndex) => (
                        <Card key={tableIndex} className="border-l-4 border-l-blue-500">
                          <CardHeader className="pb-3">
                            <CardTitle className="flex items-center gap-2 text-sm">
                              📊 {joinTable.tableName}
                              <Badge variant="outline" className="text-xs">
                                현재: {joinTable.currentDisplayColumn}
                              </Badge>
                            </CardTitle>
                          </CardHeader>
                          <CardContent className="pt-0">
                            {joinTable.availableColumns.length === 0 ? (
                              <div className="text-muted-foreground py-2 text-sm">추가할 수 있는 컬럼이 없습니다.</div>
                            ) : (
                              <div className="grid gap-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,
                                  );

                                  return (
                                    <div
                                      key={colIndex}
                                      className="flex items-center justify-between rounded border p-2"
                                    >
                                      <div className="flex-1">
                                        <div className="text-sm font-medium">{column.columnLabel}</div>
                                        <div className="text-muted-foreground text-xs">
                                          {column.columnName} ({column.dataType})
                                        </div>
                                        {column.description && (
                                          <div className="text-muted-foreground mt-1 text-xs">{column.description}</div>
                                        )}
                                      </div>
                                      <div className="flex items-center gap-2">
                                        {isAlreadyAdded ? (
                                          <Badge variant="secondary" className="text-xs">
                                            추가됨
                                          </Badge>
                                        ) : (
                                          matchingJoinColumn && (
                                            <Button
                                              size="sm"
                                              variant="outline"
                                              onClick={() => addEntityColumn(matchingJoinColumn)}
                                              className="text-xs"
                                            >
                                              <Plus className="mr-1 h-3 w-3" />
                                              추가
                                            </Button>
                                          )
                                        )}
                                      </div>
                                    </div>
                                  );
                                })}
                              </div>
                            )}
                          </CardContent>
                        </Card>
                      ))}

                      {/* 전체 사용 가능한 컬럼 요약 */}
                      {entityJoinColumns.availableColumns.length > 0 && (
                        <Card className="bg-muted/30">
                          <CardHeader className="pb-3">
                            <CardTitle className="text-sm">📋 추가 가능한 컬럼 요약</CardTitle>
                          </CardHeader>
                          <CardContent className="pt-0">
                            <div className="text-muted-foreground mb-2 text-sm">
                              총 {entityJoinColumns.availableColumns.length}개의 컬럼을 추가할 수 있습니다.
                            </div>
                            <div className="flex flex-wrap gap-1">
                              {entityJoinColumns.availableColumns.map((column, index) => {
                                const isAlreadyAdded = config.columns?.some(
                                  (col) => col.columnName === column.joinAlias,
                                );

                                return (
                                  <Badge
                                    key={index}
                                    variant={isAlreadyAdded ? "secondary" : "outline"}
                                    className="cursor-pointer text-xs"
                                    onClick={() => !isAlreadyAdded && addEntityColumn(column)}
                                  >
                                    {column.columnLabel}
                                    {!isAlreadyAdded && <Plus className="ml-1 h-2 w-2" />}
                                  </Badge>
                                );
                              })}
                            </div>
                          </CardContent>
                        </Card>
                      )}
                    </div>
                  )}
                </ScrollArea>
              </CardContent>
            </Card>
          </ScrollArea>
        </TabsContent>

        {/* 필터 설정 탭 */}
        <TabsContent value="filter" className="space-y-4">
          <ScrollArea className="h-[600px] pr-4">
            {/* 필터 기능 활성화 */}
            <Card>
              <CardHeader>
                <CardTitle className="text-base">필터 설정</CardTitle>
                <CardDescription>테이블에서 사용할 검색 필터를 설정하세요</CardDescription>
              </CardHeader>
              <CardContent className="space-y-4">
                <div className="flex items-center space-x-2">
                  <Checkbox
                    id="filterEnabled"
                    checked={config.filter?.enabled || false}
                    onCheckedChange={(checked) => handleNestedChange("filter", "enabled", checked)}
                  />
                  <Label htmlFor="filterEnabled">필터 기능 사용</Label>
                </div>
              </CardContent>
            </Card>

            {/* 필터 목록 */}
            {config.filter?.enabled && (
              <Card>
                <CardHeader>
                  <CardTitle className="text-base">사용할 필터</CardTitle>
                  <CardDescription>검색에 사용할 컬럼 필터를 추가하고 설정하세요</CardDescription>
                </CardHeader>
                <CardContent className="space-y-4">
                  {/* 필터 추가 버튼 */}
                  {availableColumns.length > 0 && (
                    <div className="flex flex-wrap gap-2">
                      {availableColumns
                        .filter((col) => !config.filter?.filters?.find((f) => f.columnName === col.columnName))
                        .map((column) => (
                          <Button
                            key={column.columnName}
                            variant="outline"
                            size="sm"
                            onClick={() => addFilter(column.columnName)}
                            className="flex items-center gap-1"
                          >
                            <Plus className="h-3 w-3" />
                            {column.label || column.columnName}
                            <Badge variant="secondary" className="text-xs">
                              {column.dataType}
                            </Badge>
                          </Button>
                        ))}
                    </div>
                  )}

                  {/* 설정된 필터 목록 */}
                  {config.filter?.filters && config.filter.filters.length > 0 && (
                    <div className="space-y-3">
                      <h4 className="text-sm font-medium">설정된 필터</h4>
                      {config.filter.filters.map((filter, index) => (
                        <div key={filter.columnName} className="space-y-3 rounded-lg border p-4">
                          <div className="flex items-center justify-between">
                            <div className="flex items-center gap-2">
                              <Badge variant="outline">{filter.widgetType}</Badge>
                              <span className="font-medium">{filter.label}</span>
                            </div>
                            <Button
                              variant="outline"
                              size="sm"
                              onClick={() => removeFilter(index)}
                              className="text-red-600 hover:text-red-700"
                            >
                              <Trash2 className="h-3 w-3" />
                            </Button>
                          </div>

                          <div className="grid grid-cols-2 gap-3">
                            <div>
                              <Label className="text-xs">표시명</Label>
                              <Input
                                value={filter.label}
                                onChange={(e) => updateFilter(index, "label", e.target.value)}
                                placeholder="필터 라벨"
                              />
                            </div>
                            <div>
                              <Label className="text-xs">그리드 컬럼</Label>
                              <Select
                                value={filter.gridColumns.toString()}
                                onValueChange={(value) => updateFilter(index, "gridColumns", parseInt(value))}
                              >
                                <SelectTrigger>
                                  <SelectValue />
                                </SelectTrigger>
                                <SelectContent>
                                  <SelectItem value="2">2칸</SelectItem>
                                  <SelectItem value="3">3칸</SelectItem>
                                  <SelectItem value="4">4칸</SelectItem>
                                  <SelectItem value="6">6칸</SelectItem>
                                </SelectContent>
                              </Select>
                            </div>

                            {/* 숫자 타입인 경우 검색 모드 선택 */}
                            {(filter.widgetType === "number" || filter.widgetType === "decimal") && (
                              <div>
                                <Label className="text-xs">검색 모드</Label>
                                <Select
                                  value={filter.numberFilterMode || "range"}
                                  onValueChange={(value) => updateFilter(index, "numberFilterMode", value)}
                                >
                                  <SelectTrigger>
                                    <SelectValue />
                                  </SelectTrigger>
                                  <SelectContent>
                                    <SelectItem value="exact">정확한 값</SelectItem>
                                    <SelectItem value="range">범위 검색</SelectItem>
                                  </SelectContent>
                                </Select>
                              </div>
                            )}

                            {/* 코드 타입인 경우 코드 카테고리 */}
                            {filter.widgetType === "code" && (
                              <div>
                                <Label className="text-xs">코드 카테고리</Label>
                                <Input
                                  value={filter.codeCategory || ""}
                                  onChange={(e) => updateFilter(index, "codeCategory", e.target.value)}
                                  placeholder="코드 카테고리"
                                />
                              </div>
                            )}
                          </div>
                        </div>
                      ))}
                    </div>
                  )}
                </CardContent>
              </Card>
            )}
          </ScrollArea>
        </TabsContent>

        {/* 액션 설정 탭 */}
        <TabsContent value="actions" className="space-y-4">
          <ScrollArea className="h-[600px] pr-4">
            <Card>
              <CardHeader>
                <CardTitle className="text-base">행 액션</CardTitle>
              </CardHeader>
              <CardContent className="space-y-4">
                <div className="flex items-center space-x-2">
                  <Checkbox
                    id="showActions"
                    checked={config.actions?.showActions}
                    onCheckedChange={(checked) => handleNestedChange("actions", "showActions", checked)}
                  />
                  <Label htmlFor="showActions">행 액션 버튼 표시</Label>
                </div>

                <div className="flex items-center space-x-2">
                  <Checkbox
                    id="bulkActions"
                    checked={config.actions?.bulkActions}
                    onCheckedChange={(checked) => handleNestedChange("actions", "bulkActions", checked)}
                  />
                  <Label htmlFor="bulkActions">일괄 액션 사용</Label>
                </div>
              </CardContent>
            </Card>
          </ScrollArea>
        </TabsContent>

        {/* 스타일 설정 탭 */}
        <TabsContent value="style" className="space-y-4">
          <ScrollArea className="h-[600px] pr-4">
            <Card>
              <CardHeader>
                <CardTitle className="text-base">테이블 스타일</CardTitle>
              </CardHeader>
              <CardContent className="space-y-4">
                <div className="space-y-2">
                  <Label>테마</Label>
                  <Select
                    value={config.tableStyle?.theme}
                    onValueChange={(value: "default" | "striped" | "bordered" | "minimal") =>
                      handleNestedChange("tableStyle", "theme", value)
                    }
                  >
                    <SelectTrigger>
                      <SelectValue />
                    </SelectTrigger>
                    <SelectContent>
                      <SelectItem value="default">기본</SelectItem>
                      <SelectItem value="striped">줄무늬</SelectItem>
                      <SelectItem value="bordered">테두리</SelectItem>
                      <SelectItem value="minimal">미니멀</SelectItem>
                    </SelectContent>
                  </Select>
                </div>

                <div className="space-y-2">
                  <Label>행 높이</Label>
                  <Select
                    value={config.tableStyle?.rowHeight}
                    onValueChange={(value: "compact" | "normal" | "comfortable") =>
                      handleNestedChange("tableStyle", "rowHeight", value)
                    }
                  >
                    <SelectTrigger>
                      <SelectValue />
                    </SelectTrigger>
                    <SelectContent>
                      <SelectItem value="compact">좁음</SelectItem>
                      <SelectItem value="normal">보통</SelectItem>
                      <SelectItem value="comfortable">넓음</SelectItem>
                    </SelectContent>
                  </Select>
                </div>

                <div className="flex items-center space-x-2">
                  <Checkbox
                    id="alternateRows"
                    checked={config.tableStyle?.alternateRows}
                    onCheckedChange={(checked) => handleNestedChange("tableStyle", "alternateRows", checked)}
                  />
                  <Label htmlFor="alternateRows">교대로 행 색상 변경</Label>
                </div>

                <div className="flex items-center space-x-2">
                  <Checkbox
                    id="hoverEffect"
                    checked={config.tableStyle?.hoverEffect}
                    onCheckedChange={(checked) => handleNestedChange("tableStyle", "hoverEffect", checked)}
                  />
                  <Label htmlFor="hoverEffect">마우스 오버 효과</Label>
                </div>

                <div className="flex items-center space-x-2">
                  <Checkbox
                    id="stickyHeader"
                    checked={config.stickyHeader}
                    onCheckedChange={(checked) => handleChange("stickyHeader", checked)}
                  />
                  <Label htmlFor="stickyHeader">헤더 고정</Label>
                </div>
              </CardContent>
            </Card>
          </ScrollArea>
        </TabsContent>
      </Tabs>
    </div>
  );
};