"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 { Separator } from "@/components/ui/separator";
import { TableListConfig, ColumnConfig } from "./types";
import { entityJoinApi } from "@/lib/api/entityJoin";
import {
  Plus,
  Trash2,
  ArrowUp,
  ArrowDown,
  Eye,
  EyeOff,
  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, screenTableName, tableColumns });

  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);

  // 화면 테이블명이 있으면 자동으로 설정
  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 {
        const response = await fetch("/api/tables");
        if (response.ok) {
          const result = await response.json();
          if (result.success && result.data) {
            setAvailableTables(
              result.data.map((table: any) => ({
                tableName: table.tableName,
                displayName: table.displayName || table.tableName,
              })),
            );
          }
        }
      } catch (error) {
        console.error("테이블 목록 가져오기 실패:", error);
      } finally {
        setLoadingTables(false);
      }
    };

    fetchTables();
  }, []);

  // 선택된 테이블의 컬럼 목록 설정 (tableColumns prop 우선 사용)
  useEffect(() => {
    console.log("🔍 useEffect 실행됨 - tableColumns:", tableColumns, "length:", tableColumns?.length);
    if (tableColumns && tableColumns.length > 0) {
      // tableColumns prop이 있으면 사용
      console.log("🔧 tableColumns prop 사용:", tableColumns);
      console.log("🔧 첫 번째 컬럼 상세:", tableColumns[0]);
      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);
      console.log("🏷️ 첫 번째 mappedColumn:", mappedColumns[0]);
      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]);

  // 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) => {
    const parentValue = config[parentKey] as any;
    onChange({
      [parentKey]: {
        ...parentValue,
        [childKey]: value,
      },
    });
  };

  // 컬럼 추가
  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]);
  };

  // Entity 조인 컬럼 추가
  const addEntityJoinColumn = (joinColumn: (typeof entityJoinColumns.availableColumns)[0]) => {
    const existingColumn = config.columns?.find((col) => col.columnName === joinColumn.joinAlias);
    if (existingColumn) return;

    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: true, // Entity 조인 컬럼임을 표시
      entityJoinInfo: {
        sourceTable: joinColumn.tableName,
        sourceColumn: joinColumn.columnName,
        joinAlias: joinColumn.joinAlias,
      },
    };

    handleChange("columns", [...(config.columns || []), newColumn]);
    console.log("🔗 Entity 조인 컬럼 추가됨:", 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);
  };

  // 컬럼 순서 변경
  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);
  };

  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">
          <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>
        </TabsContent>

        {/* 컬럼 설정 탭 */}
        <TabsContent value="columns" className="space-y-4">
          {!screenTableName ? (
            <Card>
              <CardContent className="pt-6">
                <div className="text-center text-gray-500">
                  <p>테이블이 연결되지 않았습니다.</p>
                  <p className="text-sm">화면에 테이블을 연결한 후 컬럼을 설정할 수 있습니다.</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-64">
                  <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>

                            <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="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>
          )}
        </TabsContent>

        {/* Entity 조인 컬럼 추가 탭 */}
        <TabsContent value="join-columns" className="space-y-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={() => addEntityJoinColumn(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 && addEntityJoinColumn(column)}
                                >
                                  {column.columnLabel}
                                  {!isAlreadyAdded && <Plus className="ml-1 h-2 w-2" />}
                                </Badge>
                              );
                            })}
                          </div>
                        </CardContent>
                      </Card>
                    )}
                  </div>
                )}
              </ScrollArea>
            </CardContent>
          </Card>
        </TabsContent>

        {/* 필터 설정 탭 */}
        <TabsContent value="filter" className="space-y-4">
          <Card>
            <CardHeader>
              <CardTitle className="text-base">검색 및 필터</CardTitle>
            </CardHeader>
            <CardContent className="space-y-4">
              <div className="flex items-center space-x-2">
                <Checkbox
                  id="filterEnabled"
                  checked={config.filter?.enabled}
                  onCheckedChange={(checked) => handleNestedChange("filter", "enabled", checked)}
                />
                <Label htmlFor="filterEnabled">필터 기능 사용</Label>
              </div>

              {config.filter?.enabled && (
                <>
                  <div className="flex items-center space-x-2">
                    <Checkbox
                      id="quickSearch"
                      checked={config.filter?.quickSearch}
                      onCheckedChange={(checked) => handleNestedChange("filter", "quickSearch", checked)}
                    />
                    <Label htmlFor="quickSearch">빠른 검색</Label>
                  </div>

                  {config.filter?.quickSearch && (
                    <div className="ml-6 flex items-center space-x-2">
                      <Checkbox
                        id="showColumnSelector"
                        checked={config.filter?.showColumnSelector}
                        onCheckedChange={(checked) => handleNestedChange("filter", "showColumnSelector", checked)}
                      />
                      <Label htmlFor="showColumnSelector">검색 컬럼 선택기 표시</Label>
                    </div>
                  )}

                  <div className="flex items-center space-x-2">
                    <Checkbox
                      id="advancedFilter"
                      checked={config.filter?.advancedFilter}
                      onCheckedChange={(checked) => handleNestedChange("filter", "advancedFilter", checked)}
                    />
                    <Label htmlFor="advancedFilter">고급 필터</Label>
                  </div>
                </>
              )}
            </CardContent>
          </Card>
        </TabsContent>

        {/* 액션 설정 탭 */}
        <TabsContent value="actions" className="space-y-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>
        </TabsContent>

        {/* 스타일 설정 탭 */}
        <TabsContent value="style" className="space-y-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>
        </TabsContent>
      </Tabs>
    </div>
  );
};
