"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";
import { getV2MappingFromWebType } from "@/lib/utils/webTypeMapping";

type DynamicWebTypeRendererProps = Omit<DynamicComponentProps, "web_type" | "props"> & {
  web_type?: string;
  webType?: string;
  props?: Record<string, any>;
};

const CANONICAL_INPUT_WEB_TYPES = new Set([
  "text",
  "email",
  "password",
  "tel",
  "url",
  "color",
  "number",
  "decimal",
  "slider",
  "date",
  "datetime",
  "time",
  "daterange",
  "select",
  "dropdown",
  "radio",
  "checkbox",
  "boolean",
  "textarea",
  "text_area",
  "code",
  "category",
  "entity",
  "file",
  "image",
  "img",
  "picture",
  "photo",
]);

/**
 * 동적 웹타입 렌더러 컴포넌트
 * 레지스트리에서 웹타입을 조회하여 동적으로 렌더링합니다.
 */
export const DynamicWebTypeRenderer: React.FC<DynamicWebTypeRendererProps> = ({
  web_type,
  webType: webTypeProp,
  props = {},
  config = {},
  onEvent,
}) => {
  const webType = webTypeProp || web_type || "";
  // 모든 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.default_config,
      ...config,
    };
  }, [webTypeDefinition?.default_config, config]);

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

  // 입력 webType 은 WebTypeRegistry 의 old widget 보다 먼저 canonical `input` 으로 라우팅.
  // entity 도 검색 모달이 아니라 code-name option source 로 처리한다.
  if (CANONICAL_INPUT_WEB_TYPES.has(webType) || props.component?.type === "file") {
    try {
      const { InputComponent } = require("@/lib/registry/components/input/InputComponent");
      const isImage = webType === "image" || webType === "img" || webType === "picture" || webType === "photo";
      const mappedWebType =
        webType === "picture" || webType === "photo" ? "image" : webType === "text_area" ? "textarea" : webType;
      const mapped = getV2MappingFromWebType(mappedWebType);
      const canonicalConfig =
        mapped.componentType === "input"
          ? mapped.config
          : { kind: "input", type: "text", format: "free" };
      const fileConfig = isImage
        ? {
            kind: "attach",
            type: "file",
            format: "image",
            accept: "image/*",
            multiple: false,
            maxFiles: 1,
            showPreview: true,
          }
        : props.component?.type === "file"
          ? {
              kind: "attach",
              type: "file",
              format: "file",
              accept: "*/*",
              multiple: true,
              maxFiles: 10,
            }
          : {};
      return (
        <InputComponent
          {...props}
          {...finalProps}
          config={{ ...canonicalConfig, ...fileConfig, ...mergedConfig, webType, web_type: webType }}
        />
      );
    } catch (error) {
      console.error("canonical input 로드 실패:", error);
    }
  }

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

      // FileWidget — 위 file/image 통합 분기에서 이미 처리되므로 여기서는 진입 불가.
      // 옛 file-upload/FileUploadComponent 직접 import 는 Phase D.4 에서 제거됨.

      // 다른 컴포넌트들은 기존 로직 유지
      // 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}" → 레지스트리 컴포넌트 사용`);

    // 파일 웹타입 — 위 통합 분기에서 이미 canonical input 으로 처리됨. fall-through.

    // 웹타입이 비활성화된 경우
    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}" → 자동 매핑 폴백 사용`);

    // 파일 웹타입 — 위 통합 분기에서 처리됨. fallback 도 canonical input 으로 일원화.

    // 텍스트 / 숫자 / 날짜 / 시간 입력 — Phase E (2026-05-12) 부터 canonical input 으로 라우팅.
    // 옛 text-input / number-input / date-input 폴더는 흡수 후 삭제되었다.
    const TEXT_LIKE = ["text", "email", "password", "tel", "url"];
    const NUMBER_LIKE = ["number", "decimal"];
    const DATE_LIKE = ["date", "datetime", "time", "daterange"];
    if (
      TEXT_LIKE.includes(webType) ||
      NUMBER_LIKE.includes(webType) ||
      DATE_LIKE.includes(webType)
    ) {
      const { InputComponent } = require("@/lib/registry/components/input/InputComponent");
      const inputCfg: Record<string, any> = NUMBER_LIKE.includes(webType)
        ? { type: "number", format: webType === "decimal" ? "decimal" : "int" }
        : DATE_LIKE.includes(webType)
          ? { type: webType === "daterange" ? "daterange" : (webType as "date" | "datetime" | "time") }
          : {
              type: "text",
              format:
                webType === "email" ? "email" :
                webType === "password" ? "password" :
                webType === "tel" ? "phone" :
                webType === "url" ? "url" :
                "free",
            };
      return <InputComponent {...props} {...finalProps} config={{ ...inputCfg, ...mergedConfig }} />;
    }

    // 카테고리 셀렉트 웹타입
    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");
    // 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";
