ERP-node/frontend/components/pop/designer/renderers/PopRenderer.tsx

"use client";

import React, { useMemo } from "react";
import { useDrag } from "react-dnd";
import { cn } from "@/lib/utils";
import { DND_ITEM_TYPES } from "../constants";
import {
  PopLayoutDataV5,
  PopComponentDefinitionV5,
  PopGridPosition,
  GridMode,
  GRID_BREAKPOINTS,
  GridBreakpoint,
  detectGridMode,
  PopComponentType,
} from "../types/pop-layout";
import { 
  convertAndResolvePositions,
  isOutOfBounds,
  isOverlapping,
  getAllEffectivePositions,
} from "../utils/gridUtils";

// ========================================
// Props
// ========================================

interface PopRendererProps {
  /** v5 레이아웃 데이터 */
  layout: PopLayoutDataV5;
  /** 현재 뷰포트 너비 */
  viewportWidth: number;
  /** 현재 모드 (자동 감지 또는 수동 지정) */
  currentMode?: GridMode;
  /** 디자인 모드 여부 */
  isDesignMode?: boolean;
  /** 그리드 가이드 표시 여부 */
  showGridGuide?: boolean;
  /** 선택된 컴포넌트 ID */
  selectedComponentId?: string | null;
  /** 컴포넌트 클릭 */
  onComponentClick?: (componentId: string) => void;
  /** 배경 클릭 */
  onBackgroundClick?: () => void;
  /** 컴포넌트 이동 */
  onComponentMove?: (componentId: string, newPosition: PopGridPosition) => void;
  /** 컴포넌트 크기 조정 */
  onComponentResize?: (componentId: string, newPosition: PopGridPosition) => void;
  /** 컴포넌트 크기 조정 완료 (히스토리 저장용) */
  onComponentResizeEnd?: (componentId: string) => void;
  /** 추가 className */
  className?: string;
}

// ========================================
// 컴포넌트 타입별 라벨
// ========================================

const COMPONENT_TYPE_LABELS: Record<PopComponentType, string> = {
  "pop-sample": "샘플",
};

// ========================================
// PopRenderer: v5 그리드 렌더러
// ========================================

export default function PopRenderer({
  layout,
  viewportWidth,
  currentMode,
  isDesignMode = false,
  showGridGuide = true,
  selectedComponentId,
  onComponentClick,
  onBackgroundClick,
  onComponentMove,
  onComponentResize,
  onComponentResizeEnd,
  className,
}: PopRendererProps) {
  const { gridConfig, components, overrides } = layout;
  
  // 현재 모드 (자동 감지 또는 지정)
  const mode = currentMode || detectGridMode(viewportWidth);
  const breakpoint = GRID_BREAKPOINTS[mode];
  
  // CSS Grid 스타일
  const gridStyle = useMemo((): React.CSSProperties => ({
    display: "grid",
    gridTemplateColumns: `repeat(${breakpoint.columns}, 1fr)`,
    gridAutoRows: `${breakpoint.rowHeight}px`,
    gap: `${breakpoint.gap}px`,
    padding: `${breakpoint.padding}px`,
    minHeight: "100%",
    backgroundColor: "#ffffff",
    position: "relative",
  }), [breakpoint]);
  
  // 그리드 가이드 셀 생성
  const gridCells = useMemo(() => {
    if (!isDesignMode || !showGridGuide) return [];
    
    const cells = [];
    const rowCount = 20; // 충분한 행 수
    
    for (let row = 1; row <= rowCount; row++) {
      for (let col = 1; col <= breakpoint.columns; col++) {
        cells.push({ 
          id: `cell-${col}-${row}`, 
          col, 
          row 
        });
      }
    }
    return cells;
  }, [isDesignMode, showGridGuide, breakpoint.columns]);
  
  // visibility 체크
  const isVisible = (comp: PopComponentDefinitionV5): boolean => {
    if (!comp.visibility) return true;
    const modeVisibility = comp.visibility[mode];
    return modeVisibility !== false;
  };
  
  // 자동 재배치된 위치 계산 (오버라이드 없을 때)
  const autoResolvedPositions = useMemo(() => {
    const componentsArray = Object.entries(components).map(([id, comp]) => ({
      id,
      position: comp.position,
    }));
    
    return convertAndResolvePositions(componentsArray, mode);
  }, [components, mode]);
  
  // 위치 변환 (12칸 기준 → 현재 모드 칸 수)
  const convertPosition = (position: PopGridPosition): React.CSSProperties => {
    return {
      gridColumn: `${position.col} / span ${position.colSpan}`,
      gridRow: `${position.row} / span ${position.rowSpan}`,
    };
  };
  
  // 오버라이드 적용 또는 자동 재배치
  const getEffectivePosition = (comp: PopComponentDefinitionV5): PopGridPosition => {
    // 1순위: 오버라이드가 있으면 사용
    const override = overrides?.[mode]?.positions?.[comp.id];
    if (override) {
      return { ...comp.position, ...override };
    }
    
    // 2순위: 자동 재배치된 위치 사용
    const autoResolved = autoResolvedPositions.find(p => p.id === comp.id);
    if (autoResolved) {
      return autoResolved.position;
    }
    
    // 3순위: 원본 위치 (12칸 모드)
    return comp.position;
  };
  
  // 오버라이드 숨김 체크
  const isHiddenByOverride = (comp: PopComponentDefinitionV5): boolean => {
    return overrides?.[mode]?.hidden?.includes(comp.id) ?? false;
  };
  
  // 모든 컴포넌트의 유효 위치 계산 (리사이즈 겹침 검사용)
  const effectivePositionsMap = useMemo(() => 
    getAllEffectivePositions(layout, mode),
    [layout, mode]
  );
  
  return (
    <div
      className={cn("relative min-h-full w-full", className)}
      style={gridStyle}
      onClick={(e) => {
        if (e.target === e.currentTarget) {
          onBackgroundClick?.();
        }
      }}
    >
      {/* 그리드 가이드 셀 (실제 DOM) */}
      {gridCells.map(cell => (
        <div
          key={cell.id}
          className="pointer-events-none border border-dashed border-blue-300/40"
          style={{
            gridColumn: cell.col,
            gridRow: cell.row,
          }}
        />
      ))}
      
      {/* 컴포넌트 렌더링 (z-index로 위에 표시) */}
      {/* 디자인 모드에서는 초과 컴포넌트를 그리드에서 제외 (오른쪽 별도 영역에 표시) */}
      {Object.values(components).map((comp) => {
        // visibility 체크
        if (!isVisible(comp)) return null;
        
        // 오버라이드 숨김 체크
        if (isHiddenByOverride(comp)) return null;
        
        // 오버라이드 위치 가져오기 (있으면)
        const overridePos = overrides?.[mode]?.positions?.[comp.id];
        const overridePosition = overridePos 
          ? { ...comp.position, ...overridePos } 
          : null;
        
        // 초과 컴포넌트 체크 (오버라이드 고려)
        const outOfBounds = isOutOfBounds(comp.position, mode, overridePosition);
        
        // 디자인 모드에서 초과 컴포넌트는 그리드에 렌더링하지 않음
        // (PopCanvas의 OutOfBoundsPanel에서 별도로 렌더링)
        if (isDesignMode && outOfBounds) return null;
        
        const position = getEffectivePosition(comp);
        const positionStyle = convertPosition(position);
        const isSelected = selectedComponentId === comp.id;
        
        return (
          <DraggableComponent
            key={comp.id}
            component={comp}
            position={position}
            positionStyle={positionStyle}
            isSelected={isSelected}
            isDesignMode={isDesignMode}
            isOutOfBounds={false}
            breakpoint={breakpoint}
            viewportWidth={viewportWidth}
            allEffectivePositions={effectivePositionsMap}
            onComponentClick={onComponentClick}
            onComponentMove={onComponentMove}
            onComponentResize={onComponentResize}
            onComponentResizeEnd={onComponentResizeEnd}
          />
        );
      })}
    </div>
  );
}

// ========================================
// 드래그 가능한 컴포넌트 래퍼
// ========================================

interface DraggableComponentProps {
  component: PopComponentDefinitionV5;
  position: PopGridPosition;
  positionStyle: React.CSSProperties;
  isSelected: boolean;
  isDesignMode: boolean;
  isOutOfBounds: boolean;
  breakpoint: GridBreakpoint;
  viewportWidth: number;
  allEffectivePositions: Map<string, PopGridPosition>;
  onComponentClick?: (componentId: string) => void;
  onComponentMove?: (componentId: string, newPosition: PopGridPosition) => void;
  onComponentResize?: (componentId: string, newPosition: PopGridPosition) => void;
  onComponentResizeEnd?: (componentId: string) => void;
}

function DraggableComponent({
  component,
  position,
  positionStyle,
  isSelected,
  isDesignMode,
  isOutOfBounds,
  breakpoint,
  viewportWidth,
  allEffectivePositions,
  onComponentClick,
  onComponentMove,
  onComponentResize,
  onComponentResizeEnd,
}: DraggableComponentProps) {
  const [{ isDragging }, drag] = useDrag(
    () => ({
      type: DND_ITEM_TYPES.MOVE_COMPONENT,
      item: { 
        componentId: component.id, 
        originalPosition: position 
      },
      canDrag: isDesignMode,
      collect: (monitor) => ({
        isDragging: monitor.isDragging(),
      }),
    }),
    [component.id, position, isDesignMode]
  );
  
  return (
    <div
      ref={isDesignMode ? drag : null}
      className={cn(
        "relative rounded-lg border-2 transition-all overflow-visible z-10",
        // 초과 컴포넌트 스타일 (디자인 모드에서만)
        isDesignMode && isOutOfBounds && "opacity-40 bg-gray-400/30",
        !isOutOfBounds && "bg-white",
        isSelected
          ? "border-primary ring-2 ring-primary/30"
          : "border-gray-200",
        isDesignMode && "cursor-move hover:border-gray-300 hover:shadow-sm",
        isDragging && "opacity-50"
      )}
      style={positionStyle}
      onClick={(e) => {
        e.stopPropagation();
        onComponentClick?.(component.id);
      }}
      title={
        isDesignMode && isOutOfBounds
          ? `이 컴포넌트는 ${breakpoint.label}에서 표시되지 않습니다`
          : undefined
      }
    >
      <ComponentContent 
        component={component}
        effectivePosition={position}
        isDesignMode={isDesignMode}
        isSelected={isSelected}
        isOutOfBounds={isOutOfBounds}
      />
      
      {/* 리사이즈 핸들 (선택된 컴포넌트만, 초과 아닐 때만) */}
      {isDesignMode && isSelected && !isOutOfBounds && onComponentResize && (
        <ResizeHandles
          component={component}
          position={position}
          breakpoint={breakpoint}
          viewportWidth={viewportWidth}
          allEffectivePositions={allEffectivePositions}
          onResize={onComponentResize}
          onResizeEnd={onComponentResizeEnd}
        />
      )}
    </div>
  );
}

// ========================================
// 리사이즈 핸들
// ========================================

interface ResizeHandlesProps {
  component: PopComponentDefinitionV5;
  position: PopGridPosition;
  breakpoint: GridBreakpoint;
  viewportWidth: number;
  allEffectivePositions: Map<string, PopGridPosition>;
  onResize: (componentId: string, newPosition: PopGridPosition) => void;
  onResizeEnd?: (componentId: string) => void;
}

function ResizeHandles({
  component,
  position,
  breakpoint,
  viewportWidth,
  allEffectivePositions,
  onResize,
  onResizeEnd,
}: ResizeHandlesProps) {
  const handleMouseDown = (direction: 'right' | 'bottom' | 'corner') => (e: React.MouseEvent) => {
    e.stopPropagation();
    e.preventDefault();
    
    const startX = e.clientX;
    const startY = e.clientY;
    const startColSpan = position.colSpan;
    const startRowSpan = position.rowSpan;
    
    // 그리드 셀 크기 동적 계산
    // 사용 가능한 너비 = 뷰포트 너비 - 양쪽 패딩 - gap*(칸수-1)
    const availableWidth = viewportWidth - breakpoint.padding * 2 - breakpoint.gap * (breakpoint.columns - 1);
    const cellWidth = availableWidth / breakpoint.columns + breakpoint.gap; // 셀 너비 + gap 단위
    const cellHeight = breakpoint.rowHeight + breakpoint.gap;
    
    const handleMouseMove = (e: MouseEvent) => {
      const deltaX = e.clientX - startX;
      const deltaY = e.clientY - startY;
      
      let newColSpan = startColSpan;
      let newRowSpan = startRowSpan;
      
      if (direction === 'right' || direction === 'corner') {
        const colDelta = Math.round(deltaX / cellWidth);
        newColSpan = Math.max(1, startColSpan + colDelta);
        // 최대 칸 수 제한
        newColSpan = Math.min(newColSpan, breakpoint.columns - position.col + 1);
      }
      
      if (direction === 'bottom' || direction === 'corner') {
        const rowDelta = Math.round(deltaY / cellHeight);
        newRowSpan = Math.max(1, startRowSpan + rowDelta);
      }
      
      // 변경사항이 있으면 업데이트
      if (newColSpan !== position.colSpan || newRowSpan !== position.rowSpan) {
        const newPosition: PopGridPosition = {
          ...position,
          colSpan: newColSpan,
          rowSpan: newRowSpan,
        };
        
        // 유효 위치 기반 겹침 검사 (다른 컴포넌트와)
        const hasOverlap = Array.from(allEffectivePositions.entries()).some(
          ([id, pos]) => {
            if (id === component.id) return false;  // 자기 자신 제외
            return isOverlapping(newPosition, pos);
          }
        );
        
        // 겹치지 않을 때만 리사이즈 적용
        if (!hasOverlap) {
          onResize(component.id, newPosition);
        }
      }
    };
    
    const handleMouseUp = () => {
      document.removeEventListener('mousemove', handleMouseMove);
      document.removeEventListener('mouseup', handleMouseUp);
      // 리사이즈 완료 알림 (히스토리 저장용)
      onResizeEnd?.(component.id);
    };
    
    document.addEventListener('mousemove', handleMouseMove);
    document.addEventListener('mouseup', handleMouseUp);
  };
  
  return (
    <>
      {/* 오른쪽 핸들 (가로 크기) */}
      <div
        className="absolute top-0 bottom-0 w-2 cursor-ew-resize bg-primary/20 hover:bg-primary/50 transition-colors"
        onMouseDown={handleMouseDown('right')}
        style={{ right: '-4px' }}
      />
      
      {/* 아래쪽 핸들 (세로 크기) */}
      <div
        className="absolute left-0 right-0 h-2 cursor-ns-resize bg-primary/20 hover:bg-primary/50 transition-colors"
        onMouseDown={handleMouseDown('bottom')}
        style={{ bottom: '-4px' }}
      />
      
      {/* 오른쪽 아래 모서리 (가로+세로) */}
      <div
        className="absolute h-3 w-3 cursor-nwse-resize bg-primary hover:bg-primary/80 transition-colors rounded-sm"
        onMouseDown={handleMouseDown('corner')}
        style={{ right: '-6px', bottom: '-6px' }}
      />
    </>
  );
}

// ========================================
// 컴포넌트 내용 렌더링
// ========================================

interface ComponentContentProps {
  component: PopComponentDefinitionV5;
  effectivePosition: PopGridPosition;
  isDesignMode: boolean;
  isSelected: boolean;
  isOutOfBounds: boolean;
}

function ComponentContent({ component, effectivePosition, isDesignMode, isSelected, isOutOfBounds }: ComponentContentProps) {
  const typeLabel = COMPONENT_TYPE_LABELS[component.type] || component.type;
  
  // 디자인 모드: 플레이스홀더 표시
  if (isDesignMode) {
    return (
      <div className="flex h-full w-full flex-col">
        {/* 헤더 */}
        <div
          className={cn(
            "flex h-5 shrink-0 items-center border-b px-2",
            isSelected ? "bg-primary/10 border-primary" : "bg-gray-50 border-gray-200"
          )}
        >
          <span className={cn(
            "text-[10px] font-medium truncate",
            isSelected ? "text-primary" : "text-gray-600"
          )}>
            {component.label || typeLabel}
          </span>
          
          {/* 초과 표시 */}
          {isOutOfBounds && (
            <span className="ml-1 text-[9px] text-orange-600 font-semibold">
              밖
            </span>
          )}
        </div>
        
        {/* 내용 */}
        <div className="flex flex-1 items-center justify-center p-2">
          <span className={cn(
            "text-xs",
            isOutOfBounds ? "text-gray-500" : "text-gray-400"
          )}>
            {typeLabel}
          </span>
        </div>
        
        {/* 위치 정보 표시 (유효 위치 사용) */}
        <div className="absolute bottom-1 right-1 text-[9px] text-gray-400 bg-white/80 px-1 rounded">
          {effectivePosition.col},{effectivePosition.row} 
          ({effectivePosition.colSpan}×{effectivePosition.rowSpan})
        </div>
      </div>
    );
  }
  
  // 실제 모드: 컴포넌트 렌더링
  return renderActualComponent(component);
}

// ========================================
// 실제 컴포넌트 렌더링 (뷰어 모드)
// ========================================

function renderActualComponent(component: PopComponentDefinitionV5): React.ReactNode {
  const typeLabel = COMPONENT_TYPE_LABELS[component.type];
  
  // 샘플 박스 렌더링
  return (
    <div className="flex h-full w-full items-center justify-center p-2">
      <span className="text-xs text-gray-500">{component.label || typeLabel}</span>
    </div>
  );
}