vexplor/frontend/components/layout/AppLayout.tsx

"use client";

import { useState, Suspense, useEffect, useCallback } from "react";
import { useRouter, usePathname, useSearchParams } from "next/navigation";
import { Button } from "@/components/ui/button";
import {
  Shield,
  Menu,
  Home,
  Settings,
  BarChart3,
  FileText,
  Users,
  Package,
  ChevronDown,
  ChevronRight,
  UserCheck,
  LogOut,
  User,
  Building2,
  FileCheck,
  Monitor,
} from "lucide-react";
import { useMenu } from "@/contexts/MenuContext";
import { useAuth } from "@/hooks/useAuth";
import { useProfile } from "@/hooks/useProfile";
import { MenuItem, menuApi } from "@/lib/api/menu";
import { menuScreenApi } from "@/lib/api/screen";
import { apiClient } from "@/lib/api/client";
import { toast } from "sonner";
import { ProfileModal } from "./ProfileModal";
import { Logo } from "./Logo";
import { SideMenu } from "./SideMenu";
import { TabBar } from "./TabBar";
import { TabContent } from "./TabContent";
import { useTabStore } from "@/stores/tabStore";
import { ThemeToggle } from "./ThemeToggle";
import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuItem,
  DropdownMenuLabel,
  DropdownMenuSeparator,
  DropdownMenuTrigger,
} from "@/components/ui/dropdown-menu";
import {
  Dialog,
  DialogContent,
  DialogHeader,
  DialogTitle,
  DialogDescription,
} from "@/components/ui/dialog";
import { CompanySwitcher } from "@/components/admin/CompanySwitcher";
import { getIconComponent } from "@/components/admin/MenuIconPicker";

interface ExtendedUserInfo {
  userId: string;
  userName: string;
  userNameEng?: string;
  userNameCn?: string;
  deptCode?: string;
  deptName?: string;
  positionCode?: string;
  positionName?: string;
  email?: string;
  tel?: string;
  cellPhone?: string;
  userType?: string;
  userTypeName?: string;
  authName?: string;
  partnerCd?: string;
  isAdmin: boolean;
  sabun?: string;
  photo?: string | null;
  companyCode?: string;
  locale?: string;
}

interface AppLayoutProps {
  children: React.ReactNode;
}

const getMenuIcon = (menuName: string, dbIconName?: string | null) => {
  if (dbIconName) {
    const DbIcon = getIconComponent(dbIconName);
    if (DbIcon) return <DbIcon className="h-4 w-4" />;
  }

  const name = menuName.toLowerCase();
  if (name.includes("대시보드") || name.includes("dashboard")) return <Home className="h-4 w-4" />;
  if (name.includes("관리자") || name.includes("admin")) return <Shield className="h-4 w-4" />;
  if (name.includes("사용자") || name.includes("user")) return <Users className="h-4 w-4" />;
  if (name.includes("프로젝트") || name.includes("project")) return <BarChart3 className="h-4 w-4" />;
  if (name.includes("제품") || name.includes("product")) return <Package className="h-4 w-4" />;
  if (name.includes("설정") || name.includes("setting")) return <Settings className="h-4 w-4" />;
  if (name.includes("로그") || name.includes("log")) return <FileText className="h-4 w-4" />;
  if (name.includes("메뉴") || name.includes("menu")) return <Menu className="h-4 w-4" />;
  if (name.includes("화면관리") || name.includes("screen")) return <FileText className="h-4 w-4" />;
  return <FileText className="h-4 w-4" />;
};

const convertMenuToUI = (menus: MenuItem[], userInfo: ExtendedUserInfo | null, parentId: string = "0", parentPath: string = ""): any[] => {
  const filteredMenus = menus
    .filter((menu) => (menu.parent_obj_id || menu.PARENT_OBJ_ID) === parentId)
    .filter((menu) => (menu.status || menu.STATUS) === "active")
    .sort((a, b) => (a.seq || a.SEQ || 0) - (b.seq || b.SEQ || 0));

  if (parentId === "0") {
    const allMenus: any[] = [];

    for (const menu of filteredMenus) {
      const menuName = (menu.menu_name_kor || menu.MENU_NAME_KOR || "").toLowerCase();

      if (menuName.includes("사용자") || menuName.includes("관리자")) {
        const childMenus = convertMenuToUI(menus, userInfo, menu.objid || menu.OBJID, "");
        allMenus.push(...childMenus);
      } else {
        allMenus.push(convertSingleMenu(menu, menus, userInfo, ""));
      }
    }

    return allMenus;
  }

  return filteredMenus.map((menu) => convertSingleMenu(menu, menus, userInfo, parentPath));
};

const convertSingleMenu = (menu: MenuItem, allMenus: MenuItem[], userInfo: ExtendedUserInfo | null, parentPath: string = ""): any => {
  const menuId = menu.objid || menu.OBJID;

  const getDisplayText = (m: MenuItem) => {
    if (m.translated_name || m.TRANSLATED_NAME) {
      return m.translated_name || m.TRANSLATED_NAME;
    }

    const baseName = m.menu_name_kor || m.MENU_NAME_KOR || "메뉴명 없음";
    const userLocale = userInfo?.locale || "ko";

    if (userLocale === "EN") {
      const translations: { [key: string]: string } = {
        관리자: "Administrator",
        사용자: "User Management",
        메뉴: "Menu Management",
        대시보드: "Dashboard",
        권한: "Permission Management",
        코드: "Code Management",
        설정: "Settings",
        로그: "Log Management",
        프로젝트: "Project Management",
        제품: "Product Management",
      };

      for (const [korean, english] of Object.entries(translations)) {
        if (baseName.includes(korean)) {
          return baseName.replace(korean, english);
        }
      }
    } else if (userLocale === "JA") {
      const translations: { [key: string]: string } = {
        관리자: "管理者",
        사용자: "ユーザー管理",
        메뉴: "メニュー管理",
        대시보드: "ダッシュボード",
        권한: "権限管理",
        코드: "コード管理",
        설정: "設定",
        로그: "ログ管理",
        프로젝트: "プロジェクト管理",
        제품: "製品管理",
      };

      for (const [korean, japanese] of Object.entries(translations)) {
        if (baseName.includes(korean)) {
          return baseName.replace(korean, japanese);
        }
      }
    } else if (userLocale === "ZH") {
      const translations: { [key: string]: string } = {
        관리자: "管理员",
        사용자: "用户管理",
        메뉴: "菜单管理",
        대시보드: "仪表板",
        권한: "权限管理",
        코드: "代码管理",
        설정: "设置",
        로그: "日志管理",
        프로젝트: "项目管理",
        제품: "产品管理",
      };

      for (const [korean, chinese] of Object.entries(translations)) {
        if (baseName.includes(korean)) {
          return baseName.replace(korean, chinese);
        }
      }
    }

    return baseName;
  };

  const displayName = getDisplayText(menu);
  const tabTitle = parentPath ? `${parentPath} - ${displayName}` : displayName;

  const children = convertMenuToUI(allMenus, userInfo, menuId, tabTitle);

  const menuUrl = menu.menu_url || menu.MENU_URL || "#";
  const screenCode = menu.screen_code || menu.SCREEN_CODE || null;
  const menuType = String(menu.menu_type ?? menu.MENU_TYPE ?? "");

  let screenId: number | null = null;
  const screensMatch = menuUrl.match(/^\/screens\/(\d+)/);
  if (screensMatch) {
    screenId = parseInt(screensMatch[1]);
  }

  return {
    id: menuId,
    objid: menuId,
    name: displayName,
    tabTitle,
    icon: getMenuIcon(menu.menu_name_kor || menu.MENU_NAME_KOR || "", menu.menu_icon || menu.MENU_ICON),
    url: menuUrl,
    screenCode,
    screenId,
    menuType,
    children: children.length > 0 ? children : undefined,
    hasChildren: children.length > 0,
  };
};

function AppLayoutInner({ children }: AppLayoutProps) {
  const router = useRouter();
  const pathname = usePathname();
  const searchParams = useSearchParams();
  const { user, logout, refreshUserData } = useAuth();
  const { userMenus, adminMenus, loading, refreshMenus } = useMenu();
  const [sidebarOpen, setSidebarOpen] = useState(true);
  const [expandedMenus, setExpandedMenus] = useState<Set<string>>(new Set());
  const [isMobile, setIsMobile] = useState(false);
  const [showCompanySwitcher, setShowCompanySwitcher] = useState(false);
  const [currentCompanyName, setCurrentCompanyName] = useState<string>("");

  // URL 직접 접근 시 탭 자동 열기
  useEffect(() => {
    const store = useTabStore.getState();
    const currentModeTabs = store[store.mode].tabs;
    if (currentModeTabs.length > 0) return;

    const screenMatch = pathname.match(/^\/screens\/(\d+)/);
    if (screenMatch) {
      const screenId = parseInt(screenMatch[1]);
      const menuObjid = searchParams.get("menuObjid") ? parseInt(searchParams.get("menuObjid")!) : undefined;
      store.openTab({ type: "screen", title: `화면 ${screenId}`, screenId, menuObjid });
      return;
    }

    if (pathname.startsWith("/admin") && pathname !== "/admin") {
      store.setMode("admin");
      store.openTab({ type: "admin", title: pathname.split("/").pop() || "관리자", adminUrl: pathname });
    }
  }, []);

  // 현재 회사명 조회 (SUPER_ADMIN 전용)
  useEffect(() => {
    const fetchCurrentCompanyName = async () => {
      if ((user as ExtendedUserInfo)?.userType === "SUPER_ADMIN") {
        const companyCode = (user as ExtendedUserInfo)?.companyCode;

        if (companyCode === "*") {
          setCurrentCompanyName("WACE (최고 관리자)");
        } else if (companyCode) {
          try {
            const response = await apiClient.get("/admin/companies/db");
            if (response.data.success) {
              const company = response.data.data.find((c: any) => c.company_code === companyCode);
              setCurrentCompanyName(company?.company_name || companyCode);
            }
          } catch {
            setCurrentCompanyName(companyCode);
          }
        }
      }
    };

    fetchCurrentCompanyName();
  }, [(user as ExtendedUserInfo)?.companyCode, (user as ExtendedUserInfo)?.userType]);

  // 화면 크기 감지 및 사이드바 초기 상태 설정
  useEffect(() => {
    const checkIsMobile = () => {
      const mobile = window.innerWidth < 1024;
      setIsMobile(mobile);
      if (mobile) {
        setSidebarOpen(false);
      } else {
        setSidebarOpen(true);
      }
    };

    checkIsMobile();
    window.addEventListener("resize", checkIsMobile);
    return () => window.removeEventListener("resize", checkIsMobile);
  }, []);

  // 프로필 관련 로직
  const {
    isModalOpen,
    formData,
    selectedImage,
    isSaving,
    departments,
    alertModal,
    closeAlert,
    openProfileModal,
    closeProfileModal,
    updateFormData,
    selectImage,
    removeImage,
    saveProfile,
    isDriver,
    hasVehicle,
    driverInfo,
    driverFormData,
    updateDriverFormData,
    handleDriverStatusChange,
    handleDriverAccountDelete,
    handleDeleteVehicle,
    openVehicleRegisterModal,
    closeVehicleRegisterModal,
    isVehicleRegisterModalOpen,
    newVehicleData,
    updateNewVehicleData,
    handleRegisterVehicle,
  } = useProfile(user, refreshUserData, refreshMenus);

  const tabMode = useTabStore((s) => s.mode);
  const setTabMode = useTabStore((s) => s.setMode);
  const isAdminMode = tabMode === "admin";

  const isPreviewMode = searchParams.get("preview") === "true";

  const currentMenus = isAdminMode ? adminMenus : userMenus;

  const currentTabs = useTabStore((s) => s[s.mode].tabs);
  const currentActiveTabId = useTabStore((s) => s[s.mode].activeTabId);
  const activeTab = currentTabs.find((t) => t.id === currentActiveTabId);

  const toggleMenu = (menuId: string) => {
    const newExpanded = new Set(expandedMenus);
    if (newExpanded.has(menuId)) {
      newExpanded.delete(menuId);
    } else {
      newExpanded.add(menuId);
    }
    setExpandedMenus(newExpanded);
  };

  const { openTab } = useTabStore();

  const handleMenuClick = async (menu: any) => {
    if (menu.hasChildren) {
      toggleMenu(menu.id);
      return;
    }

    const menuName = menu.tabTitle || menu.label || menu.name || "메뉴";
    if (typeof window !== "undefined") {
      localStorage.setItem("currentMenuName", menuName);
    }

    const menuObjid = parseInt((menu.objid || menu.id)?.toString() || "0");
    const isAdminMenu = menu.menuType === "0";

    console.log("[handleMenuClick] 메뉴 클릭:", {
      menuName,
      menuObjid,
      menuType: menu.menuType,
      isAdminMenu,
      screenId: menu.screenId,
      screenCode: menu.screenCode,
      url: menu.url,
      fullMenu: menu,
    });

    // 관리자 메뉴 (menu_type = 0): URL 직접 입력 → admin 탭
    if (isAdminMenu) {
      if (menu.url && menu.url !== "#") {
        console.log("[handleMenuClick] → admin 탭:", menu.url);
        openTab({ type: "admin", title: menuName, adminUrl: menu.url });
        if (isMobile) setSidebarOpen(false);
      } else {
        toast.warning("이 메뉴에는 연결된 페이지가 없습니다.");
      }
      return;
    }

    // 사용자 메뉴 (menu_type = 1, 2): 화면/대시보드 할당
    // 1) screenId가 메뉴 URL에서 추출된 경우 바로 screen 탭
    if (menu.screenId) {
      console.log("[handleMenuClick] → screen 탭 (URL에서 screenId 추출):", menu.screenId);
      openTab({ type: "screen", title: menuName, screenId: menu.screenId, menuObjid });
      if (isMobile) setSidebarOpen(false);
      return;
    }

    // 2) screen_menu_assignments 테이블 조회
    if (menuObjid) {
      try {
        console.log("[handleMenuClick] → screen_menu_assignments 조회 시도, menuObjid:", menuObjid);
        const assignedScreens = await menuScreenApi.getScreensByMenu(menuObjid);
        console.log("[handleMenuClick] → 조회 결과:", assignedScreens);
        if (assignedScreens.length > 0) {
          console.log("[handleMenuClick] → screen 탭 (assignments):", assignedScreens[0].screenId);
          openTab({ type: "screen", title: menuName, screenId: assignedScreens[0].screenId, menuObjid });
          if (isMobile) setSidebarOpen(false);
          return;
        }
      } catch (err) {
        console.error("[handleMenuClick] 할당된 화면 조회 실패:", err);
      }
    }

    // 3) 대시보드 할당 (/dashboard/xxx) → admin 탭으로 렌더링 (AdminPageRenderer가 처리)
    if (menu.url && menu.url.startsWith("/dashboard/")) {
      console.log("[handleMenuClick] → 대시보드 탭:", menu.url);
      openTab({ type: "admin", title: menuName, adminUrl: menu.url });
      if (isMobile) setSidebarOpen(false);
      return;
    }

    // 4) 커스텀 페이지 URL (React 직접 구현 페이지) → admin 탭으로 렌더링
    if (menu.url && menu.url !== "#" && !menu.url.startsWith("/screen/") && !menu.url.startsWith("/screens/")) {
      console.log("[handleMenuClick] → 커스텀 페이지 탭:", menu.url);
      openTab({ type: "admin", title: menuName, adminUrl: menu.url });
      if (isMobile) setSidebarOpen(false);
      return;
    }

    console.warn("[handleMenuClick] 어떤 조건에도 매칭 안 됨:", { menuName, menuType: menu.menuType, url: menu.url, screenId: menu.screenId });
    toast.warning("이 메뉴에 할당된 화면이 없습니다. 메뉴 설정을 확인해주세요.");
  };

  const handleModeSwitch = () => {
    setTabMode(isAdminMode ? "user" : "admin");
  };

  const handleLogout = async () => {
    try {
      await logout();
      router.push("/login");
    } catch {
      // 로그아웃 실패
    }
  };

  const handleMenuDragStart = (e: React.DragEvent, menu: any) => {
    if (menu.hasChildren) {
      e.preventDefault();
      return;
    }
    e.dataTransfer.effectAllowed = "copy";
    const menuName = menu.tabTitle || menu.label || menu.name || "메뉴";
    const menuObjid = menu.objid || menu.id;
    const dragPayload = JSON.stringify({ menuName, menuObjid, url: menu.url });
    e.dataTransfer.setData("application/tab-menu-pending", dragPayload);
    e.dataTransfer.setData("text/plain", menuName);
  };

  // POP 모드 진입 핸들러
  const handlePopModeClick = async () => {
    try {
      const response = await menuApi.getPopMenus();
      if (response.success && response.data) {
        const { childMenus, landingMenu } = response.data;

        if (landingMenu?.menu_url) {
          router.push(landingMenu.menu_url);
        } else if (childMenus.length === 0) {
          toast.info("설정된 POP 화면이 없습니다");
        } else if (childMenus.length === 1) {
          router.push(childMenus[0].menu_url);
        } else {
          router.push("/pop");
        }
      } else {
        toast.info("설정된 POP 화면이 없습니다");
      }
    } catch (error) {
      toast.error("POP 메뉴 조회 중 오류가 발생했습니다");
    }
  };

  // pathname + 활성 탭 기반 활성 메뉴 판별 (탭 네비게이션에서도 사이드바 활성 표시)
  const isMenuActive = useCallback(
    (menu: any): boolean => {
      if (pathname === menu.url) return true;
      if (!activeTab) return false;

      const menuObjid = parseInt((menu.objid || menu.id)?.toString() || "0");

      if (activeTab.type === "admin" && activeTab.adminUrl) {
        return menu.url === activeTab.adminUrl;
      }
      if (activeTab.type === "screen") {
        if (activeTab.menuObjid != null && menuObjid === activeTab.menuObjid) return true;
        if (activeTab.screenId != null && menu.screenId === activeTab.screenId) return true;
      }
      return false;
    },
    [pathname, activeTab],
  );

  // 메뉴 트리 렌더링 (기존 MainLayout 스타일 적용)
  const renderMenu = (menu: any, level: number = 0) => {
    const isExpanded = expandedMenus.has(menu.id);
    const isLeaf = !menu.hasChildren;

    return (
      <div key={menu.id}>
        <div
          draggable={isLeaf}
          onDragStart={(e) => handleMenuDragStart(e, menu)}
          className={`group flex min-h-[44px] cursor-pointer items-center justify-between rounded-md px-3 py-2 text-sm font-medium transition-colors duration-150 ease-in-out sm:min-h-[40px] ${
            isMenuActive(menu)
              ? "border-l-[3px] border-l-primary bg-primary/10 dark:bg-primary/15 text-primary font-semibold"
              : isExpanded
                ? "bg-accent/60 text-foreground"
                : "text-muted-foreground hover:bg-accent hover:text-foreground"
          } ${level > 0 ? "ml-6" : ""}`}
          onClick={() => handleMenuClick(menu)}
        >
          <div className="flex min-w-0 flex-1 items-center">
            {menu.icon}
            <span className="ml-3 truncate" title={menu.name}>
              {menu.name}
            </span>
          </div>
          {menu.hasChildren && (
            <div className="ml-auto">
              {isExpanded ? <ChevronDown className="h-4 w-4" /> : <ChevronRight className="h-4 w-4" />}
            </div>
          )}
        </div>

        {menu.hasChildren && isExpanded && (
          <div className="mt-0.5 space-y-0.5 pl-9">
            {menu.children?.map((child: any) => (
              <div
                key={child.id}
                draggable={!child.hasChildren}
                onDragStart={(e) => handleMenuDragStart(e, child)}
                className={`flex min-h-[44px] cursor-pointer items-center rounded-md px-3 py-2 text-sm transition-colors duration-150 hover:cursor-pointer sm:min-h-[40px] ${
                  isMenuActive(child)
                    ? "border-l-[3px] border-l-primary bg-primary/10 dark:bg-primary/15 text-primary font-semibold"
                    : "text-muted-foreground hover:bg-accent hover:text-foreground"
                }`}
                onClick={() => handleMenuClick(child)}
              >
                <div className="flex min-w-0 flex-1 items-center">
                  {child.icon}
                  <span className="ml-3 truncate" title={child.name}>
                    {child.name}
                  </span>
                </div>
              </div>
            ))}
          </div>
        )}
      </div>
    );
  };

  if (isPreviewMode) {
    return (
      <div className="bg-background h-screen w-full overflow-auto p-4">{children}</div>
    );
  }

  const uiMenus = user ? convertMenuToUI(currentMenus, user as ExtendedUserInfo) : [];

  // 활성 탭에 해당하는 메뉴가 속한 부모 메뉴 자동 확장
  useEffect(() => {
    if (!activeTab || uiMenus.length === 0) return;

    const toExpand: string[] = [];
    for (const menu of uiMenus) {
      if (menu.hasChildren && menu.children) {
        const hasActiveChild = menu.children.some((child: any) => isMenuActive(child));
        if (hasActiveChild && !expandedMenus.has(menu.id)) {
          toExpand.push(menu.id);
        }
      }
    }
    if (toExpand.length > 0) {
      setExpandedMenus((prev) => {
        const next = new Set(prev);
        toExpand.forEach((id) => next.add(id));
        return next;
      });
    }
  }, [activeTab, uiMenus, isMenuActive, expandedMenus]);

  if (!user) {
    return (
      <div className="flex h-screen items-center justify-center">
        <div className="flex flex-col items-center">
          <div className="border-primary mb-4 h-8 w-8 animate-spin rounded-full border-4 border-t-transparent"></div>
          <p>로딩중...</p>
        </div>
      </div>
    );
  }

  return (
    <div className="bg-background flex h-screen flex-col">
      {/* 모바일 헤더 */}
      {isMobile && (
        <header className="border-border bg-background/95 fixed top-0 right-0 left-0 z-50 flex h-14 items-center justify-between border-b px-4 backdrop-blur-sm">
          <div className="flex items-center gap-3">
            <SideMenu onSidebarToggle={() => setSidebarOpen(!sidebarOpen)} />
            <Logo />
          </div>
          <DropdownMenu modal={false}>
            <DropdownMenuTrigger asChild>
              <button className="hover:bg-accent flex items-center gap-2 rounded-lg px-2 py-1 transition-colors">
                <div className="relative flex h-8 w-8 shrink-0 overflow-hidden rounded-full">
                  {user.photo && user.photo.trim() !== "" && user.photo !== "null" ? (
                    <img
                      src={user.photo}
                      alt={user.userName || "User"}
                      className="aspect-square h-full w-full object-cover"
                    />
                  ) : (
                    <div className="bg-muted text-foreground flex h-full w-full items-center justify-center rounded-full text-sm font-semibold">
                      {user.userName?.substring(0, 1)?.toUpperCase() || "U"}
                    </div>
                  )}
                </div>
              </button>
            </DropdownMenuTrigger>
            <DropdownMenuContent className="w-56" align="end">
              <DropdownMenuLabel className="font-normal">
                <div className="flex flex-col space-y-1">
                  <p className="text-sm leading-none font-medium">{user.userName || "사용자"}</p>
                  <p className="text-muted-foreground text-xs leading-none">
                    {user.deptName || user.email || user.userId}
                  </p>
                </div>
              </DropdownMenuLabel>
              <DropdownMenuSeparator />
              <DropdownMenuItem onClick={openProfileModal}>
                <User className="mr-2 h-4 w-4" />
                <span>프로필</span>
              </DropdownMenuItem>
              <DropdownMenuItem onClick={() => router.push("/admin/approvalBox")}>
                <FileCheck className="mr-2 h-4 w-4" />
                <span>결재함</span>
              </DropdownMenuItem>
              <DropdownMenuItem onClick={handlePopModeClick}>
                <Monitor className="mr-2 h-4 w-4" />
                <span>POP 모드</span>
              </DropdownMenuItem>
              <DropdownMenuSeparator />
              <div className="px-1 py-0.5">
                <ThemeToggle />
              </div>
              <DropdownMenuSeparator />
              <DropdownMenuItem onClick={handleLogout}>
                <LogOut className="mr-2 h-4 w-4" />
                <span>로그아웃</span>
              </DropdownMenuItem>
            </DropdownMenuContent>
          </DropdownMenu>
        </header>
      )}

      {/* 메인 컨테이너 */}
      <div className={`flex flex-1 ${isMobile ? "pt-14" : ""}`}>
        {sidebarOpen && isMobile && (
          <div
            className="fixed inset-0 z-30 bg-black/40 backdrop-blur-sm lg:hidden"
            onClick={() => setSidebarOpen(false)}
          />
        )}

        {/* 왼쪽 사이드바 */}
        <aside
          className={`${
            isMobile
              ? (sidebarOpen ? "translate-x-0" : "-translate-x-full") + " fixed top-14 left-0 z-40 h-[calc(100vh-56px)]"
              : "relative z-auto h-screen translate-x-0"
          } border-sidebar-border bg-sidebar flex w-[260px] flex-col border-r transition-transform duration-300 sm:w-[220px] lg:w-[240px]`}
        >
          {!isMobile && (
            <div className="border-border flex h-14 items-center justify-between border-b px-4">
              <Logo />
            </div>
          )}

          {(user as ExtendedUserInfo)?.userType === "SUPER_ADMIN" && (
            <div className="border-border bg-muted/50 mx-3 mt-3 rounded-md border p-3">
              <div className="flex items-center gap-2">
                <Building2 className="text-primary h-4 w-4 shrink-0" />
                <div className="min-w-0 flex-1">
                  <p className="text-muted-foreground text-[10px]">현재 관리 회사</p>
                  <p className="truncate text-sm font-semibold" title={currentCompanyName || "로딩 중..."}>
                    {currentCompanyName || "로딩 중..."}
                  </p>
                </div>
              </div>
            </div>
          )}

          {((user as ExtendedUserInfo)?.userType === "SUPER_ADMIN" ||
            (user as ExtendedUserInfo)?.userType === "COMPANY_ADMIN" ||
            (user as ExtendedUserInfo)?.userType === "admin") && (
            <div className="border-border space-y-2 border-b p-3">
              <Button
                onClick={handleModeSwitch}
                className={`flex w-full items-center justify-center gap-2 rounded-md px-3 py-2 text-sm font-medium transition-colors duration-150 hover:cursor-pointer ${
                  isAdminMode
                    ? "border border-amber-200 bg-amber-50 text-amber-700 hover:bg-amber-100 dark:border-amber-800 dark:bg-amber-950 dark:text-amber-400"
                    : "border-primary/20 bg-primary/5 text-primary hover:bg-primary/10 border"
                }`}
              >
                {isAdminMode ? (
                  <>
                    <UserCheck className="h-4 w-4" />
                    사용자 메뉴로 전환
                  </>
                ) : (
                  <>
                    <Shield className="h-4 w-4" />
                    관리자 메뉴로 전환
                  </>
                )}
              </Button>

              {(user as ExtendedUserInfo)?.userType === "SUPER_ADMIN" && (
                <Button
                  onClick={() => {
                    console.log("🔴 회사 선택 버튼 클릭!");
                    setShowCompanySwitcher(true);
                  }}
                  className="border-primary/20 bg-primary/5 text-primary hover:bg-primary/10 flex w-full items-center justify-center gap-2 rounded-md border px-3 py-2 text-sm font-medium transition-colors duration-150 hover:cursor-pointer"
                >
                  <Building2 className="h-4 w-4" />
                  회사 선택
                </Button>
              )}
            </div>
          )}

          <div className="flex-1 overflow-y-auto py-4">
            <nav className="space-y-0.5 px-3">
              {loading ? (
                <div className="animate-pulse space-y-2">
                  {[...Array(5)].map((_, i) => (
                    <div key={i} className="bg-muted h-8 rounded"></div>
                  ))}
                </div>
              ) : (
                uiMenus.map((menu) => renderMenu(menu))
              )}
            </nav>
          </div>

          <div className="border-border border-t px-3 py-1">
            <ThemeToggle />
          </div>

          <div className="border-border bg-muted/30 border-t p-3">
            <DropdownMenu modal={false}>
              <DropdownMenuTrigger asChild>
                <button className="hover:bg-accent flex w-full items-center gap-3 rounded-lg px-2 py-2 text-left transition-colors">
                  <div className="relative flex h-9 w-9 shrink-0 overflow-hidden rounded-full">
                    {user.photo && user.photo.trim() !== "" && user.photo !== "null" ? (
                      <img
                        src={user.photo}
                        alt={user.userName || "User"}
                        className="aspect-square h-full w-full object-cover"
                      />
                    ) : (
                      <div className="bg-muted text-foreground flex h-full w-full items-center justify-center rounded-full text-sm font-semibold">
                        {user.userName?.substring(0, 1)?.toUpperCase() || "U"}
                      </div>
                    )}
                  </div>
                  <div className="min-w-0 flex-1">
                    <p className="text-foreground truncate text-sm font-medium">{user.userName || "사용자"}</p>
                    <p className="text-muted-foreground truncate text-xs">
                      {user.deptName || user.email || user.userId}
                    </p>
                  </div>
                </button>
              </DropdownMenuTrigger>
              <DropdownMenuContent className="w-56" align="start" side="top">
                <DropdownMenuLabel className="font-normal">
                  <div className="flex items-center space-x-3">
                    <div className="relative flex h-12 w-12 shrink-0 overflow-hidden rounded-full">
                      {user.photo && user.photo.trim() !== "" && user.photo !== "null" ? (
                        <img
                          src={user.photo}
                          alt={user.userName || "User"}
                          className="aspect-square h-full w-full object-cover"
                        />
                      ) : (
                        <div className="bg-muted text-foreground flex h-full w-full items-center justify-center rounded-full text-base font-semibold">
                          {user.userName?.substring(0, 1)?.toUpperCase() || "U"}
                        </div>
                      )}
                    </div>
                    <div className="flex flex-col space-y-1">
                      <p className="text-sm leading-none font-medium">
                        {user.userName || "사용자"} ({user.userId || ""})
                      </p>
                      <p className="text-muted-foreground text-xs leading-none font-semibold">{user.email || ""}</p>
                      <p className="text-muted-foreground text-xs leading-none font-semibold">
                        {user.deptName && user.positionName
                          ? `${user.deptName}, ${user.positionName}`
                          : user.deptName || user.positionName || "부서 정보 없음"}
                      </p>
                    </div>
                  </div>
                </DropdownMenuLabel>
                <DropdownMenuSeparator />
                <DropdownMenuItem onClick={openProfileModal}>
                  <User className="mr-2 h-4 w-4" />
                  <span>프로필</span>
                </DropdownMenuItem>
                <DropdownMenuItem onClick={() => router.push("/admin/approvalBox")}>
                  <FileCheck className="mr-2 h-4 w-4" />
                  <span>결재함</span>
                </DropdownMenuItem>
                <DropdownMenuItem onClick={handlePopModeClick}>
                  <Monitor className="mr-2 h-4 w-4" />
                  <span>POP 모드</span>
                </DropdownMenuItem>
                <DropdownMenuSeparator />
                <DropdownMenuItem onClick={handleLogout}>
                  <LogOut className="mr-2 h-4 w-4" />
                  <span>로그아웃</span>
                </DropdownMenuItem>
              </DropdownMenuContent>
            </DropdownMenu>
          </div>
        </aside>

        {/* 가운데 컨텐츠 영역 - 탭 시스템 */}
        <main className={`flex min-w-0 flex-1 flex-col overflow-hidden bg-background ${isMobile ? "h-[calc(100vh-56px)]" : "h-screen"}`}>
          <TabBar />
          <TabContent />
        </main>
      </div>

      <ProfileModal
        isOpen={isModalOpen}
        user={user}
        formData={formData}
        selectedImage={selectedImage || ""}
        isSaving={isSaving}
        departments={departments}
        alertModal={alertModal}
        isDriver={isDriver}
        hasVehicle={hasVehicle}
        driverInfo={driverInfo}
        driverFormData={driverFormData}
        onDriverFormChange={updateDriverFormData}
        onDriverStatusChange={handleDriverStatusChange}
        onDriverAccountDelete={handleDriverAccountDelete}
        onDeleteVehicle={handleDeleteVehicle}
        onOpenVehicleRegisterModal={openVehicleRegisterModal}
        isVehicleRegisterModalOpen={isVehicleRegisterModalOpen}
        newVehicleData={newVehicleData}
        onCloseVehicleRegisterModal={closeVehicleRegisterModal}
        onNewVehicleDataChange={updateNewVehicleData}
        onRegisterVehicle={handleRegisterVehicle}
        onClose={closeProfileModal}
        onFormChange={updateFormData}
        onImageSelect={selectImage}
        onImageRemove={removeImage}
        onSave={saveProfile}
        onAlertClose={closeAlert}
      />

      <Dialog open={showCompanySwitcher} onOpenChange={setShowCompanySwitcher}>
        <DialogContent className="max-w-[95vw] sm:max-w-[600px]">
          <DialogHeader>
            <DialogTitle className="text-base sm:text-lg">회사 선택</DialogTitle>
            <DialogDescription className="text-xs sm:text-sm">
              관리할 회사를 선택하면 해당 회사의 관점에서 시스템을 사용할 수 있습니다.
            </DialogDescription>
          </DialogHeader>
          <div className="mt-4">
            <CompanySwitcher onClose={() => setShowCompanySwitcher(false)} isOpen={showCompanySwitcher} />
          </div>
        </DialogContent>
      </Dialog>
    </div>
  );
}

export function AppLayout({ children }: AppLayoutProps) {
  return (
    <Suspense
      fallback={
        <div className="flex h-screen items-center justify-center">
          <div className="flex flex-col items-center">
            <div className="border-primary mb-4 h-8 w-8 animate-spin rounded-full border-4 border-t-transparent"></div>
            <p>로딩중...</p>
          </div>
        </div>
      }
    >
      <AppLayoutInner>{children}</AppLayoutInner>
    </Suspense>
  );
}