"use client";

import React, { Suspense, useRef } from "react";
import { Loader2, Inbox } from "lucide-react";
import { useTab, TabItem } from "@/contexts/TabContext";
import { ScreenViewPageEmbeddable } from "@/app/(main)/screens/[screenId]/page";

function TabLoadingFallback() {
  return (
    <div className="flex h-full min-h-[400px] w-full items-center justify-center">
      <div className="rounded-xl border border-slate-200 bg-white p-8 text-center shadow-lg">
        <Loader2 className="text-primary mx-auto h-10 w-10 animate-spin" />
        <p className="mt-4 font-medium text-slate-900">화면을 불러오는 중...</p>
      </div>
    </div>
  );
}

function EmptyTabState() {
  return (
    <div className="flex h-full w-full items-center justify-center bg-white">
      <div className="flex flex-col items-center py-12 text-center">
        <div className="mb-4 flex h-16 w-16 items-center justify-center rounded-full bg-slate-100">
          <Inbox className="h-8 w-8 text-slate-400" />
        </div>
        <h3 className="mb-2 text-lg font-semibold text-slate-700">열린 탭이 없습니다</h3>
        <p className="max-w-sm text-sm text-slate-500">
          왼쪽 메뉴에서 화면을 선택하면 탭으로 열립니다.
        </p>
      </div>
    </div>
  );
}

export function TabContent() {
  const { tabs, activeTabId, refreshKeys } = useTab();
  // 탭 순서 변경(드래그 리오더링) 시 DOM 재배치를 방지하기 위해
  // 탭이 추가된 순서(id 기준)로 고정 렌더링
  const stableOrderRef = useRef<TabItem[]>([]);

  // F5 이후 활성 탭만 마운트하고, 비활성 탭은 클릭 시 마운트 (Lazy Mount)
  const mountedTabIdsRef = useRef<Set<string>>(
    new Set(activeTabId ? [activeTabId] : [])
  );

  // 활성 탭을 마운트 목록에 추가
  if (activeTabId && !mountedTabIdsRef.current.has(activeTabId)) {
    mountedTabIdsRef.current.add(activeTabId);
  }

  // 새 탭 추가 시 stableOrder에 append, 닫힌 탭은 제거
  const currentIds = new Set(tabs.map(t => t.id));
  const stableIds = new Set(stableOrderRef.current.map(t => t.id));

  // 닫힌 탭 제거
  stableOrderRef.current = stableOrderRef.current.filter(t => currentIds.has(t.id));
  // 닫힌 탭을 마운트 목록에서도 제거
  for (const id of mountedTabIdsRef.current) {
    if (!currentIds.has(id)) mountedTabIdsRef.current.delete(id);
  }
  // 새로 추가된 탭 append
  for (const tab of tabs) {
    if (!stableIds.has(tab.id)) {
      stableOrderRef.current.push(tab);
    }
  }

  const stableTabs = stableOrderRef.current;

  if (stableTabs.length === 0) {
    return <EmptyTabState />;
  }

  return (
    <>
      {stableTabs.map((tab) => (
        <div
          key={`${tab.id}-${refreshKeys[tab.id] || 0}`}
          className="h-full w-full"
          style={{ display: tab.id === activeTabId ? "block" : "none" }}
        >
          {mountedTabIdsRef.current.has(tab.id) ? (
            <Suspense fallback={<TabLoadingFallback />}>
              <ScreenViewPageEmbeddable
                screenId={tab.screenId}
                menuObjid={tab.menuObjid}
              />
            </Suspense>
          ) : null}
        </div>
      ))}
    </>
  );
}