// 설정 패널 컴포넌트 동적 매핑
import React from "react";
import { DateTypeConfigPanel } from "@/components/screen/panels/webtype-configs/DateTypeConfigPanel";
import { NumberTypeConfigPanel } from "@/components/screen/panels/webtype-configs/NumberTypeConfigPanel";
import { SelectTypeConfigPanel } from "@/components/screen/panels/webtype-configs/SelectTypeConfigPanel";
import { TextTypeConfigPanel } from "@/components/screen/panels/webtype-configs/TextTypeConfigPanel";
import { TextareaTypeConfigPanel } from "@/components/screen/panels/webtype-configs/TextareaTypeConfigPanel";
import { CheckboxTypeConfigPanel } from "@/components/screen/panels/webtype-configs/CheckboxTypeConfigPanel";
import { RadioTypeConfigPanel } from "@/components/screen/panels/webtype-configs/RadioTypeConfigPanel";
import { FileTypeConfigPanel } from "@/components/screen/panels/webtype-configs/FileTypeConfigPanel";
import { CodeTypeConfigPanel } from "@/components/screen/panels/webtype-configs/CodeTypeConfigPanel";
import { EntityTypeConfigPanel } from "@/components/screen/panels/webtype-configs/EntityTypeConfigPanel";
import { RatingTypeConfigPanel } from "@/components/screen/panels/webtype-configs/RatingTypeConfigPanel";
import { ButtonConfigPanel as OriginalButtonConfigPanel } from "@/components/screen/config-panels/ButtonConfigPanel";
import { CardConfigPanel } from "@/components/screen/config-panels/CardConfigPanel";
import { DashboardConfigPanel } from "@/components/screen/config-panels/DashboardConfigPanel";
import { TabsConfigPanel } from "@/components/screen/config-panels/TabsConfigPanel";

// 설정 패널 컴포넌트 타입
export type ConfigPanelComponent = React.ComponentType<{
  config: any;
  onConfigChange: (config: any) => void;
  tableName?: string; // 화면 테이블명 (선택)
  menuObjid?: number; // 메뉴 objid (선택)
}>;

// ButtonConfigPanel 래퍼 (config/onConfigChange → component/onUpdateProperty 변환)
const ButtonConfigPanelWrapper: ConfigPanelComponent = ({ config, onConfigChange }) => {
  // config를 component 형태로 변환
  const mockComponent = {
    id: "temp",
    type: "widget" as const,
    componentConfig: { type: "button" },
    webTypeConfig: config,
    style: {},
  };

  // onConfigChange를 onUpdateProperty 형태로 변환
  const handleUpdateProperty = (path: string, value: any) => {
    if (path.startsWith("webTypeConfig.")) {
      const configKey = path.replace("webTypeConfig.", "");
      onConfigChange({ ...config, [configKey]: value });
    }
  };

  return <OriginalButtonConfigPanel component={mockComponent as any} onUpdateProperty={handleUpdateProperty} />;
};

// CardConfigPanel 래퍼
const CardConfigPanelWrapper: ConfigPanelComponent = ({ config, onConfigChange }) => {
  const mockComponent = {
    id: "temp",
    type: "card" as const,
    componentConfig: config,
    style: {},
  };

  const handleUpdateProperty = (path: string, value: any) => {
    if (path.startsWith("componentConfig.")) {
      const configKey = path.replace("componentConfig.", "");
      onConfigChange({ ...config, [configKey]: value });
    }
  };

  return <CardConfigPanel component={mockComponent as any} onUpdateProperty={handleUpdateProperty} />;
};

// DashboardConfigPanel 래퍼
const DashboardConfigPanelWrapper: ConfigPanelComponent = ({ config, onConfigChange }) => {
  const mockComponent = {
    id: "temp",
    type: "dashboard" as const,
    componentConfig: config,
    style: {},
  };

  const handleUpdateProperty = (path: string, value: any) => {
    if (path.startsWith("componentConfig.")) {
      const configKey = path.replace("componentConfig.", "");
      onConfigChange({ ...config, [configKey]: value });
    }
  };

  return <DashboardConfigPanel component={mockComponent as any} onUpdateProperty={handleUpdateProperty} />;
};

// TabsConfigPanel 래퍼
const TabsConfigPanelWrapper: ConfigPanelComponent = ({ config, onConfigChange }) => {
  const mockComponent = {
    id: "temp",
    type: "tabs" as const,
    tabs: config.tabs || [],
    defaultTab: config.defaultTab,
    orientation: config.orientation || "horizontal",
    variant: config.variant || "default",
    allowCloseable: config.allowCloseable || false,
    persistSelection: config.persistSelection || false,
  };

  const handleUpdate = (updates: any) => {
    onConfigChange({ ...config, ...updates });
  };

  return <TabsConfigPanel component={mockComponent as any} onUpdate={handleUpdate} />;
};

// 설정 패널 이름으로 직접 매핑하는 함수 (DB의 config_panel 필드용)
export const getConfigPanelComponent = (panelName: string): ConfigPanelComponent | null => {
  console.log(`🔧 getConfigPanelComponent 호출: panelName="${panelName}"`);

  // "none"이나 빈 값은 null 반환 (기본 설정)
  if (!panelName || panelName === "none") {
    console.log(`🔧 빈 값 또는 "none" → null 반환`);
    return null;
  }

  switch (panelName) {
    case "DateTypeConfigPanel":
      return DateTypeConfigPanel;
    case "NumberTypeConfigPanel":
      return NumberTypeConfigPanel;
    case "SelectTypeConfigPanel":
      return SelectTypeConfigPanel;
    case "TextTypeConfigPanel":
      return TextTypeConfigPanel;
    case "TextareaTypeConfigPanel":
      return TextareaTypeConfigPanel;
    case "CheckboxTypeConfigPanel":
      return CheckboxTypeConfigPanel;
    case "RadioTypeConfigPanel":
      return RadioTypeConfigPanel;
    case "FileTypeConfigPanel":
      return FileTypeConfigPanel;
    case "CodeTypeConfigPanel":
      return CodeTypeConfigPanel;
    case "EntityTypeConfigPanel":
      return EntityTypeConfigPanel;
    case "RatingTypeConfigPanel":
      console.log(`🔧 RatingTypeConfigPanel 컴포넌트 반환`);
      console.log(`🔧 RatingTypeConfigPanel 타입:`, typeof RatingTypeConfigPanel);
      console.log(`🔧 RatingTypeConfigPanel 내용:`, RatingTypeConfigPanel);
      return RatingTypeConfigPanel;
    case "ButtonConfigPanel":
      console.log(`🔧 ButtonConfigPanel 래퍼 컴포넌트 반환`);
      return ButtonConfigPanelWrapper;
    case "CardConfigPanel":
      console.log(`🔧 CardConfigPanel 래퍼 컴포넌트 반환`);
      return CardConfigPanelWrapper;
    case "DashboardConfigPanel":
      console.log(`🔧 DashboardConfigPanel 래퍼 컴포넌트 반환`);
      return DashboardConfigPanelWrapper;
    case "TabsConfigPanel":
      console.log(`🔧 TabsConfigPanel 래퍼 컴포넌트 반환`);
      return TabsConfigPanelWrapper;
    default:
      console.warn(`🔧 알 수 없는 설정 패널: ${panelName}, 기본 설정 사용`);
      return null; // 기본 설정 (패널 없음)
  }
};