sam-react-prod/src/layouts/AuthenticatedLayout.tsx

'use client';

import { useMenuStore } from '@/store/menuStore';
import type { SerializableMenuItem } from '@/store/menuStore';
import type { MenuItem } from '@/store/menuStore';
import { useRouter, usePathname } from 'next/navigation';
import { useEffect, useState } from 'react';
import {
  Menu,
  Search,
  User,
  LogOut,
  LayoutDashboard,
  Sun,
  Moon,
  Accessibility,
  ShoppingCart,
  Building2,
  Receipt,
  Package,
  Settings,
  DollarSign,
  ChevronLeft,
  Home,
  X,
  BarChart3,
  Award,
  Bell,
  Clock,
} from 'lucide-react';
import { Input } from '@/components/ui/input';
import { Button } from '@/components/ui/button';
import { Sheet, SheetContent, SheetTrigger, SheetHeader, SheetTitle } from '@/components/ui/sheet';
import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuItem,
  DropdownMenuTrigger,
} from '@/components/ui/dropdown-menu';
import Sidebar from '@/components/layout/Sidebar';
import { useTheme } from '@/contexts/ThemeContext';
import { useAuth } from '@/contexts/AuthContext';
import { deserializeMenuItems } from '@/lib/utils/menuTransform';
import { useMenuPolling } from '@/hooks/useMenuPolling';
import {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from '@/components/ui/select';

// 목업 회사 데이터
const MOCK_COMPANIES = [
  { id: 'all', name: '전체' },
  { id: 'company1', name: '(주)삼성건설' },
  { id: 'company2', name: '현대건설(주)' },
  { id: 'company3', name: '대우건설(주)' },
  { id: 'company4', name: 'GS건설(주)' },
];

// 목업 알림 데이터
const MOCK_NOTIFICATIONS = [
  { id: 1, category: '안내', title: '시스템 점검 안내', date: '2025.09.03 12:23', isNew: true },
  { id: 2, category: '공지사항', title: '신규 기능 업데이트', date: '2025.09.03 12:23', isNew: false },
  { id: 3, category: '안내', title: '보안 업데이트 완료', date: '2025.09.03 12:23', isNew: false },
];

interface AuthenticatedLayoutProps {
  children: React.ReactNode;
}

export default function AuthenticatedLayout({ children }: AuthenticatedLayoutProps) {
  const { menuItems, activeMenu, setActiveMenu, setMenuItems, sidebarCollapsed, toggleSidebar, _hasHydrated } = useMenuStore();
  const { theme, setTheme } = useTheme();
  const { logout } = useAuth();
  const router = useRouter();
  const pathname = usePathname(); // 현재 경로 추적

  // 확장된 서브메뉴 관리 (기본적으로 sales, master-data 확장)
  const [expandedMenus, setExpandedMenus] = useState<string[]>(['sales', 'master-data']);

  // 모바일 상태 관리
  const [isMobile, setIsMobile] = useState(false);
  const [isMobileSidebarOpen, setIsMobileSidebarOpen] = useState(false);

  // 사용자 정보 상태
  const [userName, setUserName] = useState<string>("사용자");
  const [userPosition, setUserPosition] = useState<string>("직책");
  const [userEmail, setUserEmail] = useState<string>("");
  const [userCompany, setUserCompany] = useState<string>("");

  // 회사 선택 상태 (목업)
  const [selectedCompany, setSelectedCompany] = useState<string>("all");

  // 알림 벨 애니메이션 상태 (클릭으로 토글)
  const [bellAnimating, setBellAnimating] = useState(true);

  // 🔧 클라이언트 마운트 상태 (새로고침 시 스피너 표시용)
  const [isMounted, setIsMounted] = useState(false);

  // 🔧 클라이언트 마운트 확인 (새로고침 시 스피너 표시)
  useEffect(() => {
    setIsMounted(true);
  }, []);

  // 메뉴 폴링 (30초마다 메뉴 변경 확인)
  // 백엔드 GET /api/v1/menus API 준비되면 자동 동작
  const { restartAfterAuth } = useMenuPolling({
    enabled: true,
    interval: 30000, // 30초
    onMenuUpdated: () => {
      console.log('[Menu] 메뉴가 업데이트되었습니다');
    },
    onSessionExpired: () => {
      console.log('[Menu] 세션 만료로 폴링 중지됨');
    },
  });

  // 로그인 성공 후 메뉴 폴링 재시작
  useEffect(() => {
    const justLoggedIn = sessionStorage.getItem('auth_just_logged_in');
    if (justLoggedIn === 'true') {
      console.log('[Menu] 로그인 감지 - 폴링 재시작');
      sessionStorage.removeItem('auth_just_logged_in');
      restartAfterAuth();
    }
  }, [restartAfterAuth]);

  // 모바일 감지 + 폴더블 기기 대응 (Galaxy Fold 등)
  useEffect(() => {
    const updateViewport = () => {
      // visualViewport API 우선 사용 (폴더블 기기에서 더 정확)
      const width = window.visualViewport?.width ?? window.innerWidth;
      const height = window.visualViewport?.height ?? window.innerHeight;

      setIsMobile(width < 768);

      // CSS 변수로 실제 viewport 크기 설정 (폴더블 기기 대응)
      document.documentElement.style.setProperty('--app-width', `${width}px`);
      document.documentElement.style.setProperty('--app-height', `${height}px`);
    };

    updateViewport();

    // resize 이벤트
    window.addEventListener('resize', updateViewport);

    // visualViewport resize 이벤트 (폴더블 기기 화면 전환 감지)
    window.visualViewport?.addEventListener('resize', updateViewport);

    return () => {
      window.removeEventListener('resize', updateViewport);
      window.visualViewport?.removeEventListener('resize', updateViewport);
    };
  }, []);

  // 서버에서 받은 사용자 정보로 초기화
  useEffect(() => {
    // ⚠️ Allow rendering even before hydration (Zustand persist rehydration can be slow)
    // Commenting out the hydration check prevents infinite loading spinner
    // if (!_hasHydrated) return;

    // localStorage에서 사용자 정보 가져오기
    const userDataStr = localStorage.getItem("user");
    if (userDataStr) {
      const userData = JSON.parse(userDataStr);

      // 사용자 이름, 직책, 이메일, 회사 설정
      setUserName(userData.name || "사용자");
      setUserPosition(userData.position || "직책");
      setUserEmail(userData.email || "");
      setUserCompany(userData.company || userData.company_name || "");

      // 서버에서 받은 메뉴 배열이 있으면 사용, 없으면 기본 메뉴 사용
      if (userData.menu && Array.isArray(userData.menu) && userData.menu.length > 0) {
        // SerializableMenuItem (iconName string)을 MenuItem (icon component)로 변환
        const deserializedMenus = deserializeMenuItems(userData.menu as SerializableMenuItem[]);
        setMenuItems(deserializedMenus);
      } else {
        // API가 준비될 때까지 임시 기본 메뉴
        const defaultMenu: MenuItem[] = [
          { id: "dashboard", label: "대시보드", icon: LayoutDashboard, path: "/dashboard" },
          {
            id: "sales",
            label: "판매관리",
            icon: ShoppingCart,
            path: "#",
            children: [
              { id: "customer-management", label: "거래처관리", icon: Building2, path: "/sales/client-management-sales-admin" },
              { id: "quote-management", label: "견적관리", icon: Receipt, path: "/sales/quote-management" },
              { id: "pricing-management", label: "단가관리", icon: DollarSign, path: "/sales/pricing-management" },
            ],
          },
          {
            id: "master-data",
            label: "기준정보",
            icon: Settings,
            path: "#",
            children: [
              { id: "item-master", label: "품목기준관리", icon: Package, path: "/master-data/item-master-data-management" },
            ],
          },
        ];
        setMenuItems(defaultMenu);
      }
    }
  }, [_hasHydrated, setMenuItems]);

  // 현재 경로에 맞는 메뉴 자동 활성화 (URL 직접 입력, 뒤로가기 대응)
  // 3depth 이상 메뉴 구조 지원
  useEffect(() => {
    if (!pathname || menuItems.length === 0) return;

    // 경로 정규화 (로케일 제거)
    const normalizedPath = pathname.replace(/^\/(ko|en|ja)/, '');

    // 메뉴 탐색 함수: 메인 메뉴와 서브메뉴 모두 탐색
    // 경로 매칭: 정확히 일치하거나 하위 경로인 경우만 매칭
    const isPathMatch = (menuPath: string, currentPath: string): boolean => {
      if (currentPath === menuPath) return true;
      return currentPath.startsWith(menuPath + '/');
    };

    // 재귀적으로 모든 depth의 메뉴를 탐색 (3depth 이상 지원)
    type MenuMatch = { menuId: string; ancestorIds: string[]; pathLength: number };

    const findMenuRecursive = (
      items: MenuItem[],
      currentPath: string,
      ancestors: string[] = []
    ): MenuMatch[] => {
      const matches: MenuMatch[] = [];

      for (const item of items) {
        // 현재 메뉴의 경로 매칭 확인
        if (item.path && item.path !== '#' && isPathMatch(item.path, currentPath)) {
          matches.push({
            menuId: item.id,
            ancestorIds: ancestors,
            pathLength: item.path.length,
          });
        }

        // 자식 메뉴가 있으면 재귀적으로 탐색
        if (item.children && item.children.length > 0) {
          const childMatches = findMenuRecursive(
            item.children,
            currentPath,
            [...ancestors, item.id] // 현재 메뉴를 조상 목록에 추가
          );
          matches.push(...childMatches);
        }
      }

      return matches;
    };

    const matches = findMenuRecursive(menuItems, normalizedPath);

    if (matches.length > 0) {
      // 가장 긴 경로(가장 구체적인 매칭) 선택
      matches.sort((a, b) => b.pathLength - a.pathLength);
      const result = matches[0];

      // 활성 메뉴 설정
      setActiveMenu(result.menuId);

      // 모든 조상 메뉴를 확장 (3depth 이상 지원)
      if (result.ancestorIds.length > 0) {
        setExpandedMenus(prev => {
          const newExpanded = [...prev];
          result.ancestorIds.forEach(id => {
            if (!newExpanded.includes(id)) {
              newExpanded.push(id);
            }
          });
          return newExpanded;
        });
      }
    }
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [pathname, menuItems, setActiveMenu]);

  const handleMenuClick = (menuId: string, path: string) => {
    setActiveMenu(menuId);
    router.push(path);
  };

  // 서브메뉴 토글 함수
  const toggleSubmenu = (menuId: string) => {
    setExpandedMenus(prev =>
      prev.includes(menuId)
        ? prev.filter(id => id !== menuId)
        : [...prev, menuId]
    );
  };

  const handleLogout = async () => {
    try {
      // AuthContext의 logout() 호출 (완전한 캐시 정리 수행)
      // - Zustand 스토어 초기화
      // - sessionStorage 캐시 삭제 (page_config_*, mes-*)
      // - localStorage 사용자 데이터 삭제
      // - 서버 로그아웃 API 호출 (HttpOnly 쿠키 삭제)
      await logout();

      // 로그인 페이지로 리다이렉트
      router.push('/login');
    } catch (error) {
      console.error('로그아웃 처리 중 오류:', error);
      // 에러가 나도 로그인 페이지로 이동
      router.push('/login');
    }
  };

  // ⚠️ FIXED: Removed hydration check to prevent infinite loading spinner
  // The hydration check was causing the dashboard to show a loading spinner indefinitely
  // because Zustand persist rehydration was taking too long or not completing properly.
  // By removing this check, we allow the component to render immediately with default values
  // and update once hydration completes through the useEffect above.

  // 🔧 새로고침 시 스피너 표시 (hydration 전)
  if (!isMounted) {
    return (
      <div className="min-h-screen flex items-center justify-center bg-background">
        <div className="text-center">
          <div className="inline-block h-10 w-10 animate-spin rounded-full border-4 border-solid border-primary border-r-transparent mb-4"></div>
          <p className="text-muted-foreground text-sm">로딩 중...</p>
        </div>
      </div>
    );
  }

  // 현재 페이지가 대시보드인지 확인
  const isDashboard = pathname?.includes('/dashboard') || activeMenu === 'dashboard';

  // 이전 페이지로 이동
  const handleGoBack = () => {
    router.back();
  };

  // 홈(대시보드)으로 이동
  const handleGoHome = () => {
    router.push('/dashboard');
  };

  // 모바일 레이아웃
  if (isMobile) {
    return (
      <div className="flex flex-col overflow-hidden" style={{ height: 'var(--app-height)' }}>
        {/* 모바일 헤더 - sam-design 스타일 */}
        <header className="clean-glass sticky top-0 z-40 px-1.5 py-1.5 m-1.5 min-[320px]:px-2 min-[320px]:py-2 min-[320px]:m-2 sm:px-4 sm:py-4 sm:m-3 rounded-2xl clean-shadow">
          <div className="flex items-center justify-between">
            {/* 좌측 영역: 햄버거 메뉴 + (대시보드일 때는 로고, 다른 페이지일 때는 이전/홈 버튼) */}
            <div className="flex items-center space-x-1 min-[320px]:space-x-2">
              {/* 햄버거 메뉴 - 좌측 맨 앞 */}
              <Sheet open={isMobileSidebarOpen} onOpenChange={setIsMobileSidebarOpen}>
                <SheetTrigger asChild>
                  <Button variant="ghost" size="sm" className="min-w-[28px] min-h-[28px] min-[320px]:min-w-[36px] min-[320px]:min-h-[36px] sm:min-w-[44px] sm:min-h-[44px] p-0 rounded-xl hover:bg-accent transition-all duration-200 flex items-center justify-center">
                    <Menu className="h-4 w-4 min-[320px]:h-5 min-[320px]:w-5 sm:h-6 sm:w-6" />
                  </Button>
                </SheetTrigger>
                <SheetContent side="left" className="w-[calc(100vw-24px)] min-[320px]:w-80 p-1 bg-transparent border-none">
                  <SheetHeader className="sr-only">
                    <SheetTitle>메뉴</SheetTitle>
                  </SheetHeader>
                  <Sidebar
                    menuItems={menuItems}
                    activeMenu={activeMenu}
                    expandedMenus={expandedMenus}
                    sidebarCollapsed={false}
                    isMobile={true}
                    onMenuClick={handleMenuClick}
                    onToggleSubmenu={toggleSubmenu}
                    onCloseMobileSidebar={() => setIsMobileSidebarOpen(false)}
                  />
                </SheetContent>
              </Sheet>

              {isDashboard ? (
                // 대시보드: 로고만 표시
                <div
                  className="flex items-center space-x-1 min-[320px]:space-x-2 sm:space-x-3 cursor-pointer hover:opacity-80 transition-opacity"
                  onClick={handleGoHome}
                  title="대시보드로 이동"
                >
                  <div className="w-6 h-6 min-w-6 min-h-6 min-[320px]:w-8 min-[320px]:h-8 min-[320px]:min-w-8 min-[320px]:min-h-8 sm:w-10 sm:h-10 sm:min-w-10 sm:min-h-10 flex-shrink-0 aspect-square rounded-lg min-[320px]:rounded-xl flex items-center justify-center shadow-md relative overflow-hidden bg-gradient-to-br from-blue-500 to-blue-600">
                    <div className="text-white font-bold text-sm min-[320px]:text-base sm:text-lg">S</div>
                  </div>
                  <div>
                    <h1 className="font-bold text-foreground text-left text-xs min-[320px]:text-sm sm:text-base">SAM</h1>
                  </div>
                </div>
              ) : (
                // 다른 페이지: 이전/홈 버튼 표시
                <div className="flex items-center space-x-0.5 sm:space-x-1">
                  <Button
                    variant="ghost"
                    size="sm"
                    className="min-w-[28px] min-h-[28px] min-[320px]:min-w-[36px] min-[320px]:min-h-[36px] sm:min-w-[44px] sm:min-h-[44px] p-0 rounded-xl hover:bg-accent transition-all duration-200 flex items-center justify-center"
                    onClick={handleGoBack}
                    title="이전 페이지"
                  >
                    <ChevronLeft className="h-3.5 w-3.5 min-[320px]:h-4 min-[320px]:w-4 sm:h-5 sm:w-5" />
                  </Button>
                  <Button
                    variant="ghost"
                    size="sm"
                    className="min-w-[28px] min-h-[28px] min-[320px]:min-w-[36px] min-[320px]:min-h-[36px] sm:min-w-[44px] sm:min-h-[44px] p-0 rounded-xl hover:bg-accent transition-all duration-200 flex items-center justify-center"
                    onClick={handleGoHome}
                    title="홈으로"
                  >
                    <Home className="h-3.5 w-3.5 min-[320px]:h-4 min-[320px]:w-4 sm:h-5 sm:w-5" />
                  </Button>
                </div>
              )}
            </div>

            {/* 우측 영역: 종합분석, 품질인정심사, 유저 드롭다운, 메뉴 */}
            <div className="flex items-center space-x-0.5 sm:space-x-1">
              {/* 종합분석 바로가기 */}
              <Button
                variant="default"
                size="sm"
                onClick={() => router.push('/reports/comprehensive-analysis')}
                className="min-w-[28px] min-h-[28px] min-[320px]:min-w-[36px] min-[320px]:min-h-[36px] sm:min-w-[44px] sm:min-h-[44px] p-0 rounded-lg min-[320px]:rounded-xl bg-blue-600 hover:bg-blue-700 text-white flex items-center justify-center"
                title="종합분석"
              >
                <BarChart3 className="h-3.5 w-3.5 min-[320px]:h-4 min-[320px]:w-4 sm:h-5 sm:w-5" />
              </Button>

              {/* 품질인정심사 바로가기 */}
              <Button
                variant="default"
                size="sm"
                onClick={() => router.push('/quality/qms')}
                className="min-w-[28px] min-h-[28px] min-[320px]:min-w-[36px] min-[320px]:min-h-[36px] sm:min-w-[44px] sm:min-h-[44px] p-0 rounded-lg min-[320px]:rounded-xl bg-emerald-600 hover:bg-emerald-700 text-white flex items-center justify-center"
                title="품질인정심사"
              >
                <Award className="h-3.5 w-3.5 min-[320px]:h-4 min-[320px]:w-4 sm:h-5 sm:w-5" />
              </Button>

              {/* 알림 버튼 - 클릭하면 애니메이션 토글 */}
              <Button
                variant="ghost"
                size="sm"
                onClick={() => setBellAnimating(!bellAnimating)}
                className="min-w-[28px] min-h-[28px] min-[320px]:min-w-[36px] min-[320px]:min-h-[36px] sm:min-w-[44px] sm:min-h-[44px] p-0 rounded-lg min-[320px]:rounded-xl hover:bg-accent transition-all duration-200 flex items-center justify-center relative"
                title={bellAnimating ? '알림 애니메이션 끄기' : '알림 애니메이션 켜기'}
              >
                <Bell className={`h-3.5 w-3.5 min-[320px]:h-4 min-[320px]:w-4 sm:h-5 sm:w-5 text-amber-600 ${bellAnimating ? 'animate-bell-ring' : ''}`} />
                {/* 애니메이션 상태 표시 */}
                {bellAnimating && (
                  <span className="absolute top-1 right-1 min-[320px]:top-1.5 min-[320px]:right-1.5 sm:top-2 sm:right-2 w-1 h-1 min-[320px]:w-1.5 min-[320px]:h-1.5 sm:w-2 sm:h-2 bg-red-500 rounded-full" />
                )}
              </Button>

              {/* 유저 프로필 드롭다운 */}
              <DropdownMenu>
                <DropdownMenuTrigger asChild>
                  <Button
                    variant="ghost"
                    size="sm"
                    className="min-w-[28px] min-h-[28px] min-[320px]:min-w-[36px] min-[320px]:min-h-[36px] sm:min-w-[44px] sm:min-h-[44px] p-0 rounded-lg min-[320px]:rounded-xl hover:bg-accent transition-all duration-200 flex items-center justify-center"
                  >
                    <div className="w-6 h-6 min-[320px]:w-8 min-[320px]:h-8 sm:w-10 sm:h-10 bg-blue-100 rounded-full flex items-center justify-center">
                      <User className="h-3.5 w-3.5 min-[320px]:h-4 min-[320px]:w-4 sm:h-5 sm:w-5 text-blue-600" />
                    </div>
                  </Button>
                </DropdownMenuTrigger>
                <DropdownMenuContent align="end" className="w-64 p-0 overflow-hidden">
                  {/* 사용자 정보 헤더 */}
                  <div className="bg-muted px-4 py-4 flex items-center gap-3">
                    <div className="w-12 h-12 bg-blue-100 rounded-full flex items-center justify-center flex-shrink-0">
                      <User className="h-6 w-6 text-blue-600" />
                    </div>
                    <div>
                      <p className="font-semibold text-foreground">{userName}</p>
                      <p className="text-sm text-muted-foreground">{userPosition}</p>
                    </div>
                  </div>

                  {/* 출근하기 버튼 */}
                  <div className="px-4 py-3 border-b border-border">
                    <Button
                      variant="default"
                      size="sm"
                      onClick={() => router.push('/hr/attendance')}
                      className="w-full h-10 bg-blue-500 hover:bg-blue-600 text-white rounded-lg flex items-center justify-center gap-2"
                    >
                      <Clock className="h-4 w-4" />
                      출근하기
                    </Button>
                  </div>

                  {/* 회사 선택 (목업) */}
                  <div className="px-4 py-3 border-b border-border">
                    <p className="text-xs text-muted-foreground mb-1">회사 선택</p>
                    <Select value={selectedCompany} onValueChange={setSelectedCompany}>
                      <SelectTrigger className="w-full h-9 text-sm">
                        <SelectValue placeholder="회사 선택" />
                      </SelectTrigger>
                      <SelectContent>
                        {MOCK_COMPANIES.map((company) => (
                          <SelectItem key={company.id} value={company.id}>
                            {company.name}
                          </SelectItem>
                        ))}
                      </SelectContent>
                    </Select>
                  </div>

                  {/* 테마 선택 */}
                  <div className="px-2 py-3">
                    <DropdownMenuItem onClick={() => setTheme('light')} className="rounded-lg">
                      <Sun className="mr-2 h-4 w-4" />
                      일반모드
                      {theme === 'light' && <span className="ml-auto text-primary">✓</span>}
                    </DropdownMenuItem>
                    <DropdownMenuItem onClick={() => setTheme('dark')} className="rounded-lg">
                      <Moon className="mr-2 h-4 w-4" />
                      다크모드
                      {theme === 'dark' && <span className="ml-auto text-primary">✓</span>}
                    </DropdownMenuItem>
                    <DropdownMenuItem onClick={() => setTheme('senior')} className="rounded-lg">
                      <Accessibility className="mr-2 h-4 w-4" />
                      시니어모드
                      {theme === 'senior' && <span className="ml-auto text-primary">✓</span>}
                    </DropdownMenuItem>

                    {/* 구분선 */}
                    <div className="my-2 border-t border-border" />

                    {/* 로그아웃 */}
                    <DropdownMenuItem onClick={handleLogout} className="rounded-lg text-red-600 hover:text-red-700 hover:bg-red-50">
                      <LogOut className="mr-2 h-4 w-4" />
                      로그아웃
                    </DropdownMenuItem>
                  </div>
                </DropdownMenuContent>
              </DropdownMenu>

            </div>
          </div>
        </header>

        {/* 모바일 콘텐츠 */}
        <main className="flex-1 overflow-y-auto px-3 overscroll-contain touch-pan-y" style={{ WebkitOverflowScrolling: 'touch' }}>
          {children}
        </main>
      </div>
    );
  }

  // 데스크톱 레이아웃
  return (
    <div className="min-h-screen flex flex-col w-full">
      {/* 헤더 - 전체 너비 상단 고정 */}
      <header className="clean-glass px-8 py-5 mx-3 mt-3 mb-0 rounded-2xl clean-shadow relative overflow-hidden flex-shrink-0 sticky top-3 z-50 bg-background/95 backdrop-blur supports-[backdrop-filter]:bg-background/60">
          <div className="flex items-center justify-between relative z-10">
            <div className="flex items-center space-x-6">
              {/* SAM 로고 섹션 - 클릭 시 대시보드로 이동 */}
              <div
                className="flex items-center space-x-4 pr-6 border-r border-border/30 cursor-pointer hover:opacity-80 transition-opacity"
                onClick={handleGoHome}
                title="대시보드로 이동"
              >
                <div className="w-12 h-12 rounded-xl flex items-center justify-center shadow-md relative overflow-hidden bg-gradient-to-br from-blue-500 to-blue-600 flex-shrink-0">
                  <div className="text-white font-bold text-xl">S</div>
                </div>
                <div>
                  <h1 className="text-xl font-bold text-foreground">SAM</h1>
                  <p className="text-xs text-muted-foreground font-medium">Smart Automation Management</p>
                </div>
              </div>

              {/* Menu 버튼 - 사이드바 토글 */}
              <Button
                variant="ghost"
                size="sm"
                onClick={toggleSidebar}
                className="rounded-xl transition-all duration-200 hover:bg-accent p-3"
              >
                <Menu className="h-5 w-5" />
              </Button>

              {/* 검색바 */}
              <div className="relative hidden lg:block">
                <Search className="absolute left-5 top-1/2 transform -translate-y-1/2 text-muted-foreground h-5 w-5" />
                <Input
                  placeholder="통합 검색..."
                  className="pl-14 w-96 clean-input border-0 bg-input-background/60 text-base"
                />
              </div>
            </div>

            <div className="flex items-center space-x-3">
              {/* 종합분석 바로가기 버튼 */}
              <Button
                variant="default"
                size="sm"
                onClick={() => router.push('/reports/comprehensive-analysis')}
                className="rounded-xl bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 flex items-center gap-2 transition-all duration-200"
              >
                <BarChart3 className="h-4 w-4" />
                <span className="hidden xl:inline">종합분석</span>
              </Button>

              {/* 품질인정심사 바로가기 버튼 */}
              <Button
                variant="default"
                size="sm"
                onClick={() => router.push('/quality/qms')}
                className="rounded-xl bg-emerald-600 hover:bg-emerald-700 text-white px-4 py-2 flex items-center gap-2 transition-all duration-200"
              >
                <Award className="h-4 w-4" />
                <span className="hidden xl:inline">품질인정심사</span>
              </Button>

              {/* 알림 버튼 - 클릭하면 애니메이션 토글 */}
              <Button
                variant="ghost"
                size="sm"
                onClick={() => setBellAnimating(!bellAnimating)}
                className="p-1 rounded-xl hover:bg-accent transition-all duration-200 relative"
                title={bellAnimating ? '알림 애니메이션 끄기' : '알림 애니메이션 켜기'}
              >
                <div className="w-14 h-14 bg-amber-50 rounded-full flex items-center justify-center">
                  <Bell className={`text-amber-500 ${bellAnimating ? 'animate-bell-ring' : ''}`} style={{ width: 23, height: 23 }} />
                </div>
                {/* 애니메이션 상태 표시 */}
                {bellAnimating && (
                  <span className="absolute top-0 right-0 w-3.5 h-3.5 bg-red-500 rounded-full border-2 border-background" />
                )}
              </Button>

              {/* 유저 프로필 드롭다운 */}
              <DropdownMenu>
                <DropdownMenuTrigger asChild>
                  <Button variant="ghost" size="sm" className="hidden lg:flex items-center space-x-3 pl-3 border-l border-border/30 h-auto py-2 px-3 rounded-xl hover:bg-accent transition-all duration-200">
                    <div className="w-11 h-11 bg-blue-100 rounded-full flex items-center justify-center">
                      <User className="h-5 w-5 text-blue-600" />
                    </div>
                    <div className="text-sm text-left">
                      <p className="font-bold text-foreground text-base">{userName}</p>
                      <p className="text-muted-foreground text-sm">{userPosition}</p>
                    </div>
                  </Button>
                </DropdownMenuTrigger>
                <DropdownMenuContent align="end" className="w-64 p-0 overflow-hidden">
                  {/* 사용자 정보 헤더 */}
                  <div className="bg-muted px-4 py-4 flex items-center gap-3">
                    <div className="w-12 h-12 bg-blue-100 rounded-full flex items-center justify-center flex-shrink-0">
                      <User className="h-6 w-6 text-blue-600" />
                    </div>
                    <div>
                      <p className="font-semibold text-foreground">{userName}</p>
                      <p className="text-sm text-muted-foreground">{userPosition}</p>
                    </div>
                  </div>

                  {/* 회사 선택 (목업) */}
                  <div className="px-4 py-3 border-b border-border">
                    <p className="text-xs text-muted-foreground mb-1">회사 선택</p>
                    <Select value={selectedCompany} onValueChange={setSelectedCompany}>
                      <SelectTrigger className="w-full h-9 text-sm">
                        <SelectValue placeholder="회사 선택" />
                      </SelectTrigger>
                      <SelectContent>
                        {MOCK_COMPANIES.map((company) => (
                          <SelectItem key={company.id} value={company.id}>
                            {company.name}
                          </SelectItem>
                        ))}
                      </SelectContent>
                    </Select>
                  </div>

                  {/* 테마 선택 */}
                  <div className="px-2 py-3">
                    <DropdownMenuItem onClick={() => setTheme('light')} className="rounded-lg">
                      <Sun className="mr-2 h-4 w-4" />
                      일반모드
                      {theme === 'light' && <span className="ml-auto text-primary">✓</span>}
                    </DropdownMenuItem>
                    <DropdownMenuItem onClick={() => setTheme('dark')} className="rounded-lg">
                      <Moon className="mr-2 h-4 w-4" />
                      다크모드
                      {theme === 'dark' && <span className="ml-auto text-primary">✓</span>}
                    </DropdownMenuItem>
                    <DropdownMenuItem onClick={() => setTheme('senior')} className="rounded-lg">
                      <Accessibility className="mr-2 h-4 w-4" />
                      시니어모드
                      {theme === 'senior' && <span className="ml-auto text-primary">✓</span>}
                    </DropdownMenuItem>

                    {/* 구분선 */}
                    <div className="my-2 border-t border-border" />

                    {/* 로그아웃 */}
                    <DropdownMenuItem onClick={handleLogout} className="rounded-lg text-red-600 hover:text-red-700 hover:bg-red-50">
                      <LogOut className="mr-2 h-4 w-4" />
                      로그아웃
                    </DropdownMenuItem>
                  </div>
                </DropdownMenuContent>
              </DropdownMenu>
            </div>
          </div>

          {/* Subtle gradient overlay */}
          <div className="absolute top-0 left-0 right-0 h-1 bg-gradient-to-r from-transparent via-primary/30 to-transparent"></div>
        </header>

      {/* 사이드바 + 메인 콘텐츠 영역 */}
      <div className="flex flex-1 gap-3 px-3 pb-3">
        {/* 데스크톱 사이드바 */}
        <div
          className={`sticky top-[106px] self-start h-[calc(100vh-118px)] mt-3 border-none bg-transparent transition-all duration-300 flex-shrink-0 ${
            sidebarCollapsed ? 'w-24' : 'w-64'
          }`}
        >
          <Sidebar
            menuItems={menuItems}
            activeMenu={activeMenu}
            expandedMenus={expandedMenus}
            sidebarCollapsed={sidebarCollapsed}
            isMobile={false}
            onMenuClick={handleMenuClick}
            onToggleSubmenu={toggleSubmenu}
          />
        </div>

        {/* 메인 콘텐츠 */}
        <main className="flex-1 overflow-auto p-3 md:p-6 pb-0">
          {children}
        </main>
      </div>
    </div>
  );
}