"use client";

import React, { useState, useEffect } from "react";
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
import { Button } from "@/components/ui/button";
import { X, Loader2 } from "lucide-react";
import type { TabsComponent, TabItem } from "@/types/screen-management";
import { InteractiveScreenViewerDynamic } from "@/components/screen/InteractiveScreenViewerDynamic";

interface TabsWidgetProps {
  component: TabsComponent;
  className?: string;
  style?: React.CSSProperties;
  menuObjid?: number; // 🆕 부모 화면의 메뉴 OBJID
}

export function TabsWidget({ component, className, style, menuObjid }: TabsWidgetProps) {
  const {
    tabs = [],
    defaultTab,
    orientation = "horizontal",
    variant = "default",
    allowCloseable = false,
    persistSelection = false,
  } = component;

  console.log("🎨 TabsWidget 렌더링:", {
    componentId: component.id,
    tabs,
    tabsLength: tabs.length,
    component,
  });

  const storageKey = `tabs-${component.id}-selected`;

  // 초기 선택 탭 결정
  const getInitialTab = () => {
    if (persistSelection && typeof window !== "undefined") {
      const saved = localStorage.getItem(storageKey);
      if (saved && tabs.some((t) => t.id === saved)) {
        return saved;
      }
    }
    return defaultTab || tabs[0]?.id || "";
  };

  const [selectedTab, setSelectedTab] = useState<string>(getInitialTab());
  const [visibleTabs, setVisibleTabs] = useState<TabItem[]>(tabs);
  const [loadingScreens, setLoadingScreens] = useState<Record<string, boolean>>({});
  const [screenLayouts, setScreenLayouts] = useState<Record<number, any>>({});

  // 컴포넌트 탭 목록 변경 시 동기화
  useEffect(() => {
    setVisibleTabs(tabs.filter((tab) => !tab.disabled));
  }, [tabs]);

  // 선택된 탭 변경 시 localStorage에 저장
  useEffect(() => {
    if (persistSelection && typeof window !== "undefined") {
      localStorage.setItem(storageKey, selectedTab);
    }
  }, [selectedTab, persistSelection, storageKey]);

  // 초기 로드 시 선택된 탭의 화면 불러오기
  useEffect(() => {
    const currentTab = visibleTabs.find((t) => t.id === selectedTab);
    console.log("🔄 초기 탭 로드:", {
      selectedTab,
      currentTab,
      hasScreenId: !!currentTab?.screenId,
      screenId: currentTab?.screenId,
    });
    
    if (currentTab && currentTab.screenId && !screenLayouts[currentTab.screenId]) {
      console.log("📥 초기 화면 로딩 시작:", currentTab.screenId);
      loadScreenLayout(currentTab.screenId);
    }
  }, [selectedTab, visibleTabs]);

  // 화면 레이아웃 로드
  const loadScreenLayout = async (screenId: number) => {
    if (screenLayouts[screenId]) {
      console.log("✅ 이미 로드된 화면:", screenId);
      return; // 이미 로드됨
    }

    console.log("📥 화면 레이아웃 로딩 시작:", screenId);
    setLoadingScreens((prev) => ({ ...prev, [screenId]: true }));

    try {
      const { apiClient } = await import("@/lib/api/client");
      const response = await apiClient.get(`/screen-management/screens/${screenId}/layout`);
      console.log("📦 API 응답:", { screenId, success: response.data.success, hasData: !!response.data.data });
      
      if (response.data.success && response.data.data) {
        console.log("✅ 화면 레이아웃 로드 완료:", screenId);
        setScreenLayouts((prev) => ({ ...prev, [screenId]: response.data.data }));
      } else {
        console.error("❌ 화면 레이아웃 로드 실패 - success false");
      }
    } catch (error) {
      console.error(`❌ 화면 레이아웃 로드 실패 ${screenId}:`, error);
    } finally {
      setLoadingScreens((prev) => ({ ...prev, [screenId]: false }));
    }
  };

  // 탭 변경 핸들러
  const handleTabChange = (tabId: string) => {
    console.log("🔄 탭 변경:", tabId);
    setSelectedTab(tabId);

    // 해당 탭의 화면 로드
    const tab = visibleTabs.find((t) => t.id === tabId);
    console.log("🔍 선택된 탭 정보:", { tab, hasScreenId: !!tab?.screenId, screenId: tab?.screenId });
    
    if (tab && tab.screenId && !screenLayouts[tab.screenId]) {
      console.log("📥 탭 변경 시 화면 로딩:", tab.screenId);
      loadScreenLayout(tab.screenId);
    }
  };

  // 탭 닫기 핸들러
  const handleCloseTab = (tabId: string, e: React.MouseEvent) => {
    e.stopPropagation();

    const updatedTabs = visibleTabs.filter((tab) => tab.id !== tabId);
    setVisibleTabs(updatedTabs);

    // 닫은 탭이 선택된 탭이었다면 다음 탭 선택
    if (selectedTab === tabId && updatedTabs.length > 0) {
      setSelectedTab(updatedTabs[0].id);
    }
  };

  // 탭 스타일 클래스
  const getTabsListClass = () => {
    const baseClass = orientation === "vertical" ? "flex-col" : "";
    const variantClass =
      variant === "pills"
        ? "bg-muted p-1 rounded-lg"
        : variant === "underline"
          ? "border-b"
          : "bg-muted p-1";
    return `${baseClass} ${variantClass}`;
  };

  if (visibleTabs.length === 0) {
    console.log("⚠️ 보이는 탭이 없음");
    return (
      <div className="flex h-full w-full items-center justify-center rounded border-2 border-dashed border-gray-300 bg-gray-50">
        <p className="text-muted-foreground text-sm">탭이 없습니다</p>
      </div>
    );
  }

  console.log("🎨 TabsWidget 최종 렌더링:", {
    visibleTabsCount: visibleTabs.length,
    selectedTab,
    screenLayoutsKeys: Object.keys(screenLayouts),
    loadingScreensKeys: Object.keys(loadingScreens),
  });

  return (
    <div className="flex h-full w-full flex-col pt-4" style={style}>
      <Tabs
        value={selectedTab}
        onValueChange={handleTabChange}
        orientation={orientation}
        className="flex h-full w-full flex-col"
      >
        <div className="relative z-10">
          <TabsList className={getTabsListClass()}>
            {visibleTabs.map((tab) => (
              <div key={tab.id} className="relative">
                <TabsTrigger value={tab.id} disabled={tab.disabled} className="relative pr-8">
                  {tab.label}
                </TabsTrigger>
                {allowCloseable && (
                  <Button
                    onClick={(e) => handleCloseTab(tab.id, e)}
                    variant="ghost"
                    size="sm"
                    className="absolute right-1 top-1/2 h-5 w-5 -translate-y-1/2 p-0 hover:bg-destructive/10"
                  >
                    <X className="h-3 w-3" />
                  </Button>
                )}
              </div>
            ))}
          </TabsList>
        </div>

        <div className="relative flex-1 overflow-hidden">
          {visibleTabs.map((tab) => (
            <TabsContent key={tab.id} value={tab.id} className="h-full">
              {tab.screenId ? (
                loadingScreens[tab.screenId] ? (
                  <div className="flex h-full w-full items-center justify-center">
                    <Loader2 className="h-8 w-8 animate-spin text-primary" />
                    <span className="text-muted-foreground ml-2">화면 로딩 중...</span>
                  </div>
                ) : screenLayouts[tab.screenId] ? (
                  (() => {
                    const layoutData = screenLayouts[tab.screenId];
                    const { components = [], screenResolution } = layoutData;
                    
                    console.log("🎯 렌더링할 화면 데이터:", {
                      screenId: tab.screenId,
                      componentsCount: components.length,
                      screenResolution,
                    });

                    const designWidth = screenResolution?.width || 1920;
                    const designHeight = screenResolution?.height || 1080;

                    return (
                      <div 
                        className="relative h-full w-full overflow-auto bg-background"
                        style={{
                          minHeight: `${designHeight}px`,
                        }}
                      >
                        <div
                          className="relative"
                          style={{
                            width: `${designWidth}px`,
                            height: `${designHeight}px`,
                            margin: "0 auto",
                          }}
                        >
                          {components.map((component: any) => (
                            <InteractiveScreenViewerDynamic
                              key={component.id}
                              component={component}
                              allComponents={components}
                              screenInfo={{
                                id: tab.screenId,
                                tableName: layoutData.tableName,
                              }}
                              menuObjid={menuObjid} // 🆕 부모의 menuObjid 전달
                            />
                          ))}
                        </div>
                      </div>
                    );
                  })()
                ) : (
                  <div className="flex h-full w-full items-center justify-center">
                    <p className="text-muted-foreground text-sm">화면을 불러올 수 없습니다</p>
                  </div>
                )
              ) : (
                <div className="flex h-full w-full items-center justify-center rounded border-2 border-dashed border-gray-300 bg-gray-50">
                  <p className="text-muted-foreground text-sm">연결된 화면이 없습니다</p>
                </div>
              )}
            </TabsContent>
          ))}
        </div>
      </Tabs>
    </div>
  );
}