import { state } from '../core/state';

const MENU_CONFIG = {
  hw: {
    label: '하드웨어',
    tabs: ['대시보드', '개인PC', '서버', '스토리지', '전산비품', '모바일기기']
  },
  sw: {
    label: '소프트웨어',
    tabs: ['대시보드', '구독SW', '영구SW', '클라우드']
  },
  ops: {
    label: '운영 서비스',
    tabs: ['대시보드', '서비스현황', '백업관리', '보안점검']
  }
};

export function renderNavigation(onTabChange: (tab: string) => void) {
  const navContainer = document.getElementById('main-nav')!;
  const btnAddAsset = document.getElementById('btn-add-asset') as HTMLButtonElement;

  const render = () => {
    navContainer.innerHTML = '';
    
    (Object.keys(MENU_CONFIG) as Array<keyof typeof MENU_CONFIG>).forEach(catKey => {
      const config = MENU_CONFIG[catKey];
      const isActive = state.activeCategory === catKey;

      const group = document.createElement('div');
      group.className = `nav-group ${isActive ? 'active is-showing-shelf' : ''}`;
      
      // 메인 카테고리 트리거
      const trigger = document.createElement('div');
      trigger.className = 'gnb-trigger';
      trigger.textContent = config.label;
      
      trigger.addEventListener('click', () => {
        if (state.activeCategory !== catKey) {
          state.activeCategory = catKey;
          state.activeSubTab = '대시보드';
          if (btnAddAsset) btnAddAsset.classList.remove('hidden');
          render();
          onTabChange('대시보드');
        }
      });
      group.appendChild(trigger);

      // 하위 탭 선반 (Shelf)
      const shelf = document.createElement('div');
      shelf.className = 'lnb-shelf';
      
      config.tabs.forEach(tab => {
        const item = document.createElement('div');
        item.className = `lnb-item ${isActive && state.activeSubTab === tab ? 'active' : ''}`;
        item.textContent = tab;
        
        item.addEventListener('click', (e) => {
          e.stopPropagation();
          state.activeCategory = catKey;
          state.activeSubTab = tab;
          
          if (btnAddAsset) {
            btnAddAsset.classList.remove('hidden');
          }
          
          render();
          onTabChange(tab);
        });
        shelf.appendChild(item);
      });
      group.appendChild(shelf);

      // 마우스 오버 시 다른 그룹의 선반은 가리고 내 것만 보여주는 스타일은 CSS에서 처리함
      navContainer.appendChild(group);
    });
  };

  render();
}