"use client";

import { LayoutRegistry } from "../LayoutRegistry";
import { discoverLayouts } from "../utils/autoDiscovery";

// 기존 레이아웃들 (호환성을 위해 유지)
import { TabsLayout } from "./TabsLayoutRenderer";

// 새 구조 레이아웃들 (자동 등록)
import "./grid/GridLayoutRenderer";
import "./flexbox/FlexboxLayoutRenderer";
import "./accordion/AccordionLayoutRenderer"; // 컴포넌트 패널에서만 숨김
import "./split/SplitLayoutRenderer";
import "./card-layout/CardLayoutRenderer";
import "./hero-section/HeroSectionLayoutRenderer";

// 레이아웃 초기화 함수 (새 구조 + 기존 구조 하이브리드)
export async function initializeLayouts() {
  console.log("🚀 레이아웃 시스템 초기화 시작...");

  try {
    // 1. 자동 디스커버리 실행 (새 구조)
    const discoveryResult = await discoverLayouts({
      pattern: "./**/*LayoutRenderer.tsx",
      verbose: true,
      continueOnError: true,
    });

    console.log(`✅ 자동 디스커버리 완료: ${discoveryResult.successfullyLoaded}개 레이아웃 로드`);

    // 2. 기존 구조 레이아웃들 수동 등록 (마이그레이션 완료 시까지)
    await initializeLegacyLayouts();

    const totalLayouts = LayoutRegistry.getAllLayouts().length;
    console.log(`🎉 레이아웃 시스템 초기화 완료: 총 ${totalLayouts}개 레이아웃 등록`);

    return {
      success: true,
      autoDiscovered: discoveryResult.successfullyLoaded,
      legacy: totalLayouts - discoveryResult.successfullyLoaded,
      total: totalLayouts,
    };
  } catch (error) {
    console.error("❌ 레이아웃 시스템 초기화 실패:", error);
    throw error;
  }
}

// 기존 구조 레이아웃들 등록 (임시)
async function initializeLegacyLayouts() {
  console.log("🔄 기존 구조 레이아웃 로드 중...");

  // 플렉스박스 레이아웃 (새 구조로 마이그레이션됨 - 스킵)

  // 분할 레이아웃 (새 구조로 마이그레이션됨 - 스킵)

  // 탭 레이아웃 (기존 구조 - 임시)
  LayoutRegistry.registerLayout({
    id: "tabs",
    name: "탭 레이아웃",
    nameEng: "Tabs Layout",
    description: "탭으로 구성된 다중 패널 레이아웃입니다.",
    category: "navigation",
    icon: "tabs",
    component: TabsLayout,
    defaultConfig: {
      tabs: {
        position: "top",
        variant: "default",
        size: "md",
        closable: false,
        defaultTab: "tab1",
      },
    },
    defaultZones: [
      {
        id: "tab1",
        name: "탭 1",
        position: {},
        size: { width: "100%", height: "100%" },
      },
      {
        id: "tab2",
        name: "탭 2",
        position: {},
        size: { width: "100%", height: "100%" },
      },
      {
        id: "tab3",
        name: "탭 3",
        position: {},
        size: { width: "100%", height: "100%" },
      },
    ],
    tags: ["tabs", "navigation", "multi-panel"],
    isActive: true,
  });

  console.log("✅ 기존 구조 레이아웃 로드 완료");
}

// 레지스트리에서 레이아웃 조회하는 헬퍼 함수들
export const getLayoutComponent = (layoutType: string) => LayoutRegistry.getLayout(layoutType)?.component;

export const getAllLayoutDefinitions = () => LayoutRegistry.getAllLayouts();

// 앱 시작 시 자동 실행
console.log("📦 레이아웃 모듈 로드됨");