"use client";

import React, { useMemo } from "react";
import { WebTypeRegistry } from "./WebTypeRegistry";
import { WebTypeConfigPanelProps } from "./types";

/**
 * 동적 설정 패널 렌더러 컴포넌트
 * 레지스트리에서 웹타입을 조회하여 해당 설정 패널을 동적으로 렌더링합니다.
 */
export const DynamicConfigPanel: React.FC<
  WebTypeConfigPanelProps & {
    webType: string;
  }
> = ({ webType, component, onUpdateComponent, onUpdateProperty }) => {
  // 레지스트리에서 웹타입 정의 조회
  const webTypeDefinition = useMemo(() => {
    return WebTypeRegistry.getWebType(webType);
  }, [webType]);

  // 웹타입이 등록되지 않은 경우
  if (!webTypeDefinition) {
    console.warn(`웹타입 "${webType}"이 레지스트리에 등록되지 않았습니다.`);
    return (
      <div className="rounded-md border border-dashed border-red-300 bg-red-50 p-4">
        <div className="flex items-center gap-2 text-red-600">
          <span className="text-sm font-medium">⚠️ 설정 패널 없음</span>
        </div>
        <p className="mt-1 text-xs text-red-500">웹타입 "{webType}"의 설정 패널을 찾을 수 없습니다.</p>
      </div>
    );
  }

  // 설정 패널 컴포넌트가 없는 경우
  if (!webTypeDefinition.configPanel) {
    return (
      <div className="rounded-md border border-dashed border-yellow-300 bg-yellow-50 p-4">
        <div className="flex items-center gap-2 text-yellow-600">
          <span className="text-sm font-medium">⚠️ 설정 패널 미구현</span>
        </div>
        <p className="mt-1 text-xs text-yellow-500">웹타입 "{webType}"에 대한 설정 패널이 구현되지 않았습니다.</p>
      </div>
    );
  }

  const ConfigPanelComponent = webTypeDefinition.configPanel;

  // 설정 패널 props 구성
  const configPanelProps: WebTypeConfigPanelProps = {
    component,
    onUpdateComponent,
    onUpdateProperty,
  };

  try {
    return <ConfigPanelComponent {...configPanelProps} />;
  } catch (error) {
    console.error(`웹타입 "${webType}" 설정 패널 렌더링 중 오류 발생:`, error);
    return (
      <div className="rounded-md border border-dashed border-red-300 bg-red-50 p-4">
        <div className="flex items-center gap-2 text-red-600">
          <span className="text-sm font-medium">💥 설정 패널 오류</span>
        </div>
        <p className="mt-1 text-xs text-red-500">웹타입 "{webType}" 설정 패널 렌더링 중 오류가 발생했습니다.</p>
        {process.env.NODE_ENV === "development" && (
          <pre className="mt-2 overflow-auto text-xs text-red-400">
            {error instanceof Error ? error.stack : String(error)}
          </pre>
        )}
      </div>
    );
  }
};

DynamicConfigPanel.displayName = "DynamicConfigPanel";

/**
 * 웹타입별 설정 패널을 렌더링하는 헬퍼 함수
 */
export function renderConfigPanel(
  webType: string,
  component: any,
  onUpdateComponent: (component: any) => void,
  onUpdateProperty: (property: string, value: any) => void,
): React.ReactElement | null {
  return (
    <DynamicConfigPanel
      webType={webType}
      component={component}
      onUpdateComponent={onUpdateComponent}
      onUpdateProperty={onUpdateProperty}
    />
  );
}

/**
 * 웹타입이 설정 패널을 지원하는지 확인하는 헬퍼 함수
 */
export function hasConfigPanel(webType: string): boolean {
  const webTypeDefinition = WebTypeRegistry.getWebType(webType);
  return !!(webTypeDefinition && webTypeDefinition.configPanel);
}

/**
 * 웹타입의 기본 설정을 가져오는 헬퍼 함수
 */
export function getDefaultConfig(webType: string): Record<string, any> | null {
  const webTypeDefinition = WebTypeRegistry.getWebType(webType);
  return webTypeDefinition ? webTypeDefinition.defaultConfig : null;
}