"use client";

import React from "react";
import { ComponentData } from "@/types/screen";
import { DynamicLayoutRenderer } from "./DynamicLayoutRenderer";
import { ComponentRegistry } from "./ComponentRegistry";
import { filterDOMProps } from "@/lib/utils/domPropsFilter";

// 컴포넌트 렌더러 인터페이스
export interface ComponentRenderer {
  (props: {
    component: ComponentData;
    isSelected?: boolean;
    isInteractive?: boolean;
    formData?: Record<string, any>;
    originalData?: Record<string, any>; // 부분 업데이트용 원본 데이터
    onFormDataChange?: (fieldName: string, value: any) => void;
    onClick?: (e?: React.MouseEvent) => void;
    onDragStart?: (e: React.DragEvent) => void;
    onDragEnd?: () => void;
    children?: React.ReactNode;
    onZoneComponentDrop?: (e: React.DragEvent, zoneId: string, layoutId: string) => void;
    onZoneClick?: (zoneId: string) => void;
    // 버튼 액션을 위한 추가 props
    screenId?: number;
    tableName?: string;
    onRefresh?: () => void;
    onClose?: () => void;
    // 테이블 선택된 행 정보 (다중 선택 액션용)
    selectedRows?: any[];
    selectedRowsData?: any[];
    onSelectedRowsChange?: (selectedRows: any[], selectedRowsData: any[], sortBy?: string, sortOrder?: "asc" | "desc", columnOrder?: string[], tableDisplayData?: any[]) => void;
    // 테이블 정렬 정보 (엑셀 다운로드용)
    sortBy?: string;
    sortOrder?: "asc" | "desc";
    tableDisplayData?: any[]; // 🆕 화면 표시 데이터
    // 플로우 선택된 데이터 정보 (플로우 위젯 선택 액션용)
    flowSelectedData?: any[];
    flowSelectedStepId?: number | null;
    onFlowSelectedDataChange?: (selectedData: any[], stepId: number | null) => void;
    // 테이블 새로고침 키
    refreshKey?: number;
    // 편집 모드
    mode?: "view" | "edit";
    // 설정 변경 핸들러 (상세설정과 연동)
    onConfigChange?: (config: any) => void;
    [key: string]: any;
  }): React.ReactElement;
}

// 레거시 렌더러 레지스트리 (기존 컴포넌트들용)
class LegacyComponentRegistry {
  private renderers: Map<string, ComponentRenderer> = new Map();

  // 컴포넌트 렌더러 등록
  register(componentType: string, renderer: ComponentRenderer) {
    this.renderers.set(componentType, renderer);
  }

  // 컴포넌트 렌더러 조회
  get(componentType: string): ComponentRenderer | undefined {
    return this.renderers.get(componentType);
  }

  // 등록된 모든 컴포넌트 타입 조회
  getRegisteredTypes(): string[] {
    return Array.from(this.renderers.keys());
  }

  // 컴포넌트 타입이 등록되어 있는지 확인
  has(componentType: string): boolean {
    const result = this.renderers.has(componentType);
    return result;
  }
}

// 전역 레거시 레지스트리 인스턴스
export const legacyComponentRegistry = new LegacyComponentRegistry();

// 하위 호환성을 위한 기존 이름 유지
export const componentRegistry = legacyComponentRegistry;

// 동적 컴포넌트 렌더러 컴포넌트
export interface DynamicComponentRendererProps {
  component: ComponentData;
  isSelected?: boolean;
  isPreview?: boolean; // 반응형 모드 플래그
  isDesignMode?: boolean; // 디자인 모드 여부 (false일 때 데이터 로드)
  onClick?: (e?: React.MouseEvent) => void;
  onDragStart?: (e: React.DragEvent) => void;
  onDragEnd?: () => void;
  children?: React.ReactNode;
  // 폼 데이터 관련
  formData?: Record<string, any>;
  originalData?: Record<string, any>; // 부분 업데이트용 원본 데이터
  onFormDataChange?: (fieldName: string, value: any) => void;
  // 버튼 액션을 위한 추가 props
  screenId?: number;
  tableName?: string;
  menuId?: number; // 🆕 메뉴 ID (카테고리 관리 등에 필요)
  menuObjid?: number; // 🆕 메뉴 OBJID (메뉴 스코프 - 카테고리/채번)
  selectedScreen?: any; // 🆕 화면 정보 전체 (menuId 등 추출용)
  userId?: string; // 🆕 현재 사용자 ID
  userName?: string; // 🆕 현재 사용자 이름
  companyCode?: string; // 🆕 현재 사용자의 회사 코드
  onRefresh?: () => void;
  onClose?: () => void;
  onSave?: () => Promise<void>; // 🆕 EditModal의 handleSave 콜백
  // 테이블 선택된 행 정보 (다중 선택 액션용)
  selectedRows?: any[];
  // 🆕 그룹 데이터 (EditModal → ModalRepeaterTable)
  groupedData?: Record<string, any>[];
  // 🆕 비활성화할 필드 목록 (EditModal → 각 컴포넌트)
  disabledFields?: string[];
  selectedRowsData?: any[];
  onSelectedRowsChange?: (selectedRows: any[], selectedRowsData: any[], sortBy?: string, sortOrder?: "asc" | "desc", columnOrder?: string[], tableDisplayData?: any[]) => void;
  // 테이블 정렬 정보 (엑셀 다운로드용)
  sortBy?: string;
  sortOrder?: "asc" | "desc";
  columnOrder?: string[];
  tableDisplayData?: any[]; // 🆕 화면 표시 데이터
  // 플로우 선택된 데이터 정보 (플로우 위젯 선택 액션용)
  flowSelectedData?: any[];
  flowSelectedStepId?: number | null;
  onFlowSelectedDataChange?: (selectedData: any[], stepId: number | null) => void;
  // 테이블 새로고침 키
  refreshKey?: number;
  // 플로우 새로고침 키
  flowRefreshKey?: number;
  onFlowRefresh?: () => void;
  // 편집 모드
  mode?: "view" | "edit";
  // 모달 내에서 렌더링 여부
  isInModal?: boolean;
  // 탭 관련 정보 (탭 내부의 컴포넌트에서 사용)
  parentTabId?: string;           // 부모 탭 ID
  parentTabsComponentId?: string; // 부모 탭 컴포넌트 ID
  [key: string]: any;
}

export const DynamicComponentRenderer: React.FC<DynamicComponentRendererProps> = ({
  component,
  isSelected = false,
  isPreview = false,
  onClick,
  onDragStart,
  onDragEnd,
  children,
  ...props
}) => {
  // 컴포넌트 타입 추출 - 새 시스템에서는 componentType 속성 사용, 레거시는 type 사용
  const componentType = (component as any).componentType || component.type;

  // 🎯 카테고리 타입 우선 처리 (inputType 또는 webType 확인)
  const inputType = (component as any).componentConfig?.inputType || (component as any).inputType;
  const webType = (component as any).componentConfig?.webType;
  const tableName = (component as any).tableName;
  const columnName = (component as any).columnName;
  
  // 카테고리 셀렉트: webType이 "category"이고 tableName과 columnName이 있는 경우만
  // ⚠️ 단, componentType이 "select-basic"인 경우는 ComponentRegistry로 처리 (다중선택 등 고급 기능 지원)
  if ((inputType === "category" || webType === "category") && tableName && columnName && componentType === "select-basic") {
    // select-basic은 ComponentRegistry에서 처리하도록 아래로 통과
  } else if ((inputType === "category" || webType === "category") && tableName && columnName) {
    try {
      const { CategorySelectComponent } = require("@/lib/registry/components/category-select/CategorySelectComponent");
      const fieldName = columnName || component.id;
      const currentValue = props.formData?.[fieldName] || "";
      
      const handleChange = (value: any) => {
        if (props.onFormDataChange) {
          props.onFormDataChange(fieldName, value);
        }
      };

      // 🆕 disabledFields 체크 + readonly 체크
      const isFieldDisabled = props.disabledFields?.includes(columnName) || (component as any).disabled;
      const isFieldReadonly = (component as any).readonly || (component as any).componentConfig?.readonly;

      return (
        <CategorySelectComponent
          tableName={tableName}
          columnName={columnName}
          value={currentValue}
          onChange={handleChange}
          placeholder={component.componentConfig?.placeholder || "선택하세요"}
          required={(component as any).required}
          disabled={isFieldDisabled}
          readonly={isFieldReadonly}
          className="w-full"
        />
      );
    } catch (error) {
      console.error("❌ CategorySelectComponent 로드 실패:", error);
    }
  }

  // 레이아웃 컴포넌트 처리
  if (componentType === "layout") {
    // DOM 안전한 props만 전달
    const safeLayoutProps = filterDOMProps(props);

    return (
      <DynamicLayoutRenderer
        layout={component as any}
        allComponents={props.allComponents || []}
        isSelected={isSelected}
        onClick={onClick}
        onDragStart={onDragStart}
        onDragEnd={onDragEnd}
        onUpdateLayout={props.onUpdateLayout}
        // onComponentDrop 제거 - 일반 캔버스 드롭만 사용
        onZoneClick={props.onZoneClick}
        isInteractive={props.isInteractive}
        formData={props.formData}
        onFormDataChange={props.onFormDataChange}
        screenId={props.screenId}
        tableName={props.tableName}
        onRefresh={props.onRefresh}
        onClose={props.onClose}
        mode={props.mode}
        isInModal={props.isInModal}
        originalData={props.originalData}
        {...safeLayoutProps}
      />
    );
  }

  // 1. 새 컴포넌트 시스템에서 먼저 조회
  const newComponent = ComponentRegistry.getComponent(componentType);

  if (newComponent) {
    // 새 컴포넌트 시스템으로 렌더링
    try {
      const NewComponentRenderer = newComponent.component;
      if (NewComponentRenderer) {
        // React 전용 props들을 명시적으로 분리하고 DOM 안전한 props만 전달
        const {
          isInteractive,
          formData,
          onFormDataChange,
          tableName,
          menuId, // 🆕 메뉴 ID
          menuObjid, // 🆕 메뉴 OBJID (메뉴 스코프)
          selectedScreen, // 🆕 화면 정보
          onRefresh,
          onClose,
          onSave, // 🆕 EditModal의 handleSave 콜백
          screenId,
          userId, // 🆕 사용자 ID
          userName, // 🆕 사용자 이름
          companyCode, // 🆕 회사 코드
          mode,
          isInModal,
          originalData,
          allComponents,
          onUpdateLayout,
          onZoneClick,
          selectedRows,
          selectedRowsData,
          onSelectedRowsChange,
          sortBy, // 🆕 정렬 컬럼
          sortOrder, // 🆕 정렬 방향
          tableDisplayData, // 🆕 화면 표시 데이터
          flowSelectedData,
          flowSelectedStepId,
          onFlowSelectedDataChange,
          refreshKey,
          flowRefreshKey, // Added this
          onFlowRefresh, // Added this
          onConfigChange,
          isPreview,
          autoGeneration,
          disabledFields, // 🆕 비활성화 필드 목록
          ...restProps
        } = props;

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

        // 컴포넌트의 columnName에 해당하는 formData 값 추출
        const fieldName = (component as any).columnName || component.id;
        
        // 다중 레코드를 다루는 컴포넌트는 배열 데이터로 초기화
        let currentValue;
        if (componentType === "modal-repeater-table" || 
            componentType === "repeat-screen-modal" ||
            componentType === "selected-items-detail-input") {
          // EditModal/ScreenModal에서 전달된 groupedData가 있으면 우선 사용
          currentValue = props.groupedData || formData?.[fieldName] || [];
        } else {
          currentValue = formData?.[fieldName] || "";
        }
        
        // onChange 핸들러 - 컴포넌트 타입에 따라 다르게 처리
        const handleChange = (value: any) => {
          // autocomplete-search-input, entity-search-input은 자체적으로 onFormDataChange를 호출하므로 중복 저장 방지
          if (componentType === "autocomplete-search-input" || componentType === "entity-search-input") {
            return;
          }

          // React 이벤트 객체인 경우 값 추출
          let actualValue = value;
          if (value && typeof value === "object" && value.nativeEvent && value.target) {
            // SyntheticEvent인 경우 target.value 추출
            actualValue = value.target.value;
          }

          if (onFormDataChange) {
            // modal-repeater-table은 배열 데이터를 다룸
            if (componentType === "modal-repeater-table") {
              onFormDataChange(fieldName, actualValue);
            }
            // RepeaterInput 같은 복합 컴포넌트는 전체 데이터를 전달
            else if (componentType === "repeater-field-group" || componentType === "repeater") {
              onFormDataChange(fieldName, actualValue);
            } else {
              onFormDataChange(fieldName, actualValue);
            }
          }
        };

        // 렌더러 props 구성
        // 숨김 값 추출
        const hiddenValue = component.hidden || component.componentConfig?.hidden;

        // 숨김 처리: 인터랙티브 모드(실제 뷰)에서만 숨김, 디자인 모드에서는 표시
        if (hiddenValue && isInteractive) {
          return null;
        }

        // size.width와 size.height를 style.width와 style.height로 변환
        const finalStyle: React.CSSProperties = {
          ...component.style,
          width: component.size?.width ? `${component.size.width}px` : component.style?.width,
          height: component.size?.height ? `${component.size.height}px` : component.style?.height,
        };

        // 🆕 엔티티 검색 컴포넌트는 componentConfig.tableName을 사용해야 함 (화면 테이블이 아닌 검색 대상 테이블)
        const useConfigTableName = componentType === "entity-search-input" || 
                                   componentType === "autocomplete-search-input" ||
                                   componentType === "modal-repeater-table";
        
        const rendererProps = {
          component,
          isSelected,
          onClick,
          onDragStart,
          onDragEnd,
          size: component.size || newComponent.defaultSize,
          position: component.position,
          style: finalStyle, // size를 포함한 최종 style
          config: component.componentConfig,
          componentConfig: component.componentConfig,
          // componentConfig의 모든 속성을 props로 spread (tableName, displayField 등)
          ...(component.componentConfig || {}),
          value: currentValue, // formData에서 추출한 현재 값 전달
          // 새로운 기능들 전달
          autoGeneration: component.autoGeneration || component.componentConfig?.autoGeneration,
          hidden: hiddenValue,
          // React 전용 props들은 직접 전달 (DOM에 전달되지 않음)
          isInteractive,
          formData,
          onFormDataChange,
          onChange: handleChange, // 개선된 onChange 핸들러 전달
          // 🆕 엔티티 검색 컴포넌트는 componentConfig.tableName 유지, 그 외는 화면 테이블명 사용
          tableName: useConfigTableName ? (component.componentConfig?.tableName || tableName) : tableName,
          menuId, // 🆕 메뉴 ID
          menuObjid, // 🆕 메뉴 OBJID (메뉴 스코프)
          selectedScreen, // 🆕 화면 정보
          onRefresh,
          onClose,
          onSave, // 🆕 EditModal의 handleSave 콜백
          screenId,
          userId, // 🆕 사용자 ID
          userName, // 🆕 사용자 이름
          companyCode, // 🆕 회사 코드
          // 🆕 화면 모드 (edit/view)와 컴포넌트 UI 모드 구분
          screenMode: mode,
          // componentConfig.mode가 있으면 유지 (entity-search-input의 UI 모드)
          mode: component.componentConfig?.mode || mode,
          isInModal,
          readonly: component.readonly,
          // 🆕 disabledFields 체크 또는 기존 readonly
          disabled: disabledFields?.includes(fieldName) || component.readonly,
          originalData,
          allComponents,
          onUpdateLayout,
          onZoneClick,
          // 테이블 선택된 행 정보 전달
          selectedRows,
          selectedRowsData,
          onSelectedRowsChange,
          // 테이블 정렬 정보 전달
          sortBy,
          sortOrder,
          tableDisplayData, // 🆕 화면 표시 데이터
          // 플로우 선택된 데이터 정보 전달
          flowSelectedData,
          flowSelectedStepId,
          onFlowSelectedDataChange,
          // 설정 변경 핸들러 전달
          onConfigChange,
          refreshKey,
          // 플로우 새로고침 키
          flowRefreshKey,
          onFlowRefresh,
          // 반응형 모드 플래그 전달
          isPreview,
          // 디자인 모드 플래그 전달 - isPreview와 명확히 구분
          isDesignMode: props.isDesignMode !== undefined ? props.isDesignMode : false,
          // 🆕 그룹 데이터 전달 (EditModal → ConditionalContainer → ModalRepeaterTable)
          // Note: 이 props들은 DOM 요소에 전달되면 안 됨
          // 각 컴포넌트에서 명시적으로 destructure하여 사용해야 함
          groupedData: props.groupedData, // ✅ 언더스코어 제거하여 직접 전달
          _groupedData: props.groupedData, // 하위 호환성 유지
          // 🆕 UniversalFormModal용 initialData 전달
          // 우선순위: props.initialData > originalData > formData
          // 조건부 컨테이너에서 전달된 initialData가 있으면 그것을 사용
          _initialData: props.initialData || ((originalData && Object.keys(originalData).length > 0) ? originalData : formData),
          _originalData: originalData,
          // 🆕 initialData도 직접 전달 (조건부 컨테이너 → 내부 컴포넌트)
          initialData: props.initialData,
          // 🆕 탭 관련 정보 전달 (탭 내부의 테이블 컴포넌트에서 사용)
          parentTabId: props.parentTabId,
          parentTabsComponentId: props.parentTabsComponentId,
        };

        // 렌더러가 클래스인지 함수인지 확인
        if (
          typeof NewComponentRenderer === "function" &&
          NewComponentRenderer.prototype &&
          NewComponentRenderer.prototype.render
        ) {
          // 클래스 기반 렌더러 (AutoRegisteringComponentRenderer 상속)
          const rendererInstance = new NewComponentRenderer(rendererProps);
          return rendererInstance.render();
        } else {
          // 함수형 컴포넌트
          // refreshKey를 React key로 전달하여 컴포넌트 리마운트 강제
          return <NewComponentRenderer key={refreshKey} {...rendererProps} />;
        }
      }
    } catch (error) {
      console.error(`❌ 새 컴포넌트 렌더링 실패 (${componentType}):`, error);
    }
  }

  // 2. 레거시 시스템에서 조회
  const renderer = legacyComponentRegistry.get(componentType);

  if (!renderer) {
    console.error(`⚠️ 등록되지 않은 컴포넌트 타입: ${componentType}`, {
      component: component,
      componentId: component.id,
      componentLabel: component.label,
      componentType: componentType,
      originalType: component.type,
      originalComponentType: (component as any).componentType,
      componentConfig: component.componentConfig,
      webTypeConfig: (component as any).webTypeConfig,
      autoGeneration: (component as any).autoGeneration,
      availableNewComponents: ComponentRegistry.getAllComponents().map((c) => c.id),
      availableLegacyComponents: legacyComponentRegistry.getRegisteredTypes(),
    });

    // 폴백 렌더링 - 기본 플레이스홀더
    return (
      <div className="flex h-full w-full items-center justify-center rounded border-2 border-dashed border-border bg-muted p-4">
        <div className="text-center">
          <div className="mb-2 text-sm font-medium text-muted-foreground">{component.label || component.id}</div>
          <div className="text-xs text-muted-foreground/70">미구현 컴포넌트: {componentType}</div>
        </div>
      </div>
    );
  }

  // 동적 렌더링 실행
  try {
    // 레거시 시스템에서도 DOM 안전한 props만 전달
    const safeLegacyProps = filterDOMProps(props);

    return renderer({
      component,
      isSelected,
      onClick,
      onDragStart,
      onDragEnd,
      children,
      // React 전용 props들은 명시적으로 전달 (레거시 컴포넌트가 필요한 경우)
      isInteractive: props.isInteractive,
      formData: props.formData,
      onFormDataChange: props.onFormDataChange,
      screenId: props.screenId,
      tableName: props.tableName,
      userId: props.userId, // 🆕 사용자 ID
      userName: props.userName, // 🆕 사용자 이름
      companyCode: props.companyCode, // 🆕 회사 코드
      onRefresh: props.onRefresh,
      onClose: props.onClose,
      mode: props.mode,
      isInModal: props.isInModal,
      originalData: props.originalData,
      onUpdateLayout: props.onUpdateLayout,
      onZoneClick: props.onZoneClick,
      onZoneComponentDrop: props.onZoneComponentDrop,
      allComponents: props.allComponents,
      // 테이블 선택된 행 정보 전달
      selectedRows: props.selectedRows,
      selectedRowsData: props.selectedRowsData,
      onSelectedRowsChange: props.onSelectedRowsChange,
      // 플로우 선택된 데이터 정보 전달
      flowSelectedData: props.flowSelectedData,
      flowSelectedStepId: props.flowSelectedStepId,
      onFlowSelectedDataChange: props.onFlowSelectedDataChange,
      refreshKey: props.refreshKey,
      // DOM 안전한 props들
      ...safeLegacyProps,
    });
  } catch (error) {
    console.error(`❌ 컴포넌트 렌더링 실패 (${componentType}):`, error);

    // 오류 발생 시 폴백 렌더링
    return (
      <div className="flex h-full w-full items-center justify-center rounded border-2 border-red-300 bg-red-50 p-4">
        <div className="text-center">
          <div className="mb-2 text-sm font-medium text-red-600">렌더링 오류</div>
          <div className="text-xs text-red-400">
            {componentType}: {error instanceof Error ? error.message : "알 수 없는 오류"}
          </div>
        </div>
      </div>
    );
  }
};

export default DynamicComponentRenderer;