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

const MENU_CONFIG: any = {
  hw: {
    label: '하드웨어',
    tabs: ['대시보드', '서버', 'PC', '스토리지', '공간정보장비', 'PC부품', '부품 마스터', '네트워크', '업무지원장비']
  },
  sw: {
    label: '소프트웨어',
    tabs: ['외부SW', '내부SW']
  },
  ops: {
    label: '운영지원',
    tabs: ['클라우드', '도메인', '비용관리', '사용자']
  },
  vip: {
    label: '내빈/외빈',
    tabs: ['선물']
  },
  fac: {
    label: '시설자산',
    tabs: ['사무가구']
  }
};

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

  const render = () => {
    navContainer.innerHTML = '';
    
    // 기존 메뉴 렌더링
    (Object.keys(MENU_CONFIG) as Array<keyof typeof MENU_CONFIG>).forEach(catKey => {
      const config = MENU_CONFIG[catKey];
      
      // 역할에 따라 노출할 서브탭 필터링
      const visibleTabs = config.tabs.filter((tab: string) => {
        if (state.currentUserRole === 'admin') {
          // 관리자(admin)일 경우 대시보드 탭만 노출
          return tab === '대시보드';
        } else {
          // 실무자(user)일 경우 대시보드 제외한 모든 탭 노출
          return tab !== '대시보드';
        }
      });

      // 노출할 서브탭이 없으면 해당 대분류 GNB 메뉴도 렌더링하지 않음
      if (visibleTabs.length === 0) {
        return;
      }

      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 as any;
          const firstTab = visibleTabs[0] || config.tabs[0];
          state.activeSubTab = firstTab;
          render();
          onTabChange(firstTab);
        }
      });
      group.appendChild(trigger);

      const shelf = document.createElement('div');
      shelf.className = 'lnb-shelf';
      
      visibleTabs.forEach((tab: string) => {
        if (tab === '부품 마스터') return; // 메뉴바에서 표시 생략
        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 as any;
          state.activeSubTab = tab;
          render();
          onTabChange(tab);
        });
        shelf.appendChild(item);
      });
      group.appendChild(shelf);
      navContainer.appendChild(group);
    });

    // ─── '관리자' 메뉴 별도 추가 (GNB 스타일 - 관리자 역할일 때만 노출) ───
    if (state.currentUserRole === 'admin') {
      const adminGroup = document.createElement('div');
      adminGroup.className = 'nav-group';
      
      const adminTrigger = document.createElement('div');
      adminTrigger.className = 'gnb-trigger';
      adminTrigger.innerHTML = '관리자';
      adminTrigger.style.color = 'var(--text-muted)';
      adminTrigger.style.borderLeft = '1px solid var(--border-color)';
      adminTrigger.style.marginLeft = '1rem';
      adminTrigger.style.paddingLeft = '1.5rem';
      
      adminTrigger.addEventListener('click', () => {
        window.open('/map_editor.html', '_blank');
      });
      
      adminGroup.appendChild(adminTrigger);
      navContainer.appendChild(adminGroup);
    }
  };

  render();
}