"use client";

import React from "react";
import { ComponentRegistry } from "../../ComponentRegistry";
import { ComponentCategory } from "@/types/component";
import { Folder } from "lucide-react";
import type { TabsComponent, TabItem } from "@/types/screen-management";

/**
 * 탭 컴포넌트 정의
 * 
 * 여러 화면을 탭으로 구분하여 전환할 수 있는 컴포넌트
 */
ComponentRegistry.registerComponent({
  id: "tabs-widget",
  name: "탭 컴포넌트",
  description: "화면을 탭으로 전환할 수 있는 컴포넌트입니다. 각 탭마다 다른 화면을 연결할 수 있습니다.",
  category: ComponentCategory.LAYOUT,
  webType: "text" as any, // 레이아웃 컴포넌트이므로 임시값
  component: () => null as any, // 레이아웃 컴포넌트이므로 임시값
  defaultConfig: {},
  tags: ["tabs", "navigation", "layout", "screen"],
  icon: Folder,
  version: "1.0.0",
  
  defaultSize: {
    width: 800,
    height: 600,
  },
  
  defaultProps: {
    type: "tabs" as const,
    tabs: [
      {
        id: "tab-1",
        label: "탭 1",
        order: 0,
        disabled: false,
      },
      {
        id: "tab-2",
        label: "탭 2",
        order: 1,
        disabled: false,
      },
    ] as TabItem[],
    defaultTab: "tab-1",
    orientation: "horizontal" as const,
    variant: "default" as const,
    allowCloseable: false,
    persistSelection: false,
  },
  
  // 에디터 모드에서의 렌더링
  renderEditor: ({ component, isSelected, onClick, onDragStart, onDragEnd, children }) => {
    const tabsComponent = component as TabsComponent;
    const tabs = tabsComponent.tabs || [];
    
    return (
      <div
        className="flex h-full w-full items-center justify-center rounded border-2 border-dashed border-gray-300 bg-gray-50"
        onClick={onClick}
        onDragStart={onDragStart}
        onDragEnd={onDragEnd}
      >
        <div className="text-center">
          <div className="flex items-center justify-center">
            <Folder className="h-8 w-8 text-gray-400" />
          </div>
          <p className="text-muted-foreground mt-2 text-sm font-medium">탭 컴포넌트</p>
          <p className="text-xs text-gray-400">
            {tabs.length > 0
              ? `${tabs.length}개의 탭 (실제 화면에서 표시됩니다)`
              : "탭이 없습니다. 설정 패널에서 탭을 추가하세요"}
          </p>
          {tabs.length > 0 && (
            <div className="mt-2 flex flex-wrap justify-center gap-1">
              {tabs.map((tab: TabItem, index: number) => (
                <span
                  key={tab.id}
                  className="rounded-md border bg-white px-2 py-1 text-xs"
                >
                  {tab.label || `탭 ${index + 1}`}
                </span>
              ))}
            </div>
          )}
        </div>
      </div>
    );
  },
  
  // 인터랙티브 모드에서의 렌더링 (실제 동작)
  renderInteractive: ({ component }) => {
    // InteractiveScreenViewer에서 TabsWidget을 사용하므로 여기서는 null 반환
    return null;
  },
  
  // 설정 패널 (동적 로딩)
  configPanel: React.lazy(() => 
    import("@/components/screen/config-panels/TabsConfigPanel").then(module => ({
      default: module.TabsConfigPanel
    }))
  ),
  
  // 검증 함수
  validate: (component) => {
    const tabsComponent = component as TabsComponent;
    const errors: string[] = [];
    
    if (!tabsComponent.tabs || tabsComponent.tabs.length === 0) {
      errors.push("최소 1개 이상의 탭이 필요합니다.");
    }
    
    if (tabsComponent.tabs) {
      const tabIds = tabsComponent.tabs.map((t) => t.id);
      const uniqueIds = new Set(tabIds);
      if (tabIds.length !== uniqueIds.size) {
        errors.push("탭 ID가 중복되었습니다.");
      }
    }
    
    return {
      isValid: errors.length === 0,
      errors,
    };
  },
});

console.log("✅ 탭 컴포넌트 등록 완료");