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 header = document.querySelector('.main-header') as HTMLElement;
  const headerContainer = document.querySelector('.header-container')!;
  if (!headerContainer) return;

  const render = () => {
    // 1. 헤더 구조 (Vercel Style: Clean Single Row)
    headerContainer.innerHTML = `
      <div class="brand" id="btn-home-logo" style="cursor: pointer;">
        <img src="img/image_92.png" class="main-logo" alt="HM Logo" />
        <h1>한맥자산관리시스템</h1>
      </div>
      
      <nav class="integrated-nav" id="main-nav-list"></nav>

      <div class="header-actions">
        <div class="role-toggle-wrapper">
          <span class="role-label user ${state.currentUserRole === 'user' ? 'active' : ''}">실무자</span>
          <label class="role-toggle">
            <input type="checkbox" id="role-toggle-checkbox" ${state.currentUserRole === 'admin' ? 'checked' : ''}>
            <span class="role-slider"></span>
          </label>
          <span class="role-label admin ${state.currentUserRole === 'admin' ? 'active' : ''}">관리자</span>
        </div>
        <div class="notification-area">
           <button class="icon-btn" title="알림"><i data-lucide="bell" style="width:18px; height:18px;"></i></button>
        </div>
      </div>
    `;

    const navList = document.getElementById('main-nav-list')!;
    
    // 2. GNB 메뉴 렌더링 (Ghost Tab Style)
    Object.keys(MENU_CONFIG).forEach(catKey => {
      const config = MENU_CONFIG[catKey];
      
      let visibleTabs = config.tabs.filter((tab: string) => {
        if (state.currentUserRole === 'admin') return tab === '대시보드';
        return tab !== '대시보드';
      });

      if (state.currentUserRole === 'admin' && catKey === 'hw') {
        visibleTabs = ['대시보드', '관리도구', '실사 승인', '위치지정'];
      }

      if (visibleTabs.length === 0) return;

      visibleTabs.forEach((tab: string) => {
        if (tab === '부품 마스터') return;
        const item = document.createElement('div');
        const isActive = state.activeSubTab === tab;
        item.className = `gnb-trigger ${isActive ? 'active' : ''}`;
        
        const isSubMenu = tab === '실사 승인' || tab === '위치지정';
        if (isSubMenu) {
          item.innerHTML = `<span style="opacity: 0.5; margin-right: 3px; font-family: sans-serif;">↳</span>${tab}`;
          item.style.fontSize = '11px';
          item.style.fontWeight = '500';
          item.style.marginLeft = '6px';
          if (!isActive) {
            item.style.color = 'var(--mute)';
          }
        } else {
          item.textContent = tab;
          item.style.fontSize = 'var(--fs-sm)';
        }
        
        item.addEventListener('click', (e) => {
          e.stopPropagation();
          state.activeCategory = catKey as any;
          if (tab === '관리도구') {
            state.activeSubTab = '실사 승인';
          } else {
            state.activeSubTab = tab;
          }
          render(); 
          onTabChange(state.activeSubTab);
        });
        navList.appendChild(item);
      });
    });

    // 4. 이벤트 바인딩
    document.getElementById('btn-home-logo')?.addEventListener('click', () => location.reload());
    
    const roleToggle = document.getElementById('role-toggle-checkbox') as HTMLInputElement;
    roleToggle?.addEventListener('change', () => {
      state.currentUserRole = roleToggle.checked ? 'admin' : 'user';
      if (state.currentUserRole === 'admin') {
        state.activeCategory = 'hw';
        state.activeSubTab = '대시보드';
      } else {
        state.activeCategory = 'hw';
        state.activeSubTab = '서버';
      }
      render();
      onTabChange(state.activeSubTab);
    });

    // 아이콘 생성
    // @ts-ignore
    if (window.lucide) window.lucide.createIcons();
  };

  render();
}