"use client";

import React from "react";
import { cn } from "@/lib/utils";

export interface SectionPaperProps {
  component?: {
    id: string;
    componentConfig?: {
      backgroundColor?: "default" | "muted" | "accent" | "primary" | "custom";
      customColor?: string;
      showBorder?: boolean;
      borderStyle?: "none" | "subtle";
      padding?: "none" | "sm" | "md" | "lg";
      roundedCorners?: "none" | "sm" | "md" | "lg";
      shadow?: "none" | "sm" | "md";
    };
    style?: React.CSSProperties;
  };
  children?: React.ReactNode;
  className?: string;
  onClick?: (e?: React.MouseEvent) => void;
  isSelected?: boolean;
  isDesignMode?: boolean;
}

/**
 * Section Paper 컴포넌트
 * 배경색만 있는 미니멀한 그룹화 컨테이너 (색종이 컨셉)
 */
export function SectionPaperComponent({
  component,
  children,
  className,
  onClick,
  isSelected = false,
  isDesignMode = false,
}: SectionPaperProps) {
  const config = component?.componentConfig || {};

  // 배경색 매핑
  const backgroundColorMap = {
    default: "bg-muted/40",
    muted: "bg-muted/50",
    accent: "bg-accent/30",
    primary: "bg-primary/10",
    custom: "",
  };

  // 패딩 매핑
  const paddingMap = {
    none: "p-0",
    sm: "p-3",
    md: "p-4",
    lg: "p-6",
  };

  // 둥근 모서리 매핑
  const roundedMap = {
    none: "rounded-none",
    sm: "rounded-sm",
    md: "rounded-md",
    lg: "rounded-lg",
  };

  // 그림자 매핑
  const shadowMap = {
    none: "",
    sm: "shadow-sm",
    md: "shadow-md",
  };

  const backgroundColor = config.backgroundColor || "default";
  const padding = config.padding || "md";
  const rounded = config.roundedCorners || "md";
  const shadow = config.shadow || "none";
  const showBorder = config.showBorder !== undefined ? config.showBorder : true;
  const borderStyle = config.borderStyle || "subtle";

  // 커스텀 배경색 처리
  const customBgStyle =
    backgroundColor === "custom" && config.customColor
      ? { backgroundColor: config.customColor }
      : {};

  // 선택 상태 테두리 처리 (outline 사용하여 크기 영향 없음)
  const selectionStyle = isDesignMode && isSelected
    ? {
        outline: "2px solid #3b82f6",
        outlineOffset: "0px", // 크기에 영향 없이 딱 맞게 표시
      }
    : {};

  return (
    <div
      className={cn(
        // 기본 스타일
        "relative transition-colors",
        
        // 높이 고정을 위한 overflow 처리
        "overflow-auto",

        // 배경색
        backgroundColor !== "custom" && backgroundColorMap[backgroundColor],

        // 패딩
        paddingMap[padding],

        // 둥근 모서리
        roundedMap[rounded],

        // 그림자
        shadowMap[shadow],

        // 테두리 (선택 상태가 아닐 때만)
        !isSelected && showBorder &&
          borderStyle === "subtle" &&
          "border border-border/30",

        // 디자인 모드에서 빈 상태 표시 (테두리만, 최소 높이 제거)
        isDesignMode && !children && "border-2 border-dashed border-muted-foreground/30",

        className
      )}
      style={{
        // 크기를 100%로 설정하여 부모 크기에 맞춤
        width: "100%",
        height: "100%",
        boxSizing: "border-box", // padding과 border를 크기에 포함
        ...customBgStyle,
        ...selectionStyle,
        ...component?.style, // 사용자 설정이 최종 우선순위
      }}
      onClick={onClick}
    >
      {/* 자식 컴포넌트들 */}
      {children || (isDesignMode && (
        <div className="flex items-center justify-center h-full text-muted-foreground text-sm">
          <div className="text-center">
            <div className="mb-1">📄 Section Paper</div>
            <div className="text-xs">컴포넌트를 이곳에 배치하세요</div>
          </div>
        </div>
      ))}
    </div>
  );
}