vexplor/frontend/lib/registry/components/number-input/NumberInputComponent.tsx

"use client";

import React, { useEffect, useState } from "react";
import { ComponentRendererProps, AutoGenerationConfig } from "@/types/component";
import { NumberInputConfig } from "./types";
import { filterDOMProps } from "@/lib/utils/domPropsFilter";
import { AutoGenerationUtils } from "@/lib/utils/autoGeneration";

export interface NumberInputComponentProps extends ComponentRendererProps {
  config?: NumberInputConfig;
  value?: any; // 외부에서 전달받는 값
}

/**
 * NumberInput 컴포넌트
 * number-input 컴포넌트입니다
 */
export const NumberInputComponent: React.FC<NumberInputComponentProps> = ({
  component,
  isDesignMode = false,
  isSelected = false,
  isInteractive = false,
  onClick,
  onDragStart,
  onDragEnd,
  config,
  className,
  style,
  formData,
  onFormDataChange,
  value: externalValue, // 외부에서 전달받은 값
  ...props
}) => {
  // 컴포넌트 설정
  const componentConfig = {
    ...config,
    ...component.config,
  } as NumberInputConfig;

  // 스타일 계산 (위치는 RealtimePreviewDynamic에서 처리하므로 제외)
  const componentStyle: React.CSSProperties = {
    width: "100%",
    height: "100%",
    ...component.style,
    ...style,
    // width는 항상 100%로 고정 (부모 컨테이너가 gridColumns로 크기 제어)
    width: "100%",
  };

  // 디자인 모드 스타일
  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;

  // DOM 안전한 props만 필터링
  const safeDomProps = filterDOMProps(domProps);

  // webType에 따른 step 값 결정
  const webType = component.componentConfig?.webType || "number";
  const defaultStep = webType === "decimal" ? "0.01" : "1";
  const step = componentConfig.step !== undefined ? componentConfig.step : defaultStep;

  // 숫자 값 가져오기
  const rawValue =
    externalValue !== undefined
      ? externalValue
      : isInteractive && formData && component.columnName
        ? formData[component.columnName] || ""
        : component.value || "";

  // 천 단위 구분자 추가 함수
  const formatNumberWithCommas = (value: string | number): string => {
    if (!value) return "";
    const num = typeof value === "string" ? parseFloat(value) : value;
    if (isNaN(num)) return String(value);
    return num.toLocaleString("ko-KR");
  };

  // 천 단위 구분자 제거 함수
  const removeCommas = (value: string): string => {
    return value.replace(/,/g, "");
  };

  // Currency 타입 전용 UI
  if (webType === "currency") {
    return (
      <div className={`relative w-full ${className || ""}`} {...safeDomProps}>
        {/* 라벨 렌더링 */}
        {component.label && component.style?.labelDisplay !== false && (
          <label className="absolute -top-6 left-0 text-sm font-medium text-slate-600">
            {component.label}
            {component.required && <span className="text-red-500">*</span>}
          </label>
        )}

        <div className="box-border flex h-full w-full items-center gap-1">
          {/* 통화 기호 */}
          <span className="pl-2 text-base font-semibold text-green-600">₩</span>

          {/* 숫자 입력 */}
          <input
            type="text"
            value={formatNumberWithCommas(rawValue)}
            placeholder="0"
            disabled={componentConfig.disabled || false}
            readOnly={componentConfig.readonly || false}
            onChange={(e) => {
              const inputValue = removeCommas(e.target.value);
              const numericValue = inputValue.replace(/[^0-9.]/g, "");

              if (isInteractive && onFormDataChange && component.columnName) {
                onFormDataChange(component.columnName, numericValue);
              }
            }}
            className={`h-full flex-1 rounded-md border px-3 py-2 text-right text-base font-semibold transition-all duration-200 outline-none ${isSelected ? "border-blue-500 ring-2 ring-blue-100" : "border-gray-300"} ${componentConfig.disabled ? "bg-gray-100 text-gray-400" : "bg-white text-green-600"} focus:border-orange-500 focus:ring-2 focus:ring-orange-100 disabled:cursor-not-allowed`}
          />
        </div>
      </div>
    );
  }

  // Percentage 타입 전용 UI
  if (webType === "percentage") {
    return (
      <div className={`relative w-full ${className || ""}`} {...safeDomProps}>
        {/* 라벨 렌더링 */}
        {component.label && component.style?.labelDisplay !== false && (
          <label className="absolute -top-6 left-0 text-sm font-medium text-slate-600">
            {component.label}
            {component.required && <span className="text-red-500">*</span>}
          </label>
        )}

        <div className="box-border flex h-full w-full items-center gap-1">
          {/* 숫자 입력 */}
          <input
            type="text"
            value={rawValue}
            placeholder="0"
            disabled={componentConfig.disabled || false}
            readOnly={componentConfig.readonly || false}
            onChange={(e) => {
              const numericValue = e.target.value.replace(/[^0-9.]/g, "");
              const num = parseFloat(numericValue);

              // 0-100 범위 제한
              if (num > 100) return;

              if (isInteractive && onFormDataChange && component.columnName) {
                onFormDataChange(component.columnName, numericValue);
              }
            }}
            className={`h-full flex-1 rounded-md border px-3 py-2 text-right text-base font-semibold transition-all duration-200 outline-none ${isSelected ? "border-blue-500 ring-2 ring-blue-100" : "border-gray-300"} ${componentConfig.disabled ? "bg-gray-100 text-gray-400" : "bg-white text-blue-600"} focus:border-orange-500 focus:ring-2 focus:ring-orange-100 disabled:cursor-not-allowed`}
          />

          {/* 퍼센트 기호 */}
          <span className="pr-2 text-base font-semibold text-blue-600">%</span>
        </div>
      </div>
    );
  }

  return (
    <div className={`relative w-full ${className || ""}`} {...safeDomProps}>
      {/* 라벨 렌더링 */}
      {component.label && component.style?.labelDisplay !== false && (
        <label className="absolute -top-6 left-0 text-sm font-medium text-slate-600">
          {component.label}
          {component.required && <span className="text-red-500">*</span>}
        </label>
      )}

      <input
        type="number"
        value={
          // 1순위: 외부에서 전달받은 value (DynamicComponentRenderer에서 전달)
          externalValue !== undefined
            ? externalValue
            : // 2순위: 인터랙티브 모드에서 formData
              isInteractive && formData && component.columnName
              ? formData[component.columnName] || ""
              : // 3순위: 컴포넌트 자체 값
                component.value || ""
        }
        placeholder={componentConfig.placeholder || ""}
        disabled={componentConfig.disabled || false}
        required={componentConfig.required || false}
        readOnly={componentConfig.readonly || false}
        min={componentConfig.min}
        max={componentConfig.max}
        step={step}
        className={`box-border h-full w-full rounded-md border px-3 py-2 text-sm shadow-sm transition-all duration-200 outline-none ${isSelected ? "border-blue-500 ring-2 ring-blue-100" : "border-gray-300"} ${componentConfig.disabled ? "bg-gray-100 text-gray-400" : "bg-white text-gray-900"} placeholder:text-gray-400 focus:border-orange-500 focus:ring-2 focus:ring-orange-100 disabled:cursor-not-allowed`}
        onClick={handleClick}
        onDragStart={onDragStart}
        onDragEnd={onDragEnd}
        onChange={(e) => {
          const newValue = e.target.value;
          console.log("🎯 NumberInputComponent onChange 호출:", {
            componentId: component.id,
            columnName: component.columnName,
            newValue,
            isInteractive,
            hasOnFormDataChange: !!onFormDataChange,
            hasOnChange: !!props.onChange,
          });

          // isInteractive 모드에서는 formData 업데이트
          if (isInteractive && onFormDataChange && component.columnName) {
            console.log(`📤 NumberInputComponent -> onFormDataChange 호출: ${component.columnName} = "${newValue}"`);
            onFormDataChange(component.columnName, newValue);
          }
          // 디자인 모드에서는 component.onChange 호출
          else if (component.onChange) {
            console.log(`📤 NumberInputComponent -> component.onChange 호출: ${newValue}`);
            component.onChange(newValue);
          }
          // props.onChange가 있으면 호출 (호환성)
          else if (props.onChange) {
            console.log(`📤 NumberInputComponent -> props.onChange 호출: ${newValue}`);
            props.onChange(newValue);
          }
        }}
      />
    </div>
  );
};

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