"use client";

import { useState, useCallback, useEffect, useMemo } from "react";
import { Button } from "@/components/ui/button";
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
import { Separator } from "@/components/ui/separator";

import {
  Palette,
  Grid3X3,
  Type,
  Calendar,
  Hash,
  CheckSquare,
  Radio,
  Save,
  Undo,
  Redo,
  Group,
  Database,
  Trash2,
  Settings,
  ChevronDown,
  Code,
  Building,
  File,
  List,
  AlignLeft,
  ChevronRight,
} from "lucide-react";
import {
  ScreenDefinition,
  ComponentData,
  LayoutData,
  GroupState,
  WebType,
  TableInfo,
  GroupComponent,
} from "@/types/screen";
import { generateComponentId } from "@/lib/utils/generateId";
import {
  createGroupComponent,
  calculateBoundingBox,
  calculateRelativePositions,
  restoreAbsolutePositions,
  getGroupChildren,
} from "@/lib/utils/groupingUtils";
import { GroupingToolbar } from "./GroupingToolbar";

import StyleEditor from "./StyleEditor";
import { Label } from "@/components/ui/label";
import { Input } from "@/components/ui/input";
import { Badge } from "@/components/ui/badge";
import { RealtimePreview } from "./RealtimePreview";

interface ScreenDesignerProps {
  selectedScreen: ScreenDefinition | null;
  onBackToList: () => void;
}

interface ComponentMoveState {
  isMoving: boolean;
  movingComponent: ComponentData | null;
  originalPosition: { x: number; y: number };
  currentPosition: { x: number; y: number };
}

export default function ScreenDesigner({ selectedScreen, onBackToList }: ScreenDesignerProps) {
  const [layout, setLayout] = useState<LayoutData>({
    components: [],
    gridSettings: { columns: 12, gap: 16, padding: 16 },
  });
  const [selectedComponent, setSelectedComponent] = useState<ComponentData | null>(null);

  // 실행취소/다시실행을 위한 히스토리 상태
  const [history, setHistory] = useState<LayoutData[]>([
    {
      components: [],
      gridSettings: { columns: 12, gap: 16, padding: 16 },
    },
  ]);
  const [historyIndex, setHistoryIndex] = useState(0);

  // 히스토리에 상태 저장
  const saveToHistory = useCallback(
    (newLayout: LayoutData) => {
      setHistory((prevHistory) => {
        const newHistory = prevHistory.slice(0, historyIndex + 1);
        newHistory.push(JSON.parse(JSON.stringify(newLayout))); // 깊은 복사
        return newHistory.slice(-50); // 최대 50개 히스토리 유지
      });
      setHistoryIndex((prevIndex) => Math.min(prevIndex + 1, 49));
    },
    [historyIndex],
  );

  // 실행취소
  const undo = useCallback(() => {
    if (historyIndex > 0) {
      const newIndex = historyIndex - 1;
      setHistoryIndex(newIndex);
      setLayout(JSON.parse(JSON.stringify(history[newIndex])));
      setSelectedComponent(null); // 선택 해제
    }
  }, [historyIndex, history]);

  // 다시실행
  const redo = useCallback(() => {
    if (historyIndex < history.length - 1) {
      const newIndex = historyIndex + 1;
      setHistoryIndex(newIndex);
      setLayout(JSON.parse(JSON.stringify(history[newIndex])));
      setSelectedComponent(null); // 선택 해제
    }
  }, [historyIndex, history]);

  // 키보드 단축키 지원
  useEffect(() => {
    const handleKeyDown = (e: KeyboardEvent) => {
      if (e.ctrlKey || e.metaKey) {
        switch (e.key) {
          case "z":
            e.preventDefault();
            if (e.shiftKey) {
              redo(); // Ctrl+Shift+Z 또는 Cmd+Shift+Z
            } else {
              undo(); // Ctrl+Z 또는 Cmd+Z
            }
            break;
          case "y":
            e.preventDefault();
            redo(); // Ctrl+Y 또는 Cmd+Y
            break;
        }
      }
    };

    window.addEventListener("keydown", handleKeyDown);
    return () => window.removeEventListener("keydown", handleKeyDown);
  }, [undo, redo]);

  const [dragState, setDragState] = useState({
    isDragging: false,
    draggedComponent: null as ComponentData | null,
    originalPosition: { x: 0, y: 0 },
    currentPosition: { x: 0, y: 0 },
  });
  const [groupState, setGroupState] = useState<GroupState>({
    isGrouping: false,
    selectedComponents: [],
    groupTarget: null,
    groupMode: "create",
  });

  const [tables, setTables] = useState<TableInfo[]>([]);
  const [expandedTables, setExpandedTables] = useState<Set<string>>(new Set());

  // 테이블 검색 및 페이징 상태 추가
  const [searchTerm, setSearchTerm] = useState("");
  const [currentPage, setCurrentPage] = useState(1);
  const [itemsPerPage] = useState(10);

  // 테이블 데이터 로드 (실제로는 API에서 가져와야 함)
  useEffect(() => {
    const fetchTables = async () => {
      try {
        const response = await fetch("http://localhost:8080/api/screen-management/tables", {
          headers: {
            Authorization: `Bearer ${localStorage.getItem("authToken")}`,
          },
        });

        if (response.ok) {
          const data = await response.json();
          if (data.success) {
            setTables(data.data);
          } else {
            console.error("테이블 조회 실패:", data.message);
            // 임시 데이터로 폴백
            setTables(getMockTables());
          }
        } else {
          console.error("테이블 조회 실패:", response.status);
          // 임시 데이터로 폴백
          setTables(getMockTables());
        }
      } catch (error) {
        console.error("테이블 조회 중 오류:", error);
        // 임시 데이터로 폴백
        setTables(getMockTables());
      }
    };

    fetchTables();
  }, []);

  // 검색된 테이블 필터링
  const filteredTables = useMemo(() => {
    if (!searchTerm.trim()) return tables;

    return tables.filter(
      (table) =>
        table.tableName.toLowerCase().includes(searchTerm.toLowerCase()) ||
        table.tableLabel.toLowerCase().includes(searchTerm.toLowerCase()) ||
        table.columns.some(
          (column) =>
            column.columnName.toLowerCase().includes(searchTerm.toLowerCase()) ||
            (column.columnLabel || column.columnName).toLowerCase().includes(searchTerm.toLowerCase()),
        ),
    );
  }, [tables, searchTerm]);

  // 페이징된 테이블
  const paginatedTables = useMemo(() => {
    const startIndex = (currentPage - 1) * itemsPerPage;
    const endIndex = startIndex + itemsPerPage;
    return filteredTables.slice(startIndex, endIndex);
  }, [filteredTables, currentPage, itemsPerPage]);

  // 총 페이지 수 계산
  const totalPages = Math.ceil(filteredTables.length / itemsPerPage);

  // 페이지 변경 핸들러
  const handlePageChange = (page: number) => {
    setCurrentPage(page);
    setExpandedTables(new Set()); // 페이지 변경 시 확장 상태 초기화
  };

  // 검색어 변경 핸들러
  const handleSearchChange = (value: string) => {
    setSearchTerm(value);
    setCurrentPage(1); // 검색 시 첫 페이지로 이동
    setExpandedTables(new Set()); // 검색 시 확장 상태 초기화
  };

  // 임시 테이블 데이터 (API 실패 시 사용)
  const getMockTables = (): TableInfo[] => [
    {
      tableName: "user_info",
      tableLabel: "사용자 정보",
      columns: [
        {
          tableName: "user_info",
          columnName: "user_id",
          columnLabel: "사용자 ID",
          webType: "text",
          dataType: "VARCHAR",
          isNullable: "NO",
        },
        {
          tableName: "user_info",
          columnName: "user_name",
          columnLabel: "사용자명",
          webType: "text",
          dataType: "VARCHAR",
          isNullable: "NO",
        },
        {
          tableName: "user_info",
          columnName: "email",
          columnLabel: "이메일",
          webType: "email",
          dataType: "VARCHAR",
          isNullable: "YES",
        },
        {
          tableName: "user_info",
          columnName: "phone",
          columnLabel: "전화번호",
          webType: "tel",
          dataType: "VARCHAR",
          isNullable: "YES",
        },
        {
          tableName: "user_info",
          columnName: "birth_date",
          columnLabel: "생년월일",
          webType: "date",
          dataType: "DATE",
          isNullable: "YES",
        },
        {
          tableName: "user_info",
          columnName: "is_active",
          columnLabel: "활성화",
          webType: "checkbox",
          dataType: "BOOLEAN",
          isNullable: "NO",
        },
        {
          tableName: "user_info",
          columnName: "profile_code",
          columnLabel: "프로필 코드",
          webType: "code",
          dataType: "TEXT",
          isNullable: "YES",
        },
        {
          tableName: "user_info",
          columnName: "department",
          columnLabel: "부서",
          webType: "entity",
          dataType: "VARCHAR",
          isNullable: "YES",
        },
        {
          tableName: "user_info",
          columnName: "profile_image",
          columnLabel: "프로필 이미지",
          webType: "file",
          dataType: "VARCHAR",
          isNullable: "YES",
        },
      ],
    },
    {
      tableName: "product_info",
      tableLabel: "제품 정보",
      columns: [
        {
          tableName: "product_info",
          columnName: "product_id",
          columnLabel: "제품 ID",
          webType: "text",
          dataType: "VARCHAR",
          isNullable: "NO",
        },
        {
          tableName: "product_info",
          columnName: "product_name",
          columnLabel: "제품명",
          webType: "text",
          dataType: "VARCHAR",
          isNullable: "NO",
        },
        {
          tableName: "product_info",
          columnName: "category",
          columnLabel: "카테고리",
          webType: "select",
          dataType: "VARCHAR",
          isNullable: "YES",
        },
        {
          tableName: "product_info",
          columnName: "price",
          columnLabel: "가격",
          webType: "number",
          dataType: "DECIMAL",
          isNullable: "YES",
        },
        {
          tableName: "product_info",
          columnName: "description",
          columnLabel: "설명",
          webType: "textarea",
          dataType: "TEXT",
          isNullable: "YES",
        },
        {
          tableName: "product_info",
          columnName: "created_date",
          columnLabel: "생성일",
          webType: "date",
          dataType: "TIMESTAMP",
          isNullable: "NO",
        },
      ],
    },
    {
      tableName: "order_info",
      tableLabel: "주문 정보",
      columns: [
        {
          tableName: "order_info",
          columnName: "order_id",
          columnLabel: "주문 ID",
          webType: "text",
          dataType: "VARCHAR",
          isNullable: "NO",
        },
        {
          tableName: "order_info",
          columnName: "customer_name",
          columnLabel: "고객명",
          webType: "text",
          dataType: "VARCHAR",
          isNullable: "NO",
        },
        {
          tableName: "order_info",
          columnName: "order_date",
          columnLabel: "주문일",
          webType: "date",
          dataType: "DATE",
          isNullable: "NO",
        },
        {
          tableName: "order_info",
          columnName: "total_amount",
          columnLabel: "총 금액",
          webType: "number",
          dataType: "DECIMAL",
          isNullable: "NO",
        },
        {
          tableName: "order_info",
          columnName: "status",
          columnLabel: "상태",
          webType: "select",
          dataType: "VARCHAR",
          isNullable: "NO",
        },
        {
          tableName: "order_info",
          columnName: "notes",
          columnLabel: "비고",
          webType: "textarea",
          dataType: "TEXT",
          isNullable: "YES",
        },
      ],
    },
  ];

  // 테이블 확장/축소 토글
  const toggleTableExpansion = useCallback((tableName: string) => {
    setExpandedTables((prev) => {
      const newSet = new Set(prev);
      if (newSet.has(tableName)) {
        newSet.delete(tableName);
      } else {
        newSet.add(tableName);
      }
      return newSet;
    });
  }, []);

  // 웹타입에 따른 위젯 타입 매핑
  const getWidgetTypeFromWebType = useCallback((webType: string): string => {
    console.log("getWidgetTypeFromWebType - input webType:", webType);
    switch (webType) {
      case "text":
        return "text";
      case "email":
        return "email";
      case "tel":
        return "tel";
      case "number":
        return "number";
      case "decimal":
        return "decimal";
      case "date":
        return "date";
      case "datetime":
        return "datetime";
      case "select":
        return "select";
      case "dropdown":
        return "dropdown";
      case "textarea":
        return "textarea";
      case "text_area":
        return "text_area";
      case "checkbox":
        return "checkbox";
      case "boolean":
        return "boolean";
      case "radio":
        return "radio";
      case "code":
        return "code";
      case "entity":
        return "entity";
      case "file":
        return "file";
      default:
        console.log("getWidgetTypeFromWebType - default case, returning text for:", webType);
        return "text";
    }
  }, []);

  // 컴포넌트 제거 함수
  const removeComponent = useCallback(
    (componentId: string) => {
      const newLayout = {
        ...layout,
        components: layout.components.filter((comp) => comp.id !== componentId),
      };
      setLayout(newLayout);
      saveToHistory(newLayout);
      if (selectedComponent?.id === componentId) {
        setSelectedComponent(null);
      }
    },
    [layout, selectedComponent, saveToHistory],
  );

  // 컴포넌트 속성 업데이트 함수
  const updateComponentProperty = useCallback(
    (componentId: string, propertyPath: string, value: any) => {
      const newLayout = {
        ...layout,
        components: layout.components.map((comp) => {
          if (comp.id === componentId) {
            const newComp = { ...comp };
            const pathParts = propertyPath.split(".");
            let current: any = newComp;

            for (let i = 0; i < pathParts.length - 1; i++) {
              current = current[pathParts[i]];
            }
            current[pathParts[pathParts.length - 1]] = value;

            return newComp;
          }
          return comp;
        }),
      };
      setLayout(newLayout);
      saveToHistory(newLayout);
    },
    [layout, saveToHistory],
  );

  // 그룹 생성 함수
  const handleGroupCreate = useCallback(
    (componentIds: string[], title: string, style?: any) => {
      const selectedComponents = layout.components.filter((comp) => componentIds.includes(comp.id));

      if (selectedComponents.length < 2) {
        return;
      }

      // 경계 박스 계산
      const boundingBox = calculateBoundingBox(selectedComponents);

      // 그룹 컴포넌트 생성
      const groupComponent = createGroupComponent(
        componentIds,
        title,
        { x: boundingBox.minX, y: boundingBox.minY },
        style,
      );

      // 자식 컴포넌트들의 상대 위치 계산
      const relativeChildren = calculateRelativePositions(selectedComponents, {
        x: boundingBox.minX,
        y: boundingBox.minY,
      });

      // 새 레이아웃 생성
      const newLayout = {
        ...layout,
        components: [
          // 그룹이 아닌 기존 컴포넌트들
          ...layout.components.filter((comp) => !componentIds.includes(comp.id) && comp.type !== "group"),
          // 그룹 컴포넌트
          groupComponent,
          // 상대 위치로 업데이트된 자식 컴포넌트들
          ...relativeChildren,
        ],
      };

      setLayout(newLayout);
      saveToHistory(newLayout);
    },
    [layout, saveToHistory],
  );

  // 그룹 해제 함수
  const handleGroupUngroup = useCallback(
    (groupId: string) => {
      const group = layout.components.find((comp) => comp.id === groupId) as GroupComponent;
      if (!group || group.type !== "group") {
        return;
      }

      const groupChildren = getGroupChildren(layout.components, groupId);

      // 자식 컴포넌트들의 절대 위치 복원
      const absoluteChildren = restoreAbsolutePositions(groupChildren, group.position);

      // 새 레이아웃 생성
      const newLayout = {
        ...layout,
        components: [
          // 그룹이 아닌 기존 컴포넌트들
          ...layout.components.filter((comp) => comp.id !== groupId),
          // 절대 위치로 복원된 자식 컴포넌트들
          ...absoluteChildren,
        ],
      };

      setLayout(newLayout);
      saveToHistory(newLayout);
    },
    [layout, saveToHistory],
  );

  // 레이아웃 저장 함수
  const saveLayout = useCallback(async () => {
    try {
      // TODO: 실제 API 호출로 변경
      console.log("레이아웃 저장:", layout);
      // await saveLayoutAPI(selectedScreen.screenId, layout);
    } catch (error) {
      console.error("레이아웃 저장 실패:", error);
    }
  }, [layout, selectedScreen]);

  // 드래그 시작 (새 컴포넌트 추가)
  const startDrag = useCallback((component: Partial<ComponentData>, e: React.DragEvent) => {
    setDragState({
      isDragging: true,
      draggedComponent: component as ComponentData,
      originalPosition: { x: 0, y: 0 },
      currentPosition: { x: 0, y: 0 },
    });
    e.dataTransfer.setData("application/json", JSON.stringify(component));
  }, []);

  // 기존 컴포넌트 드래그 시작 (재배치)
  const startComponentDrag = useCallback((component: ComponentData, e: React.DragEvent) => {
    e.stopPropagation();
    setDragState({
      isDragging: true,
      draggedComponent: component,
      originalPosition: component.position,
      currentPosition: component.position,
    });
    e.dataTransfer.setData("application/json", JSON.stringify({ ...component, isMoving: true }));
  }, []);

  // 드래그 중
  const onDragOver = useCallback(
    (e: React.DragEvent) => {
      e.preventDefault();
      if (dragState.isDragging) {
        const rect = e.currentTarget.getBoundingClientRect();
        const x = Math.floor((e.clientX - rect.left) / 80) * 80;
        const y = Math.floor((e.clientY - rect.top) / 60) * 60;

        setDragState((prev) => ({
          ...prev,
          currentPosition: { x, y },
        }));
      }
    },
    [dragState.isDragging],
  );

  // 드롭 처리
  const onDrop = useCallback(
    (e: React.DragEvent) => {
      e.preventDefault();

      try {
        const data = JSON.parse(e.dataTransfer.getData("application/json"));

        if (data.isMoving) {
          // 기존 컴포넌트 재배치
          const rect = e.currentTarget.getBoundingClientRect();
          const x = Math.floor((e.clientX - rect.left) / 80) * 80;
          const y = Math.floor((e.clientY - rect.top) / 60) * 60;

          const newLayout = {
            ...layout,
            components: layout.components.map((comp) => (comp.id === data.id ? { ...comp, position: { x, y } } : comp)),
          };
          setLayout(newLayout);
          saveToHistory(newLayout);
        } else {
          // 새 컴포넌트 추가
          const rect = e.currentTarget.getBoundingClientRect();
          const x = Math.floor((e.clientX - rect.left) / 80) * 80;
          const y = Math.floor((e.clientY - rect.top) / 60) * 60;

          const newComponent: ComponentData = {
            ...data,
            id: generateComponentId(),
            position: { x, y },
          } as ComponentData;

          const newLayout = {
            ...layout,
            components: [...layout.components, newComponent],
          };
          setLayout(newLayout);
          saveToHistory(newLayout);
        }
      } catch (error) {
        console.error("드롭 처리 중 오류:", error);
      }

      setDragState({
        isDragging: false,
        draggedComponent: null,
        originalPosition: { x: 0, y: 0 },
        currentPosition: { x: 0, y: 0 },
      });
    },
    [layout, saveToHistory],
  );

  // 드래그 종료
  const endDrag = useCallback(() => {
    setDragState({
      isDragging: false,
      draggedComponent: null,
      originalPosition: { x: 0, y: 0 },
      currentPosition: { x: 0, y: 0 },
    });
  }, []);

  // 컴포넌트 클릭 (선택)
  const handleComponentClick = useCallback(
    (component: ComponentData) => {
      if (groupState.isGrouping) {
        // 그룹화 모드에서는 다중 선택
        const isSelected = groupState.selectedComponents.includes(component.id);
        setGroupState((prev) => ({
          ...prev,
          selectedComponents: isSelected
            ? prev.selectedComponents.filter((id) => id !== component.id)
            : [...prev.selectedComponents, component.id],
        }));
      } else {
        // 일반 모드에서는 단일 선택
        setSelectedComponent(component);
        setGroupState((prev) => ({
          ...prev,
          selectedComponents: [component.id],
        }));
      }
    },
    [groupState.isGrouping],
  );

  // 화면이 선택되지 않았을 때 처리
  if (!selectedScreen) {
    return (
      <div className="flex h-full items-center justify-center">
        <div className="text-center text-gray-500">
          <Palette className="mx-auto mb-4 h-16 w-16 text-gray-300" />
          <p className="mb-4 text-lg">설계할 화면을 선택해주세요</p>
          <p className="mb-6 text-sm">화면 목록에서 화면을 선택한 후 설계기를 사용하세요</p>
          <Button onClick={onBackToList} variant="outline">
            화면 목록으로 돌아가기
          </Button>
        </div>
      </div>
    );
  }

  return (
    <div className="flex h-full w-full flex-col">
      {/* 상단 헤더 */}
      <div className="flex items-center justify-between border-b bg-white p-4 shadow-sm">
        <div className="flex items-center space-x-4">
          <h2 className="text-xl font-semibold text-gray-900">{selectedScreen.screenName} - 화면 설계</h2>
          <Badge variant="outline" className="font-mono">
            {selectedScreen.tableName}
          </Badge>
        </div>
        <div className="flex items-center space-x-2">
          <Button
            variant={groupState.isGrouping ? "default" : "outline"}
            size="sm"
            onClick={() => setGroupState((prev) => ({ ...prev, isGrouping: !prev.isGrouping }))}
            title="그룹화 모드 토글"
          >
            <Group className="mr-2 h-4 w-4" />
            {groupState.isGrouping ? "그룹화 모드" : "일반 모드"}
          </Button>
          <Button variant="outline" size="sm" onClick={undo} disabled={historyIndex <= 0} title="실행 취소 (Ctrl+Z)">
            <Undo className="mr-2 h-4 w-4" />
            실행 취소
          </Button>
          <Button
            variant="outline"
            size="sm"
            onClick={redo}
            disabled={historyIndex >= history.length - 1}
            title="다시 실행 (Ctrl+Y)"
          >
            <Redo className="mr-2 h-4 w-4" />
            다시 실행
          </Button>
          <Button onClick={saveLayout} className="bg-blue-600 hover:bg-blue-700">
            <Save className="mr-2 h-4 w-4" />
            저장
          </Button>
        </div>
      </div>

      {/* 그룹화 툴바 */}
      <GroupingToolbar
        groupState={groupState}
        onGroupStateChange={setGroupState}
        onGroupCreate={handleGroupCreate}
        onGroupUngroup={handleGroupUngroup}
        selectedComponents={layout.components.filter((comp) => groupState.selectedComponents.includes(comp.id))}
        allComponents={layout.components}
      />

      {/* 메인 컨텐츠 영역 */}
      <div className="flex flex-1 overflow-hidden">
        {/* 좌측 사이드바 - 테이블 타입 */}
        <div className="flex w-80 flex-col border-r bg-gray-50">
          <div className="border-b bg-white p-4">
            <h3 className="mb-4 text-lg font-medium">테이블 타입</h3>

            {/* 검색 입력창 */}
            <div className="mb-4">
              <input
                type="text"
                placeholder="테이블명, 컬럼명으로 검색..."
                value={searchTerm}
                onChange={(e) => handleSearchChange(e.target.value)}
                className="w-full rounded-md border border-gray-300 px-3 py-2 focus:border-transparent focus:ring-2 focus:ring-blue-500 focus:outline-none"
              />
            </div>

            {/* 검색 결과 정보 */}
            <div className="mb-2 text-sm text-gray-600">
              총 {filteredTables.length}개 테이블 중 {(currentPage - 1) * itemsPerPage + 1}-
              {Math.min(currentPage * itemsPerPage, filteredTables.length)}번째
            </div>

            <p className="mb-4 text-sm text-gray-600">테이블과 컬럼을 드래그하여 캔버스에 배치하세요.</p>
          </div>

          {/* 테이블 목록 */}
          <div className="flex-1 overflow-y-auto">
            {paginatedTables.map((table) => (
              <div key={table.tableName} className="border-b bg-white">
                {/* 테이블 헤더 */}
                <div
                  className="flex cursor-pointer items-center justify-between p-3 hover:bg-gray-100"
                  draggable
                  onDragStart={(e) =>
                    startDrag(
                      {
                        type: "container",
                        tableName: table.tableName,
                        label: table.tableLabel,
                        size: { width: 12, height: 80 },
                      },
                      e,
                    )
                  }
                >
                  <div className="flex items-center space-x-2">
                    <Database className="h-4 w-4 text-blue-600" />
                    <div>
                      <div className="text-sm font-medium">{table.tableLabel}</div>
                      <div className="text-xs text-gray-500">{table.tableName}</div>
                    </div>
                  </div>
                  <Button
                    variant="ghost"
                    size="sm"
                    onClick={() => toggleTableExpansion(table.tableName)}
                    className="h-6 w-6 p-0"
                  >
                    {expandedTables.has(table.tableName) ? (
                      <ChevronDown className="h-4 w-4" />
                    ) : (
                      <ChevronRight className="h-4 w-4" />
                    )}
                  </Button>
                </div>

                {/* 컬럼 목록 */}
                {expandedTables.has(table.tableName) && (
                  <div className="bg-gray-25 border-t">
                    {table.columns.map((column) => (
                      <div
                        key={column.columnName}
                        className="flex cursor-pointer items-center space-x-2 p-2 pl-6 hover:bg-gray-100"
                        draggable
                        onDragStart={(e) => {
                          console.log("Drag start - column:", column.columnName, "webType:", column.webType);
                          const widgetType = getWidgetTypeFromWebType(column.webType || "text");
                          console.log("Drag start - widgetType:", widgetType);
                          startDrag(
                            {
                              type: "widget",
                              tableName: table.tableName,
                              columnName: column.columnName,
                              widgetType: widgetType as WebType,
                              label: column.columnLabel || column.columnName,
                              size: { width: 6, height: 40 },
                            },
                            e,
                          );
                        }}
                      >
                        <div className="flex-shrink-0">
                          {column.webType === "text" && <Type className="h-3 w-3 text-blue-600" />}
                          {column.webType === "email" && <Type className="h-3 w-3 text-blue-600" />}
                          {column.webType === "tel" && <Type className="h-3 w-3 text-blue-600" />}
                          {column.webType === "number" && <Hash className="h-3 w-3 text-green-600" />}
                          {column.webType === "decimal" && <Hash className="h-3 w-3 text-green-600" />}
                          {column.webType === "date" && <Calendar className="h-3 w-3 text-purple-600" />}
                          {column.webType === "datetime" && <Calendar className="h-3 w-3 text-purple-600" />}
                          {column.webType === "select" && <List className="h-3 w-3 text-orange-600" />}
                          {column.webType === "dropdown" && <List className="h-3 w-3 text-orange-600" />}
                          {column.webType === "textarea" && <AlignLeft className="h-3 w-3 text-indigo-600" />}
                          {column.webType === "text_area" && <AlignLeft className="h-3 w-3 text-indigo-600" />}
                          {column.webType === "checkbox" && <CheckSquare className="h-3 w-3 text-blue-600" />}
                          {column.webType === "boolean" && <CheckSquare className="h-3 w-3 text-blue-600" />}
                          {column.webType === "radio" && <Radio className="h-3 w-3 text-blue-600" />}
                          {column.webType === "code" && <Code className="h-3 w-3 text-gray-600" />}
                          {column.webType === "entity" && <Building className="h-3 w-3 text-cyan-600" />}
                          {column.webType === "file" && <File className="h-3 w-3 text-yellow-600" />}
                        </div>
                        <div className="flex-1">
                          <div className="text-sm font-medium">{column.columnLabel || column.columnName}</div>
                          <div className="text-xs text-gray-500">{column.columnName}</div>
                        </div>
                      </div>
                    ))}
                  </div>
                )}
              </div>
            ))}
          </div>

          {/* 페이징 컨트롤 */}
          {totalPages > 1 && (
            <div className="border-t bg-white p-4">
              <div className="flex items-center justify-between">
                <Button
                  variant="outline"
                  size="sm"
                  onClick={() => handlePageChange(currentPage - 1)}
                  disabled={currentPage === 1}
                >
                  이전
                </Button>

                <div className="text-sm text-gray-600">
                  {currentPage} / {totalPages}
                </div>

                <Button
                  variant="outline"
                  size="sm"
                  onClick={() => handlePageChange(currentPage + 1)}
                  disabled={currentPage === totalPages}
                >
                  다음
                </Button>
              </div>
            </div>
          )}
        </div>

        {/* 중앙: 캔버스 영역 */}
        <div className="flex-1 bg-white">
          <div className="h-full w-full overflow-auto p-6">
            <div
              className="min-h-full rounded-lg border-2 border-dashed border-gray-300 bg-gray-50 p-4"
              onDrop={onDrop}
              onDragOver={onDragOver}
            >
              {layout.components.length === 0 ? (
                <div className="flex h-full items-center justify-center">
                  <div className="text-center text-gray-500">
                    <Grid3X3 className="mx-auto mb-4 h-16 w-16 text-gray-300" />
                    <p className="mb-2 text-lg font-medium">빈 캔버스</p>
                    <p className="text-sm">좌측에서 테이블이나 컬럼을 드래그하여 배치하세요</p>
                  </div>
                </div>
              ) : (
                <div className="relative min-h-[600px]">
                  {/* 그리드 가이드 */}
                  <div className="pointer-events-none absolute inset-0">
                    <div className="grid h-full grid-cols-12 gap-1">
                      {Array.from({ length: 12 }).map((_, i) => (
                        <div key={i} className="border-r border-gray-200 last:border-r-0" />
                      ))}
                    </div>
                  </div>

                  {/* 컴포넌트들 - 실시간 미리보기 */}
                  {layout.components.map((component) => {
                    // 그룹 컴포넌트인 경우 자식 컴포넌트들 가져오기
                    const children =
                      component.type === "group"
                        ? layout.components.filter((child) => child.parentId === component.id)
                        : [];

                    return (
                      <RealtimePreview
                        key={component.id}
                        component={component}
                        isSelected={
                          selectedComponent?.id === component.id || groupState.selectedComponents.includes(component.id)
                        }
                        onClick={() => handleComponentClick(component)}
                        onDragStart={(e) => startComponentDrag(component, e)}
                        onDragEnd={endDrag}
                        onGroupToggle={(groupId) => {
                          // 그룹 접기/펼치기 토글
                          const groupComp = component as GroupComponent;
                          updateComponentProperty(groupId, "collapsed", !groupComp.collapsed);
                        }}
                      >
                        {children.map((child) => (
                          <div key={child.id} className="rounded border bg-white p-2 text-xs text-gray-600">
                            <div className="font-medium">{child.label || (child as any).columnName || child.id}</div>
                            <div className="text-gray-500">{child.type}</div>
                          </div>
                        ))}
                      </RealtimePreview>
                    );
                  })}
                </div>
              )}
            </div>
          </div>
        </div>

        {/* 우측: 컴포넌트 스타일 편집 */}
        <div className="w-80 border-l bg-gray-50">
          <div className="h-full p-4">
            <h3 className="mb-4 text-lg font-medium">컴포넌트 속성</h3>

            {selectedComponent ? (
              <div className="space-y-4">
                <Card>
                  <CardHeader className="pb-3">
                    <CardTitle className="text-sm font-medium">
                      {selectedComponent.type === "container" && "테이블 속성"}
                      {selectedComponent.type === "widget" && "위젯 속성"}
                    </CardTitle>
                  </CardHeader>
                  <CardContent className="space-y-4">
                    {/* 위치 속성 */}
                    <div className="grid grid-cols-2 gap-4">
                      <div className="space-y-2">
                        <Label htmlFor="positionX">X 위치</Label>
                        <Input
                          id="positionX"
                          type="number"
                          min="0"
                          value={selectedComponent.position.x}
                          onChange={(e) =>
                            updateComponentProperty(selectedComponent.id, "position.x", parseInt(e.target.value))
                          }
                        />
                      </div>
                      <div className="space-y-2">
                        <Label htmlFor="positionY">Y 위치</Label>
                        <Input
                          id="positionY"
                          type="number"
                          min="0"
                          value={selectedComponent.position.y}
                          onChange={(e) =>
                            updateComponentProperty(selectedComponent.id, "position.y", parseInt(e.target.value))
                          }
                        />
                      </div>
                    </div>

                    {/* 크기 속성 */}
                    <div className="grid grid-cols-2 gap-4">
                      <div className="space-y-2">
                        <Label htmlFor="width">너비 (컬럼)</Label>
                        <Input
                          id="width"
                          type="number"
                          min="1"
                          max="12"
                          value={selectedComponent.size.width}
                          onChange={(e) =>
                            updateComponentProperty(selectedComponent.id, "size.width", parseInt(e.target.value))
                          }
                        />
                      </div>
                      <div className="space-y-2">
                        <Label htmlFor="height">높이 (픽셀)</Label>
                        <Input
                          id="height"
                          type="number"
                          min="20"
                          value={selectedComponent.size.height}
                          onChange={(e) =>
                            updateComponentProperty(selectedComponent.id, "size.height", parseInt(e.target.value))
                          }
                        />
                      </div>
                    </div>

                    {/* 테이블 정보 */}
                    <Separator />
                    <div className="space-y-2">
                      <Label htmlFor="tableName">테이블명</Label>
                      <Input id="tableName" value={selectedComponent.tableName || ""} readOnly className="bg-gray-50" />
                    </div>

                    {/* 위젯 전용 속성 */}
                    {selectedComponent.type === "widget" && (
                      <>
                        <div className="space-y-2">
                          <Label htmlFor="columnName">컬럼명</Label>
                          <Input
                            id="columnName"
                            value={selectedComponent.columnName || ""}
                            readOnly
                            className="bg-gray-50"
                          />
                        </div>
                        <div className="space-y-2">
                          <Label htmlFor="widgetType">위젯 타입</Label>
                          <Input
                            id="widgetType"
                            value={selectedComponent.widgetType || ""}
                            readOnly
                            className="bg-gray-50"
                          />
                        </div>
                        <div className="space-y-2">
                          <Label htmlFor="widgetLabel">라벨</Label>
                          <Input
                            id="widgetLabel"
                            value={selectedComponent.label || ""}
                            onChange={(e) => updateComponentProperty(selectedComponent.id, "label", e.target.value)}
                          />
                        </div>
                        <div className="space-y-2">
                          <Label htmlFor="widgetPlaceholder">플레이스홀더</Label>
                          <Input
                            id="widgetPlaceholder"
                            value={selectedComponent.placeholder || ""}
                            onChange={(e) =>
                              updateComponentProperty(selectedComponent.id, "placeholder", e.target.value)
                            }
                          />
                        </div>
                        <div className="flex items-center space-x-4">
                          <div className="flex items-center space-x-2">
                            <input
                              type="checkbox"
                              id="required"
                              checked={selectedComponent.required || false}
                              onChange={(e) =>
                                updateComponentProperty(selectedComponent.id, "required", e.target.checked)
                              }
                            />
                            <Label htmlFor="required">필수</Label>
                          </div>
                          <div className="flex items-center space-x-2">
                            <input
                              type="checkbox"
                              id="readonly"
                              checked={selectedComponent.readonly || false}
                              onChange={(e) =>
                                updateComponentProperty(selectedComponent.id, "readonly", e.target.checked)
                              }
                            />
                            <Label htmlFor="readonly">읽기 전용</Label>
                          </div>
                        </div>
                      </>
                    )}

                    {/* 스타일 속성 */}
                    <Separator />
                    <div>
                      <Label className="text-sm font-medium">스타일 편집</Label>
                      <StyleEditor
                        style={selectedComponent.style || {}}
                        onStyleChange={(newStyle) => updateComponentProperty(selectedComponent.id, "style", newStyle)}
                      />
                    </div>

                    {/* 고급 속성 */}
                    <Separator />
                    <div className="space-y-2">
                      <Label htmlFor="parentId">부모 ID</Label>
                      <Input id="parentId" value={selectedComponent.parentId || ""} readOnly className="bg-gray-50" />
                    </div>
                    <Button
                      variant="destructive"
                      size="sm"
                      onClick={() => removeComponent(selectedComponent.id)}
                      className="w-full"
                    >
                      <Trash2 className="mr-2 h-4 w-4" />
                      컴포넌트 삭제
                    </Button>
                  </CardContent>
                </Card>
              </div>
            ) : (
              <div className="py-8 text-center text-gray-500">
                <Settings className="mx-auto mb-2 h-12 w-12 text-gray-300" />
                <p>컴포넌트를 선택하여 속성을 편집하세요</p>
              </div>
            )}
          </div>
        </div>
      </div>
    </div>
  );
}