"use client";

import React from "react";
import { WebTypeComponentProps } from "@/lib/registry/types";

export const ButtonWidget: React.FC<WebTypeComponentProps> = ({
  config,
  value,
  onChange,
  onBlur,
  disabled,
  readonly,
  placeholder,
  required,
  className,
  style,
  isDesignMode = false, // 디자인 모드 플래그
  ...restProps
}) => {
  const handleClick = (e: React.MouseEvent) => {
    // 디자인 모드에서는 아무것도 하지 않고 그냥 이벤트 전파
    if (isDesignMode) {
      return;
    }

    // 버튼 클릭 시 동작 (추후 버튼 액션 시스템과 연동)
    console.log("Button clicked:", config);

    // onChange를 통해 클릭 이벤트 전달
    if (onChange) {
      onChange("clicked");
    }
  };

  // 커스텀 색상 확인 (config 또는 style에서)
  const hasCustomBg = config?.backgroundColor || style?.backgroundColor;
  const hasCustomColor = config?.textColor || style?.color;
  const hasCustomColors = hasCustomBg || hasCustomColor;
  
  // 실제 적용할 배경색과 글자색
  const bgColor = config?.backgroundColor || style?.backgroundColor;
  const textColor = config?.textColor || style?.color;
  
  // 디자인 모드에서는 div로 렌더링하여 버튼 동작 완전 차단
  if (isDesignMode) {
    return (
      <div
        onClick={handleClick} // 클릭 핸들러 추가하여 이벤트 전파
        className={`flex items-center justify-center rounded-md px-4 text-sm font-medium ${
          hasCustomColors ? '' : 'bg-blue-600 text-white'
        } ${className || ""}`}
        style={{
          ...style,
          backgroundColor: bgColor,
          color: textColor,
          width: "100%",
          height: "100%",
          cursor: "pointer", // 선택 가능하도록 포인터 표시
        }}
        title={config?.tooltip || placeholder}
      >
        {config?.label || config?.text || value || placeholder || "버튼"}
      </div>
    );
  }

  return (
    <button
      type="button"
      onClick={handleClick}
      disabled={disabled || readonly}
      className={`flex items-center justify-center rounded-md px-4 text-sm font-medium transition-colors duration-200 focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 focus:outline-none disabled:cursor-not-allowed disabled:bg-gray-300 disabled:text-gray-500 ${
        hasCustomColors ? '' : 'bg-blue-600 text-white hover:bg-blue-700'
      } ${className || ""}`}
      style={{
        ...style,
        backgroundColor: bgColor,
        color: textColor,
        width: "100%",
        height: "100%",
      }}
      title={config?.tooltip || placeholder}
    >
      {config?.label || config?.text || value || placeholder || "버튼"}
    </button>
  );
};
