"use client";

import { useState, useCallback, useEffect } from "react";
import { DndProvider } from "react-dnd";
import { HTML5Backend } from "react-dnd-html5-backend";
import { ArrowLeft, Save, Undo2, Redo2 } from "lucide-react";
import { Button } from "@/components/ui/button";
import {
  ResizableHandle,
  ResizablePanel,
  ResizablePanelGroup,
} from "@/components/ui/resizable";
import { toast } from "sonner";

// POP 컴포넌트 자동 등록 (반드시 다른 import보다 먼저)
import "@/lib/registry/pop-components";

import PopCanvas from "./PopCanvas";
import ComponentEditorPanel from "./panels/ComponentEditorPanel";
import ComponentPalette from "./panels/ComponentPalette";
import {
  PopLayoutData,
  PopComponentType,
  PopComponentDefinition,
  PopGridPosition,
  GridMode,
  GapPreset,
  createEmptyLayout,
  isPopLayout,
  addComponentToLayout,
  createComponentDefinition,
  GRID_BREAKPOINTS,
  PopModalDefinition,
  PopDataConnection,
} from "./types/pop-layout";
import { getAllEffectivePositions } from "./utils/gridUtils";
import { loadLegacyLayout } from "./utils/legacyLoader";
import { screenApi } from "@/lib/api/screen";
import { ScreenDefinition } from "@/types/screen";
import { PopDesignerContext } from "./PopDesignerContext";

// ========================================
// Props
// ========================================
interface PopDesignerProps {
  selectedScreen: ScreenDefinition;
  onBackToList: () => void;
  onScreenUpdate?: (updatedScreen: Partial<ScreenDefinition>) => void;
}

// ========================================
// 메인 컴포넌트 (v5 그리드 시스템 전용)
// ========================================
export default function PopDesigner({
  selectedScreen,
  onBackToList,
  onScreenUpdate,
}: PopDesignerProps) {

  // ========================================
  // 레이아웃 상태
  // ========================================
  const [layout, setLayout] = useState<PopLayoutData>(createEmptyLayout());

  // 히스토리
  const [history, setHistory] = useState<PopLayoutData[]>([]);
  const [historyIndex, setHistoryIndex] = useState(-1);

  // UI 상태
  const [isLoading, setIsLoading] = useState(true);
  const [isSaving, setIsSaving] = useState(false);
  const [hasChanges, setHasChanges] = useState(false);
  const [idCounter, setIdCounter] = useState(1);

  // 선택 상태
  const [selectedComponentId, setSelectedComponentId] = useState<string | null>(null);

  // 대시보드 페이지 미리보기 인덱스 (-1 = 기본 모드)
  const [previewPageIndex, setPreviewPageIndex] = useState<number>(-1);

  // 그리드 모드 (4개 프리셋)
  const [currentMode, setCurrentMode] = useState<GridMode>("tablet_landscape");

  // 모달 캔버스 활성 상태 ("main" 또는 모달 ID)
  const [activeCanvasId, setActiveCanvasId] = useState<string>("main");

  // 선택된 컴포넌트 (activeCanvasId에 따라 메인 또는 모달에서 조회)
  const selectedComponent: PopComponentDefinition | null = (() => {
    if (!selectedComponentId) return null;
    if (activeCanvasId === "main") {
      return layout.components[selectedComponentId] || null;
    }
    const modal = layout.modals?.find(m => m.id === activeCanvasId);
    return modal?.components[selectedComponentId] || null;
  })();

  // ========================================
  // 히스토리 관리
  // ========================================
  const saveToHistory = useCallback((newLayout: PopLayoutData) => {
    setHistory((prev) => {
      const newHistory = prev.slice(0, historyIndex + 1);
      newHistory.push(JSON.parse(JSON.stringify(newLayout)));
      // 최대 50개 유지
      if (newHistory.length > 50) {
        newHistory.shift();
        return newHistory;
      }
      return newHistory;
    });
    setHistoryIndex((prev) => Math.min(prev + 1, 49));
  }, [historyIndex]);

  const undo = useCallback(() => {
    if (historyIndex > 0) {
      const newIndex = historyIndex - 1;
      const previousLayout = history[newIndex];
      if (previousLayout) {
        setLayout(JSON.parse(JSON.stringify(previousLayout)));
        setHistoryIndex(newIndex);
        setHasChanges(true);
        toast.success("실행 취소됨");
      }
    }
  }, [historyIndex, history]);

  const redo = useCallback(() => {
    if (historyIndex < history.length - 1) {
      const newIndex = historyIndex + 1;
      const nextLayout = history[newIndex];
      if (nextLayout) {
        setLayout(JSON.parse(JSON.stringify(nextLayout)));
        setHistoryIndex(newIndex);
        setHasChanges(true);
        toast.success("다시 실행됨");
      }
    }
  }, [historyIndex, history]);

  const canUndo = historyIndex > 0;
  const canRedo = historyIndex < history.length - 1;

  // ========================================
  // 레이아웃 로드
  // ========================================
  useEffect(() => {
    const loadLayout = async () => {
      if (!selectedScreen?.screenId) return;

      setIsLoading(true);
      try {
        const loadedLayout = await screenApi.getLayoutPop(selectedScreen.screenId);
        
        if (loadedLayout && isPopLayout(loadedLayout) && loadedLayout.components && Object.keys(loadedLayout.components).length > 0) {
          if (!loadedLayout.settings.gapPreset) {
            loadedLayout.settings.gapPreset = "medium";
          }
          const v6Layout = loadLegacyLayout(loadedLayout);
          setLayout(v6Layout);
          setHistory([v6Layout]);
          setHistoryIndex(0);
          
          // 기존 컴포넌트 ID에서 최대 숫자 추출하여 idCounter 설정 (중복 방지)
          const existingIds = Object.keys(loadedLayout.components);
          const maxId = existingIds.reduce((max, id) => {
            const match = id.match(/comp_(\d+)/);
            if (match) {
              const num = parseInt(match[1], 10);
              return num > max ? num : max;
            }
            return max;
          }, 0);
          setIdCounter(maxId + 1);
          
          console.log(`POP 레이아웃 로드: ${existingIds.length}개 컴포넌트, idCounter: ${maxId + 1}`);
        } else {
          // 새 화면 또는 빈 레이아웃
          const emptyLayout = createEmptyLayout();
          setLayout(emptyLayout);
          setHistory([emptyLayout]);
          setHistoryIndex(0);
          console.log("새 POP 화면 생성 (v5 그리드)");
        }
      } catch (error) {
        console.error("레이아웃 로드 실패:", error);
        toast.error("레이아웃을 불러오는데 실패했습니다");
        const emptyLayout = createEmptyLayout();
        setLayout(emptyLayout);
        setHistory([emptyLayout]);
        setHistoryIndex(0);
      } finally {
        setIsLoading(false);
      }
    };

    loadLayout();
  }, [selectedScreen?.screenId]);

  // ========================================
  // 저장
  // ========================================
  const handleSave = useCallback(async () => {
    if (!selectedScreen?.screenId) return;

    setIsSaving(true);
    try {
      await screenApi.saveLayoutPop(selectedScreen.screenId, layout);
      toast.success("저장되었습니다");
      setHasChanges(false);
    } catch (error) {
      console.error("저장 실패:", error);
      toast.error("저장에 실패했습니다");
    } finally {
      setIsSaving(false);
    }
  }, [selectedScreen?.screenId, layout]);

  // ========================================
  // 컴포넌트 핸들러
  // ========================================
  const handleDropComponent = useCallback(
    (type: PopComponentType, position: PopGridPosition) => {
      const componentId = `comp_${idCounter}`;
      setIdCounter((prev) => prev + 1);

      if (activeCanvasId === "main") {
        // 메인 캔버스
        const newLayout = addComponentToLayout(layout, componentId, type, position, `${type} ${idCounter}`);
        setLayout(newLayout);
        saveToHistory(newLayout);
      } else {
        // 모달 캔버스
        setLayout(prev => {
          const comp = createComponentDefinition(componentId, type, position, `${type} ${idCounter}`);
          const newLayout = {
            ...prev,
            modals: (prev.modals || []).map(m => {
              if (m.id !== activeCanvasId) return m;
              return { ...m, components: { ...m.components, [componentId]: comp } };
            }),
          };
          saveToHistory(newLayout);
          return newLayout;
        });
      }
      setSelectedComponentId(componentId);
      setHasChanges(true);
    },
    [idCounter, layout, saveToHistory, activeCanvasId]
  );

  const handleUpdateComponent = useCallback(
    (componentId: string, updates: Partial<PopComponentDefinition>) => {
      // 함수적 업데이트로 stale closure 방지
      setLayout((prev) => {
        if (activeCanvasId === "main") {
          // 메인 캔버스
          const existingComponent = prev.components[componentId];
          if (!existingComponent) return prev;

          const newLayout = {
            ...prev,
            components: {
              ...prev.components,
              [componentId]: { ...existingComponent, ...updates },
            },
          };
          saveToHistory(newLayout);
          return newLayout;
        } else {
          // 모달 캔버스
          const newLayout = {
            ...prev,
            modals: (prev.modals || []).map(m => {
              if (m.id !== activeCanvasId) return m;
              const existing = m.components[componentId];
              if (!existing) return m;
              return {
                ...m,
                components: {
                  ...m.components,
                  [componentId]: { ...existing, ...updates },
                },
              };
            }),
          };
          saveToHistory(newLayout);
          return newLayout;
        }
      });
      setHasChanges(true);
    },
    [saveToHistory, activeCanvasId]
  );

  // ========================================
  // 연결 CRUD
  // ========================================

  const handleAddConnection = useCallback(
    (conn: Omit<PopDataConnection, "id">) => {
      setLayout((prev) => {
        const newId = `conn_${Date.now()}_${Math.random().toString(36).slice(2, 6)}`;
        const newConnection: PopDataConnection = { ...conn, id: newId };
        const prevConnections = prev.dataFlow?.connections || [];
        const newLayout: PopLayoutData = {
          ...prev,
          dataFlow: {
            ...prev.dataFlow,
            connections: [...prevConnections, newConnection],
          },
        };
        saveToHistory(newLayout);
        return newLayout;
      });
      setHasChanges(true);
    },
    [saveToHistory]
  );

  const handleUpdateConnection = useCallback(
    (connectionId: string, conn: Omit<PopDataConnection, "id">) => {
      setLayout((prev) => {
        const prevConnections = prev.dataFlow?.connections || [];
        const newLayout: PopLayoutData = {
          ...prev,
          dataFlow: {
            ...prev.dataFlow,
            connections: prevConnections.map((c) =>
              c.id === connectionId ? { ...conn, id: connectionId } : c
            ),
          },
        };
        saveToHistory(newLayout);
        return newLayout;
      });
      setHasChanges(true);
    },
    [saveToHistory]
  );

  const handleRemoveConnection = useCallback(
    (connectionId: string) => {
      setLayout((prev) => {
        const prevConnections = prev.dataFlow?.connections || [];
        const newLayout: PopLayoutData = {
          ...prev,
          dataFlow: {
            ...prev.dataFlow,
            connections: prevConnections.filter((c) => c.id !== connectionId),
          },
        };
        saveToHistory(newLayout);
        return newLayout;
      });
      setHasChanges(true);
    },
    [saveToHistory]
  );

  const handleDeleteComponent = useCallback(
    (componentId: string) => {
      setLayout(prev => {
        if (activeCanvasId === "main") {
          const newComponents = { ...prev.components };
          delete newComponents[componentId];
          const newLayout = { ...prev, components: newComponents };
          saveToHistory(newLayout);
          return newLayout;
        } else {
          const newLayout = {
            ...prev,
            modals: (prev.modals || []).map(m => {
              if (m.id !== activeCanvasId) return m;
              const newComps = { ...m.components };
              delete newComps[componentId];
              return { ...m, components: newComps };
            }),
          };
          saveToHistory(newLayout);
          return newLayout;
        }
      });
      setSelectedComponentId(null);
      setHasChanges(true);
    },
    [saveToHistory, activeCanvasId]
  );

  const handleMoveComponent = useCallback(
    (componentId: string, newPosition: PopGridPosition) => {
      setLayout((prev) => {
        if (activeCanvasId === "main") {
          const component = prev.components[componentId];
          if (!component) return prev;

          if (currentMode === "tablet_landscape") {
            const newLayout = {
              ...prev,
              components: {
                ...prev.components,
                [componentId]: { ...component, position: newPosition },
              },
            };
            saveToHistory(newLayout);
            return newLayout;
          } else {
            const currentHidden = prev.overrides?.[currentMode]?.hidden || [];
            const newHidden = currentHidden.filter(id => id !== componentId);
            const newLayout = {
              ...prev,
              overrides: {
                ...prev.overrides,
                [currentMode]: {
                  ...prev.overrides?.[currentMode],
                  positions: {
                    ...prev.overrides?.[currentMode]?.positions,
                    [componentId]: newPosition,
                  },
                  hidden: newHidden.length > 0 ? newHidden : undefined,
                },
              },
            };
            saveToHistory(newLayout);
            return newLayout;
          }
        } else {
          // 모달 캔버스
          const newLayout = {
            ...prev,
            modals: (prev.modals || []).map(m => {
              if (m.id !== activeCanvasId) return m;
              const component = m.components[componentId];
              if (!component) return m;

              if (currentMode === "tablet_landscape") {
                return {
                  ...m,
                  components: {
                    ...m.components,
                    [componentId]: { ...component, position: newPosition },
                  },
                };
              } else {
                const currentHidden = m.overrides?.[currentMode]?.hidden || [];
                const newHidden = currentHidden.filter(id => id !== componentId);
                return {
                  ...m,
                  overrides: {
                    ...m.overrides,
                    [currentMode]: {
                      ...m.overrides?.[currentMode],
                      positions: {
                        ...m.overrides?.[currentMode]?.positions,
                        [componentId]: newPosition,
                      },
                      hidden: newHidden.length > 0 ? newHidden : undefined,
                    },
                  },
                };
              }
            }),
          };
          saveToHistory(newLayout);
          return newLayout;
        }
      });
      setHasChanges(true);
    },
    [saveToHistory, currentMode, activeCanvasId]
  );

  const handleResizeComponent = useCallback(
    (componentId: string, newPosition: PopGridPosition) => {
      setLayout((prev) => {
        if (activeCanvasId === "main") {
          const component = prev.components[componentId];
          if (!component) return prev;

          if (currentMode === "tablet_landscape") {
            return {
              ...prev,
              components: {
                ...prev.components,
                [componentId]: { ...component, position: newPosition },
              },
            };
          } else {
            return {
              ...prev,
              overrides: {
                ...prev.overrides,
                [currentMode]: {
                  ...prev.overrides?.[currentMode],
                  positions: {
                    ...prev.overrides?.[currentMode]?.positions,
                    [componentId]: newPosition,
                  },
                },
              },
            };
          }
        } else {
          // 모달 캔버스
          return {
            ...prev,
            modals: (prev.modals || []).map(m => {
              if (m.id !== activeCanvasId) return m;
              const component = m.components[componentId];
              if (!component) return m;

              if (currentMode === "tablet_landscape") {
                return {
                  ...m,
                  components: {
                    ...m.components,
                    [componentId]: { ...component, position: newPosition },
                  },
                };
              } else {
                return {
                  ...m,
                  overrides: {
                    ...m.overrides,
                    [currentMode]: {
                      ...m.overrides?.[currentMode],
                      positions: {
                        ...m.overrides?.[currentMode]?.positions,
                        [componentId]: newPosition,
                      },
                    },
                  },
                };
              }
            }),
          };
        }
      });
      setHasChanges(true);
    },
    [currentMode, activeCanvasId]
  );

  const handleResizeEnd = useCallback(
    (componentId: string) => {
      // 리사이즈 완료 시 현재 레이아웃을 히스토리에 저장
      saveToHistory(layout);
    },
    [layout, saveToHistory]
  );

  // 컴포넌트가 자신의 rowSpan/colSpan을 동적으로 변경 요청 (CardList 확장 등)
  const handleRequestResize = useCallback(
    (componentId: string, newRowSpan: number, newColSpan?: number) => {
      setLayout((prev) => {
        const buildPosition = (comp: PopComponentDefinition) => ({
          ...comp.position,
          rowSpan: newRowSpan,
          ...(newColSpan !== undefined ? { colSpan: newColSpan } : {}),
        });

        if (activeCanvasId === "main") {
          const component = prev.components[componentId];
          if (!component) return prev;
          const newPosition = buildPosition(component);

          if (currentMode === "tablet_landscape") {
            const newLayout = {
              ...prev,
              components: {
                ...prev.components,
                [componentId]: { ...component, position: newPosition },
              },
            };
            saveToHistory(newLayout);
            return newLayout;
          } else {
            const newLayout = {
              ...prev,
              overrides: {
                ...prev.overrides,
                [currentMode]: {
                  ...prev.overrides?.[currentMode],
                  positions: {
                    ...prev.overrides?.[currentMode]?.positions,
                    [componentId]: newPosition,
                  },
                },
              },
            };
            saveToHistory(newLayout);
            return newLayout;
          }
        } else {
          // 모달 캔버스
          const newLayout = {
            ...prev,
            modals: (prev.modals || []).map(m => {
              if (m.id !== activeCanvasId) return m;
              const component = m.components[componentId];
              if (!component) return m;
              const newPosition = buildPosition(component);

              if (currentMode === "tablet_landscape") {
                return {
                  ...m,
                  components: {
                    ...m.components,
                    [componentId]: { ...component, position: newPosition },
                  },
                };
              } else {
                return {
                  ...m,
                  overrides: {
                    ...m.overrides,
                    [currentMode]: {
                      ...m.overrides?.[currentMode],
                      positions: {
                        ...m.overrides?.[currentMode]?.positions,
                        [componentId]: newPosition,
                      },
                    },
                  },
                };
              }
            }),
          };
          saveToHistory(newLayout);
          return newLayout;
        }
      });
      setHasChanges(true);
    },
    [currentMode, saveToHistory, activeCanvasId]
  );

  // ========================================
  // Gap 프리셋 관리
  // ========================================
  
  const handleChangeGapPreset = useCallback((preset: GapPreset) => {
    const newLayout = {
      ...layout,
      settings: {
        ...layout.settings,
        gapPreset: preset,
      },
    };
    setLayout(newLayout);
    saveToHistory(newLayout);
    setHasChanges(true);
  }, [layout, saveToHistory]);

  // ========================================
  // 모드별 오버라이드 관리
  // ========================================
  
  const handleLockLayout = useCallback(() => {
    // 현재 화면에 보이는 유효 위치들을 저장 (오버라이드 또는 자동 재배치 위치)
    const effectivePositions = getAllEffectivePositions(layout, currentMode);
    
    const positionsToSave: Record<string, PopGridPosition> = {};
    effectivePositions.forEach((position, componentId) => {
      positionsToSave[componentId] = position;
    });
    
    const newLayout = {
      ...layout,
      overrides: {
        ...layout.overrides,
        [currentMode]: {
          ...layout.overrides?.[currentMode],
          positions: positionsToSave,
        },
      },
    };
    setLayout(newLayout);
    saveToHistory(newLayout);
    setHasChanges(true);
    toast.success("현재 배치가 고정되었습니다");
  }, [layout, currentMode, saveToHistory]);

  const handleResetOverride = useCallback((mode: GridMode) => {
    const newOverrides = { ...layout.overrides };
    delete newOverrides[mode];
    
    const newLayout = {
      ...layout,
      overrides: Object.keys(newOverrides).length > 0 ? newOverrides : undefined,
    };
    setLayout(newLayout);
    saveToHistory(newLayout);
    setHasChanges(true);
    toast.success("자동 배치로 되돌렸습니다");
  }, [layout, saveToHistory]);

  // ========================================
  // 숨김 관리
  // ========================================
  
  const handleHideComponent = useCallback((componentId: string) => {
    const currentHidden = layout.overrides?.[currentMode]?.hidden || [];
    
    // 이미 숨겨져 있으면 무시
    if (currentHidden.includes(componentId)) return;
    
    const newHidden = [...currentHidden, componentId];
    
    const newLayout = {
      ...layout,
      overrides: {
        ...layout.overrides,
        [currentMode]: {
          ...layout.overrides?.[currentMode],
          hidden: newHidden,
        },
      },
    };
    setLayout(newLayout);
    saveToHistory(newLayout);
    setHasChanges(true);
    setSelectedComponentId(null);
  }, [layout, currentMode, saveToHistory]);

  const handleUnhideComponent = useCallback((componentId: string) => {
    const currentHidden = layout.overrides?.[currentMode]?.hidden || [];
    
    // 숨겨져 있지 않으면 무시
    if (!currentHidden.includes(componentId)) return;
    
    const newHidden = currentHidden.filter(id => id !== componentId);
    
    const newLayout = {
      ...layout,
      overrides: {
        ...layout.overrides,
        [currentMode]: {
          ...layout.overrides?.[currentMode],
          hidden: newHidden.length > 0 ? newHidden : undefined,
        },
      },
    };
    setLayout(newLayout);
    saveToHistory(newLayout);
    setHasChanges(true);
  }, [layout, currentMode, saveToHistory]);

  // ========================================
  // 모달 캔버스 관리
  // ========================================

  /** 모달 ID 자동 생성 (계층적: modal-1, modal-1-1, modal-1-1-1) */
  const generateModalId = useCallback((parentCanvasId: string): string => {
    const modals = layout.modals || [];
    if (parentCanvasId === "main") {
      const rootModals = modals.filter(m => !m.parentId);
      return `modal-${rootModals.length + 1}`;
    }
    const prefix = parentCanvasId.replace("modal-", "");
    const children = modals.filter(m => m.parentId === parentCanvasId);
    return `modal-${prefix}-${children.length + 1}`;
  }, [layout.modals]);

  /** 모달 캔버스 생성하고 해당 탭으로 전환 */
  const createModalCanvas = useCallback((buttonComponentId: string, title: string): string => {
    const modalId = generateModalId(activeCanvasId);
    const newModal: PopModalDefinition = {
      id: modalId,
      parentId: activeCanvasId === "main" ? undefined : activeCanvasId,
      title: title || "새 모달",
      sourceButtonId: buttonComponentId,
      gridConfig: { ...layout.gridConfig },
      components: {},
    };
    setLayout(prev => ({
      ...prev,
      modals: [...(prev.modals || []), newModal],
    }));
    setHasChanges(true);
    setActiveCanvasId(modalId);
    return modalId;
  }, [generateModalId, activeCanvasId, layout.gridConfig]);

  /** 모달 정의 업데이트 (제목, sizeConfig 등) */
  const handleUpdateModal = useCallback((modalId: string, updates: Partial<PopModalDefinition>) => {
    setLayout(prev => ({
      ...prev,
      modals: (prev.modals || []).map(m =>
        m.id === modalId ? { ...m, ...updates } : m
      ),
    }));
    setHasChanges(true);
  }, []);

  /** 특정 캔버스로 전환 */
  const navigateToCanvas = useCallback((canvasId: string) => {
    setActiveCanvasId(canvasId);
    setSelectedComponentId(null);
  }, []);

  // ========================================
  // 뒤로가기
  // ========================================
  const handleBack = useCallback(() => {
    if (hasChanges) {
      if (confirm("저장하지 않은 변경사항이 있습니다. 정말 나가시겠습니까?")) {
        onBackToList();
      }
    } else {
      onBackToList();
    }
  }, [hasChanges, onBackToList]);

  // ========================================
  // 단축키 처리
  // ========================================
  useEffect(() => {
    const handleKeyDown = (e: KeyboardEvent) => {
      const target = e.target as HTMLElement;
      if (target.tagName === "INPUT" || target.tagName === "TEXTAREA" || target.isContentEditable) {
        return;
      }

      const key = e.key.toLowerCase();
      const isCtrlOrCmd = e.ctrlKey || e.metaKey;

      // Delete / Backspace: 컴포넌트 삭제
      if (e.key === "Delete" || e.key === "Backspace") {
        e.preventDefault();
        if (selectedComponentId) {
          handleDeleteComponent(selectedComponentId);
        }
      }

      // Ctrl+Z: Undo
      if (isCtrlOrCmd && key === "z" && !e.shiftKey) {
        e.preventDefault();
        if (canUndo) undo();
        return;
      }

      // Ctrl+Shift+Z or Ctrl+Y: Redo
      if ((isCtrlOrCmd && key === "z" && e.shiftKey) || (isCtrlOrCmd && key === "y")) {
        e.preventDefault();
        if (canRedo) redo();
        return;
      }

      // Ctrl+S: 저장
      if (isCtrlOrCmd && key === "s") {
        e.preventDefault();
        handleSave();
        return;
      }
      
      // H키: 선택된 컴포넌트 숨김 (12칸 모드가 아닐 때만)
      if (key === "h" && !isCtrlOrCmd && selectedComponentId) {
        e.preventDefault();
        handleHideComponent(selectedComponentId);
        return;
      }
    };

    window.addEventListener("keydown", handleKeyDown);
    return () => window.removeEventListener("keydown", handleKeyDown);
  }, [selectedComponentId, handleDeleteComponent, handleHideComponent, canUndo, canRedo, undo, redo, handleSave]);

  // ========================================
  // 로딩
  // ========================================
  if (isLoading) {
    return (
      <div className="flex h-screen items-center justify-center">
        <div className="text-muted-foreground">로딩 중...</div>
      </div>
    );
  }

  // ========================================
  // 렌더링
  // ========================================
  return (
    <PopDesignerContext.Provider
      value={{
        createModalCanvas,
        navigateToCanvas,
        activeCanvasId,
        selectedComponentId,
      }}
    >
    <DndProvider backend={HTML5Backend}>
      <div className="flex h-screen flex-col">
        {/* 헤더 */}
        <div className="flex items-center justify-between border-b bg-white px-4 py-2">
          {/* 왼쪽: 뒤로가기 + 화면명 */}
          <div className="flex items-center gap-3">
            <Button
              variant="ghost"
              size="icon"
              onClick={handleBack}
              className="h-8 w-8"
            >
              <ArrowLeft className="h-4 w-4" />
            </Button>
            <div>
              <h2 className="text-sm font-medium">{selectedScreen?.screenName}</h2>
              <p className="text-xs text-muted-foreground">
                그리드 레이아웃 (v5)
              </p>
            </div>
          </div>

          {/* 오른쪽: Undo/Redo + 저장 */}
          <div className="flex items-center gap-2">
            {/* Undo/Redo 버튼 */}
            <div className="flex items-center gap-1 border-r pr-2 mr-1">
              <Button
                variant="ghost"
                size="icon"
                className="h-8 w-8"
                onClick={undo}
                disabled={!canUndo}
                title="실행 취소 (Ctrl+Z)"
              >
                <Undo2 className="h-4 w-4" />
              </Button>
              <Button
                variant="ghost"
                size="icon"
                className="h-8 w-8"
                onClick={redo}
                disabled={!canRedo}
                title="다시 실행 (Ctrl+Shift+Z)"
              >
                <Redo2 className="h-4 w-4" />
              </Button>
            </div>
            
            {/* 저장 버튼 */}
            <Button size="sm" onClick={handleSave} disabled={isSaving || !hasChanges}>
              <Save className="mr-1 h-4 w-4" />
              {isSaving ? "저장 중..." : "저장"}
            </Button>
          </div>
        </div>

        {/* 메인 영역 */}
        <ResizablePanelGroup direction="horizontal" className="flex-1">
          {/* 왼쪽: 컴포넌트 팔레트 */}
          <ResizablePanel defaultSize={15} minSize={12} maxSize={20}>
            <ComponentPalette />
          </ResizablePanel>

          <ResizableHandle withHandle />

          {/* 중앙: 캔버스 */}
          <ResizablePanel defaultSize={65}>
            <PopCanvas
              layout={layout}
              selectedComponentId={selectedComponentId}
              currentMode={currentMode}
              onModeChange={setCurrentMode}
              onSelectComponent={setSelectedComponentId}
              onDropComponent={handleDropComponent}
              onUpdateComponent={handleUpdateComponent}
              onDeleteComponent={handleDeleteComponent}
              onMoveComponent={handleMoveComponent}
              onResizeComponent={handleResizeComponent}
              onResizeEnd={handleResizeEnd}
              onHideComponent={handleHideComponent}
              onUnhideComponent={handleUnhideComponent}
              onLockLayout={handleLockLayout}
              onResetOverride={handleResetOverride}
              onChangeGapPreset={handleChangeGapPreset}
              onRequestResize={handleRequestResize}
              previewPageIndex={previewPageIndex}
              activeCanvasId={activeCanvasId}
              onActiveCanvasChange={navigateToCanvas}
              onUpdateModal={handleUpdateModal}
            />
          </ResizablePanel>

          <ResizableHandle withHandle />

          {/* 오른쪽: 속성 패널 */}
          <ResizablePanel defaultSize={20} minSize={15} maxSize={30}>
            <ComponentEditorPanel
              component={selectedComponent}
              currentMode={currentMode}
              onUpdateComponent={
                selectedComponentId
                  ? (updates) => handleUpdateComponent(selectedComponentId, updates)
                  : undefined
              }
              allComponents={Object.values(layout.components)}
              onSelectComponent={setSelectedComponentId}
              selectedComponentId={selectedComponentId}
              previewPageIndex={previewPageIndex}
              onPreviewPage={setPreviewPageIndex}
              connections={layout.dataFlow?.connections || []}
              onAddConnection={handleAddConnection}
              onUpdateConnection={handleUpdateConnection}
              onRemoveConnection={handleRemoveConnection}
              modals={layout.modals}
            />
          </ResizablePanel>
        </ResizablePanelGroup>
      </div>
    </DndProvider>
    </PopDesignerContext.Provider>
  );
}
