"use client";

/**
 * V2Input
 *
 * 통합 입력 컴포넌트
 * - text: 텍스트 입력
 * - number: 숫자 입력
 * - password: 비밀번호 입력
 * - slider: 슬라이더 입력
 * - color: 색상 선택
 * - button: 버튼 (입력이 아닌 액션)
 */

import React, { forwardRef, useCallback, useEffect, useMemo, useRef, useState } from "react";
import { Input } from "@/components/ui/input";
import { Slider } from "@/components/ui/slider";
import { Label } from "@/components/ui/label";
import { cn } from "@/lib/utils";
import { V2InputProps, V2InputConfig, V2InputFormat } from "@/types/v2-components";
import { AutoGenerationUtils } from "@/lib/utils/autoGeneration";
import { AutoGenerationConfig } from "@/types/screen";
import { previewNumberingCode } from "@/lib/api/numberingRule";

// 형식별 입력 마스크 및 검증 패턴
const FORMAT_PATTERNS: Record<V2InputFormat, { pattern: RegExp; placeholder: string; errorMessage: string }> = {
  none: { pattern: /.*/, placeholder: "", errorMessage: "" },
  email: { pattern: /^[^\s@]+@[^\s@]+\.[^\s@]+$/, placeholder: "example@email.com", errorMessage: "올바른 이메일 형식이 아닙니다" },
  tel: { pattern: /^\d{2,3}-\d{3,4}-\d{4}$/, placeholder: "010-1234-5678", errorMessage: "올바른 전화번호 형식이 아닙니다" },
  url: { pattern: /^https?:\/\/.+/, placeholder: "https://example.com", errorMessage: "올바른 URL 형식이 아닙니다 (https://로 시작)" },
  currency: { pattern: /^[\d,]+$/, placeholder: "1,000,000", errorMessage: "숫자만 입력 가능합니다" },
  biz_no: { pattern: /^\d{3}-\d{2}-\d{5}$/, placeholder: "123-45-67890", errorMessage: "올바른 사업자번호 형식이 아닙니다" },
};

// 형식 검증 함수 (외부에서도 사용 가능)
export function validateInputFormat(value: string, format: V2InputFormat): { isValid: boolean; errorMessage: string } {
  if (!value || value.trim() === "" || format === "none") {
    return { isValid: true, errorMessage: "" };
  }
  const formatConfig = FORMAT_PATTERNS[format];
  if (!formatConfig) return { isValid: true, errorMessage: "" };
  const isValid = formatConfig.pattern.test(value);
  return { isValid, errorMessage: isValid ? "" : formatConfig.errorMessage };
}

// 통화 형식 변환
function formatCurrency(value: string | number): string {
  const num = typeof value === "string" ? parseFloat(value.replace(/,/g, "")) : value;
  if (isNaN(num)) return "";
  return num.toLocaleString("ko-KR");
}

// 사업자번호 형식 변환
function formatBizNo(value: string): string {
  const digits = value.replace(/\D/g, "");
  if (digits.length <= 3) return digits;
  if (digits.length <= 5) return `${digits.slice(0, 3)}-${digits.slice(3)}`;
  return `${digits.slice(0, 3)}-${digits.slice(3, 5)}-${digits.slice(5, 10)}`;
}

// 전화번호 형식 변환
function formatTel(value: string): string {
  const digits = value.replace(/\D/g, "");
  if (digits.length <= 3) return digits;
  if (digits.length <= 7) return `${digits.slice(0, 3)}-${digits.slice(3)}`;
  if (digits.length <= 11) return `${digits.slice(0, 3)}-${digits.slice(3, 7)}-${digits.slice(7)}`;
  return `${digits.slice(0, 3)}-${digits.slice(3, 7)}-${digits.slice(7, 11)}`;
}

/**
 * 텍스트 입력 컴포넌트
 */
const TextInput = forwardRef<
  HTMLInputElement,
  {
    value?: string | number;
    onChange?: (value: string) => void;
    format?: V2InputFormat;
    mask?: string;
    placeholder?: string;
    readonly?: boolean;
    disabled?: boolean;
    className?: string;
    columnName?: string;
    inputStyle?: React.CSSProperties;
  }
>(({ value, onChange, format = "none", placeholder, readonly, disabled, className, columnName, inputStyle }, ref) => {
  // 검증 상태
  const [hasBlurred, setHasBlurred] = useState(false);
  const [validationError, setValidationError] = useState<string>("");

  // 형식에 따른 값 포맷팅
  const formatValue = useCallback(
    (val: string): string => {
      switch (format) {
        case "currency":
          return formatCurrency(val);
        case "biz_no":
          return formatBizNo(val);
        case "tel":
          return formatTel(val);
        default:
          return val;
      }
    },
    [format],
  );

  const handleChange = useCallback(
    (e: React.ChangeEvent<HTMLInputElement>) => {
      let newValue = e.target.value;

      // 형식에 따른 자동 포맷팅
      if (format === "currency") {
        // 숫자와 쉼표만 허용
        newValue = newValue.replace(/[^\d,]/g, "");
        newValue = formatCurrency(newValue);
      } else if (format === "biz_no") {
        newValue = formatBizNo(newValue);
      } else if (format === "tel") {
        newValue = formatTel(newValue);
      }

      // 입력 중 에러 표시 해제 (입력 중에는 관대하게)
      if (hasBlurred && validationError) {
        const { isValid } = validateInputFormat(newValue, format);
        if (isValid) {
          setValidationError("");
        }
      }

      onChange?.(newValue);
    },
    [format, onChange, hasBlurred, validationError],
  );

  // blur 시 형식 검증
  const handleBlur = useCallback(() => {
    setHasBlurred(true);
    const currentValue = value !== undefined && value !== null ? String(value) : "";
    if (currentValue && format !== "none") {
      const { isValid, errorMessage } = validateInputFormat(currentValue, format);
      setValidationError(isValid ? "" : errorMessage);
    } else {
      setValidationError("");
    }
  }, [value, format]);

  // 값 변경 시 검증 상태 업데이트
  useEffect(() => {
    if (hasBlurred) {
      const currentValue = value !== undefined && value !== null ? String(value) : "";
      if (currentValue && format !== "none") {
        const { isValid, errorMessage } = validateInputFormat(currentValue, format);
        setValidationError(isValid ? "" : errorMessage);
      } else {
        setValidationError("");
      }
    }
  }, [value, format, hasBlurred]);

  // 글로벌 폼 검증 이벤트 리스너 (저장 시 호출)
  useEffect(() => {
    if (format === "none" || !columnName) return;

    const handleValidateForm = (event: CustomEvent) => {
      const currentValue = value !== undefined && value !== null ? String(value) : "";
      if (currentValue) {
        const { isValid, errorMessage } = validateInputFormat(currentValue, format);
        if (!isValid) {
          setHasBlurred(true);
          setValidationError(errorMessage);
          // 검증 결과를 이벤트에 기록
          if (event.detail?.errors) {
            event.detail.errors.push({
              columnName,
              message: errorMessage,
            });
          }
        }
      }
    };

    window.addEventListener("validateFormInputs", handleValidateForm as EventListener);
    return () => {
      window.removeEventListener("validateFormInputs", handleValidateForm as EventListener);
    };
  }, [format, value, columnName]);

  const displayValue = useMemo(() => {
    if (value === undefined || value === null) return "";
    return formatValue(String(value));
  }, [value, formatValue]);

  const inputPlaceholder = placeholder || FORMAT_PATTERNS[format].placeholder;
  const hasError = hasBlurred && !!validationError;

  return (
    <div className="flex h-full w-full flex-col">
      <Input
        ref={ref}
        type="text"
        value={displayValue}
        onChange={handleChange}
        onBlur={handleBlur}
        placeholder={inputPlaceholder}
        readOnly={readonly}
        disabled={disabled}
        className={cn(
          "h-full w-full",
          hasError && "border-destructive focus-visible:ring-destructive",
          className,
        )}
        style={inputStyle}
      />
      {hasError && (
        <p className="text-destructive mt-1 text-[11px]">{validationError}</p>
      )}
    </div>
  );
});
TextInput.displayName = "TextInput";

/**
 * 숫자 입력 컴포넌트
 */
const NumberInput = forwardRef<
  HTMLInputElement,
  {
    value?: number;
    onChange?: (value: number | undefined) => void;
    min?: number;
    max?: number;
    step?: number;
    placeholder?: string;
    readonly?: boolean;
    disabled?: boolean;
    className?: string;
    inputStyle?: React.CSSProperties;
  }
>(({ value, onChange, min, max, step = 1, placeholder, readonly, disabled, className, inputStyle }, ref) => {
  const handleChange = useCallback(
    (e: React.ChangeEvent<HTMLInputElement>) => {
      const val = e.target.value;
      if (val === "") {
        onChange?.(undefined);
        return;
      }

      let num = parseFloat(val);

      // 범위 제한
      if (min !== undefined && num < min) num = min;
      if (max !== undefined && num > max) num = max;

      onChange?.(num);
    },
    [min, max, onChange],
  );

  return (
    <Input
      ref={ref}
      type="number"
      value={value ?? ""}
      onChange={handleChange}
      min={min}
      max={max}
      step={step}
      placeholder={placeholder || "숫자 입력"}
      readOnly={readonly}
      disabled={disabled}
      className={cn("h-full w-full", className)}
      style={inputStyle}
    />
  );
});
NumberInput.displayName = "NumberInput";

/**
 * 비밀번호 입력 컴포넌트
 */
const PasswordInput = forwardRef<
  HTMLInputElement,
  {
    value?: string;
    onChange?: (value: string) => void;
    placeholder?: string;
    readonly?: boolean;
    disabled?: boolean;
    className?: string;
    inputStyle?: React.CSSProperties;
  }
>(({ value, onChange, placeholder, readonly, disabled, className, inputStyle }, ref) => {
  const [showPassword, setShowPassword] = useState(false);

  return (
    <div className="relative">
      <Input
        ref={ref}
        type={showPassword ? "text" : "password"}
        value={value ?? ""}
        onChange={(e) => onChange?.(e.target.value)}
        placeholder={placeholder || "비밀번호 입력"}
        readOnly={readonly}
        disabled={disabled}
        className={cn("h-full w-full pr-10", className)}
        style={inputStyle}
      />
      <button
        type="button"
        onClick={() => setShowPassword(!showPassword)}
        className="text-muted-foreground hover:text-foreground absolute top-1/2 right-2 -translate-y-1/2 text-xs"
      >
        {showPassword ? "숨김" : "보기"}
      </button>
    </div>
  );
});
PasswordInput.displayName = "PasswordInput";

/**
 * 슬라이더 입력 컴포넌트
 */
const SliderInput = forwardRef<
  HTMLDivElement,
  {
    value?: number;
    onChange?: (value: number) => void;
    min?: number;
    max?: number;
    step?: number;
    disabled?: boolean;
    className?: string;
  }
>(({ value, onChange, min = 0, max = 100, step = 1, disabled, className }, ref) => {
  return (
    <div ref={ref} className={cn("flex items-center gap-4", className)}>
      <Slider
        value={[value ?? min]}
        onValueChange={(values) => onChange?.(values[0])}
        min={min}
        max={max}
        step={step}
        disabled={disabled}
        className="flex-1"
      />
      <span className="w-12 text-right text-sm font-medium">{value ?? min}</span>
    </div>
  );
});
SliderInput.displayName = "SliderInput";

/**
 * 색상 선택 컴포넌트
 */
const ColorInput = forwardRef<
  HTMLInputElement,
  {
    value?: string;
    onChange?: (value: string) => void;
    disabled?: boolean;
    className?: string;
  }
>(({ value, onChange, disabled, className }, ref) => {
  return (
    <div className={cn("flex items-center gap-2", className)}>
      <Input
        ref={ref}
        type="color"
        value={value || "#000000"}
        onChange={(e) => onChange?.(e.target.value)}
        disabled={disabled}
        className="h-full w-12 cursor-pointer p-1"
      />
      <Input
        type="text"
        value={value || "#000000"}
        onChange={(e) => onChange?.(e.target.value)}
        disabled={disabled}
        className="h-full flex-1 uppercase"
        maxLength={7}
      />
    </div>
  );
});
ColorInput.displayName = "ColorInput";

/**
 * 여러 줄 텍스트 입력 컴포넌트
 */
const TextareaInput = forwardRef<
  HTMLTextAreaElement,
  {
    value?: string;
    onChange?: (value: string) => void;
    placeholder?: string;
    rows?: number;
    readonly?: boolean;
    disabled?: boolean;
    className?: string;
    inputStyle?: React.CSSProperties;
  }
>(({ value = "", onChange, placeholder, rows = 3, readonly, disabled, className, inputStyle }, ref) => {
  return (
    <textarea
      ref={ref}
      value={value}
      onChange={(e) => onChange?.(e.target.value)}
      placeholder={placeholder}
      rows={rows}
      readOnly={readonly}
      disabled={disabled}
      className={cn(
        "border-input placeholder:text-muted-foreground focus-visible:ring-ring flex h-full w-full rounded-md border bg-transparent px-3 py-2 text-sm shadow-sm focus-visible:ring-1 focus-visible:outline-none disabled:cursor-not-allowed disabled:opacity-50",
        className,
      )}
      style={inputStyle}
    />
  );
});
TextareaInput.displayName = "TextareaInput";

/**
 * 메인 V2Input 컴포넌트
 */
export const V2Input = forwardRef<HTMLDivElement, V2InputProps>((props, ref) => {
  const { id, label, required, readonly, disabled, style, size, config: configProp, value, onChange } = props;

  // formData 추출 (채번규칙 날짜 컬럼 기준 생성 시 사용)
  const formData = (props as any).formData || {};
  const columnName = (props as any).columnName;
  // onFormDataChange 추출 (채번 규칙 ID를 formData에 저장하기 위함)
  const onFormDataChange = (props as any).onFormDataChange;

  // config가 없으면 기본값 사용
  const config = (configProp || { type: "text" }) as V2InputConfig & {
    inputType?: string;
    rows?: number;
    autoGeneration?: AutoGenerationConfig;
  };

  // 자동생성 설정 추출
  const autoGeneration: AutoGenerationConfig = (props as any).autoGeneration ||
    (config as any).autoGeneration || {
      type: "none",
      enabled: false,
    };

  // 자동생성 상태 관리
  const [autoGeneratedValue, setAutoGeneratedValue] = useState<string | null>(null);
  const isGeneratingRef = useRef(false);
  const hasGeneratedRef = useRef(false);
  const lastFormDataRef = useRef<string>(""); // 마지막 formData 추적 (채번 규칙용)

  // 채번 타입 자동생성 상태
  const [isGeneratingNumbering, setIsGeneratingNumbering] = useState(false);
  const hasGeneratedNumberingRef = useRef(false);
  
  // formData를 ref로 관리하여 closure 문제 해결 (채번 코드 생성 시 최신 값 사용)
  const formDataRef = useRef(formData);
  formDataRef.current = formData;

  // tableName 추출 (여러 소스에서 확인)
  // 1. props에서 직접 전달받은 값
  // 2. config에서 설정된 값
  // 3. 컴포넌트 overrides에서 설정된 값 (V2 레이아웃)
  // 4. screenInfo에서 화면 테이블명
  const tableName = 
    (props as any).tableName || 
    (config as any).tableName ||
    (props as any).component?.tableName ||
    (props as any).component?.overrides?.tableName ||
    (props as any).screenInfo?.tableName;

  // 수정 모드 여부 확인
  const originalData = (props as any).originalData || (props as any)._originalData;
  const isEditMode = originalData && Object.keys(originalData).length > 0;

  // 채번 규칙인 경우 formData 변경 감지 (자기 자신 필드 제외)
  const formDataForNumbering = useMemo(() => {
    if (autoGeneration.type !== "numbering_rule") return "";
    // 자기 자신의 값은 제외 (무한 루프 방지)
    const { [columnName]: _, ...rest } = formData;
    return JSON.stringify(rest);
  }, [autoGeneration.type, formData, columnName]);

  // 자동생성 로직
  useEffect(() => {
    const generateValue = async () => {
      // 자동생성 비활성화 또는 생성 중
      if (!autoGeneration.enabled || isGeneratingRef.current) {
        return;
      }

      // 수정 모드에서는 자동생성 안함
      if (isEditMode) {
        return;
      }

      // 채번 규칙인 경우: formData가 변경되었는지 확인
      const isNumberingRule = autoGeneration.type === "numbering_rule";
      const formDataChanged =
        isNumberingRule && formDataForNumbering !== lastFormDataRef.current && lastFormDataRef.current !== "";

      // 이미 생성되었고, formData 변경이 아닌 경우 스킵
      if (hasGeneratedRef.current && !formDataChanged) {
        return;
      }

      // 첫 생성 시: 값이 이미 있으면 스킵 (formData 변경 시에는 강제 재생성)
      if (!formDataChanged && value !== undefined && value !== null && value !== "") {
        return;
      }

      isGeneratingRef.current = true;

      try {
        // formData를 전달하여 날짜 컬럼 기준 생성 지원
        const generatedValue = await AutoGenerationUtils.generateValue(autoGeneration, columnName, formData);

        if (generatedValue !== null && generatedValue !== undefined) {
          setAutoGeneratedValue(generatedValue);
          onChange?.(generatedValue);
          hasGeneratedRef.current = true;

          // formData 기록
          if (isNumberingRule) {
            lastFormDataRef.current = formDataForNumbering;
          }
        }
      } catch (error) {
        console.error("자동생성 실패:", error);
      } finally {
        isGeneratingRef.current = false;
      }
    };

    generateValue();
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [autoGeneration.enabled, autoGeneration.type, isEditMode, formDataForNumbering]);

  // 채번 규칙 ID 캐싱
  const numberingRuleIdRef = useRef<string | null>(null);
  const lastCategoryValuesRef = useRef<string>("");
  // 사용자가 직접 입력 중인지 추적 (재생성 방지)
  const userEditedNumberingRef = useRef<boolean>(false);
  // 원래 수동 입력 부분이 있었는지 추적 (____가 있었으면 계속 편집 가능)
  const hadManualPartRef = useRef<boolean>(false);
  // 채번 템플릿 저장 (____가 포함된 원본 형태)
  const numberingTemplateRef = useRef<string>("");
  // 사용자가 수동 입력한 값 저장
  const [manualInputValue, setManualInputValue] = useState<string>("");

  // formData에서 카테고리 관련 값 추출 (채번 파트에서 카테고리 사용 시)
  // 채번 필드 자체의 값은 제외해야 함 (무한 루프 방지)
  // inputType을 여러 소스에서 확인
  const propsInputType = (props as any).inputType;
  const categoryValuesForNumbering = useMemo(() => {
    const inputType = propsInputType || config.inputType || config.type || "text";
    if (inputType !== "numbering") return "";
    // formData에서 category 타입 필드 값들을 추출 (채번 필드 자체는 제외)
    const categoryFields: Record<string, string> = {};
    for (const [key, val] of Object.entries(formData)) {
      // 현재 채번 필드(columnName)는 제외
      if (key === columnName) continue;
      if (typeof val === "string" && val) {
        categoryFields[key] = val;
      }
    }
    return JSON.stringify(categoryFields);
  }, [propsInputType, config.inputType, config.type, formData, columnName]);

  // 채번 타입 자동생성 로직 (테이블 관리에서 설정된 numberingRuleId 사용)
  useEffect(() => {
    const generateNumberingCode = async () => {
      // inputType을 여러 소스에서 확인 (props에서 직접 전달받거나 config에서)
      const inputType = (props as any).inputType || config.inputType || config.type || "text";

      // numbering 타입이 아니면 스킵
      if (inputType !== "numbering") {
        return;
      }

      // 수정 모드에서는 자동생성 안함
      if (isEditMode) {
        return;
      }

      // 생성 중이면 스킵
      if (isGeneratingNumbering) {
        return;
      }

      // 사용자가 직접 편집한 경우 재생성 안함 (단, 카테고리 변경 시에는 재생성)
      const categoryChanged = categoryValuesForNumbering !== lastCategoryValuesRef.current;
      if (userEditedNumberingRef.current && !categoryChanged) {
        return;
      }
      
      // 이미 생성되었고 카테고리 값이 변경되지 않았으면 스킵
      if (hasGeneratedNumberingRef.current && !categoryChanged) {
        return;
      }

      // 첫 생성 시: 값이 이미 있고 카테고리 변경이 아니면 스킵
      if (!categoryChanged && value !== undefined && value !== null && value !== "") {
        return;
      }

      // tableName과 columnName이 필요
      if (!tableName || !columnName) {
        console.warn("채번 타입: tableName 또는 columnName이 없습니다", { tableName, columnName });
        return;
      }

      setIsGeneratingNumbering(true);

      try {
        // 채번 규칙 ID 캐싱 (한 번만 조회)
        if (!numberingRuleIdRef.current) {
          const { getTableColumns } = await import("@/lib/api/tableManagement");
          const columnsResponse = await getTableColumns(tableName);

          if (!columnsResponse.success || !columnsResponse.data) {
            console.warn("테이블 컬럼 정보 조회 실패:", columnsResponse);
            return;
          }

          const columns = columnsResponse.data.columns || columnsResponse.data;
          const targetColumn = columns.find((col: { columnName: string }) => col.columnName === columnName);

          if (!targetColumn) {
            console.warn("컬럼 정보를 찾을 수 없습니다:", columnName);
            return;
          }

          // detailSettings에서 numberingRuleId 추출
          if (targetColumn.detailSettings) {
            try {
              // 문자열이면 파싱, 객체면 그대로 사용
              const parsed = typeof targetColumn.detailSettings === "string" 
                ? JSON.parse(targetColumn.detailSettings) 
                : targetColumn.detailSettings;
              numberingRuleIdRef.current = parsed.numberingRuleId || null;
              
              // 🆕 채번 규칙 ID를 formData에 저장 (저장 시 allocateCode 호출을 위해)
              if (parsed.numberingRuleId && onFormDataChange && columnName) {
                onFormDataChange(`${columnName}_numberingRuleId`, parsed.numberingRuleId);
              }
            } catch {
              // JSON 파싱 실패
            }
          }
        }

        const numberingRuleId = numberingRuleIdRef.current;

        if (!numberingRuleId) {
          console.warn("채번 규칙 ID가 설정되지 않았습니다. 테이블 관리에서 설정하세요.", { tableName, columnName });
          return;
        }

        // 채번 코드 생성 (formDataRef.current 사용하여 최신 formData 전달)
        const currentFormData = formDataRef.current;
        const previewResponse = await previewNumberingCode(numberingRuleId, currentFormData);

        if (previewResponse.success && previewResponse.data?.generatedCode) {
          const generatedCode = previewResponse.data.generatedCode;
          hasGeneratedNumberingRef.current = true;
          lastCategoryValuesRef.current = categoryValuesForNumbering;
          
          // 수동 입력 부분이 있는 경우
          if (generatedCode.includes("____")) {
            hadManualPartRef.current = true;
            const oldTemplate = numberingTemplateRef.current;
            numberingTemplateRef.current = generatedCode;
            
            // 카테고리 변경으로 템플릿이 바뀌었을 때 기존 사용자 입력값 유지
            if (oldTemplate && oldTemplate !== generatedCode) {
              // 템플릿이 변경되었지만 사용자 입력값은 유지
              const templateParts = generatedCode.split("____");
              const templatePrefix = templateParts[0] || "";
              const templateSuffix = templateParts.length > 1 ? templateParts.slice(1).join("") : "";
              
              // 기존 manualInputValue를 사용하여 새 값 조합 (상태는 유지)
              // 참고: setManualInputValue는 호출하지 않음 (기존 값 유지)
              const finalValue = templatePrefix + (userEditedNumberingRef.current ? "" : "") + templateSuffix;
              
              // 사용자가 입력한 적이 없으면 템플릿 그대로
              if (!userEditedNumberingRef.current) {
                setAutoGeneratedValue(generatedCode);
                onChange?.(generatedCode);
              }
              // 사용자가 입력한 적이 있으면 입력값 유지하며 템플릿만 변경
              // (manualInputValue 상태는 유지되므로 UI에서 자동 반영)
            } else {
              // 첫 생성
              setAutoGeneratedValue(generatedCode);
              onChange?.(generatedCode);
              userEditedNumberingRef.current = false;
            }
          } else {
            // 수동 입력 부분 없음
            setAutoGeneratedValue(generatedCode);
            onChange?.(generatedCode);
            userEditedNumberingRef.current = false;
          }
          
          // 채번 코드 생성 성공
        } else {
          console.warn("채번 코드 생성 실패:", previewResponse);
        }
      } catch (error) {
        console.error("채번 자동생성 오류:", error);
      } finally {
        setIsGeneratingNumbering(false);
      }
    };

    generateNumberingCode();
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [tableName, columnName, isEditMode, categoryValuesForNumbering]);

  // 🆕 beforeFormSave 이벤트 리스너 - 저장 직전에 현재 조합된 값을 formData에 주입
  useEffect(() => {
    const inputType = propsInputType || config.inputType || config.type || "text";
    if (inputType !== "numbering" || !columnName) return;

    const handleBeforeFormSave = (event: CustomEvent) => {
      const template = numberingTemplateRef.current;
      if (!template || !template.includes("____")) return;

      // 템플릿에서 prefix와 suffix 추출
      const templateParts = template.split("____");
      const templatePrefix = templateParts[0] || "";
      const templateSuffix = templateParts.length > 1 ? templateParts.slice(1).join("") : "";
      
      // 현재 조합된 값 생성
      const currentValue = templatePrefix + manualInputValue + templateSuffix;
      
      // formData에 직접 주입
      if (event.detail?.formData && columnName) {
        event.detail.formData[columnName] = currentValue;
      }
    };

    window.addEventListener("beforeFormSave", handleBeforeFormSave as EventListener);
    return () => {
      window.removeEventListener("beforeFormSave", handleBeforeFormSave as EventListener);
    };
  }, [columnName, manualInputValue, propsInputType, config.inputType, config.type]);

  // 실제 표시할 값 (자동생성 값 또는 props value)
  const displayValue = autoGeneratedValue ?? value;

  // 조건부 렌더링 체크
  // TODO: conditional 처리 로직 추가

  // 타입별 입력 컴포넌트 렌더링
  const renderInput = () => {
    const inputType = propsInputType || config.inputType || config.type || "text";
    switch (inputType) {
      case "text":
        return (
          <TextInput
            value={displayValue}
            onChange={(v) => {
              setAutoGeneratedValue(null); // 사용자 입력 시 자동생성 값 초기화
              onChange?.(v);
            }}
            format={config.format}
            mask={config.mask}
            placeholder={config.placeholder}
            readonly={readonly || (autoGeneration.enabled && hasGeneratedRef.current)}
            disabled={disabled}
            columnName={columnName}
            inputStyle={inputTextStyle}
          />
        );

      case "number":
        // DB에서 문자열("325")로 반환되는 경우도 숫자로 변환하여 표시
        const numValue = typeof displayValue === "number"
          ? displayValue
          : (displayValue !== undefined && displayValue !== null && displayValue !== "" && !isNaN(Number(displayValue)))
            ? Number(displayValue)
            : undefined;
        return (
          <NumberInput
            value={numValue}
            onChange={(v) => {
              setAutoGeneratedValue(null);
              onChange?.(v ?? 0);
            }}
            min={config.min}
            max={config.max}
            step={config.step}
            placeholder={config.placeholder}
            readonly={readonly}
            disabled={disabled}
            inputStyle={inputTextStyle}
          />
        );

      case "password":
        return (
          <PasswordInput
            value={typeof displayValue === "string" ? displayValue : ""}
            onChange={(v) => {
              setAutoGeneratedValue(null);
              onChange?.(v);
            }}
            placeholder={config.placeholder}
            readonly={readonly}
            disabled={disabled}
            inputStyle={inputTextStyle}
          />
        );

      case "slider":
        // DB에서 문자열로 반환되는 경우도 숫자로 변환
        const sliderValue = typeof displayValue === "number"
          ? displayValue
          : (displayValue !== undefined && displayValue !== null && displayValue !== "" && !isNaN(Number(displayValue)))
            ? Number(displayValue)
            : (config.min ?? 0);
        return (
          <SliderInput
            value={sliderValue}
            onChange={(v) => {
              setAutoGeneratedValue(null);
              onChange?.(v);
            }}
            min={config.min}
            max={config.max}
            step={config.step}
            disabled={disabled}
          />
        );

      case "color":
        return (
          <ColorInput
            value={typeof displayValue === "string" ? displayValue : "#000000"}
            onChange={(v) => {
              setAutoGeneratedValue(null);
              onChange?.(v);
            }}
            disabled={disabled}
          />
        );

      case "textarea":
        return (
          <TextareaInput
            value={displayValue as string}
            onChange={(v) => {
              setAutoGeneratedValue(null);
              onChange?.(v);
            }}
            placeholder={config.placeholder}
            rows={config.rows}
            readonly={readonly}
            disabled={disabled}
            inputStyle={inputTextStyle}
          />
        );

      case "numbering": {
        // 채번 타입: ____ 부분만 편집 가능하게 처리
        const template = numberingTemplateRef.current;
        const canEdit = hadManualPartRef.current && template;
        
        // 채번 필드 렌더링
        
        // 템플릿이 없으면 읽기 전용 (아직 생성 전이거나 수동 입력 부분 없음)
        if (!canEdit) {
          return (
            <TextInput
              value={displayValue || ""}
              onChange={() => {}}
              placeholder={isGeneratingNumbering ? "생성 중..." : "자동 생성됩니다"}
              readonly={true}
              disabled={disabled || isGeneratingNumbering}
              inputStyle={inputTextStyle}
            />
          );
        }
        
        // 템플릿에서 prefix와 suffix 추출
        const templateParts = template.split("____");
        const templatePrefix = templateParts[0] || "";
        const templateSuffix = templateParts.length > 1 ? templateParts.slice(1).join("") : "";
        
        return (
          <div className="flex h-full items-center rounded-md border">
            {/* 고정 접두어 */}
            {templatePrefix && (
              <span className="text-muted-foreground bg-muted flex h-full items-center px-2 text-sm">
                {templatePrefix}
              </span>
            )}
            {/* 편집 가능한 부분 */}
            <input
              type="text"
              value={manualInputValue}
              onChange={(e) => {
                const newUserInput = e.target.value;
                setManualInputValue(newUserInput);
                
                // 전체 값 조합
                const newValue = templatePrefix + newUserInput + templateSuffix;
                userEditedNumberingRef.current = true;
                setAutoGeneratedValue(newValue);
                
                // 모든 방법으로 formData 업데이트 시도
                onChange?.(newValue);
                if (onFormDataChange && columnName) {
                  onFormDataChange(columnName, newValue);
                }
                
                // 커스텀 이벤트로도 전달 (최후의 보루)
                if (typeof window !== "undefined" && columnName) {
                  window.dispatchEvent(new CustomEvent("numberingValueChanged", {
                    detail: { columnName, value: newValue }
                  }));
                }
              }}
              placeholder="입력"
              className="h-full min-w-[60px] flex-1 bg-transparent px-2 text-sm focus-visible:outline-none"
              disabled={disabled || isGeneratingNumbering}
              style={inputTextStyle}
            />
            {/* 고정 접미어 */}
            {templateSuffix && (
              <span className="text-muted-foreground bg-muted flex h-full items-center px-2 text-sm">
                {templateSuffix}
              </span>
            )}
          </div>
        );
      }

      default:
        return (
          <TextInput
            value={displayValue}
            onChange={(v) => {
              setAutoGeneratedValue(null);
              onChange?.(v);
            }}
            format={config.format}
            placeholder={config.placeholder}
            readonly={readonly}
            disabled={disabled}
            columnName={columnName}
            inputStyle={inputTextStyle}
          />
        );
    }
  };

  // 라벨이 표시될 때 입력 필드가 차지할 높이 계산
  // 🔧 label prop이 없어도 style.labelText에서 가져올 수 있도록 수정
  const actualLabel = label || style?.labelText;
  const showLabel = actualLabel && style?.labelDisplay === true;
  // size에서 우선 가져오고, 없으면 style에서 가져옴
  const componentWidth = size?.width || style?.width;
  const componentHeight = size?.height || style?.height;

  // 라벨 높이 계산 (기본 20px, 사용자 설정에 따라 조정)
  const labelFontSize = style?.labelFontSize ? parseInt(String(style.labelFontSize)) : 14;
  const labelMarginBottom = style?.labelMarginBottom ? parseInt(String(style.labelMarginBottom)) : 4;
  const estimatedLabelHeight = labelFontSize + labelMarginBottom + 2; // 라벨 높이 + 여백

  // 🔧 커스텀 스타일 감지 (StyleEditor에서 설정한 테두리/배경/텍스트 스타일)
  // RealtimePreview 래퍼가 외부 div에 스타일을 적용하지만,
  // 내부 input/textarea가 자체 Tailwind 테두리를 가지므로 이를 제거하여 외부 스타일이 보이도록 함
  const hasCustomBorder = !!(style?.borderWidth || style?.borderColor || style?.borderStyle || style?.border);
  const hasCustomBackground = !!style?.backgroundColor;
  const hasCustomRadius = !!style?.borderRadius;

  // 텍스트 스타일 오버라이드 (내부 input/textarea에 직접 전달)
  const customTextStyle: React.CSSProperties = {};
  if (style?.color) customTextStyle.color = style.color;
  if (style?.fontSize) customTextStyle.fontSize = style.fontSize;
  if (style?.fontWeight) customTextStyle.fontWeight = style.fontWeight;
  if (style?.textAlign) customTextStyle.textAlign = style.textAlign as React.CSSProperties["textAlign"];
  const hasCustomText = Object.keys(customTextStyle).length > 0;
  // 내부 input에 직접 적용할 텍스트 스타일 (fontSize, color, fontWeight, textAlign)
  const inputTextStyle: React.CSSProperties | undefined = hasCustomText ? customTextStyle : undefined;

  return (
    <div
      ref={ref}
      id={id}
      className="relative"
      style={{
        width: componentWidth,
        height: componentHeight,
      }}
    >
      {/* 🔧 라벨을 absolute로 컴포넌트 위에 배치 (높이에 포함되지 않음) */}
      {showLabel && (
        <Label
          htmlFor={id}
          style={{
            position: "absolute",
            top: `-${estimatedLabelHeight}px`,
            left: 0,
            fontSize: style?.labelFontSize || "14px",
            color: style?.labelColor || "#64748b",
            fontWeight: style?.labelFontWeight || "500",
          }}
          className="text-sm font-medium whitespace-nowrap"
        >
          {actualLabel}
          {required && <span className="ml-0.5 text-orange-500">*</span>}
        </Label>
      )}
      <div
        className={cn(
          "h-full w-full",
          // 커스텀 테두리 설정 시, 내부 input/textarea의 기본 테두리 제거 (외부 래퍼 스타일이 보이도록)
          hasCustomBorder && "[&_input]:border-0! [&_textarea]:border-0! [&_.border]:border-0!",
          // 커스텀 모서리 설정 시, 내부 요소의 기본 모서리 제거 (외부 래퍼가 처리)
          (hasCustomBorder || hasCustomRadius) && "[&_input]:rounded-none! [&_textarea]:rounded-none! [&_.rounded-md]:rounded-none!",
          // 커스텀 배경 설정 시, 내부 input을 투명하게 (외부 배경이 보이도록)
          hasCustomBackground && "[&_input]:bg-transparent! [&_textarea]:bg-transparent!",
        )}
        style={hasCustomText ? customTextStyle : undefined}
      >
        {renderInput()}
      </div>
    </div>
  );
});

V2Input.displayName = "V2Input";

export default V2Input;