"use client";

import React, { Suspense } from "react";
import { WebTypeRegistry } from "./WebTypeRegistry";
import { WebTypeComponentProps } from "./types";
import { Alert, AlertDescription } from "@/components/ui/alert";
import { Loader2 } from "lucide-react";

interface DynamicWebTypeRendererProps extends WebTypeComponentProps {
  widgetType: string;
  fallback?: React.ComponentType<WebTypeComponentProps>;
  showError?: boolean;
}

/**
 * 동적 웹타입 렌더러
 * 등록된 웹타입에 따라 적절한 컴포넌트를 동적으로 렌더링
 */
export const DynamicWebTypeRenderer: React.FC<DynamicWebTypeRendererProps> =
  React.memo(
    ({
      widgetType,
      component,
      fallback: FallbackComponent,
      showError = true,
      ...props
    }) => {
      // 웹타입 정의 조회
      const definition = WebTypeRegistry.get(widgetType);

      // 웹타입이 등록되지 않은 경우
      if (!definition) {
        console.warn(`Unknown web type: ${widgetType}`);

        // Fallback 컴포넌트가 있으면 사용
        if (FallbackComponent) {
          return <FallbackComponent component={component} {...props} />;
        }

        // 에러 표시를 원하지 않으면 빈 div 반환
        if (!showError) {
          return <div className="w-full h-full" />;
        }

        // 에러 메시지 표시
        return (
          <Alert variant="destructive" className="w-full">
            <AlertDescription>
              알 수 없는 웹타입: <code>{widgetType}</code>
            </AlertDescription>
          </Alert>
        );
      }

      // 비활성화된 웹타입인 경우
      if (definition.isActive === false) {
        console.warn(`Inactive web type: ${widgetType}`);

        if (showError) {
          return (
            <Alert variant="secondary" className="w-full">
              <AlertDescription>
                비활성화된 웹타입: <code>{widgetType}</code>
              </AlertDescription>
            </Alert>
          );
        }

        return <div className="w-full h-full opacity-50" />;
      }

      // 등록된 컴포넌트 렌더링
      const Component = definition.component;

      return (
        <Suspense
          fallback={
            <div className="flex items-center justify-center w-full h-full p-2">
              <Loader2 className="h-4 w-4 animate-spin text-gray-400" />
              <span className="ml-2 text-xs text-gray-500">로딩 중...</span>
            </div>
          }
        >
          <Component component={component} {...props} />
        </Suspense>
      );
    },
    (prevProps, nextProps) => {
      // 메모이제이션을 위한 얕은 비교
      return (
        prevProps.widgetType === nextProps.widgetType &&
        prevProps.component.id === nextProps.component.id &&
        prevProps.value === nextProps.value &&
        prevProps.readonly === nextProps.readonly &&
        JSON.stringify(prevProps.component.webTypeConfig) ===
          JSON.stringify(nextProps.component.webTypeConfig)
      );
    }
  );

DynamicWebTypeRenderer.displayName = "DynamicWebTypeRenderer";