ERP-node/frontend/components/screen/widgets/TabsWidget.tsx

"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;
}

export function TabsWidget({ component, className, style }: 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]);

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

    setLoadingScreens((prev) => ({ ...prev, [screenId]: true }));

    try {
      const response = await fetch(`/api/screen-management/screens/${screenId}/layout`);
      if (response.ok) {
        const data = await response.json();
        if (data.success && data.data) {
          setScreenLayouts((prev) => ({ ...prev, [screenId]: data.data }));
        }
      }
    } catch (error) {
      console.error(`Failed to load screen layout ${screenId}:`, error);
    } finally {
      setLoadingScreens((prev) => ({ ...prev, [screenId]: false }));
    }
  };

  // 탭 변경 핸들러
  const handleTabChange = (tabId: string) => {
    setSelectedTab(tabId);

    // 해당 탭의 화면 로드
    const tab = visibleTabs.find((t) => t.id === tabId);
    if (tab && tab.screenId && !screenLayouts[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) {
    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>
    );
  }

  return (
    <Tabs
      value={selectedTab}
      onValueChange={handleTabChange}
      orientation={orientation}
      className={className}
      style={style}
    >
      <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>

      {visibleTabs.map((tab) => (
        <TabsContent key={tab.id} value={tab.id} className="h-full w-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] ? (
              <div className="h-full w-full overflow-auto">
                <InteractiveScreenViewerDynamic
                  component={screenLayouts[tab.screenId].components[0]}
                  allComponents={screenLayouts[tab.screenId].components}
                />
              </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>
      ))}
    </Tabs>
  );
}