"use client";

import { useState, useCallback, useEffect } from "react";
import { Button } from "@/components/ui/button";
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
import { Separator } from "@/components/ui/separator";
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
import {
  Palette,
  Grid3X3,
  Type,
  Calendar,
  Hash,
  CheckSquare,
  Radio,
  FileText,
  Save,
  Undo,
  Redo,
  Eye,
  Group,
  Ungroup,
  Database,
  Trash2,
} from "lucide-react";
import {
  ScreenDefinition,
  ComponentData,
  LayoutData,
  DragState,
  GroupState,
  ComponentType,
  WebType,
  WidgetComponent,
  ColumnInfo,
} from "@/types/screen";
import { generateComponentId } from "@/lib/utils/generateId";
import ContainerComponent from "./layout/ContainerComponent";
import RowComponent from "./layout/RowComponent";
import ColumnComponent from "./layout/ColumnComponent";
import WidgetFactory from "./WidgetFactory";
import TableTypeSelector from "./TableTypeSelector";
import ScreenPreview from "./ScreenPreview";
import TemplateManager from "./TemplateManager";
import StyleEditor from "./StyleEditor";
import { Label } from "@/components/ui/label";
import { Input } from "@/components/ui/input";

interface ScreenDesignerProps {
  screen: ScreenDefinition;
}

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

export default function ScreenDesigner({ screen }: ScreenDesignerProps) {
  const [layout, setLayout] = useState<LayoutData>({
    components: [],
    gridSettings: { columns: 12, gap: 16, padding: 16 },
  });
  const [selectedComponent, setSelectedComponent] = useState<ComponentData | null>(null);
  const [dragState, setDragState] = useState<DragState>({
    isDragging: false,
    draggedItem: null,
    draggedComponent: null,
    dragSource: "toolbox",
    dropTarget: null,
    dragOffset: { x: 0, y: 0 },
  });
  const [groupState, setGroupState] = useState<GroupState>({
    isGrouping: false,
    selectedComponents: [],
    groupTarget: null,
    groupMode: "create",
  });
  const [moveState, setMoveState] = useState<ComponentMoveState>({
    isMoving: false,
    movingComponent: null,
    originalPosition: { x: 0, y: 0 },
    currentPosition: { x: 0, y: 0 },
  });

  // 기본 컴포넌트 정의
  const basicComponents = [
    { type: "text", label: "텍스트 입력", color: "bg-blue-500", icon: "Type" },
    { type: "number", label: "숫자 입력", color: "bg-green-500", icon: "Hash" },
    { type: "date", label: "날짜 선택", color: "bg-purple-500", icon: "Calendar" },
    { type: "select", label: "선택 박스", color: "bg-orange-500", icon: "CheckSquare" },
    { type: "textarea", label: "텍스트 영역", color: "bg-indigo-500", icon: "FileText" },
    { type: "checkbox", label: "체크박스", color: "bg-pink-500", icon: "CheckSquare" },
    { type: "radio", label: "라디오 버튼", color: "bg-yellow-500", icon: "Radio" },
    { type: "file", label: "파일 업로드", color: "bg-red-500", icon: "FileText" },
    { type: "code", label: "코드 입력", color: "bg-gray-500", icon: "Hash" },
    { type: "entity", label: "엔티티 선택", color: "bg-teal-500", icon: "Database" },
  ];

  const layoutComponents = [
    { type: "container", label: "컨테이너", color: "bg-gray-500" },
    { type: "row", label: "행", color: "bg-yellow-500" },
    { type: "column", label: "열", color: "bg-red-500" },
    { type: "group", label: "그룹", color: "bg-teal-500" },
  ];

  // 드래그 시작
  const startDrag = useCallback((componentType: ComponentType, source: "toolbox" | "canvas") => {
    let componentData: ComponentData;

    if (componentType === "widget") {
      // 위젯 컴포넌트 생성
      componentData = {
        id: generateComponentId(componentType),
        type: "widget",
        position: { x: 0, y: 0 },
        size: { width: 6, height: 50 },
        label: "새 위젯",
        tableName: "",
        columnName: "",
        widgetType: "text",
        required: false,
        readonly: false,
      };
    } else if (componentType === "container") {
      // 컨테이너 컴포넌트 생성
      componentData = {
        id: generateComponentId(componentType),
        type: "container",
        position: { x: 0, y: 0 },
        size: { width: 12, height: 100 },
        title: "새 컨테이너",
        children: [],
      };
    } else if (componentType === "row") {
      // 행 컴포넌트 생성
      componentData = {
        id: generateComponentId(componentType),
        type: "row",
        position: { x: 0, y: 0 },
        size: { width: 12, height: 100 },
        children: [],
      };
    } else if (componentType === "column") {
      // 열 컴포넌트 생성
      componentData = {
        id: generateComponentId(componentType),
        type: "column",
        position: { x: 0, y: 0 },
        size: { width: 6, height: 100 },
        children: [],
      };
    } else if (componentType === "group") {
      // 그룹 컴포넌트 생성
      componentData = {
        id: generateComponentId(componentType),
        type: "group",
        position: { x: 0, y: 0 },
        size: { width: 12, height: 200 },
        title: "새 그룹",
        children: [],
      };
    } else {
      throw new Error(`지원하지 않는 컴포넌트 타입: ${componentType}`);
    }

    setDragState((prev) => ({
      ...prev,
      isDragging: true,
      draggedComponent: componentData,
      dragOffset: { x: 0, y: 0 },
    }));
  }, []);

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

  // 컴포넌트 추가
  const addComponent = useCallback((component: ComponentData, position: { x: number; y: number }) => {
    const newComponent = {
      ...component,
      id: generateComponentId(component.type),
      position,
    };

    setLayout((prev) => ({
      ...prev,
      components: [...prev.components, newComponent],
    }));
  }, []);

  // 컴포넌트 선택
  const selectComponent = useCallback((component: ComponentData) => {
    setSelectedComponent(component);
  }, []);

  // 컴포넌트 삭제
  const removeComponent = useCallback((componentId: string) => {
    setLayout((prev) => ({
      ...prev,
      components: prev.components.filter((c) => c.id !== componentId),
    }));
    setSelectedComponent(null);
  }, []);

  // 컴포넌트 속성 업데이트
  const updateComponentProperty = useCallback((componentId: string, path: string, value: any) => {
    setLayout((prev) => ({
      ...prev,
      components: prev.components.map((c) => {
        if (c.id === componentId) {
          const newComponent = { ...c } as any;
          const keys = path.split(".");
          let current = newComponent;
          for (let i = 0; i < keys.length - 1; i++) {
            current = current[keys[i]];
          }
          current[keys[keys.length - 1]] = value;
          return newComponent;
        }
        return c;
      }),
    }));
  }, []);

  // 레이아웃 저장
  const saveLayout = useCallback(() => {
    console.log("레이아웃 저장:", layout);
    // TODO: API 호출로 레이아웃 저장
  }, [layout]);

  // 컴포넌트 재배치 시작
  const startComponentMove = useCallback((component: ComponentData, e: React.MouseEvent) => {
    e.preventDefault();
    e.stopPropagation();

    setMoveState({
      isMoving: true,
      movingComponent: component,
      originalPosition: { ...component.position },
      currentPosition: { ...component.position },
    });

    setDragState((prev) => ({
      ...prev,
      isDragging: true,
      draggedComponent: component,
      dragOffset: { x: 0, y: 0 },
    }));
  }, []);

  // 컴포넌트 재배치 중
  const handleComponentMove = useCallback(
    (e: MouseEvent) => {
      if (!moveState.isMoving || !moveState.movingComponent) return;

      const canvas = document.getElementById("design-canvas");
      if (!canvas) return;

      const rect = canvas.getBoundingClientRect();
      const x = Math.floor((e.clientX - rect.left) / 50);
      const y = Math.floor((e.clientY - rect.top) / 50);

      setMoveState((prev) => ({
        ...prev,
        currentPosition: { x, y },
      }));
    },
    [moveState.isMoving, moveState.movingComponent],
  );

  // 컴포넌트 재배치 완료
  const endComponentMove = useCallback(() => {
    if (!moveState.isMoving || !moveState.movingComponent) return;

    const { movingComponent, currentPosition } = moveState;

    // 위치 업데이트
    setLayout((prev) => ({
      ...prev,
      components: prev.components.map((c) => (c.id === movingComponent.id ? { ...c, position: currentPosition } : c)),
    }));

    // 상태 초기화
    setMoveState({
      isMoving: false,
      movingComponent: null,
      originalPosition: { x: 0, y: 0 },
      currentPosition: { x: 0, y: 0 },
    });

    setDragState((prev) => ({
      ...prev,
      isDragging: false,
      draggedComponent: null,
      dragOffset: { x: 0, y: 0 },
    }));
  }, [moveState]);

  // 마우스 이벤트 리스너 등록/해제
  useEffect(() => {
    if (moveState.isMoving) {
      document.addEventListener("mousemove", handleComponentMove);
      document.addEventListener("mouseup", endComponentMove);

      return () => {
        document.removeEventListener("mousemove", handleComponentMove);
        document.removeEventListener("mouseup", endComponentMove);
      };
    }
  }, [moveState.isMoving, handleComponentMove, endComponentMove]);

  // 컴포넌트 렌더링
  const renderComponent = useCallback(
    (component: ComponentData) => {
      const isSelected = selectedComponent === component;
      const isMoving = moveState.isMoving && moveState.movingComponent?.id === component.id;
      const currentPosition = isMoving ? moveState.currentPosition : component.position;

      switch (component.type) {
        case "container":
          return (
            <ContainerComponent
              key={component.id}
              component={{
                ...component,
                position: currentPosition,
              }}
              isSelected={isSelected}
              onClick={() => selectComponent(component)}
              onMouseDown={(e) => startComponentMove(component, e)}
              isMoving={isMoving}
            >
              {/* 컨테이너 내부의 자식 컴포넌트들 */}
              {layout.components.filter((c) => c.parentId === component.id).map(renderComponent)}
            </ContainerComponent>
          );
        case "row":
          return (
            <RowComponent
              key={component.id}
              component={{
                ...component,
                position: currentPosition,
              }}
              isSelected={isSelected}
              onClick={() => selectComponent(component)}
              onMouseDown={(e) => startComponentMove(component, e)}
              isMoving={isMoving}
            >
              {/* 행 내부의 자식 컴포넌트들 */}
              {layout.components.filter((c) => c.parentId === component.id).map(renderComponent)}
            </RowComponent>
          );
        case "column":
          return (
            <ColumnComponent
              key={component.id}
              component={{
                ...component,
                position: currentPosition,
              }}
              isSelected={isSelected}
              onClick={() => selectComponent(component)}
              onMouseDown={(e) => startComponentMove(component, e)}
              isMoving={isMoving}
            >
              {/* 열 내부의 자식 컴포넌트들 */}
              {layout.components.filter((c) => c.parentId === component.id).map(renderComponent)}
            </ColumnComponent>
          );
        case "widget":
          return (
            <div
              key={component.id}
              className={`absolute cursor-move rounded border-2 border-transparent hover:border-blue-300 ${
                isSelected ? "border-blue-500" : ""
              } ${isMoving ? "z-50" : ""}`}
              style={{
                left: `${currentPosition.x * 50}px`,
                top: `${currentPosition.y * 50}px`,
                width: `${component.size.width * 50}px`,
                height: `${component.size.height}px`,
              }}
              onClick={() => selectComponent(component)}
              onMouseDown={(e) => startComponentMove(component, e)}
            >
              <WidgetFactory widget={component} />
            </div>
          );
        default:
          return null;
      }
    },
    [selectedComponent, moveState, selectComponent, startComponentMove, layout.components],
  );

  // 테이블 타입에서 컬럼 선택 시 위젯 생성
  const handleColumnSelect = useCallback(
    (column: ColumnInfo) => {
      const widgetComponent: WidgetComponent = {
        id: generateComponentId("widget"),
        type: "widget",
        position: { x: 0, y: 0 },
        size: { width: 6, height: 50 },
        parentId: undefined,
        tableName: column.tableName,
        columnName: column.columnName,
        widgetType: column.webType || "text",
        label: column.columnLabel || column.columnName,
        placeholder: `${column.columnLabel || column.columnName}을(를) 입력하세요`,
        required: column.isNullable === "NO",
        readonly: false,
        validationRules: [],
        displayProperties: {},
        style: {
          // 웹 타입별 기본 스타일
          ...(column.webType === "date" && {
            backgroundColor: "#fef3c7",
            border: "1px solid #f59e0b",
          }),
          ...(column.webType === "number" && {
            backgroundColor: "#dbeafe",
            border: "1px solid #3b82f6",
          }),
          ...(column.webType === "select" && {
            backgroundColor: "#f3e8ff",
            border: "1px solid #8b5cf6",
          }),
          ...(column.webType === "checkbox" && {
            backgroundColor: "#dcfce7",
            border: "1px solid #22c55e",
          }),
          ...(column.webType === "radio" && {
            backgroundColor: "#fef3c7",
            border: "1px solid #f59e0b",
          }),
          ...(column.webType === "textarea" && {
            backgroundColor: "#f1f5f9",
            border: "1px solid #64748b",
          }),
          ...(column.webType === "file" && {
            backgroundColor: "#fef2f2",
            border: "1px solid #ef4444",
          }),
          ...(column.webType === "code" && {
            backgroundColor: "#fef2f2",
            border: "1px solid #ef4444",
            fontFamily: "monospace",
          }),
          ...(column.webType === "entity" && {
            backgroundColor: "#f0f9ff",
            border: "1px solid #0ea5e9",
          }),
        },
      };

      // 현재 캔버스의 빈 위치 찾기
      const occupiedPositions = new Set();
      layout.components.forEach((comp) => {
        for (let x = comp.position.x; x < comp.position.x + comp.size.width; x++) {
          for (let y = comp.position.y; y < comp.position.y + comp.size.height; y++) {
            occupiedPositions.add(`${x},${y}`);
          }
        }
      });

      // 빈 위치 찾기
      let newX = 0,
        newY = 0;
      for (let y = 0; y < 20; y++) {
        for (let x = 0; x < 12; x++) {
          let canPlace = true;
          for (let dx = 0; dx < widgetComponent.size.width; dx++) {
            for (let dy = 0; dy < Math.ceil(widgetComponent.size.height / 50); dy++) {
              if (occupiedPositions.has(`${x + dx},${y + dy}`)) {
                canPlace = false;
                break;
              }
            }
            if (!canPlace) break;
          }
          if (canPlace) {
            newX = x;
            newY = y;
            break;
          }
        }
        if (newX !== 0 || newY !== 0) break;
      }

      widgetComponent.position = { x: newX, y: newY };
      addComponent(widgetComponent, { x: newX, y: newY });
    },
    [layout.components, addComponent],
  );

  return (
    <div className="flex h-full space-x-4">
      {/* 왼쪽 툴바 */}
      <div className="w-64 space-y-4">
        {/* 기본 컴포넌트 */}
        <Card>
          <CardHeader className="pb-3">
            <CardTitle className="text-sm font-medium">기본 컴포넌트</CardTitle>
          </CardHeader>
          <CardContent className="space-y-2">
            {basicComponents.map((component) => (
              <div
                key={component.type}
                className={`flex cursor-pointer items-center rounded border p-2 hover:bg-gray-50 ${
                  dragState.isDragging && dragState.draggedComponent?.type === "widget"
                    ? "border-blue-500 bg-blue-50"
                    : "border-gray-200"
                }`}
                draggable
                onDragStart={() => startDrag(component.type as ComponentType, "toolbox")}
                onDragEnd={endDrag}
              >
                <div className={`h-3 w-3 rounded-full ${component.color} mr-2`} />
                <span className="text-sm">{component.label}</span>
              </div>
            ))}
          </CardContent>
        </Card>

        {/* 레이아웃 컴포넌트 */}
        <Card>
          <CardHeader className="pb-3">
            <CardTitle className="text-sm font-medium">레이아웃 컴포넌트</CardTitle>
          </CardHeader>
          <CardContent className="space-y-2">
            {layoutComponents.map((component) => (
              <div
                key={component.type}
                className={`flex cursor-pointer items-center rounded border p-2 hover:bg-gray-50 ${
                  dragState.isDragging && dragState.draggedComponent?.type === component.type
                    ? "border-blue-500 bg-blue-50"
                    : "border-gray-200"
                }`}
                draggable
                onDragStart={() => startDrag(component.type as ComponentType, "toolbox")}
                onDragEnd={endDrag}
              >
                <div className={`h-3 w-3 rounded-full ${component.color} mr-2`} />
                <span className="text-sm">{component.label}</span>
              </div>
            ))}
          </CardContent>
        </Card>
      </div>

      {/* 중앙 메인 영역 */}
      <div className="flex-1">
        <Tabs defaultValue="design" className="h-full">
          <TabsList className="grid w-full grid-cols-3">
            <TabsTrigger value="design" className="flex items-center gap-2">
              <Palette className="h-4 w-4" />
              화면 설계
            </TabsTrigger>
            <TabsTrigger value="table" className="flex items-center gap-2">
              <Database className="h-4 w-4" />
              테이블 타입
            </TabsTrigger>
            <TabsTrigger value="preview" className="flex items-center gap-2">
              <Eye className="h-4 w-4" />
              미리보기
            </TabsTrigger>
          </TabsList>

          {/* 화면 설계 탭 */}
          <TabsContent value="design" className="h-full">
            <Card className="h-full">
              <CardHeader className="pb-3">
                <div className="flex items-center justify-between">
                  <CardTitle className="text-sm font-medium">{screen.screenName} - 캔버스</CardTitle>
                  <div className="flex items-center space-x-2">
                    <Button variant="outline" size="sm" onClick={() => console.log("실행 취소")}>
                      <Undo className="mr-1 h-4 w-4" />
                      실행 취소
                    </Button>
                    <Button variant="outline" size="sm" onClick={() => console.log("다시 실행")}>
                      <Redo className="mr-1 h-4 w-4" />
                      다시 실행
                    </Button>
                    <Button onClick={saveLayout}>
                      <Save className="mr-1 h-4 w-4" />
                      저장
                    </Button>
                  </div>
                </div>
              </CardHeader>
              <CardContent className="h-full">
                <div
                  id="design-canvas"
                  className="relative h-full w-full rounded-lg border-2 border-dashed border-gray-300 bg-gray-50"
                  onDrop={(e) => {
                    e.preventDefault();
                    if (dragState.draggedComponent && dragState.draggedComponent.type === "widget") {
                      const rect = e.currentTarget.getBoundingClientRect();
                      const x = Math.floor((e.clientX - rect.left) / 50);
                      const y = Math.floor((e.clientY - rect.top) / 50);

                      // 위젯 컴포넌트의 경우 기본 컴포넌트에서 타입 정보를 가져옴
                      const basicComponent = basicComponents.find(
                        (c) => c.type === (dragState.draggedComponent as any).widgetType,
                      );
                      if (basicComponent) {
                        const widgetComponent: ComponentData = {
                          ...dragState.draggedComponent,
                          position: { x, y },
                          label: basicComponent.label,
                          widgetType: basicComponent.type as WebType,
                        } as WidgetComponent;
                        addComponent(widgetComponent, { x, y });
                      }
                    } else if (dragState.draggedComponent) {
                      const rect = e.currentTarget.getBoundingClientRect();
                      const x = Math.floor((e.clientX - rect.left) / 50);
                      const y = Math.floor((e.clientY - rect.top) / 50);
                      addComponent(dragState.draggedComponent, { x, y });
                    }
                  }}
                  onDragOver={(e) => e.preventDefault()}
                >
                  {/* 그리드 가이드 */}
                  <div className="pointer-events-none absolute inset-0">
                    <div className="grid h-full grid-cols-12">
                      {Array.from({ length: 12 }).map((_, i) => (
                        <div key={i} className="border-r border-gray-200 last:border-r-0" />
                      ))}
                    </div>
                  </div>

                  {/* 컴포넌트들 렌더링 */}
                  {layout.components.length > 0 ? (
                    layout.components
                      .filter((c) => !c.parentId) // 최상위 컴포넌트만 렌더링
                      .map(renderComponent)
                  ) : (
                    <div className="absolute inset-0 flex items-center justify-center text-gray-400">
                      <div className="text-center">
                        <Palette className="mx-auto mb-4 h-16 w-16" />
                        <p>왼쪽 툴바에서 컴포넌트를 드래그하여 배치하세요</p>
                      </div>
                    </div>
                  )}
                </div>
              </CardContent>
            </Card>
          </TabsContent>

          {/* 테이블 타입 탭 */}
          <TabsContent value="table" className="h-full">
            <TableTypeSelector
              onTableSelect={(tableName) => console.log("테이블 선택:", tableName)}
              onColumnSelect={handleColumnSelect}
              className="h-full"
            />
          </TabsContent>

          {/* 미리보기 탭 */}
          <TabsContent value="preview" className="h-full">
            <ScreenPreview layout={layout} screenName={screen.screenName} />
          </TabsContent>
        </Tabs>
      </div>

      {/* 오른쪽 속성 패널 */}
      <div className="w-80">
        <Card className="h-full">
          <CardHeader className="pb-3">
            <CardTitle className="text-sm font-medium">속성</CardTitle>
          </CardHeader>
          <CardContent>
            {selectedComponent ? (
              <Tabs defaultValue="general" className="w-full">
                <TabsList className="grid w-full grid-cols-3">
                  <TabsTrigger value="general">일반</TabsTrigger>
                  <TabsTrigger value="style">
                    <Palette className="mr-1 h-3 w-3" />
                    스타일
                  </TabsTrigger>
                  <TabsTrigger value="advanced">고급</TabsTrigger>
                </TabsList>

                {/* 일반 속성 탭 */}
                <TabsContent value="general" className="space-y-4">
                  <div className="space-y-2">
                    <Label htmlFor="componentId">ID</Label>
                    <Input id="componentId" value={selectedComponent.id} readOnly className="bg-gray-50" />
                  </div>
                  <div className="space-y-2">
                    <Label htmlFor="componentType">타입</Label>
                    <Input id="componentType" value={selectedComponent.type} readOnly className="bg-gray-50" />
                  </div>
                  <div className="grid grid-cols-2 gap-4">
                    <div className="space-y-2">
                      <Label htmlFor="positionX">X 위치</Label>
                      <Input
                        id="positionX"
                        type="number"
                        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"
                        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>

                  {/* 위젯 전용 속성 */}
                  {selectedComponent.type === "widget" && (
                    <>
                      <Separator />
                      <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>
                    </>
                  )}
                </TabsContent>

                {/* 스타일 속성 탭 */}
                <TabsContent value="style" className="space-y-4">
                  <StyleEditor
                    style={selectedComponent.style || {}}
                    onStyleChange={(newStyle) => updateComponentProperty(selectedComponent.id, "style", newStyle)}
                  />
                </TabsContent>

                {/* 고급 속성 탭 */}
                <TabsContent value="advanced" className="space-y-4">
                  <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>
                </TabsContent>
              </Tabs>
            ) : (
              <div className="py-8 text-center text-gray-500">
                <Palette className="mx-auto mb-2 h-12 w-12 text-gray-300" />
                <p>컴포넌트를 선택하여 속성을 편집하세요</p>
              </div>
            )}
          </CardContent>
        </Card>
      </div>
    </div>
  );
}