// 공통 네비게이션 컴포넌트
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.style.cssText = `
            background: rgba(255, 255, 255, 0.25);
            backdrop-filter: blur(10px);
            border: 1px solid rgba(255, 255, 255, 0.18);
        `;
        nav.innerHTML = this.getNavigationHTML();
        
        // body의 첫 번째 자식으로 추가
        document.body.insertBefore(nav, document.body.firstChild);
    }

    getNavigationHTML() {
        return `
            <div class="container mx-auto px-4" style="background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);">
                <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);
    }
}

// 개발중 경고 메시지 생성 함수
function createDevWarning() {
    return `
        <div class="dev-warning animate-slide-up">
            <div class="flex items-center">
                <svg class="icon" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-2.5L13.732 4c-.77-.833-1.964-.833-2.732 0L3.732 16.5c-.77.833.192 2.5 1.732 2.5z"></path>
                </svg>
                <div>
                    <p class="title">🚧 개발중인 기능입니다</p>
                    <p class="description">일부 기능이 정상적으로 동작하지 않을 수 있습니다.</p>
                </div>
            </div>
        </div>
    `;
}