"use client";

import { useState, useEffect, useMemo } from "react";
import { Button } from "@/components/ui/button";
import { ArrowLeft, Save, Loader2, Grid3x3, Move, Box, Package, Truck, Check } 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 { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from "@/components/ui/accordion";
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,
  getHierarchyData,
  getChildrenData,
  type HierarchyData,
} from "@/lib/api/digitalTwin";
import type { MaterialData } from "@/types/digitalTwin";
import { ExternalDbConnectionAPI } from "@/lib/api/externalDbConnection";
import HierarchyConfigPanel, { HierarchyConfig } from "./HierarchyConfigPanel";
import { OBJECT_COLORS, DEFAULT_COLOR } from "./constants";
import { validateSpatialContainment, updateChildrenPositions, getAllDescendants } from "./spatialContainment";

// 백엔드 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 [previewPosition, setPreviewPosition] = useState<{ x: number; z: number } | null>(null); // 드래그 프리뷰 위치
  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 [hierarchyConfig, setHierarchyConfig] = useState<HierarchyConfig | null>(null);
  const [availableTables, setAvailableTables] = useState<Array<{ table_name: string; description?: string }>>([]);
  const [loadingTables, setLoadingTables] = useState(false);

  // 레거시: 테이블 매핑 (구 Area/Location 방식 호환용)
  const [selectedTables, setSelectedTables] = useState<{
    warehouse: string;
    area: string;
    location: string;
    material: string;
  }>({
    warehouse: "",
    area: "",
    location: "",
    material: "",
  });
  const [tableColumns, setTableColumns] = useState<{
    warehouse?: { name: string; code: string };
    area?: { name: string; code: string; warehouseCode: string };
    location?: { name: string; code: string; areaCode: string };
  }>({});
  const [selectedColumns, setSelectedColumns] = useState<{
    warehouseKey: string;
    warehouseName: string;
    areaKey: string;
    areaName: string;
    areaWarehouseKey: string;
    locationKey: string;
    locationName: string;
    locationAreaKey: string;
    materialKey?: string;
  }>({
    warehouseKey: "WAREKEY",
    warehouseName: "WARENAME",
    areaKey: "AREAKEY",
    areaName: "AREANAME",
    areaWarehouseKey: "WAREKEY",
    locationKey: "LOCAKEY",
    locationName: "LOCANAME",
    locationAreaKey: "AREAKEY",
    materialKey: "LOCAKEY",
  });

  // 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: "" }); // warehouse는 HierarchyConfigPanel에서 관리
      return;
    }

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

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

  // 동적 계층 구조 데이터 로드
  useEffect(() => {
    const loadHierarchy = async () => {
      if (!selectedDbConnection || !hierarchyConfig) {
        return;
      }

      // 필수 필드 검증: 창고가 선택되었는지 확인
      if (!hierarchyConfig.warehouseKey) {
        return;
      }

      // 레벨 설정 검증
      if (!hierarchyConfig.levels || hierarchyConfig.levels.length === 0) {
        return;
      }

      // 각 레벨의 필수 필드 검증
      for (const level of hierarchyConfig.levels) {
        if (!level.tableName || !level.keyColumn || !level.nameColumn) {
          return;
        }
      }

      try {
        const response = await getHierarchyData(selectedDbConnection, hierarchyConfig);
        if (response.success && response.data) {
          const { warehouse, levels, materials } = response.data;

          // 창고 데이터 설정
          if (warehouse) {
            setWarehouses(warehouse);
          }

          // 레벨 데이터 설정
          // 기존 호환성을 위해 레벨 1 -> Area, 레벨 2 -> Location으로 매핑
          // TODO: UI를 동적으로 생성하도록 개선 필요
          const level1 = levels.find((l) => l.level === 1);
          if (level1) {
            setAvailableAreas(level1.data);
          }

          const level2 = levels.find((l) => l.level === 2);
          if (level2) {
            setAvailableLocations(level2.data);
          }

          console.log("계층 데이터 로드 완료:", response.data);
        }
      } catch (error) {
        console.error("계층 데이터 로드 실패:", error);
      }
    };

    loadHierarchy();
  }, [selectedDbConnection, hierarchyConfig]);

  // 테이블 컬럼 로드
  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 () => {
      if (!hierarchyConfig?.warehouse?.tableName) {
        return;
      }
      try {
        setLoadingWarehouses(true);
        const response = await getWarehouses(selectedDbConnection, hierarchyConfig.warehouse.tableName);
        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, hierarchyConfig?.warehouse?.tableName]); // hierarchyConfig.warehouse.tableName 추가

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

    // Area 테이블명이 설정되지 않으면 API 호출 스킵
    if (!selectedTables.area) {
      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 연결 ID 복원
          if (layout.external_db_connection_id) {
            setSelectedDbConnection(layout.external_db_connection_id);
          }

          // 계층 구조 설정 로드
          if (layout.hierarchy_config) {
            try {
              // hierarchy_config가 문자열이면 파싱, 객체면 그대로 사용
              const config =
                typeof layout.hierarchy_config === "string"
                  ? JSON.parse(layout.hierarchy_config)
                  : layout.hierarchy_config;
              setHierarchyConfig(config);

              // 선택된 테이블 정보도 복원
              const newSelectedTables: any = {
                warehouse: config.warehouse?.tableName || "",
                area: "",
                location: "",
                material: "",
              };

              if (config.levels && config.levels.length > 0) {
                // 레벨 1 = Area
                if (config.levels[0]?.tableName) {
                  newSelectedTables.area = config.levels[0].tableName;
                }
                // 레벨 2 = Location
                if (config.levels[1]?.tableName) {
                  newSelectedTables.location = config.levels[1].tableName;
                }
              }

              // 자재 테이블 정보
              if (config.material?.tableName) {
                newSelectedTables.material = config.material.tableName;
              }

              setSelectedTables(newSelectedTables);
            } catch (e) {
              console.error("계층 구조 설정 파싱 실패:", e);
            }
          }

          // 객체 데이터 변환 (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,
            hierarchyLevel: obj.hierarchy_level || 1,
            parentKey: obj.parent_key,
            externalKey: obj.external_key,
          }));

          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(() => {
    console.log("🔍 useEffect 실행:", {
      layoutData: !!layoutData,
      external_db_connection_id: layoutData?.layout?.external_db_connection_id,
      externalDbConnections: externalDbConnections.length,
    });

    if (!layoutData || !layoutData.layout.external_db_connection_id || externalDbConnections.length === 0) {
      console.log("🔍 조건 미충족으로 종료");
      return;
    }

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

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

    if (connectionExists) {
      setSelectedDbConnection(layout.external_db_connection_id);
      if (layout.warehouse_key) {
        setSelectedWarehouse(layout.warehouse_key);
      }
      console.log("✅ 외부 DB 연결 자동 선택 완료:", layout.external_db_connection_id);
    } else {
      console.warn("⚠️ 저장된 외부 DB 연결을 찾을 수 없습니다:", layout.external_db_connection_id);
      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 = async (x: number, z: number) => {
    if (!draggedTool) return;

    const defaults = getToolDefaults(draggedTool);

    // Area는 바닥(y=0.05)에, 다른 객체는 중앙 정렬
    let 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;
    let hierarchyLevel = 1;
    let parentKey: string | undefined = undefined;
    let externalKey: string | undefined = undefined;

    if (draggedTool === "area" && draggedAreaData) {
      objectName = draggedAreaData.AREANAME;
      areaKey = draggedAreaData.AREAKEY;
      // 계층 정보 설정 (예: Area는 레벨 1)
      hierarchyLevel = 1;
      externalKey = 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;
      // 계층 정보 설정 (예: Location은 레벨 2)
      hierarchyLevel = 2;
      parentKey = draggedLocationData.AREAKEY;
      externalKey = draggedLocationData.LOCAKEY;
    }

    // 기본 크기 설정
    let objectSize = defaults.size || { x: 5, y: 5, z: 5 };

    // Location 배치 시 자재 개수에 따라 높이 자동 설정
    if (
      (draggedTool === "location-bed" ||
        draggedTool === "location-stp" ||
        draggedTool === "location-temp" ||
        draggedTool === "location-dest") &&
      locaKey &&
      selectedDbConnection &&
      hierarchyConfig?.material
    ) {
      try {
        // 해당 Location의 자재 개수 조회
        const countsResponse = await getMaterialCounts(selectedDbConnection, hierarchyConfig.material.tableName, [
          locaKey,
        ]);

        if (countsResponse.success && countsResponse.data && countsResponse.data.length > 0) {
          const materialCount = countsResponse.data[0].count;

          // 자재 개수에 비례해서 높이(Y축) 설정 (최소 5, 최대 30)
          // 자재 1개 = 높이 5, 자재 10개 = 높이 15, 자재 50개 = 높이 30
          const calculatedHeight = Math.min(30, Math.max(5, 5 + materialCount * 0.5));

          objectSize = {
            ...objectSize,
            y: calculatedHeight, // Y축이 높이!
          };

          // 높이가 높아진 만큼 Y 위치도 올려서 바닥을 뚫지 않게 조정
          yPosition = calculatedHeight / 2;
        }
      } catch (error) {
        console.error("자재 개수 조회 실패, 기본 높이 사용:", error);
      }
    }

    const newObject: PlacedObject = {
      id: nextObjectId,
      type: draggedTool,
      name: objectName,
      position: { x, y: yPosition, z },
      size: objectSize,
      color: OBJECT_COLORS[draggedTool] || DEFAULT_COLOR, // 타입별 기본 색상
      areaKey,
      locaKey,
      locType,
      hierarchyLevel,
      parentKey,
      externalKey,
    };

    // 공간적 종속성 검증
    if (hierarchyConfig && hierarchyLevel > 1) {
      const validation = validateSpatialContainment(
        {
          id: newObject.id,
          position: newObject.position,
          size: newObject.size,
          hierarchyLevel: newObject.hierarchyLevel || 1,
          parentId: newObject.parentId,
        },
        placedObjects.map((obj) => ({
          id: obj.id,
          position: obj.position,
          size: obj.size,
          hierarchyLevel: obj.hierarchyLevel || 1,
          parentId: obj.parentId,
        })),
      );

      if (!validation.valid) {
        toast({
          variant: "destructive",
          title: "배치 오류",
          description: "하위 영역은 반드시 상위 영역 내부에 배치되어야 합니다.",
        });
        return;
      }

      // 부모 ID 설정 및 논리적 유효성 검사
      if (validation.parent) {
        // 1. 부모 객체 찾기
        const parentObj = placedObjects.find((obj) => obj.id === validation.parent!.id);

        // 2. 논리적 키 검사 (DB에서 가져온 데이터인 경우)
        if (parentObj && parentObj.externalKey && newObject.parentKey) {
          if (parentObj.externalKey !== newObject.parentKey) {
            toast({
              variant: "destructive",
              title: "배치 오류",
              description: `이 Location은 '${newObject.parentKey}' Area에만 배치할 수 있습니다. (현재 선택된 Area: ${parentObj.externalKey})`,
            });
            return;
          }
        }

        newObject.parentId = validation.parent.id;
      } else if (newObject.parentKey) {
        // DB 데이터인데 부모 영역 위에 놓이지 않은 경우
        toast({
          variant: "destructive",
          title: "배치 오류",
          description: `이 Location은 '${newObject.parentKey}' Area 내부에 배치해야 합니다.`,
        });
        return;
      }
    }

    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([locaKey!]);
      }, 100);
    }
  };

  // Location의 자재 목록 로드
  const loadMaterialsForLocation = async (locaKey: string) => {
    console.log("🔍 자재 조회 시작:", { locaKey, selectedDbConnection, material: hierarchyConfig?.material });

    if (!selectedDbConnection || !hierarchyConfig?.material) {
      console.error("❌ 설정 누락:", { selectedDbConnection, material: hierarchyConfig?.material });
      toast({
        variant: "destructive",
        title: "자재 조회 실패",
        description: "자재 테이블 설정이 필요합니다.",
      });
      return;
    }

    try {
      setLoadingMaterials(true);
      setShowMaterialPanel(true);

      const materialConfig = {
        ...hierarchyConfig.material,
        locaKey: locaKey,
      };
      console.log("📡 API 호출:", { externalDbConnectionId: selectedDbConnection, materialConfig });

      const response = await getMaterials(selectedDbConnection, materialConfig);
      console.log("📦 API 응답:", response);
      if (response.success && response.data) {
        // layerColumn이 있으면 정렬
        const sortedMaterials = hierarchyConfig.material.layerColumn
          ? response.data.sort((a: any, b: any) => {
              const aLayer = a[hierarchyConfig.material!.layerColumn!] || 0;
              const bLayer = b[hierarchyConfig.material!.layerColumn!] || 0;
              return aLayer - bLayer;
            })
          : response.data;
        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) => {
    setPlacedObjects((prev) => {
      const targetObj = prev.find((obj) => obj.id === objectId);
      if (!targetObj) return prev;

      const oldPosition = targetObj.position;
      const newPosition = {
        x: newX,
        y: newY !== undefined ? newY : oldPosition.y,
        z: newZ,
      };

      // 1. 이동 대상 객체 업데이트
      let updatedObjects = prev.map((obj) => {
        if (obj.id === objectId) {
          return { ...obj, position: newPosition };
        }
        return obj;
      });

      // 2. 하위 계층 객체 이동 시 논리적 키 검증
      if (hierarchyConfig && targetObj.hierarchyLevel && targetObj.hierarchyLevel > 1) {
        const spatialObjects = updatedObjects.map((obj) => ({
          id: obj.id,
          position: obj.position,
          size: obj.size,
          hierarchyLevel: obj.hierarchyLevel || 1,
          parentId: obj.parentId,
        }));

        const targetSpatialObj = spatialObjects.find((obj) => obj.id === objectId);
        if (targetSpatialObj) {
          const validation = validateSpatialContainment(
            targetSpatialObj,
            spatialObjects.filter((obj) => obj.id !== objectId),
          );

          // 새로운 부모 영역 찾기
          if (validation.parent) {
            const newParentObj = prev.find((obj) => obj.id === validation.parent!.id);

            // DB에서 가져온 데이터인 경우 논리적 키 검증
            if (newParentObj && newParentObj.externalKey && targetObj.parentKey) {
              if (newParentObj.externalKey !== targetObj.parentKey) {
                toast({
                  variant: "destructive",
                  title: "이동 불가",
                  description: `이 Location은 '${targetObj.parentKey}' Area에만 배치할 수 있습니다. (현재 선택된 Area: ${newParentObj.externalKey})`,
                });
                return prev; // 이동 취소
              }
            }

            // 부모 ID 업데이트
            updatedObjects = updatedObjects.map((obj) => {
              if (obj.id === objectId) {
                return { ...obj, parentId: validation.parent!.id };
              }
              return obj;
            });
          } else if (targetObj.parentKey) {
            // DB 데이터인데 부모 영역 밖으로 이동하려는 경우
            toast({
              variant: "destructive",
              title: "이동 불가",
              description: `이 Location은 '${targetObj.parentKey}' Area 내부에 있어야 합니다.`,
            });
            return prev; // 이동 취소
          }
        }
      }

      // 3. 그룹 이동: 자식 객체들도 함께 이동
      const spatialObjects = updatedObjects.map((obj) => ({
        id: obj.id,
        position: obj.position,
        size: obj.size,
        hierarchyLevel: obj.hierarchyLevel || 1,
        parentId: obj.parentId,
      }));

      const descendants = getAllDescendants(objectId, spatialObjects);

      if (descendants.length > 0) {
        const delta = {
          x: newPosition.x - oldPosition.x,
          y: newPosition.y - oldPosition.y,
          z: newPosition.z - oldPosition.z,
        };

        updatedObjects = updatedObjects.map((obj) => {
          if (descendants.some((d) => d.id === obj.id)) {
            return {
              ...obj,
              position: {
                x: obj.position.x + delta.x,
                y: obj.position.y + delta.y,
                z: obj.position.z + delta.z,
              },
            };
          }
          return obj;
        });
      }

      return updatedObjects;
    });

    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,
        hierarchyConfig: hierarchyConfig, // 계층 구조 설정
        externalDbConnectionId: selectedDbConnection, // 외부 DB 연결 ID
        warehouseKey: selectedWarehouse, // 선택된 창고
        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-blue-600" },
          { type: "location-stp" as ToolType, label: "정차", icon: Move, color: "text-gray-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 space-y-6 overflow-y-auto p-4">
            {/* 외부 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 && (
              <HierarchyConfigPanel
                externalDbConnectionId={selectedDbConnection}
                hierarchyConfig={hierarchyConfig}
                onHierarchyConfigChange={(config) => {
                  // 새로운 객체로 생성하여 참조 변경 (useEffect 트리거를 위해)
                  setHierarchyConfig({ ...config });

                  // 레벨 테이블 정보를 selectedTables와 동기화
                  const newSelectedTables: any = { ...selectedTables };

                  // 창고 테이블 정보
                  if (config.warehouse?.tableName) {
                    newSelectedTables.warehouse = config.warehouse.tableName;
                  }

                  if (config.levels && config.levels.length > 0) {
                    // 레벨 1 = Area
                    if (config.levels[0]?.tableName) {
                      newSelectedTables.area = config.levels[0].tableName;
                    }
                    // 레벨 2 = Location
                    if (config.levels[1]?.tableName) {
                      newSelectedTables.location = config.levels[1].tableName;
                    }
                  }

                  // 자재 테이블 정보
                  if (config.material?.tableName) {
                    newSelectedTables.material = config.material.tableName;
                  }

                  setSelectedTables(newSelectedTables);
                  setHasUnsavedChanges(true);
                }}
                availableTables={availableTables}
                onLoadTables={async () => {
                  // 이미 로드되어 있으므로 스킵
                }}
                onLoadColumns={async (tableName: string) => {
                  try {
                    const response = await ExternalDbConnectionAPI.getTableColumns(selectedDbConnection, tableName);
                    if (response.success && response.data) {
                      // 컬럼 정보 객체 배열로 반환 (이름 + 설명)
                      return response.data.map((col: any) => ({
                        column_name: typeof col === "string" ? col : col.column_name || col.COLUMN_NAME || String(col),
                        data_type: col.data_type || col.DATA_TYPE,
                        description: col.description || col.COLUMN_COMMENT || undefined,
                      }));
                    }
                    return [];
                  } catch (error) {
                    console.error("컬럼 로드 실패:", error);
                    return [];
                  }
                }}
              />
            )}

            {/* 창고 선택 (HierarchyConfigPanel 아래로 이동) */}
            {selectedDbConnection && hierarchyConfig?.warehouse?.tableName && hierarchyConfig?.warehouse?.keyColumn && (
              <div className="space-y-3">
                <Label className="text-sm font-semibold">창고 선택</Label>

                <div>
                  <Label className="text-muted-foreground mb-1 block text-xs">배치할 창고를 선택하세요</Label>
                  {loadingWarehouses ? (
                    <div className="flex h-9 items-center justify-center rounded-md border">
                      <Loader2 className="text-muted-foreground h-4 w-4 animate-spin" />
                    </div>
                  ) : (
                    <Select
                      value={selectedWarehouse || ""}
                      onValueChange={(value) => {
                        setSelectedWarehouse(value);
                        // hierarchyConfig 업데이트
                        setHierarchyConfig((prev) => ({
                          ...prev,
                          warehouseKey: value,
                          levels: prev?.levels || [],
                          material: prev?.material,
                          warehouse: prev?.warehouse,
                        }));
                        setHasUnsavedChanges(true);
                      }}
                    >
                      <SelectTrigger className="h-9 text-xs">
                        <SelectValue placeholder="창고 선택..." />
                      </SelectTrigger>
                      <SelectContent>
                        {warehouses.map((wh: any) => {
                          const keyCol = hierarchyConfig.warehouse!.keyColumn;
                          const nameCol = hierarchyConfig.warehouse!.nameColumn;
                          return (
                            <SelectItem key={wh[keyCol]} value={wh[keyCol]} className="text-xs">
                              {wh[nameCol] || wh[keyCol]}
                            </SelectItem>
                          );
                        })}
                      </SelectContent>
                    </Select>
                  )}
                </div>
              </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) => {
                      // 이미 배치된 Area인지 확인
                      const isPlaced = placedObjects.some((obj) => obj.areaKey === area.AREAKEY);

                      return (
                        <div
                          key={area.AREAKEY}
                          draggable={!isPlaced}
                          onDragStart={() => {
                            if (isPlaced) return;
                            // Area 정보를 임시 저장
                            setDraggedTool("area");
                            setDraggedAreaData(area);
                          }}
                          onDragEnd={() => {
                            setDraggedAreaData(null);
                          }}
                          className={`rounded-lg border p-3 transition-all ${
                            isPlaced
                              ? "bg-muted text-muted-foreground cursor-not-allowed opacity-60"
                              : "bg-background hover:bg-accent cursor-grab 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>
                            {isPlaced ? (
                              <span className="text-muted-foreground text-xs">배치됨</span>
                            ) : (
                              <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";
                    }

                    // Location이 이미 배치되었는지 확인
                    const isLocationPlaced = placedObjects.some(
                      (obj) =>
                        (obj.type === "location-bed" ||
                          obj.type === "location-stp" ||
                          obj.type === "location-temp" ||
                          obj.type === "location-dest") &&
                        obj.locaKey === location.LOCAKEY,
                    );

                    return (
                      <div
                        key={location.LOCAKEY}
                        draggable={!isLocationPlaced}
                        onDragStart={() => {
                          if (!isLocationPlaced) {
                            setDraggedTool(locationType);
                            setDraggedLocationData(location);
                          }
                        }}
                        onDragEnd={() => {
                          setDraggedLocationData(null);
                        }}
                        className={`rounded-lg border p-3 transition-all ${
                          isLocationPlaced
                            ? "bg-muted text-muted-foreground cursor-not-allowed opacity-60"
                            : "bg-background hover:bg-accent cursor-grab 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>
                          {isLocationPlaced ? (
                            <Check className="h-4 w-4 text-green-500" />
                          ) : (
                            <Package className="text-muted-foreground h-4 w-4" />
                          )}
                        </div>
                      </div>
                    );
                  })}
                </div>
              </div>
            )}
          </div>

          {/* 배치된 객체 목록 (계층 구조) */}
          <div className="flex-1 overflow-y-auto border-t 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>
            ) : (
              <Accordion type="multiple" className="w-full">
                {/* Area별로 그룹핑 */}
                {(() => {
                  // Area 객체들
                  const areaObjects = placedObjects.filter((obj) => obj.type === "area");

                  // Area가 없으면 기존 방식으로 표시
                  if (areaObjects.length === 0) {
                    return (
                      <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>
                          </div>
                        ))}
                      </div>
                    );
                  }

                  // Area별로 Location들을 그룹핑
                  return areaObjects.map((areaObj) => {
                    // 이 Area의 자식 Location들 찾기
                    const childLocations = placedObjects.filter(
                      (obj) =>
                        obj.type !== "area" &&
                        obj.areaKey === areaObj.areaKey &&
                        (obj.parentId === areaObj.id || obj.externalKey === areaObj.externalKey),
                    );

                    return (
                      <AccordionItem key={areaObj.id} value={`area-${areaObj.id}`} className="border-b">
                        <AccordionTrigger className="px-2 py-3 hover:no-underline">
                          <div
                            className={`flex w-full items-center justify-between pr-2 ${
                              selectedObject?.id === areaObj.id ? "text-primary font-semibold" : ""
                            }`}
                            onClick={(e) => {
                              e.stopPropagation();
                              handleObjectClick(areaObj.id);
                            }}
                          >
                            <div className="flex items-center gap-2">
                              <Grid3x3 className="h-4 w-4" />
                              <span className="text-sm font-medium">{areaObj.name}</span>
                            </div>
                            <div className="flex items-center gap-2">
                              <span className="text-muted-foreground text-xs">({childLocations.length})</span>
                              <div className="h-3 w-3 rounded-full" style={{ backgroundColor: areaObj.color }} />
                            </div>
                          </div>
                        </AccordionTrigger>
                        <AccordionContent className="px-2 pb-3">
                          {childLocations.length === 0 ? (
                            <p className="text-muted-foreground py-2 text-center text-xs">Location이 없습니다</p>
                          ) : (
                            <div className="space-y-2">
                              {childLocations.map((locationObj) => (
                                <div
                                  key={locationObj.id}
                                  onClick={() => handleObjectClick(locationObj.id)}
                                  className={`cursor-pointer rounded-lg border p-2 transition-all ${
                                    selectedObject?.id === locationObj.id
                                      ? "border-primary bg-primary/10"
                                      : "hover:border-primary/50"
                                  }`}
                                >
                                  <div className="flex items-center justify-between">
                                    <div className="flex items-center gap-2">
                                      <Package className="h-3 w-3" />
                                      <span className="text-xs font-medium">{locationObj.name}</span>
                                    </div>
                                    <div
                                      className="h-2.5 w-2.5 rounded-full"
                                      style={{ backgroundColor: locationObj.color }}
                                    />
                                  </div>
                                  <p className="text-muted-foreground mt-1 text-[10px]">
                                    위치: ({locationObj.position.x.toFixed(1)}, {locationObj.position.z.toFixed(1)})
                                  </p>
                                  {locationObj.locaKey && (
                                    <p className="text-muted-foreground mt-0.5 text-[10px]">
                                      Key: {locationObj.locaKey}
                                    </p>
                                  )}
                                </div>
                              ))}
                            </div>
                          )}
                        </AccordionContent>
                      </AccordionItem>
                    );
                  });
                })()}
              </Accordion>
            )}
          </div>
        </div>

        {/* 중앙: 3D 캔버스 */}
        <div className="relative h-full flex-1 bg-gray-100">
          {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={() => {}}
                previewTool={draggedTool}
                previewPosition={previewPosition}
                onPreviewPositionUpdate={setPreviewPosition}
              />
              {/* 드래그 중일 때 Canvas 위에 투명한 오버레이 (프리뷰 및 드롭 이벤트 캐치용) */}
              {draggedTool && (
                <div
                  className="pointer-events-auto absolute inset-0"
                  style={{ zIndex: 10 }}
                  onDragOver={(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;

                    // 그리드에 스냅
                    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;
                    }

                    setPreviewPosition({ x: snappedX, z: snappedZ });
                  }}
                  onDragLeave={() => {
                    setPreviewPosition(null);
                  }}
                  onDrop={(e) => {
                    e.preventDefault();
                    e.stopPropagation();
                    if (previewPosition) {
                      handleCanvasDrop(previewPosition.x, previewPosition.z);
                      setPreviewPosition(null);
                    }
                    setDraggedTool(null);
                    setDraggedAreaData(null);
                    setDraggedLocationData(null);
                  }}
                />
              )}
            </>
          )}
        </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>
              ) : (
                <Accordion type="single" collapsible className="w-full">
                  {materials.map((material, index) => {
                    const layerColumn = hierarchyConfig?.material?.layerColumn || "LOLAYER";
                    const keyColumn = hierarchyConfig?.material?.keyColumn || "STKKEY";
                    const displayColumns = hierarchyConfig?.material?.displayColumns || [];

                    const layerValue = material[layerColumn] || index + 1;
                    const keyValue = material[keyColumn] || `자재 ${index + 1}`;

                    return (
                      <AccordionItem key={`${keyValue}-${index}`} value={`item-${index}`} className="border-b">
                        <AccordionTrigger className="px-2 py-3 hover:no-underline">
                          <div className="flex w-full items-center justify-between pr-2">
                            <span className="text-sm font-medium">층 {layerValue}</span>
                            <span className="text-muted-foreground max-w-[150px] truncate text-xs">{keyValue}</span>
                          </div>
                        </AccordionTrigger>
                        <AccordionContent className="px-2 pb-3">
                          {displayColumns.length === 0 ? (
                            <p className="text-muted-foreground py-2 text-center text-xs">
                              표시할 컬럼이 설정되지 않았습니다
                            </p>
                          ) : (
                            <div className="space-y-1.5">
                              {displayColumns.map((item) => (
                                <div key={item.column} className="flex justify-between gap-2 text-xs">
                                  <span className="text-muted-foreground shrink-0">{item.label}:</span>
                                  <span className="text-right font-medium break-all">
                                    {material[item.column] || "-"}
                                  </span>
                                </div>
                              ))}
                            </div>
                          )}
                        </AccordionContent>
                      </AccordionItem>
                    );
                  })}
                </Accordion>
              )}
            </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 || 0).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 || 0).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 || 5}
                        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 || 5}
                        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 || 5}
                        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 || "#3b82f6"}
                    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>
  );
}