ERP-node/frontend/components/pop/designer/SectionGridV2.tsx

"use client";

import { useCallback, useMemo, useRef, useState, useEffect } from "react";
import { useDrop } from "react-dnd";
import GridLayout, { Layout } from "react-grid-layout";
import { cn } from "@/lib/utils";
import {
  PopSectionDefinition,
  PopComponentDefinition,
  PopComponentType,
  GridPosition,
} from "./types/pop-layout";
import { DND_ITEM_TYPES, DragItemComponent } from "./panels/PopPanel";
import { Trash2, Move } from "lucide-react";
import { Button } from "@/components/ui/button";

import "react-grid-layout/css/styles.css";
import "react-resizable/css/styles.css";

// ========================================
// Props
// ========================================
interface SectionGridV2Props {
  sectionId: string;
  sectionDef: PopSectionDefinition;
  components: Record<string, PopComponentDefinition>;
  componentPositions: Record<string, GridPosition>;
  isActive: boolean;
  selectedComponentId: string | null;
  onSelectComponent: (id: string | null) => void;
  onDropComponent: (sectionId: string, type: PopComponentType, gridPosition: GridPosition) => void;
  onUpdateComponentPosition: (componentId: string, position: GridPosition) => void;
  onDeleteComponent: (sectionId: string, componentId: string) => void;
}

// ========================================
// 메인 컴포넌트
// ========================================
export function SectionGridV2({
  sectionId,
  sectionDef,
  components,
  componentPositions,
  isActive,
  selectedComponentId,
  onSelectComponent,
  onDropComponent,
  onUpdateComponentPosition,
  onDeleteComponent,
}: SectionGridV2Props) {
  const containerRef = useRef<HTMLDivElement>(null);
  
  // 이 섹션에 포함된 컴포넌트 ID 목록
  const componentIds = sectionDef.componentIds || [];
  
  // 컨테이너 크기 측정
  const [containerSize, setContainerSize] = useState({ width: 300, height: 200 });
  
  useEffect(() => {
    const updateSize = () => {
      if (containerRef.current) {
        setContainerSize({
          width: containerRef.current.offsetWidth,
          height: containerRef.current.offsetHeight,
        });
      }
    };
    
    updateSize();
    
    const resizeObserver = new ResizeObserver(updateSize);
    if (containerRef.current) {
      resizeObserver.observe(containerRef.current);
    }
    
    return () => resizeObserver.disconnect();
  }, []);

  // 셀 크기 계산 - 고정 셀 크기 기반으로 자동 계산
  const padding = 8; // p-2 = 8px
  const gap = 4; // 고정 간격
  const availableWidth = containerSize.width - padding * 2;
  const availableHeight = containerSize.height - padding * 2;
  
  // 고정 셀 크기 (40px) 기반으로 열/행 수 자동 계산
  const CELL_SIZE = 40;
  const cols = Math.max(1, Math.floor((availableWidth + gap) / (CELL_SIZE + gap)));
  const rows = Math.max(1, Math.floor((availableHeight + gap) / (CELL_SIZE + gap)));
  const cellHeight = CELL_SIZE;

  // GridLayout용 레이아웃 변환
  const gridLayoutItems: Layout[] = useMemo(() => {
    return componentIds
      .map((compId) => {
        const pos = componentPositions[compId];
        if (!pos) return null;
        
        // 위치가 그리드 범위를 벗어나지 않도록 조정
        const x = Math.min(Math.max(0, pos.col - 1), Math.max(0, cols - 1));
        const y = Math.min(Math.max(0, pos.row - 1), Math.max(0, rows - 1));
        const w = Math.min(Math.max(1, pos.colSpan), Math.max(1, cols - x));
        const h = Math.min(Math.max(1, pos.rowSpan), Math.max(1, rows - y));
        
        return {
          i: compId,
          x,
          y,
          w,
          h,
          minW: 1,
          minH: 1,
        };
      })
      .filter((item): item is Layout => item !== null);
  }, [componentIds, componentPositions, cols, rows]);

  // 드래그 완료 핸들러
  const handleDragStop = useCallback(
    (layout: Layout[], oldItem: Layout, newItem: Layout) => {
      const newPos: GridPosition = {
        col: newItem.x + 1,
        row: newItem.y + 1,
        colSpan: newItem.w,
        rowSpan: newItem.h,
      };
      
      const oldPos = componentPositions[newItem.i];
      if (!oldPos || oldPos.col !== newPos.col || oldPos.row !== newPos.row) {
        onUpdateComponentPosition(newItem.i, newPos);
      }
    },
    [componentPositions, onUpdateComponentPosition]
  );

  // 리사이즈 완료 핸들러
  const handleResizeStop = useCallback(
    (layout: Layout[], oldItem: Layout, newItem: Layout) => {
      const newPos: GridPosition = {
        col: newItem.x + 1,
        row: newItem.y + 1,
        colSpan: newItem.w,
        rowSpan: newItem.h,
      };
      
      const oldPos = componentPositions[newItem.i];
      if (!oldPos || oldPos.colSpan !== newPos.colSpan || oldPos.rowSpan !== newPos.rowSpan) {
        onUpdateComponentPosition(newItem.i, newPos);
      }
    },
    [componentPositions, onUpdateComponentPosition]
  );

  // 빈 셀 찾기 (드롭 위치용)
  const findEmptyCell = useCallback((): GridPosition => {
    const occupied = new Set<string>();
    
    componentIds.forEach((compId) => {
      const pos = componentPositions[compId];
      if (!pos) return;
      
      for (let c = pos.col; c < pos.col + pos.colSpan; c++) {
        for (let r = pos.row; r < pos.row + pos.rowSpan; r++) {
          occupied.add(`${c}-${r}`);
        }
      }
    });

    // 빈 셀 찾기
    for (let r = 1; r <= rows; r++) {
      for (let c = 1; c <= cols; c++) {
        if (!occupied.has(`${c}-${r}`)) {
          return { col: c, row: r, colSpan: 1, rowSpan: 1 };
        }
      }
    }

    // 빈 셀 없으면 첫 번째 위치
    return { col: 1, row: 1, colSpan: 1, rowSpan: 1 };
  }, [componentIds, componentPositions, cols, rows]);

  // 컴포넌트 드롭 핸들러
  const [{ isOver, canDrop }, drop] = useDrop(
    () => ({
      accept: DND_ITEM_TYPES.COMPONENT,
      drop: (item: DragItemComponent) => {
        if (!isActive) return;
        const emptyCell = findEmptyCell();
        onDropComponent(sectionId, item.componentType, emptyCell);
        return { dropped: true };
      },
      canDrop: () => isActive,
      collect: (monitor) => ({
        isOver: monitor.isOver(),
        canDrop: monitor.canDrop(),
      }),
    }),
    [isActive, sectionId, findEmptyCell, onDropComponent]
  );

  return (
    <div
      ref={(node) => {
        containerRef.current = node;
        drop(node);
      }}
      className={cn(
        "relative h-full w-full p-2 transition-colors",
        isOver && canDrop && "bg-blue-50"
      )}
      onClick={(e) => {
        e.stopPropagation();
        onSelectComponent(null);
      }}
      onMouseDown={(e) => {
        e.stopPropagation();
      }}
    >
      {/* 빈 상태 안내 텍스트 */}
      {componentIds.length === 0 && (
        <div className="pointer-events-none absolute inset-0 z-10 flex items-center justify-center">
          <span
            className={cn(
              "rounded bg-white/80 px-2 py-1 text-xs",
              isOver && canDrop ? "font-medium text-primary" : "text-gray-400"
            )}
          >
            {isOver && canDrop ? "여기에 놓으세요" : "컴포넌트를 드래그하세요"}
          </span>
        </div>
      )}

      {/* 컴포넌트 GridLayout */}
      {componentIds.length > 0 && availableWidth > 0 && cols > 0 && (
        <GridLayout
          className="layout relative z-10"
          layout={gridLayoutItems}
          cols={cols}
          rowHeight={cellHeight}
          width={availableWidth}
          margin={[gap, gap]}
          containerPadding={[0, 0]}
          onDragStop={handleDragStop}
          onResizeStop={handleResizeStop}
          isDraggable={isActive}
          isResizable={isActive}
          compactType={null}
          preventCollision={false}
          useCSSTransforms={true}
          draggableHandle=".component-drag-handle"
          resizeHandles={["se", "e", "s"]}
        >
          {componentIds.map((compId) => {
            const compDef = components[compId];
            if (!compDef) return null;

            return (
              <div
                key={compId}
                className={cn(
                  "group relative flex flex-col overflow-hidden rounded border bg-white text-xs transition-all",
                  selectedComponentId === compId
                    ? "border-primary ring-2 ring-primary/30"
                    : "border-gray-200 hover:border-gray-400"
                )}
                onClick={(e) => {
                  e.stopPropagation();
                  onSelectComponent(compId);
                }}
                onMouseDown={(e) => e.stopPropagation()}
              >
                {/* 드래그 핸들 바 */}
                <div className="component-drag-handle flex h-5 cursor-move items-center justify-center border-b bg-gray-50 opacity-60 transition-opacity hover:opacity-100">
                  <Move className="h-3 w-3 text-gray-400" />
                </div>

                {/* 컴포넌트 내용 */}
                <div className="flex flex-1 items-center justify-center p-1">
                  <ComponentPreviewV2 component={compDef} />
                </div>

                {/* 삭제 버튼 */}
                {selectedComponentId === compId && isActive && (
                  <Button
                    variant="ghost"
                    size="icon"
                    className="absolute -right-2 -top-2 z-10 h-5 w-5 rounded-full bg-white text-destructive shadow hover:bg-destructive/10"
                    onClick={(e) => {
                      e.stopPropagation();
                      onDeleteComponent(sectionId, compId);
                    }}
                  >
                    <Trash2 className="h-3 w-3" />
                  </Button>
                )}
              </div>
            );
          })}
        </GridLayout>
      )}
    </div>
  );
}

// ========================================
// 컴포넌트 미리보기
// ========================================
interface ComponentPreviewV2Props {
  component: PopComponentDefinition;
}

function ComponentPreviewV2({ component }: ComponentPreviewV2Props) {
  const { type, label } = component;

  const renderPreview = () => {
    switch (type) {
      case "pop-field":
        return (
          <div className="flex w-full flex-col gap-1">
            <span className="text-[10px] text-gray-500">{label || "필드"}</span>
            <div className="h-6 w-full rounded border border-gray-200 bg-gray-50" />
          </div>
        );
      case "pop-button":
        return (
          <div className="flex h-8 w-full items-center justify-center rounded bg-primary/10 font-medium text-primary">
            {label || "버튼"}
          </div>
        );
      case "pop-list":
        return (
          <div className="flex w-full flex-col gap-0.5">
            <span className="text-[10px] text-gray-500">{label || "리스트"}</span>
            <div className="h-3 w-full rounded bg-gray-100" />
            <div className="h-3 w-3/4 rounded bg-gray-100" />
            <div className="h-3 w-full rounded bg-gray-100" />
          </div>
        );
      case "pop-indicator":
        return (
          <div className="flex w-full flex-col items-center gap-1">
            <span className="text-[10px] text-gray-500">{label || "KPI"}</span>
            <span className="text-lg font-bold text-primary">0</span>
          </div>
        );
      case "pop-scanner":
        return (
          <div className="flex w-full flex-col items-center gap-1">
            <div className="flex h-8 w-8 items-center justify-center rounded border-2 border-dashed border-gray-300">
              <span className="text-[8px] text-gray-400">QR</span>
            </div>
            <span className="text-[10px] text-gray-500">{label || "스캐너"}</span>
          </div>
        );
      case "pop-numpad":
        return (
          <div className="grid w-full grid-cols-3 gap-0.5">
            {[1, 2, 3, 4, 5, 6, 7, 8, 9, "C", 0, "OK"].map((key) => (
              <div
                key={key}
                className="flex h-4 items-center justify-center rounded bg-gray-100 text-[8px]"
              >
                {key}
              </div>
            ))}
          </div>
        );
      default:
        return <span className="text-gray-500">{label || type}</span>;
    }
  };

  return <div className="w-full overflow-hidden">{renderPreview()}</div>;
}