ERP-node/frontend/lib/registry/components/date-input/DateInputComponent.tsx

"use client";

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

export interface DateInputComponentProps extends ComponentRendererProps {
  config?: DateInputConfig;
  value?: any; // 외부에서 전달받는 값
  autoGeneration?: AutoGenerationConfig;
  hidden?: boolean;
}

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

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

  // 🚨 컴포넌트 마운트 확인용 로그
  console.log("🚨 DateInputComponent 마운트됨!", {
    componentId: component.id,
    isInteractive,
    isDesignMode,
    autoGeneration,
    componentAutoGeneration: component.autoGeneration,
    externalValue,
    formDataValue: formData?.[component.columnName || ""],
    timestamp: new Date().toISOString(),
  });

  // 🧪 무조건 실행되는 테스트
  useEffect(() => {
    console.log("🧪 DateInputComponent 무조건 실행 테스트!");
    const testDate = "2025-01-19"; // 고정된 테스트 날짜
    setAutoGeneratedValue(testDate);
    console.log("🧪 autoGeneratedValue 설정 완료:", testDate);
  }, []); // 빈 의존성 배열로 한 번만 실행

  // 자동생성 설정 (props 우선, 컴포넌트 설정 폴백)
  const finalAutoGeneration = autoGeneration || component.autoGeneration;
  const finalHidden = hidden !== undefined ? hidden : component.hidden;

  // 🧪 테스트용 간단한 자동생성 로직
  useEffect(() => {
    console.log("🔍 DateInputComponent useEffect 실행:", {
      componentId: component.id,
      finalAutoGeneration,
      enabled: finalAutoGeneration?.enabled,
      type: finalAutoGeneration?.type,
      isInteractive,
      isDesignMode,
      hasOnFormDataChange: !!onFormDataChange,
      columnName: component.columnName,
      currentFormValue: formData?.[component.columnName || ""],
    });

    // 🧪 테스트: 자동생성이 활성화되어 있으면 무조건 현재 날짜 설정
    if (finalAutoGeneration?.enabled) {
      const today = new Date().toISOString().split("T")[0]; // YYYY-MM-DD
      console.log("🧪 테스트용 날짜 생성:", today);

      setAutoGeneratedValue(today);

      // 인터랙티브 모드에서 폼 데이터에도 설정
      if (isInteractive && onFormDataChange && component.columnName) {
        console.log("📤 테스트용 폼 데이터 업데이트:", component.columnName, today);
        onFormDataChange(component.columnName, today);
      }
    }

    // 원래 자동생성 로직 (주석 처리)
    /*
    if (finalAutoGeneration?.enabled && finalAutoGeneration.type !== "none") {
      const fieldName = component.columnName || component.id;
      const generatedValue = AutoGenerationUtils.generateValue(finalAutoGeneration, fieldName);
      
      console.log("🎯 DateInputComponent 자동생성 시도:", {
        componentId: component.id,
        fieldName,
        type: finalAutoGeneration.type,
        options: finalAutoGeneration.options,
        generatedValue,
        isInteractive,
        isDesignMode,
      });
      
      if (generatedValue) {
        console.log("✅ DateInputComponent 자동생성 성공:", generatedValue);
        setAutoGeneratedValue(generatedValue);
        
        // 인터랙티브 모드에서 폼 데이터 업데이트
        if (isInteractive && onFormDataChange && component.columnName) {
          const currentValue = formData?.[component.columnName];
          if (!currentValue) {
            console.log("📤 DateInputComponent -> onFormDataChange 호출:", component.columnName, generatedValue);
            onFormDataChange(component.columnName, generatedValue);
          } else {
            console.log("⚠️ DateInputComponent 기존 값이 있어서 자동생성 스킵:", currentValue);
          }
        } else {
          console.log("⚠️ DateInputComponent 자동생성 조건 불만족:", {
            isInteractive,
            hasOnFormDataChange: !!onFormDataChange,
            hasColumnName: !!component.columnName,
          });
        }
      } else {
        console.log("❌ DateInputComponent 자동생성 실패: generatedValue가 null");
      }
    } else {
      console.log("⚠️ DateInputComponent 자동생성 비활성화:", {
        enabled: finalAutoGeneration?.enabled,
        type: finalAutoGeneration?.type,
      });
    }
    */
  }, [
    finalAutoGeneration?.enabled,
    finalAutoGeneration?.type,
    finalAutoGeneration?.options,
    component.id,
    component.columnName,
    isInteractive,
  ]);

  // 날짜 값 계산 및 디버깅
  const fieldName = component.columnName || component.id;

  // 값 우선순위: externalValue > formData > autoGeneratedValue > component.value
  let rawValue: any;
  if (externalValue !== undefined) {
    rawValue = externalValue;
  } else if (isInteractive && formData && component.columnName && formData[component.columnName]) {
    rawValue = formData[component.columnName];
  } else if (autoGeneratedValue) {
    rawValue = autoGeneratedValue;
  } else {
    rawValue = component.value;
  }

  console.log("🔍 DateInputComponent 값 디버깅:", {
    componentId: component.id,
    fieldName,
    externalValue,
    formDataValue: formData?.[component.columnName || ""],
    componentValue: component.value,
    rawValue,
    isInteractive,
    hasFormData: !!formData,
  });

  // 날짜 형식 변환 함수 (HTML input[type="date"]는 YYYY-MM-DD 형식만 허용)
  const formatDateForInput = (dateValue: any): string => {
    if (!dateValue) return "";

    const dateStr = String(dateValue);

    // 이미 YYYY-MM-DD 형식인 경우
    if (/^\d{4}-\d{2}-\d{2}$/.test(dateStr)) {
      return dateStr;
    }

    // YYYY-MM-DD HH:mm:ss 형식에서 날짜 부분만 추출
    if (/^\d{4}-\d{2}-\d{2}\s/.test(dateStr)) {
      return dateStr.split(" ")[0];
    }

    // YYYY/MM/DD 형식
    if (/^\d{4}\/\d{2}\/\d{2}$/.test(dateStr)) {
      return dateStr.replace(/\//g, "-");
    }

    // MM/DD/YYYY 형식
    if (/^\d{2}\/\d{2}\/\d{4}$/.test(dateStr)) {
      const [month, day, year] = dateStr.split("/");
      return `${year}-${month}-${day}`;
    }

    // DD-MM-YYYY 형식
    if (/^\d{2}-\d{2}-\d{4}$/.test(dateStr)) {
      const [day, month, year] = dateStr.split("-");
      return `${year}-${month}-${day}`;
    }

    // ISO 8601 날짜 (2023-12-31T00:00:00.000Z 등)
    if (/^\d{4}-\d{2}-\d{2}T/.test(dateStr)) {
      return dateStr.split("T")[0];
    }

    // 다른 형식의 날짜 문자열이나 Date 객체 처리
    try {
      const date = new Date(dateValue);
      if (isNaN(date.getTime())) {
        console.warn("🚨 DateInputComponent - 유효하지 않은 날짜:", dateValue);
        return "";
      }

      // YYYY-MM-DD 형식으로 변환 (로컬 시간대 사용)
      const year = date.getFullYear();
      const month = String(date.getMonth() + 1).padStart(2, "0");
      const day = String(date.getDate()).padStart(2, "0");
      const formattedDate = `${year}-${month}-${day}`;

      console.log("📅 날짜 형식 변환:", {
        원본: dateValue,
        변환후: formattedDate,
      });

      return formattedDate;
    } catch (error) {
      console.error("🚨 DateInputComponent - 날짜 변환 오류:", error, "원본:", dateValue);
      return "";
    }
  };

  const formattedValue = formatDateForInput(rawValue);

  // 스타일 계산 (위치는 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;

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

  // webType에 따른 실제 input type 결정
  const webType = component.componentConfig?.webType || "date";
  const inputType = (() => {
    switch (webType) {
      case "datetime":
        return "datetime-local";
      case "time":
        return "time";
      case "month":
        return "month";
      case "year":
        return "number";
      case "date":
      default:
        return "date";
    }
  })();

  // daterange 시작일/종료일 분리 (최상위에서 계산)
  const [dateRangeStart, dateRangeEnd] = React.useMemo(() => {
    if (webType === "daterange" && typeof rawValue === "string" && rawValue.includes("~")) {
      return rawValue.split("~").map((d) => d.trim());
    }
    return ["", ""];
  }, [webType, rawValue]);

  // daterange 타입 전용 UI
  if (webType === "daterange") {
    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="flex h-10 w-full items-center gap-2">
          {/* 시작일 */}
          <input
            type="date"
            value={dateRangeStart}
            disabled={componentConfig.disabled || false}
            readOnly={componentConfig.readonly || false}
            onChange={(e) => {
              const newStartDate = e.target.value;
              const newValue = `${newStartDate} ~ ${dateRangeEnd}`;

              if (isInteractive && onFormDataChange && component.columnName) {
                onFormDataChange(component.columnName, newValue);
              }
            }}
            className={`h-full flex-1 rounded-md border px-3 py-2 text-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"} focus:border-orange-500 focus:ring-2 focus:ring-orange-100 disabled:cursor-not-allowed`}
          />

          {/* 구분자 */}
          <span className="text-base font-medium text-gray-500">~</span>

          {/* 종료일 */}
          <input
            type="date"
            value={dateRangeEnd}
            disabled={componentConfig.disabled || false}
            readOnly={componentConfig.readonly || false}
            onChange={(e) => {
              const newEndDate = e.target.value;
              const newValue = `${dateRangeStart} ~ ${newEndDate}`;

              if (isInteractive && onFormDataChange && component.columnName) {
                onFormDataChange(component.columnName, newValue);
              }
            }}
            className={`h-full flex-1 rounded-md border px-3 py-2 text-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"} focus:border-orange-500 focus:ring-2 focus:ring-orange-100 disabled:cursor-not-allowed`}
          />
        </div>
      </div>
    );
  }

  // year 타입 전용 UI (number input with YYYY format)
  if (webType === "year") {
    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={rawValue}
          placeholder="YYYY"
          min="1900"
          max="2100"
          disabled={componentConfig.disabled || false}
          readOnly={componentConfig.readonly || false}
          onChange={(e) => {
            const year = e.target.value;
            if (year.length <= 4) {
              if (isInteractive && onFormDataChange && component.columnName) {
                onFormDataChange(component.columnName, year);
              }
            }
          }}
          className={`h-10 w-full rounded-md border px-3 py-2 text-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`}
        />
      </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={inputType}
        value={formattedValue}
        placeholder={
          finalAutoGeneration?.enabled
            ? `자동생성: ${AutoGenerationUtils.getTypeDescription(finalAutoGeneration.type)}`
            : componentConfig.placeholder || ""
        }
        disabled={componentConfig.disabled || false}
        required={componentConfig.required || false}
        readOnly={componentConfig.readonly || finalAutoGeneration?.enabled || false}
        className={`h-10 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("🎯 DateInputComponent onChange 호출:", {
            componentId: component.id,
            columnName: component.columnName,
            newValue,
            isInteractive,
            hasOnFormDataChange: !!onFormDataChange,
            hasOnChange: !!props.onChange,
          });

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

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