"use client";

import React from "react";
import { ComponentRendererProps } from "@/types/component";
import { RadioBasicConfig } from "./types";

export interface RadioBasicComponentProps extends ComponentRendererProps {
  config?: RadioBasicConfig;
}

/**
 * RadioBasic 컴포넌트
 * radio-basic 컴포넌트입니다
 */
export const RadioBasicComponent: React.FC<RadioBasicComponentProps> = ({
  component,
  isDesignMode = false,
  isSelected = false,
  isInteractive = false,
  onClick,
  onDragStart,
  onDragEnd,
  config,
  className,
  style,
  formData,
  onFormDataChange,
  ...props
}) => {
  // 컴포넌트 설정
  const componentConfig = {
    ...config,
    ...component.config,
  } as RadioBasicConfig;

  // 스타일 계산 (위치는 RealtimePreviewDynamic에서 처리하므로 제외)
  const componentStyle: React.CSSProperties = {
    width: "100%",
    height: "100%",
    ...component.style,
    ...style,
  };

  // 디자인 모드 스타일
  if (isDesignMode) {
    componentStyle.border = "1px dashed #cbd5e1";
    componentStyle.borderColor = isSelected ? "#3b82f6" : "#cbd5e1";
  }

  // 이벤트 핸들러
  const handleClick = (e: React.MouseEvent) => {
    e.stopPropagation();
    onClick?.();
  };

  // DOM에 전달하면 안 되는 React-specific props 필터링
  const {
    selectedScreen,
    onZoneComponentDrop,
    onZoneClick,
    componentConfig: _componentConfig,
    component: _component,
    isSelected: _isSelected,
    onClick: _onClick,
    onDragStart: _onDragStart,
    onDragEnd: _onDragEnd,
    size: _size,
    position: _position,
    style: _style,
    screenId: _screenId,
    tableName: _tableName,
    onRefresh: _onRefresh,
    onClose: _onClose,
    ...domProps
  } = props;

  return (
    <div style={componentStyle} className={className} {...domProps}>
      {/* 라벨 렌더링 */}
      {component.label && component.style?.labelDisplay !== false && (
        <label
          style={{
            position: "absolute",
            top: "-25px",
            left: "0px",
            fontSize: component.style?.labelFontSize || "14px",
            color: component.style?.labelColor || "#64748b",
            fontWeight: "500",
            // isInteractive 모드에서는 사용자 스타일 우선 적용
            ...(isInteractive && component.style ? component.style : {}),
          }}
        >
          {component.label}
          {component.required && (
            <span
              style={{
                color: "#ef4444",
                // isInteractive 모드에서는 사용자 스타일 우선 적용
                ...(isInteractive && component.style ? component.style : {}),
              }}
            >
              *
            </span>
          )}
        </label>
      )}

      <div
        style={{
          width: "100%",
          height: "100%",
          display: "flex",
          flexDirection: componentConfig.direction === "horizontal" ? "row" : "column",
          gap: "12px",
          padding: "12px",
          borderRadius: "8px",
          border: "1px solid #e5e7eb",
          backgroundColor: "#f9fafb",
          transition: "all 0.2s ease-in-out",
          boxShadow: "0 1px 2px 0 rgba(0, 0, 0, 0.05)",
          // isInteractive 모드에서는 사용자 스타일 우선 적용
          ...(isInteractive && component.style ? component.style : {}),
        }}
        onMouseEnter={(e) => {
          e.currentTarget.style.borderColor = "#f97316";
          e.currentTarget.style.boxShadow = "0 4px 6px -1px rgba(0, 0, 0, 0.1)";
        }}
        onMouseLeave={(e) => {
          e.currentTarget.style.borderColor = "#e5e7eb";
          e.currentTarget.style.boxShadow = "0 1px 2px 0 rgba(0, 0, 0, 0.05)";
        }}
        onClick={handleClick}
        onDragStart={onDragStart}
        onDragEnd={onDragEnd}
      >
        {(componentConfig.options || []).map((option, index) => (
          <label
            key={index}
            style={{
              display: "flex",
              alignItems: "center",
              gap: "6px",
              cursor: "pointer",
              fontSize: "14px",
              // isInteractive 모드에서는 사용자 스타일 우선 적용
              ...(isInteractive && component.style ? component.style : {}),
            }}
          >
            <input
              type="radio"
              name={component.id || "radio-group"}
              value={option.value}
              checked={component.value === option.value}
              disabled={componentConfig.disabled || false}
              required={componentConfig.required || false}
              style={{
                width: "16px",
                height: "16px",
                accentColor: "#3b82f6",
                // isInteractive 모드에서는 사용자 스타일 우선 적용
                ...(isInteractive && component.style ? component.style : {}),
              }}
              onChange={(e) => {
                if (component.onChange) {
                  component.onChange(e.target.value);
                }
              }}
            />
            <span
              style={{
                color: "#212121",
                // isInteractive 모드에서는 사용자 스타일 우선 적용
                ...(isInteractive && component.style ? component.style : {}),
              }}
            >
              {option.label}
            </span>
          </label>
        ))}
        {(!componentConfig.options || componentConfig.options.length === 0) && (
          <>
            <label
              style={{
                display: "flex",
                alignItems: "center",
                gap: "6px",
                cursor: "pointer",
                fontSize: "14px",
                // isInteractive 모드에서는 사용자 스타일 우선 적용
                ...(isInteractive && component.style ? component.style : {}),
              }}
            >
              <input
                type="radio"
                name={component.id || "radio-group"}
                value="option1"
                style={{
                  width: "16px",
                  height: "16px",
                  accentColor: "#3b82f6",
                  // isInteractive 모드에서는 사용자 스타일 우선 적용
                  ...(isInteractive && component.style ? component.style : {}),
                }}
              />
              <span>옵션 1</span>
            </label>
            <label
              style={{
                display: "flex",
                alignItems: "center",
                gap: "6px",
                cursor: "pointer",
                fontSize: "14px",
                // isInteractive 모드에서는 사용자 스타일 우선 적용
                ...(isInteractive && component.style ? component.style : {}),
              }}
            >
              <input
                type="radio"
                name={component.id || "radio-group"}
                value="option2"
                style={{
                  width: "16px",
                  height: "16px",
                  accentColor: "#3b82f6",
                  // isInteractive 모드에서는 사용자 스타일 우선 적용
                  ...(isInteractive && component.style ? component.style : {}),
                }}
              />
              <span>옵션 2</span>
            </label>
          </>
        )}
      </div>
    </div>
  );
};

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