"use client";

import React, { useMemo } from "react";
import { WebTypeRegistry } from "./WebTypeRegistry";
import { DynamicComponentProps } from "./types";
// import { getWidgetComponentByWebType, getWidgetComponentByName } from "@/components/screen/widgets/types"; // 임시 비활성화
import { useWebTypes } from "@/hooks/admin/useWebTypes";
import { filterDOMProps } from "@/lib/utils/domPropsFilter";

/**
 * 동적 웹타입 렌더러 컴포넌트
 * 레지스트리에서 웹타입을 조회하여 동적으로 렌더링합니다.
 */
export const DynamicWebTypeRenderer: React.FC<DynamicComponentProps> = ({
  webType,
  props = {},
  config = {},
  onEvent,
}) => {
  // 모든 hooks를 먼저 호출 (조건부 return 이전에)
  const { webTypes } = useWebTypes({ active: "Y" });

  // 디버깅: 이미지 타입만 로깅
  // if (webType === "image" || webType === "img" || webType === "picture" || webType === "photo") {
  //   console.log(`🖼️ DynamicWebTypeRenderer 이미지 호출: webType="${webType}"`, {
  //     component: props.component,
  //     readonly: props.readonly,
  //     value: props.value,
  //     widgetType: props.component?.widgetType,
  //   });
  // }

  // if (webType === "button") {
  //   console.log("🔘 DynamicWebTypeRenderer 버튼 호출:", {
  //     webType,
  //     component: props.component,
  //     position: props.component?.position,
  //     size: props.component?.size,
  //     style: props.component?.style,
  //     config,
  //   });
  // }

  const webTypeDefinition = useMemo(() => {
    return WebTypeRegistry.getWebType(webType);
  }, [webType]);

  // 데이터베이스에서 웹타입 정보 조회
  const dbWebType = useMemo(() => {
    return webTypes.find((wt) => wt.web_type === webType);
  }, [webTypes, webType]);

  // 기본 설정과 전달받은 설정을 병합 (조건부로 사용되지만 항상 계산)
  const mergedConfig = useMemo(() => {
    if (!webTypeDefinition) return config;
    return {
      ...webTypeDefinition.defaultConfig,
      ...config,
    };
  }, [webTypeDefinition?.defaultConfig, config]);

  // 최종 props 구성 (조건부로 사용되지만 항상 계산)
  const finalProps = useMemo(() => {
    return {
      ...props,
      webTypeConfig: mergedConfig,
      webType: webType,
      onEvent: onEvent,
    };
  }, [props, mergedConfig, webType, onEvent]);

  // 0순위: 파일 컴포넌트 강제 처리 (최우선)
  if (webType === "file" || props.component?.type === "file") {
    try {
      const { FileUploadComponent } = require("@/lib/registry/components/file-upload/FileUploadComponent");
      // console.log(`🎯 최우선: 파일 컴포넌트 → FileUploadComponent 사용`);
      return <FileUploadComponent {...props} {...finalProps} />;
    } catch (error) {
      console.error("FileUploadComponent 로드 실패:", error);
    }
  }

  // 이미지 컴포넌트 강제 처리
  if (webType === "image" || webType === "img" || webType === "picture" || webType === "photo") {
    try {
      // console.log(`🎯 이미지 컴포넌트 감지! webType: ${webType}`, { props, finalProps });
      const { ImageWidget } = require("@/components/screen/widgets/types/ImageWidget");
      // console.log(`✅ ImageWidget 로드 성공`);
      return <ImageWidget {...props} {...finalProps} />;
    } catch (error) {
      console.error("❌ ImageWidget 로드 실패:", error);
    }
  }

  // 1순위: DB에서 지정된 컴포넌트 사용 (항상 우선)
  if (dbWebType?.component_name) {
    try {
      // console.log(`웹타입 "${webType}" → DB 지정 컴포넌트 "${dbWebType.component_name}" 사용`);
      // console.log("DB 웹타입 정보:", dbWebType);

      // FileWidget의 경우 FileUploadComponent 직접 사용
      if (dbWebType.component_name === "FileWidget" || webType === "file") {
        const { FileUploadComponent } = require("@/lib/registry/components/file-upload/FileUploadComponent");
        // console.log("✅ FileWidget → FileUploadComponent 사용");
        return <FileUploadComponent {...props} {...finalProps} />;
      }

      // 다른 컴포넌트들은 기존 로직 유지
      // const ComponentByName = getWidgetComponentByName(dbWebType.component_name);
      // console.log(`컴포넌트 "${dbWebType.component_name}" 성공적으로 로드됨:`, ComponentByName);
      // return <ComponentByName {...props} {...finalProps} />;
      // console.warn(`DB 지정 컴포넌트 "${dbWebType.component_name}" 기능 임시 비활성화 (FileWidget 제외)`);

      // 로딩 중 메시지 대신 레지스트리로 폴백
      // return <div>컴포넌트 로딩 중...</div>;
    } catch (error) {
      console.error(`DB 지정 컴포넌트 "${dbWebType.component_name}" 렌더링 실패:`, error);
    }
  }

  // 2순위: 레지스트리에 등록된 웹타입 사용
  if (webTypeDefinition) {
    // console.log(`웹타입 "${webType}" → 레지스트리 컴포넌트 사용`);

    // 파일 웹타입의 경우 FileUploadComponent 직접 사용
    if (webType === "file") {
      const { FileUploadComponent } = require("@/lib/registry/components/file-upload/FileUploadComponent");
      // console.log("✅ 파일 웹타입 → FileUploadComponent 사용");
      return <FileUploadComponent {...props} {...finalProps} />;
    }

    // 웹타입이 비활성화된 경우
    if (!webTypeDefinition.isActive) {
      // console.warn(`웹타입 "${webType}"이 비활성화되어 있습니다.`);
      return (
        <div className="rounded-md border border-dashed border-yellow-500/30 bg-amber-50 p-3 dark:bg-yellow-950/20">
          <div className="flex items-center gap-2 text-yellow-700 dark:text-yellow-400">
            <span className="text-xs font-medium">⚠️ 비활성화된 웹타입</span>
          </div>
          <p className="mt-1 text-xs text-amber-600 dark:text-amber-500">
            웹타입 "{webType}"이 비활성화되어 있습니다.
          </p>
        </div>
      );
    }

    const Component = webTypeDefinition.component;
    try {
      return <Component {...finalProps} />;
    } catch (error) {
      console.error(`웹타입 "${webType}" 레지스트리 컴포넌트 렌더링 실패:`, error);
    }
  }

  // 3순위: 웹타입명으로 자동 매핑 (폴백)
  try {
    console.warn(`웹타입 "${webType}" → 자동 매핑 폴백 사용`);

    // 파일 웹타입의 경우 FileUploadComponent 직접 사용 (최종 폴백)
    if (webType === "file") {
      const { FileUploadComponent } = require("@/lib/registry/components/file-upload/FileUploadComponent");
      // console.log("✅ 폴백: 파일 웹타입 → FileUploadComponent 사용");
      return <FileUploadComponent {...props} {...finalProps} />;
    }

    // 텍스트 입력 웹타입들
    if (["text", "email", "password", "tel"].includes(webType)) {
      const { TextInputComponent } = require("@/lib/registry/components/text-input/TextInputComponent");
      // console.log(`✅ 폴백: ${webType} 웹타입 → TextInputComponent 사용`);
      return <TextInputComponent {...props} {...finalProps} />;
    }

    // 숫자 입력 웹타입들
    if (["number", "decimal"].includes(webType)) {
      const { NumberInputComponent } = require("@/lib/registry/components/number-input/NumberInputComponent");
      // console.log(`✅ 폴백: ${webType} 웹타입 → NumberInputComponent 사용`);
      return <NumberInputComponent {...props} {...finalProps} />;
    }

    // 날짜 입력 웹타입들
    if (["date", "datetime", "time"].includes(webType)) {
      const { DateInputComponent } = require("@/lib/registry/components/date-input/DateInputComponent");
      // console.log(`✅ 폴백: ${webType} 웹타입 → DateInputComponent 사용`);
      return <DateInputComponent {...props} {...finalProps} />;
    }

    // 카테고리 셀렉트 웹타입
    if (webType === "category") {
      const { CategorySelectComponent } = require("@/lib/registry/components/category-select/CategorySelectComponent");
      console.log(`✅ 폴백: ${webType} 웹타입 → CategorySelectComponent 사용`);
      return <CategorySelectComponent {...props} {...finalProps} />;
    }

    // 기본 폴백: Input 컴포넌트 사용
    const { Input } = require("@/components/ui/input");
    const { filterDOMProps } = require("@/lib/utils/domPropsFilter");
    // console.log(`✅ 폴백: ${webType} 웹타입 → 기본 Input 사용`);
    const safeFallbackProps = filterDOMProps(props);
    return <Input placeholder={`${webType}`} disabled={props.readonly} className="w-full" {...safeFallbackProps} />;
  } catch (error) {
    console.error(`웹타입 "${webType}" 폴백 컴포넌트 렌더링 실패:`, error);
    return (
      <div className="border-destructive/30 bg-destructive/5 rounded-md border border-dashed p-3">
        <div className="text-destructive flex items-center gap-2">
          <span className="text-xs font-medium">⚠️ 알 수 없는 웹타입</span>
        </div>
        <p className="text-destructive/80 mt-1 text-xs">웹타입 "{webType}"을 렌더링할 수 없습니다.</p>
      </div>
    );
  }
};

DynamicWebTypeRenderer.displayName = "DynamicWebTypeRenderer";

/**
 * 웹타입 미리보기 렌더러
 * 관리 페이지에서 웹타입을 미리보기할 때 사용
 */
export const WebTypePreviewRenderer: React.FC<{
  webType: string;
  config?: Record<string, any>;
  size?: "sm" | "md" | "lg";
}> = ({ webType, config = {}, size = "md" }) => {
  const webTypeDefinition = WebTypeRegistry.getWebType(webType);

  if (!webTypeDefinition) {
    return (
      <div className="border-border bg-muted/30 rounded-md border border-dashed p-2 text-center">
        <span className="text-muted-foreground text-xs">웹타입 없음</span>
      </div>
    );
  }

  const sizeClasses = {
    sm: "text-xs p-1",
    md: "text-sm p-2",
    lg: "text-base p-3",
  };

  return (
    <div className={`rounded-md border ${sizeClasses[size]}`}>
      <DynamicWebTypeRenderer
        webType={webType}
        config={config}
        props={{
          placeholder: `${webTypeDefinition.name} 미리보기`,
          disabled: true,
        }}
      />
    </div>
  );
};

WebTypePreviewRenderer.displayName = "WebTypePreviewRenderer";
