"use client";

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

export interface TextInputComponentProps extends ComponentRendererProps {
  config?: TextInputConfig;
}

/**
 * TextInput 컴포넌트
 * text-input 컴포넌트입니다
 */
export const TextInputComponent: React.FC<TextInputComponentProps> = ({
  component,
  isDesignMode = false,
  isSelected = false,
  isInteractive = false,
  onClick,
  onDragStart,
  onDragEnd,
  config,
  className,
  style,
  formData,
  onFormDataChange,
  ...props
}) => {
  // 컴포넌트 설정
  const componentConfig = {
    ...config,
    ...component.config,
  } as TextInputConfig;

  // 자동생성 설정 (props에서 전달받은 값 우선 사용)
  const autoGeneration: AutoGenerationConfig = props.autoGeneration ||
    component.autoGeneration ||
    componentConfig.autoGeneration || {
      type: "none",
      enabled: false,
    };

  // 숨김 상태 (props에서 전달받은 값 우선 사용)
  const isHidden = props.hidden !== undefined ? props.hidden : component.hidden || componentConfig.hidden || false;

  // 자동생성된 값 상태
  const [autoGeneratedValue, setAutoGeneratedValue] = useState<string>("");

  // 테스트용: 컴포넌트 라벨에 "test"가 포함되면 강제로 UUID 자동생성 활성화
  const testAutoGeneration = component.label?.toLowerCase().includes("test")
    ? {
        type: "uuid" as AutoGenerationType,
        enabled: true,
      }
    : autoGeneration;

  // 디버그 로그 (필요시 주석 해제)
  // console.log("🔧 텍스트 입력 컴포넌트 설정:", {
  //   config,
  //   componentConfig,
  //   component: component,
  //   autoGeneration,
  //   testAutoGeneration,
  //   isTestMode: component.label?.toLowerCase().includes("test"),
  //   isHidden,
  //   isInteractive,
  //   formData,
  //   columnName: component.columnName,
  //   currentFormValue: formData?.[component.columnName],
  //   componentValue: component.value,
  //   autoGeneratedValue,
  // });

  // 자동생성 값 생성 (컴포넌트 마운트 시 또는 폼 데이터 변경 시)
  useEffect(() => {
    console.log("🔄 자동생성 useEffect 실행:", {
      enabled: testAutoGeneration.enabled,
      type: testAutoGeneration.type,
      isInteractive,
      columnName: component.columnName,
      hasFormData: !!formData,
      hasOnFormDataChange: !!onFormDataChange,
    });

    if (testAutoGeneration.enabled && testAutoGeneration.type !== "none") {
      // 폼 데이터에 이미 값이 있으면 자동생성하지 않음
      const currentFormValue = formData?.[component.columnName];
      const currentComponentValue = component.value;

      console.log("🔍 자동생성 조건 확인:", {
        currentFormValue,
        currentComponentValue,
        hasCurrentValue: !!(currentFormValue || currentComponentValue),
        autoGeneratedValue,
      });

      // 자동생성된 값이 없고, 현재 값도 없을 때만 생성
      if (!autoGeneratedValue && !currentFormValue && !currentComponentValue) {
        const generatedValue = AutoGenerationUtils.generateValue(testAutoGeneration, component.columnName);
        console.log("✨ 자동생성된 값:", generatedValue);

        if (generatedValue) {
          setAutoGeneratedValue(generatedValue);

          // 폼 데이터에 자동생성된 값 설정 (인터랙티브 모드에서만)
          if (isInteractive && onFormDataChange && component.columnName) {
            console.log("📝 폼 데이터에 자동생성 값 설정:", {
              columnName: component.columnName,
              value: generatedValue,
            });
            onFormDataChange(component.columnName, generatedValue);
          }
        }
      } else if (!autoGeneratedValue && testAutoGeneration.type !== "none") {
        // 디자인 모드에서도 미리보기용 자동생성 값 표시
        const previewValue = AutoGenerationUtils.generatePreviewValue(testAutoGeneration);
        console.log("🎨 디자인 모드 미리보기 값:", previewValue);
        setAutoGeneratedValue(previewValue);
      } else {
        console.log("⏭️ 이미 값이 있어서 자동생성 건너뜀:", {
          hasAutoGenerated: !!autoGeneratedValue,
          hasFormValue: !!currentFormValue,
          hasComponentValue: !!currentComponentValue,
        });
      }
    }
  }, [testAutoGeneration, isInteractive, component.columnName, component.value, formData, onFormDataChange]);

  // 스타일 계산 (위치는 RealtimePreviewDynamic에서 처리하므로 제외)
  const componentStyle: React.CSSProperties = {
    width: "100%",
    height: "100%",
    ...component.style,
    ...style,
    // 숨김 기능: 디자인 모드에서는 연하게, 실제 화면에서는 완전히 숨김
    ...(isHidden && {
      opacity: isDesignMode ? 0.4 : 0,
      backgroundColor: isDesignMode ? "#f3f4f6" : "transparent",
      pointerEvents: isDesignMode ? "auto" : "none",
      display: isDesignMode ? "block" : "none",
    }),
  };

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

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

      <input
        type="text"
        value={(() => {
          let displayValue = "";

          if (isInteractive && formData && component.columnName) {
            // 인터랙티브 모드: formData 우선, 없으면 자동생성 값
            displayValue = formData[component.columnName] || autoGeneratedValue || "";
          } else {
            // 디자인 모드: component.value 우선, 없으면 자동생성 값
            displayValue = component.value || autoGeneratedValue || "";
          }

          console.log("📄 Input 값 계산:", {
            isInteractive,
            hasFormData: !!formData,
            columnName: component.columnName,
            formDataValue: formData?.[component.columnName],
            componentValue: component.value,
            autoGeneratedValue,
            finalDisplayValue: displayValue,
          });

          return displayValue;
        })()}
        placeholder={
          testAutoGeneration.enabled && testAutoGeneration.type !== "none"
            ? `자동생성: ${AutoGenerationUtils.getTypeDescription(testAutoGeneration.type)}`
            : componentConfig.placeholder || ""
        }
        disabled={componentConfig.disabled || false}
        required={componentConfig.required || false}
        readOnly={componentConfig.readonly || (testAutoGeneration.enabled && testAutoGeneration.type !== "none")}
        style={{
          width: "100%",
          height: "100%",
          border: "1px solid #d1d5db",
          borderRadius: "8px",
          padding: "8px 12px",
          fontSize: "14px",
          outline: "none",
          transition: "all 0.2s ease-in-out",
          boxShadow: "0 1px 2px 0 rgba(0, 0, 0, 0.05)",
          // isInteractive 모드에서는 사용자 스타일 우선 적용
          ...(isInteractive && component.style ? component.style : {}),
        }}
        onFocus={(e) => {
          e.target.style.borderColor = "#f97316";
          e.target.style.boxShadow = "0 0 0 3px rgba(249, 115, 22, 0.1)";
        }}
        onBlur={(e) => {
          e.target.style.borderColor = "#d1d5db";
          e.target.style.boxShadow = "0 1px 2px 0 rgba(0, 0, 0, 0.05)";
        }}
        onClick={handleClick}
        onDragStart={onDragStart}
        onDragEnd={onDragEnd}
        onChange={(e) => {
          const newValue = e.target.value;
          // console.log("🎯 TextInputComponent onChange 호출:", {
          //   componentId: component.id,
          //   columnName: component.columnName,
          //   newValue,
          //   isInteractive,
          //   hasOnFormDataChange: !!onFormDataChange,
          //   hasOnChange: !!props.onChange,
          // });

          // isInteractive 모드에서는 formData 업데이트
          if (isInteractive && onFormDataChange && component.columnName) {
            // console.log(`📤 TextInputComponent -> onFormDataChange 호출: ${component.columnName} = "${newValue}"`);
            console.log("🔍 onFormDataChange 함수 정보:", {
              functionName: onFormDataChange.name,
              functionString: onFormDataChange.toString().substring(0, 200),
            });
            onFormDataChange(component.columnName, newValue);
          } else {
            console.log("❌ TextInputComponent onFormDataChange 조건 미충족:", {
              isInteractive,
              hasOnFormDataChange: !!onFormDataChange,
              hasColumnName: !!component.columnName,
            });
          }

          // 기존 onChange 핸들러도 호출
          if (props.onChange) {
            // console.log(`📤 TextInputComponent -> props.onChange 호출: "${newValue}"`);
            props.onChange(newValue);
          }
        }}
      />
    </div>
  );
};

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