// 공통 네비게이션 컴포넌트
class CommonNavigation {
    constructor(currentPage = '') {
        this.currentPage = currentPage;
        this.init();
    }

    init() {
        this.createNavigation();
        this.addEventListeners();
    }

    createNavigation() {
        const nav = document.createElement('nav');
        nav.className = 'glass-effect border-b border-white/10';
        nav.innerHTML = this.getNavigationHTML();
        
        // body의 첫 번째 자식으로 추가
        document.body.insertBefore(nav, document.body.firstChild);
    }

    getNavigationHTML() {
        return `
            <div class="container mx-auto px-4">
                <div class="flex items-center justify-between h-16">
                    <!-- 로고/타이틀 -->
                    <div class="flex items-center">
                        <h2 class="text-xl font-bold text-white">GroupWare</h2>
                    </div>
                    
                    <!-- 메뉴 -->
                    <div class="hidden md:flex items-center space-x-8">
                        ${this.getMenuItemHTML('dashboard', '/Dashboard/', '대시보드', 'M3 7v10a2 2 0 002 2h14a2 2 0 002-2V9a2 2 0 00-2-2H5a2 2 0 00-2-2z M8 5a2 2 0 012-2h4a2 2 0 012 2v2H8V5z')}
                        ${this.getMenuItemHTML('common', '/Common', '공용코드', 'M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z')}
                        ${this.getMenuItemHTML('jobreport', '/Jobreport/', '업무일지', 'M9 5H7a2 2 0 00-2 2v10a2 2 0 002 2h8a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2')}
                        ${this.getMenuItemHTML('kuntae', '/Kuntae/', '근태관리', 'M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z')}
                    </div>
                    
                    <!-- 모바일 메뉴 버튼 -->
                    <div class="md:hidden">
                        <button id="mobile-menu-button" class="text-white/80 hover:text-white transition-colors p-2">
                            <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16"></path>
                            </svg>
                        </button>
                    </div>
                </div>
                
                <!-- 모바일 메뉴 -->
                <div id="mobile-menu" class="md:hidden hidden border-t border-white/10 pt-4 pb-4">
                    ${this.getMobileMenuItemHTML('dashboard', '/Dashboard/', '대시보드', 'M3 7v10a2 2 0 002 2h14a2 2 0 002-2V9a2 2 0 00-2-2H5a2 2 0 00-2-2z M8 5a2 2 0 012-2h4a2 2 0 012 2v2H8V5z')}
                    ${this.getMobileMenuItemHTML('common', '/Common', '공용코드', 'M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z')}
                    ${this.getMobileMenuItemHTML('jobreport', '/Jobreport/', '업무일지', 'M9 5H7a2 2 0 00-2 2v10a2 2 0 002 2h8a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2')}
                    ${this.getMobileMenuItemHTML('kuntae', '/Kuntae/', '근태관리', 'M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z')}
                </div>
            </div>
        `;
    }

    getMenuItemHTML(pageKey, href, text, svgPath) {
        const isActive = this.currentPage === pageKey;
        const activeClass = isActive ? 'text-white bg-white/20' : 'text-white/80 hover:text-white hover:bg-white/10';
        
        return `
            <a href="${href}" class="${activeClass} transition-colors px-3 py-2 rounded-lg">
                <svg class="w-4 h-4 inline mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="${svgPath}"></path>
                </svg>
                ${text}
            </a>
        `;
    }

    getMobileMenuItemHTML(pageKey, href, text, svgPath) {
        const isActive = this.currentPage === pageKey;
        const activeClass = isActive ? 'text-white bg-white/20' : 'text-white/80 hover:text-white hover:bg-white/10';
        
        return `
            <a href="${href}" class="block ${activeClass} transition-colors px-3 py-2 rounded-lg mb-2">
                <svg class="w-4 h-4 inline mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="${svgPath}"></path>
                </svg>
                ${text}
            </a>
        `;
    }

    addEventListeners() {
        // 모바일 메뉴 토글
        const mobileMenuButton = document.getElementById('mobile-menu-button');
        const mobileMenu = document.getElementById('mobile-menu');
        
        if (mobileMenuButton && mobileMenu) {
            mobileMenuButton.addEventListener('click', function() {
                mobileMenu.classList.toggle('hidden');
            });
        }
    }
}

// 전역 함수로 내비게이션 초기화
function initNavigation(currentPage = '') {
    // DOM이 로드된 후에 실행
    if (document.readyState === 'loading') {
        document.addEventListener('DOMContentLoaded', () => {
            new CommonNavigation(currentPage);
        });
    } else {
        new CommonNavigation(currentPage);
    }
}