"use client";

import { useState, useEffect, useMemo } from "react";
import { Button } from "@/components/ui/button";
import { ArrowLeft, Save, Loader2, Grid3x3, Move, Box, Package, Truck } from "lucide-react";
import { Input } from "@/components/ui/input";
import { Label } from "@/components/ui/label";
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
import dynamic from "next/dynamic";
import { useToast } from "@/hooks/use-toast";
import type { PlacedObject, ToolType, Warehouse, Area, Location, ObjectType } from "@/types/digitalTwin";
import {
  getWarehouses,
  getAreas,
  getLocations,
  getLayoutById,
  updateLayout,
  getMaterialCounts,
  getMaterials,
} from "@/lib/api/digitalTwin";
import type { MaterialData } from "@/types/digitalTwin";
import { ExternalDbConnectionAPI } from "@/lib/api/externalDbConnection";

// 백엔드 DB 객체 타입 (snake_case)
interface DbObject {
  id: number;
  object_type: ObjectType;
  object_name: string;
  position_x: string;
  position_y: string;
  position_z: string;
  size_x: string;
  size_y: string;
  size_z: string;
  rotation?: string;
  color: string;
  area_key?: string;
  loca_key?: string;
  loc_type?: string;
  material_count?: number;
  material_preview_height?: string;
  parent_id?: number;
  display_order?: number;
  locked?: boolean;
  visible?: boolean;
}

const Yard3DCanvas = dynamic(() => import("./Yard3DCanvas"), {
  ssr: false,
  loading: () => (
    <div className="bg-muted flex h-full items-center justify-center">
      <Loader2 className="text-muted-foreground h-8 w-8 animate-spin" />
    </div>
  ),
});

interface DigitalTwinEditorProps {
  layoutId: number;
  layoutName: string;
  onBack: () => void;
}

export default function DigitalTwinEditor({ layoutId, layoutName, onBack }: DigitalTwinEditorProps) {
  const { toast } = useToast();
  const [placedObjects, setPlacedObjects] = useState<PlacedObject[]>([]);
  const [selectedObject, setSelectedObject] = useState<PlacedObject | null>(null);
  const [draggedTool, setDraggedTool] = useState<ToolType | null>(null);
  const [draggedAreaData, setDraggedAreaData] = useState<Area | null>(null); // 드래그 중인 Area 정보
  const [draggedLocationData, setDraggedLocationData] = useState<Location | null>(null); // 드래그 중인 Location 정보
  const [isLoading, setIsLoading] = useState(true);
  const [isSaving, setIsSaving] = useState(false);
  const [hasUnsavedChanges, setHasUnsavedChanges] = useState(false);
  const [externalDbConnections, setExternalDbConnections] = useState<{ id: number; name: string; db_type: string }[]>(
    [],
  );
  const [selectedDbConnection, setSelectedDbConnection] = useState<number | null>(null);
  const [selectedWarehouse, setSelectedWarehouse] = useState<string | null>(null);
  const [warehouses, setWarehouses] = useState<Warehouse[]>([]);
  const [availableAreas, setAvailableAreas] = useState<Area[]>([]);
  const [availableLocations, setAvailableLocations] = useState<Location[]>([]);
  const [nextObjectId, setNextObjectId] = useState(-1);
  const [loadingWarehouses, setLoadingWarehouses] = useState(false);
  const [loadingAreas, setLoadingAreas] = useState(false);
  const [loadingLocations, setLoadingLocations] = useState(false);
  const [materials, setMaterials] = useState<MaterialData[]>([]);
  const [loadingMaterials, setLoadingMaterials] = useState(false);
  const [showMaterialPanel, setShowMaterialPanel] = useState(false);
  
  // 테이블 매핑 관련 상태
  const [availableTables, setAvailableTables] = useState<string[]>([]);
  const [loadingTables, setLoadingTables] = useState(false);
  const [selectedTables, setSelectedTables] = useState({
    warehouse: "",
    area: "",
    location: "",
    material: "",
  });
  const [tableColumns, setTableColumns] = useState<{ [key: string]: string[] }>({});
  const [selectedColumns, setSelectedColumns] = useState({
    warehouseKey: "WAREKEY",
    warehouseName: "WARENAME",
    areaKey: "AREAKEY",
    areaName: "AREANAME",
    locationKey: "LOCAKEY",
    locationName: "LOCANAME",
    materialKey: "STKKEY",
  });

  // placedObjects를 YardPlacement 형식으로 변환 (useMemo로 최적화)
  const placements = useMemo(() => {
    const now = new Date().toISOString(); // 한 번만 생성
    return placedObjects.map((obj) => ({
      id: obj.id,
      yard_layout_id: layoutId,
      material_code: null,
      material_name: obj.name,
      name: obj.name, // 객체 이름 (야드 이름 표시용)
      quantity: null,
      unit: null,
      position_x: obj.position.x,
      position_y: obj.position.y,
      position_z: obj.position.z,
      size_x: obj.size.x,
      size_y: obj.size.y,
      size_z: obj.size.z,
      color: obj.color,
      data_source_type: obj.type,
      data_source_config: null,
      data_binding: null,
      created_at: now, // 고정된 값 사용
      updated_at: now, // 고정된 값 사용
      material_count: obj.materialCount,
      material_preview_height: obj.materialPreview?.height,
    }));
  }, [placedObjects, layoutId]);

  // 외부 DB 연결 목록 로드
  useEffect(() => {
    const loadExternalDbConnections = async () => {
      try {
        const connections = await ExternalDbConnectionAPI.getConnections({ is_active: "Y" });
        console.log("🔍 외부 DB 연결 목록 (is_active=Y):", connections);
        console.log("🔍 연결 ID들:", connections.map(c => c.id));
        setExternalDbConnections(
          connections.map((conn) => ({
            id: conn.id!,
            name: conn.connection_name,
            db_type: conn.db_type,
          })),
        );
      } catch (error) {
        console.error("외부 DB 연결 목록 조회 실패:", error);
        toast({
          variant: "destructive",
          title: "오류",
          description: "외부 DB 연결 목록을 불러오는데 실패했습니다.",
        });
      }
    };

    loadExternalDbConnections();
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, []); // 컴포넌트 마운트 시 한 번만 실행

  // 외부 DB 선택 시 테이블 목록 로드
  useEffect(() => {
    if (!selectedDbConnection) {
      setAvailableTables([]);
      setSelectedTables({ warehouse: "", area: "", location: "", material: "" });
      return;
    }

    const loadTables = async () => {
      try {
        setLoadingTables(true);
        const { getTables } = await import("@/lib/api/digitalTwin");
        const response = await getTables(selectedDbConnection);
        if (response.success && response.data) {
          const tableNames = response.data.map((t) => t.table_name);
          setAvailableTables(tableNames);
          console.log("📋 테이블 목록:", tableNames);
        }
      } catch (error) {
        console.error("테이블 목록 조회 실패:", error);
        toast({
          variant: "destructive",
          title: "오류",
          description: "테이블 목록을 불러오는데 실패했습니다.",
        });
      } finally {
        setLoadingTables(false);
      }
    };

    loadTables();
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [selectedDbConnection]);

  // 테이블 컬럼 로드
  const loadColumnsForTable = async (tableName: string, type: "warehouse" | "area" | "location" | "material") => {
    if (!selectedDbConnection || !tableName) return;

    try {
      const { getTablePreview } = await import("@/lib/api/digitalTwin");
      const response = await getTablePreview(selectedDbConnection, tableName);
      
      console.log(`📊 ${type} 테이블 미리보기:`, response);

      if (response.success && response.data && response.data.length > 0) {
        const columns = Object.keys(response.data[0]);
        setTableColumns(prev => ({ ...prev, [type]: columns }));
        
        // 자동 매핑 시도 (기본값 설정)
        if (type === "warehouse") {
          const keyCol = columns.find(c => c.includes("KEY") || c.includes("ID")) || columns[0];
          const nameCol = columns.find(c => c.includes("NAME") || c.includes("NAM")) || columns[1] || columns[0];
          setSelectedColumns(prev => ({ ...prev, warehouseKey: keyCol, warehouseName: nameCol }));
        }
      } else {
        console.warn(`⚠️ ${tableName} 테이블에 데이터가 없습니다.`);
        toast({
          variant: "default", // destructive 대신 default로 변경 (단순 알림)
          title: "데이터 없음",
          description: `${tableName} 테이블에 데이터가 없습니다.`,
        });
      }
    } catch (error) {
      console.error(`컬럼 로드 실패 (${tableName}):`, error);
    }
  };

  // 외부 DB 선택 시 창고 목록 로드 (테이블이 선택되어 있을 때만)
  useEffect(() => {
    if (!selectedDbConnection || !selectedTables.warehouse) {
      setWarehouses([]);
      setSelectedWarehouse(null);
      return;
    }

    const loadWarehouses = async () => {
      try {
        setLoadingWarehouses(true);
        const response = await getWarehouses(selectedDbConnection, selectedTables.warehouse);
        console.log("📦 창고 API 응답:", response);
        if (response.success && response.data) {
          console.log("📦 창고 데이터:", response.data);
          setWarehouses(response.data);
        } else {
          // 외부 DB 연결이 유효하지 않으면 선택 초기화
          console.warn("외부 DB 연결이 유효하지 않습니다:", selectedDbConnection);
          setSelectedDbConnection(null);
          toast({
            variant: "destructive",
            title: "외부 DB 연결 오류",
            description: "저장된 외부 DB 연결을 찾을 수 없습니다. 다시 선택해주세요.",
          });
        }
      } catch (error: any) {
        console.error("창고 목록 조회 실패:", error);
        // 외부 DB 연결이 존재하지 않으면 선택 초기화
        if (error.response?.status === 500 && error.response?.data?.error?.includes("연결 정보를 찾을 수 없습니다")) {
          setSelectedDbConnection(null);
          toast({
            variant: "destructive",
            title: "외부 DB 연결 오류",
            description: "저장된 외부 DB 연결을 찾을 수 없습니다. 다시 선택해주세요.",
          });
        } else {
          toast({
            variant: "destructive",
            title: "오류",
            description: "창고 목록을 불러오는데 실패했습니다.",
          });
        }
      } finally {
        setLoadingWarehouses(false);
      }
    };

    loadWarehouses();
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [selectedDbConnection, selectedTables.warehouse]); // toast 제거, warehouse 테이블 추가

  // 창고 선택 시 Area 목록 로드
  useEffect(() => {
    if (!selectedDbConnection || !selectedWarehouse) {
      setAvailableAreas([]);
      return;
    }

    const loadAreas = async () => {
      try {
        setLoadingAreas(true);
        const response = await getAreas(selectedDbConnection, selectedTables.area, selectedWarehouse);
        if (response.success && response.data) {
          setAvailableAreas(response.data);
        }
      } catch (error) {
        console.error("Area 목록 조회 실패:", error);
        toast({
          variant: "destructive",
          title: "오류",
          description: "Area 목록을 불러오는데 실패했습니다.",
        });
      } finally {
        setLoadingAreas(false);
      }
    };

    loadAreas();
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [selectedDbConnection, selectedWarehouse, selectedTables.area]); // toast 제거, area 테이블 추가

  // 레이아웃 데이터 로드
  const [layoutData, setLayoutData] = useState<{ layout: any; objects: any[] } | null>(null);

  useEffect(() => {
    const loadLayout = async () => {
      try {
        setIsLoading(true);
        const response = await getLayoutById(layoutId);

        if (response.success && response.data) {
          const { layout, objects } = response.data;
          setLayoutData({ layout, objects }); // 레이아웃 데이터 저장

          // 객체 데이터 변환 (DB -> PlacedObject)
          const loadedObjects: PlacedObject[] = (objects as unknown as DbObject[]).map((obj) => ({
            id: obj.id,
            type: obj.object_type,
            name: obj.object_name,
            position: {
              x: parseFloat(obj.position_x),
              y: parseFloat(obj.position_y),
              z: parseFloat(obj.position_z),
            },
            size: {
              x: parseFloat(obj.size_x),
              y: parseFloat(obj.size_y),
              z: parseFloat(obj.size_z),
            },
            rotation: obj.rotation ? parseFloat(obj.rotation) : 0,
            color: obj.color,
            areaKey: obj.area_key,
            locaKey: obj.loca_key,
            locType: obj.loc_type,
            materialCount: obj.material_count,
            materialPreview: obj.material_preview_height
              ? { height: parseFloat(obj.material_preview_height) }
              : undefined,
            parentId: obj.parent_id,
            displayOrder: obj.display_order,
            locked: obj.locked,
            visible: obj.visible !== false,
          }));

          setPlacedObjects(loadedObjects);

          // 다음 임시 ID 설정 (기존 ID 중 최소값 - 1)
          const minId = Math.min(...loadedObjects.map((o) => o.id), 0);
          setNextObjectId(minId - 1);

          setHasUnsavedChanges(false);

          toast({
            title: "레이아웃 불러오기 완료",
            description: `${loadedObjects.length}개의 객체를 불러왔습니다.`,
          });

          // Location 객체들의 자재 개수 로드
          const locationObjects = loadedObjects.filter(
            (obj) =>
              (obj.type === "location-bed" ||
                obj.type === "location-stp" ||
                obj.type === "location-temp" ||
                obj.type === "location-dest") &&
              obj.locaKey,
          );
          if (locationObjects.length > 0) {
            const locaKeys = locationObjects.map((obj) => obj.locaKey!);
            setTimeout(() => {
              loadMaterialCountsForLocations(locaKeys);
            }, 100);
          }
        } else {
          throw new Error(response.error || "레이아웃 조회 실패");
        }
      } catch (error) {
        console.error("레이아웃 로드 실패:", error);
        const errorMessage = error instanceof Error ? error.message : "레이아웃을 불러오는데 실패했습니다.";
        toast({
          variant: "destructive",
          title: "오류",
          description: errorMessage,
        });
      } finally {
        setIsLoading(false);
      }
    };

    loadLayout();
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [layoutId]); // toast 제거

  // 외부 DB 연결 자동 선택 (externalDbConnections 로드 완료 시)
  useEffect(() => {
    if (!layoutData || !layoutData.layout.externalDbConnectionId || externalDbConnections.length === 0) {
      return;
    }

    const layout = layoutData.layout;
    console.log("🔍 외부 DB 연결 자동 선택 시도");
    console.log("🔍 레이아웃의 externalDbConnectionId:", layout.externalDbConnectionId);
    console.log("🔍 사용 가능한 연결 목록:", externalDbConnections);

    const connectionExists = externalDbConnections.some(
      (conn) => conn.id === layout.externalDbConnectionId,
    );
    console.log("🔍 연결 존재 여부:", connectionExists);

    if (connectionExists) {
      setSelectedDbConnection(layout.externalDbConnectionId);
      if (layout.warehouseKey) {
        setSelectedWarehouse(layout.warehouseKey);
      }
      console.log("✅ 외부 DB 연결 자동 선택 완료:", layout.externalDbConnectionId);
    } else {
      console.warn("⚠️ 저장된 외부 DB 연결을 찾을 수 없습니다:", layout.externalDbConnectionId);
      console.warn("⚠️ 사용 가능한 연결 ID들:", externalDbConnections.map(c => c.id));
      toast({
        variant: "destructive",
        title: "외부 DB 연결 오류",
        description: "저장된 외부 DB 연결을 찾을 수 없습니다. 다시 선택해주세요.",
      });
    }
  }, [layoutData, externalDbConnections]); // layoutData와 externalDbConnections가 모두 준비되면 실행

  // 도구 타입별 기본 설정
  const getToolDefaults = (type: ToolType): Partial<PlacedObject> => {
    switch (type) {
      case "area":
        return {
          name: "영역",
          size: { x: 20, y: 0.1, z: 20 }, // 4x4 칸
          color: "#3b82f6", // 파란색
        };
      case "location-bed":
        return {
          name: "베드(BED)",
          size: { x: 5, y: 2, z: 5 }, // 1x1 칸
          color: "#10b981", // 에메랄드
        };
      case "location-stp":
        return {
          name: "정차포인트(STP)",
          size: { x: 5, y: 0.5, z: 5 }, // 1x1 칸, 낮은 높이
          color: "#f59e0b", // 주황색
        };
      case "location-temp":
        return {
          name: "임시베드(TMP)",
          size: { x: 5, y: 2, z: 5 }, // 베드와 동일
          color: "#10b981", // 베드와 동일
        };
      case "location-dest":
        return {
          name: "지정착지(DES)",
          size: { x: 5, y: 2, z: 5 }, // 베드와 동일
          color: "#10b981", // 베드와 동일
        };
      // case "crane-gantry":
      //   return {
      //     name: "겐트리 크레인",
      //     size: { x: 5, y: 8, z: 5 }, // 1x1 칸
      //     color: "#22c55e", // 녹색
      //   };
      case "crane-mobile":
        return {
          name: "크레인",
          size: { x: 5, y: 6, z: 5 }, // 1x1 칸
          color: "#eab308", // 노란색
        };
      case "rack":
        return {
          name: "랙",
          size: { x: 5, y: 3, z: 5 }, // 1x1 칸
          color: "#a855f7", // 보라색
        };
      // case "material":
      //   return {
      //     name: "자재",
      //     size: { x: 5, y: 2, z: 5 }, // 1x1 칸
      //     color: "#ef4444", // 빨간색
      //   };
    }
  };

  // 도구 드래그 시작
  const handleToolDragStart = (toolType: ToolType) => {
    setDraggedTool(toolType);
  };

  // 캔버스에 드롭
  const handleCanvasDrop = (x: number, z: number) => {
    if (!draggedTool) return;

    const defaults = getToolDefaults(draggedTool);

    // Area는 바닥(y=0.05)에, 다른 객체는 중앙 정렬
    const yPosition = draggedTool === "area" ? 0.05 : (defaults.size?.y || 1) / 2;

    // 외부 DB 데이터에서 드래그한 경우 해당 정보 사용
    let objectName = defaults.name || "새 객체";
    let areaKey: string | undefined = undefined;
    let locaKey: string | undefined = undefined;
    let locType: string | undefined = undefined;

    if (draggedTool === "area" && draggedAreaData) {
      objectName = draggedAreaData.AREANAME;
      areaKey = draggedAreaData.AREAKEY;
    } else if (
      (draggedTool === "location-bed" ||
        draggedTool === "location-stp" ||
        draggedTool === "location-temp" ||
        draggedTool === "location-dest") &&
      draggedLocationData
    ) {
      objectName = draggedLocationData.LOCANAME || draggedLocationData.LOCAKEY;
      areaKey = draggedLocationData.AREAKEY;
      locaKey = draggedLocationData.LOCAKEY;
      locType = draggedLocationData.LOCTYPE;
    }

    const newObject: PlacedObject = {
      id: nextObjectId,
      type: draggedTool,
      name: objectName,
      position: { x, y: yPosition, z },
      size: defaults.size || { x: 5, y: 5, z: 5 },
      color: defaults.color || "#9ca3af",
      areaKey,
      locaKey,
      locType,
    };

    setPlacedObjects((prev) => [...prev, newObject]);
    setSelectedObject(newObject);
    setNextObjectId((prev) => prev - 1);
    setHasUnsavedChanges(true);
    setDraggedTool(null);
    setDraggedAreaData(null);
    setDraggedLocationData(null);

    // Location 배치 시 자재 개수 로드
    if (
      (draggedTool === "location-bed" ||
        draggedTool === "location-stp" ||
        draggedTool === "location-temp" ||
        draggedTool === "location-dest") &&
      locaKey
    ) {
      // 새 객체 추가 후 자재 개수 로드 (약간의 딜레이를 두어 state 업데이트 완료 후 실행)
      setTimeout(() => {
        loadMaterialCountsForLocations();
      }, 100);
    }
  };

  // Location의 자재 목록 로드
  const loadMaterialsForLocation = async (locaKey: string) => {
    if (!selectedDbConnection) return;

    try {
      setLoadingMaterials(true);
      setShowMaterialPanel(true);
      const response = await getMaterials(selectedDbConnection, selectedTables.material, locaKey);
      if (response.success && response.data) {
        // LOLAYER 순으로 정렬
        const sortedMaterials = response.data.sort((a, b) => a.LOLAYER - b.LOLAYER);
        setMaterials(sortedMaterials);
      } else {
        setMaterials([]);
        toast({
          variant: "destructive",
          title: "자재 조회 실패",
          description: response.error || "자재 목록을 불러올 수 없습니다.",
        });
      }
    } catch (error) {
      console.error("자재 로드 실패:", error);
      setMaterials([]);
      toast({
        variant: "destructive",
        title: "오류",
        description: "자재 목록을 불러오는데 실패했습니다.",
      });
    } finally {
      setLoadingMaterials(false);
    }
  };

  // 객체 클릭
  const handleObjectClick = (objectId: number | null) => {
    if (objectId === null) {
      setSelectedObject(null);
      setShowMaterialPanel(false);
      return;
    }

    const obj = placedObjects.find((o) => o.id === objectId);
    setSelectedObject(obj || null);

    // Area를 클릭한 경우, 해당 Area의 Location 목록 로드
    if (obj && obj.type === "area" && obj.areaKey && selectedDbConnection) {
      loadLocationsForArea(obj.areaKey);
      setShowMaterialPanel(false);
    }
    // Location을 클릭한 경우, 해당 Location의 자재 목록 로드
    else if (
      obj &&
      (obj.type === "location-bed" ||
        obj.type === "location-stp" ||
        obj.type === "location-temp" ||
        obj.type === "location-dest") &&
      obj.locaKey &&
      selectedDbConnection
    ) {
      loadMaterialsForLocation(obj.locaKey);
    } else {
      setShowMaterialPanel(false);
    }
  };

  // Location별 자재 개수 로드 (locaKeys를 직접 받음)
  const loadMaterialCountsForLocations = async (locaKeys: string[]) => {
    if (!selectedDbConnection || locaKeys.length === 0) return;

    try {
      const response = await getMaterialCounts(selectedDbConnection, selectedTables.material, locaKeys);
      if (response.success && response.data) {
        // 각 Location 객체에 자재 개수 업데이트
        setPlacedObjects((prev) =>
          prev.map((obj) => {
            const materialCount = response.data?.find((mc) => mc.LOCAKEY === obj.locaKey);
            if (materialCount) {
              return {
                ...obj,
                materialCount: materialCount.material_count,
                materialPreview: {
                  height: materialCount.max_layer * 1.5, // 층당 1.5 높이 (시각적)
                },
              };
            }
            return obj;
          }),
        );
      }
    } catch (error) {
      console.error("자재 개수 로드 실패:", error);
    }
  };

  // 특정 Area의 Location 목록 로드
  const loadLocationsForArea = async (areaKey: string) => {
    if (!selectedDbConnection) return;

    try {
      setLoadingLocations(true);
      const response = await getLocations(selectedDbConnection, selectedTables.location, areaKey);
      if (response.success && response.data) {
        setAvailableLocations(response.data);
        toast({
          title: "Location 로드 완료",
          description: `${response.data.length}개 Location을 불러왔습니다.`,
        });
      }
    } catch (error) {
      console.error("Location 목록 조회 실패:", error);
      toast({
        variant: "destructive",
        title: "오류",
        description: "Location 목록을 불러오는데 실패했습니다.",
      });
    } finally {
      setLoadingLocations(false);
    }
  };

  // 객체 이동
  const handleObjectMove = (objectId: number, newX: number, newZ: number, newY?: number) => {
    // Yard3DCanvas에서 이미 스냅+오프셋이 완료된 좌표를 받음
    // 그대로 저장하면 됨
    setPlacedObjects((prev) =>
      prev.map((obj) => {
        if (obj.id === objectId) {
          const newPosition = { ...obj.position, x: newX, z: newZ };
          if (newY !== undefined) {
            newPosition.y = newY;
          }
          return { ...obj, position: newPosition };
        }
        return obj;
      }),
    );

    if (selectedObject?.id === objectId) {
      setSelectedObject((prev) => {
        if (!prev) return null;
        const newPosition = { ...prev.position, x: newX, z: newZ };
        if (newY !== undefined) {
          newPosition.y = newY;
        }
        return { ...prev, position: newPosition };
      });
    }

    setHasUnsavedChanges(true);
  };

  // 객체 속성 업데이트
  const handleObjectUpdate = (updates: Partial<PlacedObject>) => {
    if (!selectedObject) return;

    let finalUpdates = { ...updates };

    // 크기 변경 시에만 5 단위로 스냅하고 위치 조정 (position 변경은 제외)
    if (updates.size && !updates.position) {
      // placedObjects 배열에서 실제 저장된 객체를 가져옴 (selectedObject 상태가 아닌)
      const actualObject = placedObjects.find((obj) => obj.id === selectedObject.id);
      if (!actualObject) return;

      const oldSize = actualObject.size;
      const newSize = { ...oldSize, ...updates.size };

      // W, D를 5 단위로 스냅
      newSize.x = Math.max(5, Math.round(newSize.x / 5) * 5);
      newSize.z = Math.max(5, Math.round(newSize.z / 5) * 5);

      // H는 자유롭게 (Area 제외)
      if (actualObject.type !== "area") {
        newSize.y = Math.max(0.1, newSize.y);
      }

      // 크기 차이 계산
      const deltaX = newSize.x - oldSize.x;
      const deltaZ = newSize.z - oldSize.z;
      const deltaY = newSize.y - oldSize.y;

      // 위치 조정: 왼쪽/뒤쪽/바닥 모서리 고정, 오른쪽/앞쪽/위쪽으로만 늘어남
      // Three.js는 중심점 기준이므로 크기 차이의 절반만큼 위치 이동
      // actualObject.position (실제 배열의 position)을 기준으로 계산
      const newPosition = {
        ...actualObject.position,
        x: actualObject.position.x + deltaX / 2, // 오른쪽으로 늘어남
        y: actualObject.position.y + deltaY / 2, // 위쪽으로 늘어남 (바닥 고정)
        z: actualObject.position.z + deltaZ / 2, // 앞쪽으로 늘어남
      };

      finalUpdates = {
        ...finalUpdates,
        size: newSize,
        position: newPosition,
      };
    }

    setPlacedObjects((prev) => prev.map((obj) => (obj.id === selectedObject.id ? { ...obj, ...finalUpdates } : obj)));

    setSelectedObject((prev) => (prev ? { ...prev, ...finalUpdates } : null));
    setHasUnsavedChanges(true);
  };

  // 객체 삭제
  const handleObjectDelete = () => {
    if (!selectedObject) return;

    setPlacedObjects((prev) => prev.filter((obj) => obj.id !== selectedObject.id));
    setSelectedObject(null);
    setHasUnsavedChanges(true);
  };

  // 저장
  const handleSave = async () => {
    if (!selectedDbConnection) {
      toast({
        title: "외부 DB 선택 필요",
        description: "외부 데이터베이스 연결을 선택하세요.",
        variant: "destructive",
      });
      return;
    }

    if (!selectedWarehouse) {
      toast({
        title: "창고 선택 필요",
        description: "창고를 선택하세요.",
        variant: "destructive",
      });
      return;
    }

    setIsSaving(true);
    try {
      const response = await updateLayout(layoutId, {
        layoutName: layoutName,
        description: undefined,
        objects: placedObjects.map((obj, index) => ({
          ...obj,
          displayOrder: index, // 현재 순서대로 저장
        })),
      });

      if (response.success) {
        toast({
          title: "저장 완료",
          description: `${placedObjects.length}개의 객체가 저장되었습니다.`,
        });

        setHasUnsavedChanges(false);

        // 저장 후 DB에서 할당된 ID로 객체 업데이트 (필요 시)
        // 현재는 updateLayout이 기존 객체 삭제 후 재생성하므로
        // 레이아웃 다시 불러오기
        const reloadResponse = await getLayoutById(layoutId);
        if (reloadResponse.success && reloadResponse.data) {
          const { objects } = reloadResponse.data;
          const reloadedObjects: PlacedObject[] = (objects as unknown as DbObject[]).map((obj) => ({
            id: obj.id,
            type: obj.object_type,
            name: obj.object_name,
            position: {
              x: parseFloat(obj.position_x),
              y: parseFloat(obj.position_y),
              z: parseFloat(obj.position_z),
            },
            size: {
              x: parseFloat(obj.size_x),
              y: parseFloat(obj.size_y),
              z: parseFloat(obj.size_z),
            },
            rotation: obj.rotation ? parseFloat(obj.rotation) : 0,
            color: obj.color,
            areaKey: obj.area_key,
            locaKey: obj.loca_key,
            locType: obj.loc_type,
            materialCount: obj.material_count,
            materialPreview: obj.material_preview_height
              ? { height: parseFloat(obj.material_preview_height) }
              : undefined,
            parentId: obj.parent_id,
            displayOrder: obj.display_order,
            locked: obj.locked,
            visible: obj.visible !== false,
          }));

          setPlacedObjects(reloadedObjects);
        }
      } else {
        throw new Error(response.error || "레이아웃 저장 실패");
      }
    } catch (error) {
      console.error("저장 실패:", error);
      const errorMessage = error instanceof Error ? error.message : "레이아웃 저장에 실패했습니다.";
      toast({
        title: "저장 실패",
        description: errorMessage,
        variant: "destructive",
      });
    } finally {
      setIsSaving(false);
    }
  };

  return (
    <div className="bg-background flex h-full flex-col">
      {/* 상단 툴바 */}
      <div className="flex items-center justify-between border-b p-4">
        <div className="flex items-center gap-4">
          <Button variant="ghost" size="sm" onClick={onBack}>
            <ArrowLeft className="mr-2 h-4 w-4" />
            목록으로
          </Button>
          <div>
            <h2 className="text-lg font-semibold">{layoutName}</h2>
            <p className="text-muted-foreground text-sm">디지털 트윈 야드 편집</p>
          </div>
        </div>

        <div className="flex items-center gap-2">
          {hasUnsavedChanges && <span className="text-warning text-sm font-medium">미저장 변경사항 있음</span>}
          <Button size="sm" onClick={handleSave} disabled={isSaving || !hasUnsavedChanges}>
            {isSaving ? (
              <>
                <Loader2 className="mr-2 h-4 w-4 animate-spin" />
                저장 중...
              </>
            ) : (
              <>
                <Save className="mr-2 h-4 w-4" />
                저장
              </>
            )}
          </Button>
        </div>
      </div>

      {/* 도구 팔레트 */}
      <div className="bg-muted flex items-center justify-center gap-2 border-b p-4">
        <span className="text-muted-foreground text-sm font-medium">도구:</span>
        {[
          { type: "area" as ToolType, label: "영역", icon: Grid3x3, color: "text-blue-500" },
          { type: "location-bed" as ToolType, label: "베드", icon: Package, color: "text-emerald-500" },
          { type: "location-stp" as ToolType, label: "정차", icon: Move, color: "text-orange-500" },
          // { type: "crane-gantry" as ToolType, label: "겐트리", icon: Combine, color: "text-green-500" },
          { type: "crane-mobile" as ToolType, label: "크레인", icon: Truck, color: "text-yellow-500" },
          { type: "rack" as ToolType, label: "랙", icon: Box, color: "text-purple-500" },
        ].map((tool) => {
          const Icon = tool.icon;
          return (
            <div
              key={tool.type}
              draggable
              onDragStart={() => handleToolDragStart(tool.type)}
              className="bg-background hover:bg-accent flex cursor-grab items-center gap-1 rounded-md border px-3 py-2 transition-colors active:cursor-grabbing"
              title={`${tool.label} 드래그하여 배치`}
            >
              <Icon className={`h-4 w-4 ${tool.color}`} />
              <span className="text-xs">{tool.label}</span>
            </div>
          );
        })}
      </div>

      {/* 메인 영역 */}
      <div className="flex flex-1 overflow-hidden">
        {/* 좌측: 외부 DB 선택 + 객체 목록 */}
        <div className="flex h-full w-[20%] flex-col border-r">
          {/* 스크롤 영역 */}
          <div className="flex-1 overflow-y-auto p-4 space-y-6">
            {/* 외부 DB 선택 */}
            <div>
              <Label className="mb-2 block text-sm font-semibold">외부 데이터베이스</Label>
              <Select
                value={selectedDbConnection?.toString() || ""}
                onValueChange={(value) => {
                  setSelectedDbConnection(parseInt(value));
                  setSelectedWarehouse(null);
                  setHasUnsavedChanges(true);
                }}
              >
                <SelectTrigger className="h-10 text-sm">
                  <SelectValue placeholder="DB 선택..." />
                </SelectTrigger>
                <SelectContent>
                  {externalDbConnections.map((conn) => (
                    <SelectItem key={conn.id} value={conn.id.toString()} className="text-sm">
                      {conn.name}
                    </SelectItem>
                  ))}
                </SelectContent>
              </Select>
            </div>

            {/* 테이블 매핑 선택 */}
            {selectedDbConnection && (
              <div className="space-y-3">
                <Label className="text-sm font-semibold">테이블 매핑 설정</Label>
                {loadingTables ? (
                  <div className="flex h-20 items-center justify-center">
                    <Loader2 className="text-muted-foreground h-4 w-4 animate-spin" />
                  </div>
                ) : (
                  <>
                    <div>
                      <Label className="text-muted-foreground mb-1 block text-xs">창고 테이블</Label>
                      <Select
                        value={selectedTables.warehouse}
                        onValueChange={(value) => {
                          setSelectedTables({ ...selectedTables, warehouse: value });
                          loadColumnsForTable(value, "warehouse");
                          setHasUnsavedChanges(true);
                        }}
                      >
                        <SelectTrigger className="h-9 text-xs">
                          <SelectValue placeholder="테이블 선택..." />
                        </SelectTrigger>
                        <SelectContent>
                          {availableTables.map((table) => (
                            <SelectItem key={table} value={table} className="text-xs">
                              {table}
                            </SelectItem>
                          ))}
                        </SelectContent>
                      </Select>
                    </div>

                    {/* 창고 컬럼 매핑 */}
                    {selectedTables.warehouse && tableColumns.warehouse && (
                      <div className="ml-2 space-y-2 border-l-2 pl-2">
                        <div>
                          <Label className="text-muted-foreground mb-1 block text-[10px]">ID 컬럼</Label>
                          <Select
                            value={selectedColumns.warehouseKey}
                            onValueChange={(value) => setSelectedColumns({ ...selectedColumns, warehouseKey: value })}
                          >
                            <SelectTrigger className="h-7 text-[10px]">
                              <SelectValue />
                            </SelectTrigger>
                            <SelectContent>
                              {tableColumns.warehouse.map((col) => (
                                <SelectItem key={col} value={col} className="text-xs">{col}</SelectItem>
                              ))}
                            </SelectContent>
                          </Select>
                        </div>
                        <div>
                          <Label className="text-muted-foreground mb-1 block text-[10px]">이름 컬럼</Label>
                          <Select
                            value={selectedColumns.warehouseName}
                            onValueChange={(value) => setSelectedColumns({ ...selectedColumns, warehouseName: value })}
                          >
                            <SelectTrigger className="h-7 text-[10px]">
                              <SelectValue />
                            </SelectTrigger>
                            <SelectContent>
                              {tableColumns.warehouse.map((col) => (
                                <SelectItem key={col} value={col} className="text-xs">{col}</SelectItem>
                              ))}
                            </SelectContent>
                          </Select>
                        </div>
                      </div>
                    )}

                    <div>
                      <Label className="text-muted-foreground mb-1 block text-xs">상위 영역 테이블 (예: Area)</Label>
                      <Select
                        value={selectedTables.area}
                        onValueChange={(value) => {
                          setSelectedTables({ ...selectedTables, area: value });
                          loadColumnsForTable(value, "area");
                          setHasUnsavedChanges(true);
                        }}
                      >
                        <SelectTrigger className="h-9 text-xs">
                          <SelectValue placeholder="테이블 선택..." />
                        </SelectTrigger>
                        <SelectContent>
                          {availableTables.map((table) => (
                            <SelectItem key={table} value={table} className="text-xs">
                              {table}
                            </SelectItem>
                          ))}
                        </SelectContent>
                      </Select>
                    </div>

                    <div>
                      <Label className="text-muted-foreground mb-1 block text-xs">하위 영역 테이블 (예: Location)</Label>
                      <Select
                        value={selectedTables.location}
                        onValueChange={(value) => {
                          setSelectedTables({ ...selectedTables, location: value });
                          loadColumnsForTable(value, "location");
                          setHasUnsavedChanges(true);
                        }}
                      >
                        <SelectTrigger className="h-9 text-xs">
                          <SelectValue placeholder="테이블 선택..." />
                        </SelectTrigger>
                        <SelectContent>
                          {availableTables.map((table) => (
                            <SelectItem key={table} value={table} className="text-xs">
                              {table}
                            </SelectItem>
                          ))}
                        </SelectContent>
                      </Select>
                    </div>

                    <div>
                      <Label className="text-muted-foreground mb-1 block text-xs">자재 테이블</Label>
                      <Select
                        value={selectedTables.material}
                        onValueChange={(value) => {
                          setSelectedTables({ ...selectedTables, material: value });
                          loadColumnsForTable(value, "material");
                          setHasUnsavedChanges(true);
                        }}
                      >
                        <SelectTrigger className="h-9 text-xs">
                          <SelectValue placeholder="테이블 선택..." />
                        </SelectTrigger>
                        <SelectContent>
                          {availableTables.map((table) => (
                            <SelectItem key={table} value={table} className="text-xs">
                              {table}
                            </SelectItem>
                          ))}
                        </SelectContent>
                      </Select>
                    </div>
                  </>
                )}
              </div>
            )}

            {/* 창고 선택 */}
            {selectedDbConnection && selectedTables.warehouse && (
              <div>
                <Label className="mb-2 block text-sm font-semibold">창고</Label>
                {loadingWarehouses ? (
                  <div className="flex h-10 items-center justify-center">
                    <Loader2 className="text-muted-foreground h-4 w-4 animate-spin" />
                  </div>
                ) : (
                  <Select
                    value={selectedWarehouse || ""}
                    onValueChange={(value) => {
                      setSelectedWarehouse(value);
                      setHasUnsavedChanges(true);
                    }}
                  >
                    <SelectTrigger className="h-10 text-sm">
                      <SelectValue placeholder="창고 선택..." />
                    </SelectTrigger>
                    <SelectContent>
                      {warehouses.map((wh: any) => (
                        <SelectItem 
                          key={wh[selectedColumns.warehouseKey] || wh.WAREKEY} 
                          value={wh[selectedColumns.warehouseKey] || wh.WAREKEY} 
                          className="text-sm"
                        >
                          {wh[selectedColumns.warehouseName] || wh.WARENAME || wh[selectedColumns.warehouseKey] || wh.WAREKEY}
                        </SelectItem>
                      ))}
                    </SelectContent>
                  </Select>
                )}
              </div>
            )}

            {/* Area 목록 */}
            {selectedDbConnection && selectedWarehouse && (
              <div className="space-y-3">
                <div className="flex items-center justify-between">
                  <h4 className="text-sm font-semibold">사용 가능한 Area</h4>
                  {loadingAreas && <Loader2 className="text-muted-foreground h-3 w-3 animate-spin" />}
                </div>

                {availableAreas.length === 0 ? (
                  <p className="text-muted-foreground text-xs">Area가 없습니다</p>
                ) : (
                  <div className="space-y-2">
                    {availableAreas.map((area) => (
                      <div
                        key={area.AREAKEY}
                        draggable
                        onDragStart={() => {
                          // Area 정보를 임시 저장
                          setDraggedTool("area");
                          setDraggedAreaData(area);
                        }}
                        onDragEnd={() => {
                          setDraggedAreaData(null);
                        }}
                        className="bg-background hover:bg-accent cursor-grab rounded-lg border p-3 transition-all active:cursor-grabbing"
                      >
                        <div className="flex items-center justify-between">
                          <div className="flex-1">
                            <p className="text-sm font-medium">{area.AREANAME}</p>
                            <p className="text-muted-foreground text-xs">{area.AREAKEY}</p>
                          </div>
                          <Grid3x3 className="text-muted-foreground h-4 w-4" />
                        </div>
                      </div>
                    ))}
                  </div>
                )}
              </div>
            )}

            {/* Location 목록 (Area 클릭 시 표시) */}
            {availableLocations.length > 0 && (
              <div className="space-y-3 border-t pt-4">
                <div className="flex items-center justify-between">
                  <h4 className="text-sm font-semibold">사용 가능한 Location</h4>
                  {loadingLocations && <Loader2 className="text-muted-foreground h-3 w-3 animate-spin" />}
                </div>

                <div className="space-y-2">
                  {availableLocations.map((location) => {
                    // Location 타입에 따라 ObjectType 결정
                    let locationType: ToolType = "location-bed";
                    if (location.LOCTYPE === "STP") {
                      locationType = "location-stp";
                    } else if (location.LOCTYPE === "TMP") {
                      locationType = "location-temp";
                    } else if (location.LOCTYPE === "DES") {
                      locationType = "location-dest";
                    }

                    return (
                      <div
                        key={location.LOCAKEY}
                        draggable
                        onDragStart={() => {
                          // Location 정보를 임시 저장
                          setDraggedTool(locationType);
                          setDraggedLocationData(location);
                        }}
                        onDragEnd={() => {
                          setDraggedLocationData(null);
                        }}
                        className="bg-background hover:bg-accent cursor-grab rounded-lg border p-3 transition-all active:cursor-grabbing"
                      >
                        <div className="flex items-center justify-between">
                          <div className="flex-1">
                            <p className="text-sm font-medium">{location.LOCANAME || location.LOCAKEY}</p>
                            <div className="text-muted-foreground mt-1 flex items-center gap-2 text-xs">
                              <span>{location.LOCAKEY}</span>
                              <span className="bg-muted rounded px-1.5 py-0.5">{location.LOCTYPE}</span>
                            </div>
                          </div>
                          <Package className="text-muted-foreground h-4 w-4" />
                        </div>
                      </div>
                    );
                  })}
                </div>
              </div>
            )}
          </div>

          {/* 배치된 객체 목록 */}
          <div className="flex-1 overflow-y-auto p-4">
            <h3 className="mb-3 text-sm font-semibold">배치된 객체 ({placedObjects.length})</h3>

            {placedObjects.length === 0 ? (
              <div className="text-muted-foreground text-center text-sm">상단 도구를 드래그하여 배치하세요</div>
            ) : (
              <div className="space-y-2">
                {placedObjects.map((obj) => (
                  <div
                    key={obj.id}
                    onClick={() => handleObjectClick(obj.id)}
                    className={`cursor-pointer rounded-lg border p-3 transition-all ${
                      selectedObject?.id === obj.id ? "border-primary bg-primary/10" : "hover:border-primary/50"
                    }`}
                  >
                    <div className="flex items-center justify-between">
                      <span className="text-sm font-medium">{obj.name}</span>
                      <div className="h-3 w-3 rounded-full" style={{ backgroundColor: obj.color }} />
                    </div>
                    <p className="text-muted-foreground mt-1 text-xs">
                      위치: ({obj.position.x.toFixed(1)}, {obj.position.z.toFixed(1)})
                    </p>
                    {obj.areaKey && <p className="text-muted-foreground mt-1 text-xs">Area: {obj.areaKey}</p>}
                  </div>
                ))}
              </div>
            )}
          </div>
        </div>

        {/* 중앙: 3D 캔버스 */}
        <div
          className="h-full flex-1 bg-gray-100"
          onDragOver={(e) => e.preventDefault()}
          onDrop={(e) => {
            e.preventDefault();
            const rect = e.currentTarget.getBoundingClientRect();
            const rawX = ((e.clientX - rect.left) / rect.width - 0.5) * 100;
            const rawZ = ((e.clientY - rect.top) / rect.height - 0.5) * 100;

            // 그리드 크기 (5 단위)
            const gridSize = 5;

            // 그리드에 스냅
            // Area(20x20)는 그리드 교차점에, 다른 객체(5x5)는 타일 중앙에
            let snappedX = Math.round(rawX / gridSize) * gridSize;
            let snappedZ = Math.round(rawZ / gridSize) * gridSize;

            // 5x5 객체는 타일 중앙으로 오프셋 (Area는 제외)
            if (draggedTool !== "area") {
              snappedX += gridSize / 2;
              snappedZ += gridSize / 2;
            }

            handleCanvasDrop(snappedX, snappedZ);
          }}
        >
          {isLoading ? (
            <div className="flex h-full items-center justify-center">
              <Loader2 className="text-muted-foreground h-8 w-8 animate-spin" />
            </div>
          ) : (
            <Yard3DCanvas
              placements={placements}
              selectedPlacementId={selectedObject?.id || null}
              onPlacementClick={(placement) => handleObjectClick(placement?.id || null)}
              onPlacementDrag={(id, position) => handleObjectMove(id, position.x, position.z, position.y)}
              focusOnPlacementId={null}
              onCollisionDetected={() => {}}
            />
          )}
        </div>

        {/* 우측: 객체 속성 편집 or 자재 목록 */}
        <div className="h-full w-[25%] overflow-y-auto border-l">
          {showMaterialPanel && selectedObject ? (
            /* 자재 목록 패널 */
            <div className="p-4">
              <div className="mb-4 flex items-center justify-between">
                <div>
                  <h3 className="text-lg font-semibold">자재 목록</h3>
                  <p className="text-muted-foreground text-xs">
                    {selectedObject.name} ({selectedObject.locaKey})
                  </p>
                </div>
                <Button variant="ghost" size="sm" onClick={() => setShowMaterialPanel(false)}>
                  닫기
                </Button>
              </div>

              {loadingMaterials ? (
                <div className="flex h-32 items-center justify-center">
                  <Loader2 className="text-muted-foreground h-6 w-6 animate-spin" />
                </div>
              ) : materials.length === 0 ? (
                <div className="text-muted-foreground flex h-32 items-center justify-center text-sm">
                  자재가 없습니다
                </div>
              ) : (
                <div className="space-y-2">
                  {materials.map((material, index) => (
                    <div
                      key={`${material.STKKEY}-${index}`}
                      className="bg-muted hover:bg-accent rounded-lg border p-3 transition-colors"
                    >
                      <div className="mb-2 flex items-start justify-between">
                        <div className="flex-1">
                          <p className="text-sm font-medium">{material.STKKEY}</p>
                          <p className="text-muted-foreground mt-0.5 text-xs">
                            층: {material.LOLAYER} | Area: {material.AREAKEY}
                          </p>
                        </div>
                      </div>
                      <div className="text-muted-foreground grid grid-cols-2 gap-2 text-xs">
                        {material.STKWIDT && (
                          <div>
                            폭: <span className="font-medium">{material.STKWIDT}</span>
                          </div>
                        )}
                        {material.STKLENG && (
                          <div>
                            길이: <span className="font-medium">{material.STKLENG}</span>
                          </div>
                        )}
                        {material.STKHEIG && (
                          <div>
                            높이: <span className="font-medium">{material.STKHEIG}</span>
                          </div>
                        )}
                        {material.STKWEIG && (
                          <div>
                            무게: <span className="font-medium">{material.STKWEIG}</span>
                          </div>
                        )}
                      </div>
                      {material.STKRMKS && (
                        <p className="text-muted-foreground mt-2 text-xs italic">{material.STKRMKS}</p>
                      )}
                    </div>
                  ))}
                </div>
              )}
            </div>
          ) : selectedObject ? (
            <div className="p-4">
              <h3 className="mb-4 text-lg font-semibold">객체 속성</h3>

              <div className="space-y-4">
                {/* 이름 */}
                <div>
                  <Label htmlFor="object-name" className="text-sm">
                    이름
                  </Label>
                  <Input
                    id="object-name"
                    value={selectedObject.name}
                    onChange={(e) => handleObjectUpdate({ name: e.target.value })}
                    className="mt-1.5 h-9 text-sm"
                  />
                </div>

                {/* 위치 */}
                <div>
                  <Label className="text-sm">위치</Label>
                  <div className="mt-1.5 grid grid-cols-2 gap-2">
                    <div>
                      <Label htmlFor="pos-x" className="text-muted-foreground text-xs">
                        X
                      </Label>
                      <Input
                        id="pos-x"
                        type="number"
                        value={selectedObject.position.x.toFixed(1)}
                        onChange={(e) =>
                          handleObjectUpdate({
                            position: {
                              ...selectedObject.position,
                              x: parseFloat(e.target.value),
                            },
                          })
                        }
                        className="h-9 text-sm"
                      />
                    </div>
                    <div>
                      <Label htmlFor="pos-z" className="text-muted-foreground text-xs">
                        Z
                      </Label>
                      <Input
                        id="pos-z"
                        type="number"
                        value={selectedObject.position.z.toFixed(1)}
                        onChange={(e) =>
                          handleObjectUpdate({
                            position: {
                              ...selectedObject.position,
                              z: parseFloat(e.target.value),
                            },
                          })
                        }
                        className="h-9 text-sm"
                      />
                    </div>
                  </div>
                </div>

                {/* 크기 */}
                <div>
                  <Label className="text-sm">크기</Label>
                  <div className="mt-1.5 grid grid-cols-3 gap-2">
                    <div>
                      <Label htmlFor="size-x" className="text-muted-foreground text-xs">
                        W (5 단위)
                      </Label>
                      <Input
                        id="size-x"
                        type="number"
                        step="5"
                        min="5"
                        value={selectedObject.size.x}
                        onChange={(e) =>
                          handleObjectUpdate({
                            size: {
                              ...selectedObject.size,
                              x: parseFloat(e.target.value),
                            },
                          })
                        }
                        className="h-9 text-sm"
                      />
                    </div>
                    <div>
                      <Label htmlFor="size-y" className="text-muted-foreground text-xs">
                        H
                      </Label>
                      <Input
                        id="size-y"
                        type="number"
                        value={selectedObject.size.y}
                        onChange={(e) =>
                          handleObjectUpdate({
                            size: {
                              ...selectedObject.size,
                              y: parseFloat(e.target.value),
                            },
                          })
                        }
                        className="h-9 text-sm"
                      />
                    </div>
                    <div>
                      <Label htmlFor="size-z" className="text-muted-foreground text-xs">
                        D (5 단위)
                      </Label>
                      <Input
                        id="size-z"
                        type="number"
                        step="5"
                        min="5"
                        value={selectedObject.size.z}
                        onChange={(e) =>
                          handleObjectUpdate({
                            size: {
                              ...selectedObject.size,
                              z: parseFloat(e.target.value),
                            },
                          })
                        }
                        className="h-9 text-sm"
                      />
                    </div>
                  </div>
                </div>

                {/* 색상 */}
                <div>
                  <Label htmlFor="object-color" className="text-sm">
                    색상
                  </Label>
                  <Input
                    id="object-color"
                    type="color"
                    value={selectedObject.color}
                    onChange={(e) => handleObjectUpdate({ color: e.target.value })}
                    className="mt-1.5 h-9"
                  />
                </div>

                {/* 삭제 버튼 */}
                <Button variant="destructive" size="sm" onClick={handleObjectDelete} className="w-full">
                  객체 삭제
                </Button>
              </div>
            </div>
          ) : (
            <div className="flex h-full items-center justify-center p-4 text-center">
              <p className="text-muted-foreground text-sm">객체를 선택하면 속성을 편집할 수 있습니다</p>
            </div>
          )}
        </div>
      </div>
    </div>
  );
}