"use client";

import React from "react";
import { ComponentRendererProps } from "../../types";
import { TextDisplayConfig } from "./types";
import { filterDOMProps } from "@/lib/utils/domPropsFilter";

export interface TextDisplayComponentProps extends ComponentRendererProps {
  // 추가 props가 필요한 경우 여기에 정의
}

/**
 * TextDisplay 컴포넌트
 * text-display 컴포넌트입니다
 */
export const TextDisplayComponent: React.FC<TextDisplayComponentProps> = ({
  component,
  isDesignMode = false,
  isSelected = false,
  onClick,
  onDragStart,
  onDragEnd,
  ...props
}) => {
  const componentConfig = (component.componentConfig || {}) as TextDisplayConfig;

  // 컴포넌트 스타일 계산
  const componentStyle: React.CSSProperties = {
    position: "absolute",
    left: `${component.style?.positionX || 0}px`,
    top: `${component.style?.positionY || 0}px`,
    width: `${component.style?.width || 150}px`,
    height: `${component.style?.height || 24}px`,
    zIndex: component.style?.positionZ || 1,
    cursor: isDesignMode ? "pointer" : "default",
    border: isSelected ? "2px solid #3b82f6" : "none",
    outline: isSelected ? "none" : undefined,
  };

  // 클릭 핸들러
  const handleClick = (e: React.MouseEvent) => {
    if (isDesignMode) {
      e.stopPropagation();
      onClick?.(e);
    } else {
      // 실제 모드에서의 클릭 처리
      componentConfig.onClick?.();
    }
  };

  // className 생성
  const className = ["text-display-component", isSelected ? "selected" : "", componentConfig.disabled ? "disabled" : ""]
    .filter(Boolean)
    .join(" ");

  // DOM props 필터링 (React 관련 props 제거)
  const domProps = filterDOMProps(props);

  // 텍스트 스타일 계산
  const textStyle: React.CSSProperties = {
    fontSize: componentConfig.fontSize || "14px",
    fontWeight: componentConfig.fontWeight || "normal",
    color: componentConfig.color || "#212121",
    textAlign: componentConfig.textAlign || "left",
    backgroundColor: componentConfig.backgroundColor || "transparent",
    padding: componentConfig.padding || "0",
    borderRadius: componentConfig.borderRadius || "0",
    border: componentConfig.border || "none",
    width: "100%",
    height: "100%",
    display: "flex",
    alignItems: "center",
    justifyContent:
      componentConfig.textAlign === "center"
        ? "center"
        : componentConfig.textAlign === "right"
          ? "flex-end"
          : "flex-start",
    whiteSpace: "nowrap",     // ← 한 줄로 유지        // ← 넘치는 부분 숨김
    textOverflow: "ellipsis",  // ← 넘치면 ... 표시 (선택사항)
    transition: "all 0.2s ease-in-out",
    boxShadow: "none",
  };

  return (
    <div style={componentStyle} className={className} {...domProps}>
      {/* 라벨 렌더링 */}
      {component.label && (component.style?.labelDisplay ?? true) && (
        <label
          style={{
            position: "absolute",
            top: "-25px",
            left: "0px",
            fontSize: component.style?.labelFontSize || "14px",
            color: component.style?.labelColor || "#64748b",
            fontWeight: "500",
          }}
        >
          {component.label}
          {component.required && <span style={{ color: "#ef4444" }}>*</span>}
        </label>
      )}

      <div style={textStyle} onClick={handleClick} onDragStart={onDragStart} onDragEnd={onDragEnd}>
        {componentConfig.text || "텍스트를 입력하세요"}
      </div>
    </div>
  );
};

/**
 * TextDisplay 래퍼 컴포넌트
 * 추가적인 로직이나 상태 관리가 필요한 경우 사용
 */
export const TextDisplayWrapper: React.FC<TextDisplayComponentProps> = (props) => {
  return <TextDisplayComponent {...props} />;
};