"use client";

import React, { useMemo } from "react";
import { useSplitPanel } from "@/lib/registry/components/split-panel-layout/SplitPanelContext";

interface SplitPanelAwareWrapperProps {
  children: React.ReactNode;
  componentX: number;
  componentY: number;
  componentWidth: number;
  componentHeight: number;
  componentType?: string;
  style?: React.CSSProperties;
  className?: string;
}

/**
 * 분할 패널 드래그 리사이즈에 따라 컴포넌트 위치를 자동 조정하는 래퍼
 *
 * 동작 방식:
 * 1. 컴포넌트가 분할 패널의 좌측 영역 위에 있는지 감지
 * 2. 좌측 영역 위에 있으면, 드래그 핸들 이동량만큼 X 좌표를 조정
 * 3. 우측 영역이나 분할 패널 외부에 있으면 원래 위치 유지
 */
export const SplitPanelAwareWrapper: React.FC<SplitPanelAwareWrapperProps> = ({
  children,
  componentX,
  componentY,
  componentWidth,
  componentHeight,
  componentType,
  style,
  className,
}) => {
  const { getAdjustedX, getOverlappingSplitPanel } = useSplitPanel();

  // 분할 패널 위에 있는지 확인 및 조정된 X 좌표 계산
  const { adjustedX, isInLeftPanel, isDragging } = useMemo(() => {
    const overlap = getOverlappingSplitPanel(componentX, componentY, componentWidth, componentHeight);

    if (!overlap) {
      // 분할 패널 위에 없음
      return { adjustedX: componentX, isInLeftPanel: false, isDragging: false };
    }

    if (!overlap.isInLeftPanel) {
      // 우측 패널 위에 있음 - 원래 위치 유지
      return { adjustedX: componentX, isInLeftPanel: false, isDragging: overlap.panel.isDragging };
    }

    // 좌측 패널 위에 있음 - 위치 조정
    const adjusted = getAdjustedX(componentX, componentY, componentWidth, componentHeight);

    return {
      adjustedX: adjusted,
      isInLeftPanel: true,
      isDragging: overlap.panel.isDragging,
    };
  }, [componentX, componentY, componentWidth, componentHeight, getAdjustedX, getOverlappingSplitPanel]);

  // 조정된 스타일
  const adjustedStyle: React.CSSProperties = {
    ...style,
    position: "absolute",
    left: `${adjustedX}px`,
    top: `${componentY}px`,
    width: componentWidth,
    height: componentHeight,
    // 드래그 중에는 트랜지션 없이 즉시 이동, 드래그 끝나면 부드럽게
    transition: isDragging ? "none" : "left 0.1s ease-out",
  };

  // 디버그 로깅 (개발 중에만)
  // if (isInLeftPanel) {
  //   console.log(`📍 [SplitPanelAwareWrapper] 위치 조정:`, {
  //     componentType,
  //     originalX: componentX,
  //     adjustedX,
  //     delta: adjustedX - componentX,
  //     isInLeftPanel,
  //     isDragging,
  //   });
  // }

  return (
    <div style={adjustedStyle} className={className}>
      {children}
    </div>
  );
};

export default SplitPanelAwareWrapper;