import React, { useState } from 'react';
import './NavigationMenu.css';

const NavigationMenu = ({ user, currentPage, onPageChange }) => {
    const [isMenuOpen, setIsMenuOpen] = useState(false);

    // 권한별 메뉴 정의
    const getMenuItems = () => {
        const baseMenus = [
            {
                id: 'dashboard',
                title: '대시보드',
                icon: '🏠',
                description: '시스템 현황 및 개요',
                requiredPermission: null // 모든 사용자
            }
        ];

        const menuItems = [
            {
                id: 'projects',
                title: '프로젝트 관리',
                icon: '📋',
                description: '프로젝트 등록 및 관리',
                requiredPermission: 'project_management'
            },
            {
                id: 'bom',
                title: 'BOM 관리',
                icon: '🔧',
                description: 'Bill of Materials 관리',
                requiredPermission: 'bom_management'
            },
            {
                id: 'materials',
                title: '자재 관리',
                icon: '📦',
                description: '자재 정보 및 재고 관리',
                requiredPermission: 'material_management'
            },
            {
                id: 'quotes',
                title: '견적 관리',
                icon: '💰',
                description: '견적서 작성 및 관리',
                requiredPermission: 'quote_management'
            },
            {
                id: 'procurement',
                title: '구매 관리',
                icon: '🛒',
                description: '구매 요청 및 발주 관리',
                requiredPermission: 'procurement_management'
            },
            {
                id: 'production',
                title: '생산 관리',
                icon: '🏭',
                description: '생산 계획 및 진행 관리',
                requiredPermission: 'production_management'
            },
            {
                id: 'shipment',
                title: '출하 관리',
                icon: '🚚',
                description: '출하 계획 및 배송 관리',
                requiredPermission: 'shipment_management'
            },
            {
                id: 'users',
                title: '사용자 관리',
                icon: '👥',
                description: '사용자 계정 및 권한 관리',
                requiredPermission: 'user_management'
            },
            {
                id: 'system',
                title: '시스템 설정',
                icon: '⚙️',
                description: '시스템 환경 설정',
                requiredPermission: 'system_admin'
            }
        ];

        // 사용자 권한에 따라 메뉴 필터링
        const userPermissions = user?.permissions || [];
        const filteredMenus = menuItems.filter(menu => 
            !menu.requiredPermission || 
            userPermissions.includes(menu.requiredPermission) ||
            user?.role === 'admin' // 관리자는 모든 메뉴 접근 가능
        );

        return [...baseMenus, ...filteredMenus];
    };

    const menuItems = getMenuItems();

    const handleMenuClick = (menuId) => {
        onPageChange(menuId);
        setIsMenuOpen(false); // 모바일에서 메뉴 닫기
    };

    return (
        <div className="navigation-menu">
            {/* 모바일 햄버거 버튼 */}
            <button 
                className="mobile-menu-toggle"
                onClick={() => setIsMenuOpen(!isMenuOpen)}
                aria-label="메뉴 토글"
            >
                <span></span>
                <span></span>
                <span></span>
            </button>

            {/* 메뉴 오버레이 (모바일) */}
            {isMenuOpen && (
                <div 
                    className="menu-overlay"
                    onClick={() => setIsMenuOpen(false)}
                />
            )}

            {/* 사이드바 메뉴 */}
            <nav className={`sidebar ${isMenuOpen ? 'open' : ''}`}>
                <div className="sidebar-header">
                    <div className="logo">
                        <span className="logo-icon">🚀</span>
                        <div className="logo-text">
                            <h2>TK-MP</h2>
                            <span>통합 관리 시스템</span>
                        </div>
                    </div>
                </div>

                <div className="menu-section">
                    <div className="menu-section-title">메인 메뉴</div>
                    <ul className="menu-list">
                        {menuItems.map(item => (
                            <li key={item.id} className="menu-item">
                                <button
                                    className={`menu-button ${currentPage === item.id ? 'active' : ''}`}
                                    onClick={() => handleMenuClick(item.id)}
                                    title={item.description}
                                >
                                    <span className="menu-icon">{item.icon}</span>
                                    <span className="menu-title">{item.title}</span>
                                    {currentPage === item.id && (
                                        <span className="active-indicator"></span>
                                    )}
                                </button>
                            </li>
                        ))}
                    </ul>
                </div>

                {/* 사용자 정보 */}
                <div className="sidebar-footer">
                    <div className="user-info">
                        <div className="user-avatar">
                            {user?.name?.charAt(0) || '?'}
                        </div>
                        <div className="user-details">
                            <div className="user-name">{user?.name}</div>
                            <div className="user-role">{user?.role}</div>
                        </div>
                    </div>
                </div>
            </nav>
        </div>
    );
};

export default NavigationMenu;






















