"use client";

import { cn } from "@/lib/utils";
import { ContainerComponent as ContainerComponentType } from "@/types/screen";
import { buildGridClasses, COLUMN_SPAN_VALUES } from "@/lib/constants/columnSpans";

interface ContainerComponentProps {
  component: ContainerComponentType;
  children?: React.ReactNode;
  className?: string;
  onClick?: () => void;
  isSelected?: boolean;
  onMouseDown?: (e: React.MouseEvent) => void;
  isMoving?: boolean;
}

export default function ContainerComponent({
  component,
  children,
  className,
  onClick,
  isSelected,
  onMouseDown,
  isMoving,
}: ContainerComponentProps) {
  // 그리드 클래스 생성
  const gridClasses = component.gridColumnSpan
    ? buildGridClasses(component.gridColumnSpan, component.gridColumnStart)
    : "";

  // 스타일 객체 생성
  const style: React.CSSProperties = {
    // 🔄 레거시 호환: gridColumnSpan이 없으면 기존 width 사용
    ...(!component.gridColumnSpan && {
      gridColumn: `span ${component.size.width}`,
    }),
    minHeight: `${component.size.height}px`,
    ...(component.style && {
      // ❌ width는 제거 (그리드 클래스로 제어)
      height: component.style.height,
      margin: component.style.margin,
      padding: component.style.padding,
      backgroundColor: component.style.backgroundColor,
      border: component.style.border,
      borderRadius: component.style.borderRadius,
      boxShadow: component.style.boxShadow,
      display: component.style.display,
      flexDirection: component.style.flexDirection,
      justifyContent: component.style.justifyContent,
      alignItems: component.style.alignItems,
      gap: component.style.gap,
      color: component.style.color,
      fontSize: component.style.fontSize,
      fontWeight: component.style.fontWeight,
      textAlign: component.style.textAlign,
      position: component.style.position,
      zIndex: component.style.zIndex,
      opacity: component.style.opacity,
      overflow: component.style.overflow,
      cursor: component.style.cursor,
      transition: component.style.transition,
      transform: component.style.transform,
    }),
    ...(isMoving && {
      zIndex: 50,
      opacity: 0.8,
      transform: "scale(1.02)",
    }),
  };

  return (
    <div
      className={cn(
        "rounded-lg border-2 border-dashed border-gray-300 bg-gray-50 p-4",
        gridClasses, // 🆕 그리드 클래스 추가
        isSelected && "border-primary bg-accent",
        isMoving && "cursor-move",
        className,
      )}
      style={style}
      onClick={onClick}
      onMouseDown={onMouseDown}
    >
      <div className="mb-2 text-xs text-gray-500">{component.title || "컨테이너"}</div>
      {children}
    </div>
  );
}