"use client";

import React from "react";
import { WebTypeRegistry } from "./WebTypeRegistry";
import { WebTypeConfigPanelProps } from "./types";
import { Alert, AlertDescription } from "@/components/ui/alert";
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
import { Settings } from "lucide-react";

interface DynamicConfigPanelProps extends WebTypeConfigPanelProps {
  widgetType: string;
  showFallback?: boolean;
}

/**
 * 동적 설정 패널 렌더러
 * 등록된 웹타입에 따라 적절한 설정 패널을 동적으로 렌더링
 */
export const DynamicConfigPanel: React.FC<DynamicConfigPanelProps> = React.memo(
  ({
    widgetType,
    component,
    onUpdateComponent,
    onUpdateProperty,
    showFallback = true,
  }) => {
    // 웹타입 정의 조회
    const definition = WebTypeRegistry.get(widgetType);

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

      if (!showFallback) {
        return null;
      }

      return (
        <Alert variant="secondary" className="w-full">
          <Settings className="h-4 w-4" />
          <AlertDescription>
            <code>{widgetType}</code> 타입에 대한 설정 패널이 없습니다.
          </AlertDescription>
        </Alert>
      );
    }

    // 설정 패널이 정의되지 않은 경우
    if (!definition.configPanel) {
      if (!showFallback) {
        return null;
      }

      return (
        <Card className="w-full">
          <CardHeader className="pb-3">
            <CardTitle className="text-sm flex items-center gap-2">
              <Settings className="h-4 w-4" />
              {definition.name} 설정
            </CardTitle>
          </CardHeader>
          <CardContent className="pt-0">
            <Alert variant="secondary">
              <AlertDescription className="text-xs">
                이 웹타입에는 별도의 설정 옵션이 없습니다.
              </AlertDescription>
            </Alert>
          </CardContent>
        </Card>
      );
    }

    // 비활성화된 웹타입인 경우
    if (definition.isActive === false) {
      return (
        <Alert variant="secondary" className="w-full">
          <Settings className="h-4 w-4" />
          <AlertDescription>
            비활성화된 웹타입입니다: <code>{widgetType}</code>
          </AlertDescription>
        </Alert>
      );
    }

    // 등록된 설정 패널 컴포넌트 렌더링
    const ConfigPanelComponent = definition.configPanel;

    return (
      <ConfigPanelComponent
        component={component}
        onUpdateComponent={onUpdateComponent}
        onUpdateProperty={onUpdateProperty}
      />
    );
  }
);

DynamicConfigPanel.displayName = "DynamicConfigPanel";