"use client";

import React, { useEffect, useState } from "react";
import { ComponentRendererProps } from "@/types/component";
import { AutoGenerationConfig, AutoGenerationType } from "@/types/screen";
import { TextInputConfig } from "./types";
import { filterDOMProps } from "@/lib/utils/domPropsFilter";
import { AutoGenerationUtils } from "@/lib/utils/autoGeneration";
import { INPUT_CLASSES, cn, getInputClasses } from "../common/inputStyles";
import { ChevronDown, Check, ChevronsUpDown } from "lucide-react";
import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover";
import { Command, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList } from "@/components/ui/command";

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>("");
  
  // API 호출 중복 방지를 위한 ref
  const isGeneratingRef = React.useRef(false);
  const hasGeneratedRef = React.useRef(false);

  // 테스트용: 컴포넌트 라벨에 "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,
  // });

  // 자동생성 원본 값 추적 (수동/자동 모드 구분용)
  const [originalAutoGeneratedValue, setOriginalAutoGeneratedValue] = useState<string>("");
  const [isManualMode, setIsManualMode] = useState<boolean>(false);

  // 자동생성 값 생성 (컴포넌트 마운트 시 한 번만 실행)
  useEffect(() => {
    const generateAutoValue = async () => {
      // 이미 생성 중이거나 생성 완료된 경우 중복 실행 방지
      if (isGeneratingRef.current || hasGeneratedRef.current) {
        console.log("⏭️ 중복 실행 방지:", {
          isGenerating: isGeneratingRef.current,
          hasGenerated: hasGeneratedRef.current,
        });
        return;
      }

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


        // 자동생성된 값이 없고, 현재 값도 없을 때만 생성
        if (!autoGeneratedValue && !currentFormValue && !currentComponentValue) {
          isGeneratingRef.current = true; // 생성 시작 플래그
          let generatedValue: string | null = null;

          // 채번 규칙은 비동기로 처리
          if (testAutoGeneration.type === "numbering_rule") {
            const ruleId = testAutoGeneration.options?.numberingRuleId;
            if (ruleId && ruleId !== "undefined" && ruleId !== "null") {
              try {
                const { previewNumberingCode } = await import("@/lib/api/numberingRule");
                const response = await previewNumberingCode(ruleId);
                if (response.success && response.data) {
                  generatedValue = response.data.generatedCode;
                }
                // 실패 시 조용히 무시 (채번 규칙이 없어도 화면은 정상 로드)
              } catch {
                // 네트워크 에러 등 예외 상황은 조용히 무시
              } finally {
                isGeneratingRef.current = false;
              }
            } else {
              isGeneratingRef.current = false;
            }
          } else {
            // 기타 타입은 동기로 처리
            generatedValue = AutoGenerationUtils.generateValue(testAutoGeneration, component.columnName);
            isGeneratingRef.current = false;
          }

          if (generatedValue) {
            console.log("✅ 자동생성 값 설정:", generatedValue);
            setAutoGeneratedValue(generatedValue);
            setOriginalAutoGeneratedValue(generatedValue); // 🆕 원본 값 저장
            hasGeneratedRef.current = true; // 생성 완료 플래그

            // 폼 데이터에 자동생성된 값 설정 (인터랙티브 모드에서만)
            if (isInteractive && onFormDataChange && component.columnName) {
              console.log("📝 formData 업데이트:", component.columnName, generatedValue);
              onFormDataChange(component.columnName, generatedValue);
              
              // 채번 규칙 ID도 함께 저장 (저장 시점에 실제 할당하기 위함)
              if (testAutoGeneration.type === "numbering_rule" && testAutoGeneration.options?.numberingRuleId) {
                const ruleIdKey = `${component.columnName}_numberingRuleId`;
                onFormDataChange(ruleIdKey, testAutoGeneration.options.numberingRuleId);
                console.log("📝 채번 규칙 ID 저장:", ruleIdKey, testAutoGeneration.options.numberingRuleId);
              }
            }
          }
        } else if (!autoGeneratedValue && testAutoGeneration.type !== "none") {
          // 디자인 모드에서도 미리보기용 자동생성 값 표시
          const previewValue = AutoGenerationUtils.generatePreviewValue(testAutoGeneration);
          console.log("👁️ 미리보기 값 설정:", previewValue);
          setAutoGeneratedValue(previewValue);
          hasGeneratedRef.current = true;
        }
      }
    };

    generateAutoValue();
  }, [testAutoGeneration.enabled, testAutoGeneration.type, component.columnName, isInteractive]);

  // 실제 화면에서 숨김 처리된 컴포넌트는 렌더링하지 않음
  if (isHidden && !isDesignMode) {
    return null;
  }

  // 스타일 계산 (위치는 RealtimePreviewDynamic에서 처리하므로 제외)
  const componentStyle: React.CSSProperties = {
    width: "100%",
    height: "100%",
    ...component.style,
    ...style,
    // width는 항상 100%로 고정 (부모 컨테이너가 gridColumns로 크기 제어)
    width: "100%",
    // 숨김 기능: 편집 모드에서만 연하게 표시
      ...(isHidden &&
        isDesignMode && {
          opacity: 0.4,
          backgroundColor: "hsl(var(--muted))",
          pointerEvents: "auto",
        }),
  };

  // 디자인 모드 스타일
  if (isDesignMode) {
    componentStyle.border = "1px dashed hsl(var(--border))";
    componentStyle.borderColor = isSelected ? "hsl(var(--ring))" : "hsl(var(--border))";
  }

  // 이벤트 핸들러
  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,
    autoGeneration: _autoGeneration,
    hidden: _hidden,
    isInModal: _isInModal,
    isPreview: _isPreview,
    originalData: _originalData,
    allComponents: _allComponents,
    selectedRows: _selectedRows,
    selectedRowsData: _selectedRowsData,
    refreshKey: _refreshKey,
    onUpdateLayout: _onUpdateLayout,
    onSelectedRowsChange: _onSelectedRowsChange,
    onConfigChange: _onConfigChange,
    ...domProps
  } = props;

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

  // webType에 따른 실제 input type 및 검증 규칙 결정
  const webType = component.componentConfig?.webType || "text";
  const inputType = (() => {
    switch (webType) {
      case "email":
        return "email";
      case "tel":
        return "tel";
      case "url":
        return "url";
      case "password":
        return "password";
      case "textarea":
        return "text"; // textarea는 별도 처리
      case "text":
      default:
        return "text";
    }
  })();

  // webType별 검증 패턴
  const validationPattern = (() => {
    switch (webType) {
      case "tel":
        // 한국 전화번호 형식: 010-1234-5678, 02-1234-5678 등
        return "[0-9]{2,3}-[0-9]{3,4}-[0-9]{4}";
      default:
        return undefined;
    }
  })();

  // webType별 placeholder
  const defaultPlaceholder = (() => {
    switch (webType) {
      case "email":
        return "example@email.com";
      case "tel":
        return "010-1234-5678";
      case "url":
        return "https://example.com";
      case "password":
        return "비밀번호를 입력하세요";
      case "textarea":
        return "내용을 입력하세요";
      default:
        return "텍스트를 입력하세요";
    }
  })();

  // 이메일 입력 상태 (username@domain 분리)
  const [emailUsername, setEmailUsername] = React.useState("");
  const [emailDomain, setEmailDomain] = React.useState("gmail.com");
  const [emailDomainOpen, setEmailDomainOpen] = React.useState(false);

  // 전화번호 입력 상태 (3개 부분으로 분리)
  const [telPart1, setTelPart1] = React.useState("");
  const [telPart2, setTelPart2] = React.useState("");
  const [telPart3, setTelPart3] = React.useState("");

  // URL 입력 상태 (프로토콜 + 도메인)
  const [urlProtocol, setUrlProtocol] = React.useState("https://");
  const [urlDomain, setUrlDomain] = React.useState("");

  // 이메일 도메인 목록
  const emailDomains = ["gmail.com", "naver.com", "daum.net", "kakao.com", "직접입력"];

  // 이메일 값 동기화
  React.useEffect(() => {
    if (webType === "email") {
      const currentValue =
        isInteractive && formData && component.columnName ? formData[component.columnName] : component.value || "";

      if (currentValue && typeof currentValue === "string" && currentValue.includes("@")) {
        const [username, domain] = currentValue.split("@");
        setEmailUsername(username || "");
        setEmailDomain(domain || "gmail.com");
      }
    }
  }, [webType, component.value, formData, component.columnName, isInteractive]);

  // 전화번호 값 동기화
  React.useEffect(() => {
    if (webType === "tel") {
      const currentValue =
        isInteractive && formData && component.columnName ? formData[component.columnName] : component.value || "";

      if (currentValue && typeof currentValue === "string") {
        const parts = currentValue.split("-");
        setTelPart1(parts[0] || "");
        setTelPart2(parts[1] || "");
        setTelPart3(parts[2] || "");
      }
    }
  }, [webType, component.value, formData, component.columnName, isInteractive]);

  // URL 값 동기화
  React.useEffect(() => {
    if (webType === "url") {
      const currentValue =
        isInteractive && formData && component.columnName ? formData[component.columnName] : component.value || "";

      if (currentValue && typeof currentValue === "string") {
        if (currentValue.startsWith("https://")) {
          setUrlProtocol("https://");
          setUrlDomain(currentValue.substring(8));
        } else if (currentValue.startsWith("http://")) {
          setUrlProtocol("http://");
          setUrlDomain(currentValue.substring(7));
        } else {
          setUrlDomain(currentValue);
        }
      }
    }
  }, [webType, component.value, formData, component.columnName, isInteractive]);

  // 이메일 타입 전용 UI
  if (webType === "email") {
    return (
      <div className={`relative w-full ${className || ""}`} style={componentStyle} {...safeDomProps}>
        {/* 라벨 렌더링 */}
        {component.label && component.style?.labelDisplay !== false && (
          <label className="absolute -top-6 left-0 text-sm font-medium text-muted-foreground">
            {component.label}
            {component.required && <span className="text-destructive">*</span>}
          </label>
        )}

        <div className="box-border flex h-full w-full items-center gap-2">
          {/* 사용자명 입력 */}
          <input
            type="text"
            value={emailUsername}
            placeholder="사용자명"
            disabled={componentConfig.disabled || false}
            readOnly={componentConfig.readonly || false}
            onChange={(e) => {
              const newUsername = e.target.value;
              setEmailUsername(newUsername);
              const fullEmail = `${newUsername}@${emailDomain}`;

              if (isInteractive && onFormDataChange && component.columnName) {
                onFormDataChange(component.columnName, fullEmail);
              }
            }}
            className={cn(
              "h-full flex-1 rounded-md border px-3 py-2 text-sm transition-all duration-200 outline-none",
              "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
              isSelected ? "border-ring ring-2 ring-ring/50" : "border-input",
              componentConfig.disabled ? "bg-muted text-muted-foreground cursor-not-allowed opacity-50" : "bg-background text-foreground",
              "disabled:cursor-not-allowed"
            )}
          />

          {/* @ 구분자 */}
          <span className="text-base font-medium text-muted-foreground">@</span>

          {/* 도메인 선택/입력 (Combobox) */}
          <Popover open={emailDomainOpen} onOpenChange={setEmailDomainOpen}>
            <PopoverTrigger asChild>
              <button
                type="button"
                role="combobox"
                aria-expanded={emailDomainOpen}
                disabled={componentConfig.disabled || false}
                className={cn(
                  "flex h-full flex-1 items-center justify-between rounded-md border px-3 py-2 text-sm transition-all duration-200",
                  "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
                  isSelected ? "border-ring ring-2 ring-ring/50" : "border-input",
                  componentConfig.disabled ? "cursor-not-allowed bg-muted text-muted-foreground opacity-50" : "bg-background text-foreground",
                  "hover:border-ring/80",
                  emailDomainOpen && "border-ring ring-2 ring-ring/50",
                )}
              >
                <span className={cn("truncate", !emailDomain && "text-muted-foreground")}>{emailDomain || "도메인 선택"}</span>
                <ChevronsUpDown className="ml-2 h-4 w-4 shrink-0 opacity-50" />
              </button>
            </PopoverTrigger>
            <PopoverContent className="w-[200px] p-0" align="start">
              <Command>
                <CommandInput
                  placeholder="도메인 검색 또는 입력..."
                  value={emailDomain}
                  onValueChange={(value) => {
                    setEmailDomain(value);
                    const fullEmail = `${emailUsername}@${value}`;

                    if (isInteractive && onFormDataChange && component.columnName) {
                      onFormDataChange(component.columnName, fullEmail);
                    }
                  }}
                />
                <CommandList>
                  <CommandEmpty>직접 입력한 도메인: {emailDomain}</CommandEmpty>
                  <CommandGroup>
                    {emailDomains
                      .filter((d) => d !== "직접입력")
                      .map((domain) => (
                        <CommandItem
                          key={domain}
                          value={domain}
                          onSelect={(currentValue) => {
                            setEmailDomain(currentValue);
                            const fullEmail = `${emailUsername}@${currentValue}`;

                            if (isInteractive && onFormDataChange && component.columnName) {
                              onFormDataChange(component.columnName, fullEmail);
                            }
                            setEmailDomainOpen(false);
                          }}
                        >
                          <Check className={cn("mr-2 h-4 w-4", emailDomain === domain ? "opacity-100" : "opacity-0")} />
                          {domain}
                        </CommandItem>
                      ))}
                  </CommandGroup>
                </CommandList>
              </Command>
            </PopoverContent>
          </Popover>
        </div>
      </div>
    );
  }

  // 전화번호 타입 전용 UI
  if (webType === "tel") {
    return (
      <div className={`relative w-full ${className || ""}`} style={componentStyle} {...safeDomProps}>
        {/* 라벨 렌더링 */}
        {component.label && component.style?.labelDisplay !== false && (
          <label className="absolute -top-6 left-0 text-sm font-medium text-muted-foreground">
            {component.label}
            {component.required && <span className="text-destructive">*</span>}
          </label>
        )}

        <div className="box-border flex h-full w-full items-center gap-1.5">
          {/* 첫 번째 부분 (지역번호) */}
          <input
            type="text"
            value={telPart1}
            placeholder="010"
            maxLength={3}
            disabled={componentConfig.disabled || false}
            readOnly={componentConfig.readonly || false}
            onChange={(e) => {
              const value = e.target.value.replace(/[^0-9]/g, "");
              setTelPart1(value);
              const fullTel = `${value}-${telPart2}-${telPart3}`;

              if (isInteractive && onFormDataChange && component.columnName) {
                onFormDataChange(component.columnName, fullTel);
              }
            }}
            className={cn(
              "h-full flex-1 rounded-md border px-3 py-2 text-center text-sm transition-all duration-200 outline-none",
              "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
              isSelected ? "border-ring ring-2 ring-ring/50" : "border-input",
              componentConfig.disabled ? "bg-muted text-muted-foreground cursor-not-allowed opacity-50" : "bg-background text-foreground",
              "disabled:cursor-not-allowed"
            )}
          />

          <span className="text-base font-medium text-muted-foreground">-</span>

          {/* 두 번째 부분 */}
          <input
            type="text"
            value={telPart2}
            placeholder="1234"
            maxLength={4}
            disabled={componentConfig.disabled || false}
            readOnly={componentConfig.readonly || false}
            onChange={(e) => {
              const value = e.target.value.replace(/[^0-9]/g, "");
              setTelPart2(value);
              const fullTel = `${telPart1}-${value}-${telPart3}`;

              if (isInteractive && onFormDataChange && component.columnName) {
                onFormDataChange(component.columnName, fullTel);
              }
            }}
            className={cn(
              "h-full flex-1 rounded-md border px-3 py-2 text-center text-sm transition-all duration-200 outline-none",
              "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
              isSelected ? "border-ring ring-2 ring-ring/50" : "border-input",
              componentConfig.disabled ? "bg-muted text-muted-foreground cursor-not-allowed opacity-50" : "bg-background text-foreground",
              "disabled:cursor-not-allowed"
            )}
          />

          <span className="text-base font-medium text-muted-foreground">-</span>

          {/* 세 번째 부분 */}
          <input
            type="text"
            value={telPart3}
            placeholder="5678"
            maxLength={4}
            disabled={componentConfig.disabled || false}
            readOnly={componentConfig.readonly || false}
            onChange={(e) => {
              const value = e.target.value.replace(/[^0-9]/g, "");
              setTelPart3(value);
              const fullTel = `${telPart1}-${telPart2}-${value}`;

              if (isInteractive && onFormDataChange && component.columnName) {
                onFormDataChange(component.columnName, fullTel);
              }
            }}
            className={cn(
              "h-full flex-1 rounded-md border px-3 py-2 text-center text-sm transition-all duration-200 outline-none",
              "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
              isSelected ? "border-ring ring-2 ring-ring/50" : "border-input",
              componentConfig.disabled ? "bg-muted text-muted-foreground cursor-not-allowed opacity-50" : "bg-background text-foreground",
              "disabled:cursor-not-allowed"
            )}
          />
        </div>
      </div>
    );
  }

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

        <div className="box-border flex h-full w-full items-center gap-1">
          {/* 프로토콜 선택 */}
          <select
            value={urlProtocol}
            disabled={componentConfig.disabled || false}
            onChange={(e) => {
              const newProtocol = e.target.value;
              setUrlProtocol(newProtocol);
              const fullUrl = `${newProtocol}${urlDomain}`;

              if (isInteractive && onFormDataChange && component.columnName) {
                onFormDataChange(component.columnName, fullUrl);
              }
            }}
            className={cn(
              "h-full w-[100px] cursor-pointer rounded-md border px-2 py-2 text-sm transition-all duration-200 outline-none",
              "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
              isSelected ? "border-ring ring-2 ring-ring/50" : "border-input",
              componentConfig.disabled ? "bg-muted text-muted-foreground cursor-not-allowed opacity-50" : "bg-background text-foreground",
              "disabled:cursor-not-allowed"
            )}
          >
            <option value="https://">https://</option>
            <option value="http://">http://</option>
          </select>

          {/* 도메인 입력 */}
          <input
            type="text"
            value={urlDomain}
            placeholder="www.example.com"
            disabled={componentConfig.disabled || false}
            readOnly={componentConfig.readonly || false}
            onChange={(e) => {
              const newDomain = e.target.value;
              setUrlDomain(newDomain);
              const fullUrl = `${urlProtocol}${newDomain}`;

              if (isInteractive && onFormDataChange && component.columnName) {
                onFormDataChange(component.columnName, fullUrl);
              }
            }}
            className={cn(
              "h-full flex-1 rounded-md border px-3 py-2 text-sm transition-all duration-200 outline-none",
              "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
              isSelected ? "border-ring ring-2 ring-ring/50" : "border-input",
              componentConfig.disabled ? "bg-muted text-muted-foreground cursor-not-allowed opacity-50" : "bg-background text-foreground",
              "disabled:cursor-not-allowed"
            )}
          />
        </div>
      </div>
    );
  }

  // textarea 타입인 경우 별도 렌더링
  if (webType === "textarea") {
    return (
      <div className={`relative w-full ${className || ""}`} style={componentStyle} {...safeDomProps}>
        {/* 라벨 렌더링 */}
        {component.label && component.style?.labelDisplay !== false && (
          <label className="absolute -top-6 left-0 text-sm font-medium text-muted-foreground">
            {component.label}
            {component.required && <span className="text-destructive">*</span>}
          </label>
        )}

        <textarea
          value={(() => {
            let displayValue = "";

            if (isInteractive && formData && component.columnName) {
              displayValue = formData[component.columnName] || autoGeneratedValue || "";
            } else {
              displayValue = component.value || autoGeneratedValue || "";
            }

            return displayValue;
          })()}
          placeholder={
            testAutoGeneration.enabled && testAutoGeneration.type !== "none"
              ? `자동생성: ${AutoGenerationUtils.getTypeDescription(testAutoGeneration.type)}`
              : componentConfig.placeholder || defaultPlaceholder
          }
          disabled={componentConfig.disabled || false}
          required={componentConfig.required || false}
          readOnly={componentConfig.readonly || false}
          onChange={(e) => {
            if (isInteractive && onFormDataChange && component.columnName) {
              onFormDataChange(component.columnName, e.target.value);
            }
          }}
          className={cn(
            "box-border h-full w-full max-w-full resize-none rounded-md border px-3 py-2 text-sm transition-all duration-200 outline-none",
            "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
            "placeholder:text-muted-foreground",
            isSelected ? "border-ring ring-2 ring-ring/50" : "border-input",
            componentConfig.disabled ? "bg-muted text-muted-foreground cursor-not-allowed opacity-50" : "bg-background text-foreground",
            "disabled:cursor-not-allowed"
          )}
        />
      </div>
    );
  }

  return (
    <div className={`relative w-full ${className || ""}`} style={componentStyle} {...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>
      )}

      {/* 수동/자동 모드 표시 배지 */}
      {testAutoGeneration.enabled && testAutoGeneration.type === "numbering_rule" && isInteractive && (
        <div className="absolute right-2 top-1/2 -translate-y-1/2 flex items-center gap-1">
          <span className={cn(
            "text-[10px] px-2 py-0.5 rounded-full font-medium",
            isManualMode 
              ? "bg-orange-100 text-orange-700 dark:bg-orange-900/30 dark:text-orange-400" 
              : "bg-blue-100 text-blue-700 dark:bg-blue-900/30 dark:text-blue-400"
          )}>
            {isManualMode ? "수동" : "자동"}
          </span>
        </div>
      )}

      <input
        type={inputType}
        defaultValue={(() => {
          let displayValue = "";

          if (isInteractive && formData && component.columnName) {
            // 인터랙티브 모드: formData 우선, 없으면 자동생성 값
            const rawValue = formData[component.columnName] || autoGeneratedValue || "";
            // 객체인 경우 빈 문자열로 변환 (에러 방지)
            displayValue = typeof rawValue === "object" ? "" : String(rawValue);
          } else {
            // 디자인 모드: component.value 우선, 없으면 자동생성 값
            const rawValue = component.value || autoGeneratedValue || "";
            displayValue = typeof rawValue === "object" ? "" : String(rawValue);
          }

          return displayValue;
        })()}
        placeholder={
          testAutoGeneration.enabled && testAutoGeneration.type !== "none"
            ? isManualMode 
              ? "수동 입력 모드"
              : `자동생성: ${AutoGenerationUtils.getTypeDescription(testAutoGeneration.type)}`
            : componentConfig.placeholder || defaultPlaceholder
        }
        pattern={validationPattern}
        title={
          webType === "tel" 
            ? "전화번호 형식: 010-1234-5678" 
            : isManualMode
              ? `${component.label} (수동 입력 모드 - 채번 규칙 미적용)`
            : component.label 
              ? `${component.label}${component.columnName ? ` (${component.columnName})` : ""}` 
              : component.columnName || undefined
        }
        disabled={componentConfig.disabled || false}
        required={componentConfig.required || false}
        readOnly={componentConfig.readonly || false}
        className={cn(
          "box-border h-full w-full max-w-full rounded-md border px-3 py-2 text-sm shadow-sm transition-all duration-200 outline-none",
          "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
          "placeholder:text-muted-foreground",
          isSelected ? "border-ring ring-2 ring-ring/50" : "border-input",
          componentConfig.disabled ? "bg-muted text-muted-foreground cursor-not-allowed opacity-50" : "bg-background text-foreground",
          "disabled:cursor-not-allowed"
        )}
        onClick={(e) => {
          handleClick(e);
        }}
        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,
          // });

          // 🆕 사용자 수정 감지 (자동 생성 값과 다르면 수동 모드로 전환)
          if (testAutoGeneration.enabled && testAutoGeneration.type === "numbering_rule") {
            if (originalAutoGeneratedValue && newValue !== originalAutoGeneratedValue) {
              if (!isManualMode) {
                setIsManualMode(true);
                console.log("🔄 수동 모드로 전환:", {
                  field: component.columnName,
                  original: originalAutoGeneratedValue,
                  modified: newValue
                });
                
                // 🆕 채번 규칙 ID 제거 (수동 모드이므로 더 이상 채번 규칙 사용 안 함)
                if (isInteractive && onFormDataChange && component.columnName) {
                  const ruleIdKey = `${component.columnName}_numberingRuleId`;
                  onFormDataChange(ruleIdKey, null);
                  console.log("🗑️ 채번 규칙 ID 제거 (수동 모드):", ruleIdKey);
                }
              }
            } else if (isManualMode && newValue === originalAutoGeneratedValue) {
              // 사용자가 원본 값으로 되돌렸을 때 자동 모드로 복구
              setIsManualMode(false);
              console.log("🔄 자동 모드로 복구:", {
                field: component.columnName,
                value: newValue
              });
              
              // 채번 규칙 ID 복구
              if (isInteractive && onFormDataChange && component.columnName) {
                const ruleId = testAutoGeneration.options?.numberingRuleId;
                if (ruleId) {
                  const ruleIdKey = `${component.columnName}_numberingRuleId`;
                  onFormDataChange(ruleIdKey, ruleId);
                  console.log("✅ 채번 규칙 ID 복구 (자동 모드):", ruleIdKey);
                }
              }
            }
          }

          // isInteractive 모드에서는 formData 업데이트
          if (isInteractive && onFormDataChange && component.columnName) {
            onFormDataChange(component.columnName, newValue);
          }

          // props.onChange는 DynamicComponentRenderer의 handleChange
          // 이벤트 객체 감지 및 값 추출 로직이 있으므로 안전하게 호출 가능
          if (props.onChange) {
            props.onChange(newValue);
          }
        }}
      />
    </div>
  );
};

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