"use client";

import React from "react";
import { ComponentRendererProps } from "@/types/component";
import { DateInputConfig } from "./types";
import { filterDOMProps } from "@/lib/utils/domPropsFilter";

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

/**
 * 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, // 외부에서 전달받은 값
  ...props
}) => {
  // 컴포넌트 설정
  const componentConfig = {
    ...config,
    ...component.config,
  } as DateInputConfig;

  // 날짜 값 계산 및 디버깅
  const fieldName = component.columnName || component.id;
  const rawValue =
    externalValue !== undefined
      ? externalValue
      : isInteractive && formData && component.columnName
        ? formData[component.columnName]
        : 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);

  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 || "#374151",
            fontWeight: "500",
          }}
        >
          {component.label}
          {component.required && (
            <span
              style={{
                color: "#ef4444",
              }}
            >
              *
            </span>
          )}
        </label>
      )}

      <input
        type="date"
        value={formattedValue}
        placeholder={componentConfig.placeholder || ""}
        disabled={componentConfig.disabled || false}
        required={componentConfig.required || false}
        readOnly={componentConfig.readonly || false}
        style={{
          width: "100%",
          height: "100%",
          border: "1px solid #d1d5db",
          borderRadius: "4px",
          padding: "8px 12px",
          fontSize: "14px",
          outline: "none",
          // isInteractive 모드에서는 사용자 스타일 우선 적용
          ...(isInteractive && component.style ? component.style : {}),
        }}
        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} />;
};