// sidebar.jsx — the portal's primary navigation (swapped out inside modules).
function NavItem({ icon, label, active, count, onClick }) {
  return (
    <button className={'nav-item' + (active ? ' is-active' : '')} onClick={onClick}>
      <i className={'bi ' + icon}></i><span>{label}</span>
      {count != null && <span className="ncount">{count}</span>}
    </button>
  );
}

function PortalSidebar() {
  const p = usePortal();
  const { t, tt } = useLang();
  const r = p.route;
  const is = (name) => r.name === name;
  const pinnedApps = p.apps.filter(a => p.pinned.includes(a.id));
  return (
    <div className="sidebar">
      <div className="nav-group">
        <div className="nav-label">{t('nav.overview')}</div>
        <NavItem icon="bi-grid-1x2" label={t('nav.dashboard')} active={is('dashboard')} onClick={() => p.navigate({ name:'dashboard' })} />
        <NavItem icon="bi-grid-3x3-gap" label={t('nav.allApps')} active={is('allapps')} onClick={() => p.navigate({ name:'allapps' })} />
      </div>

      <div className="nav-group">
        <div className="nav-label">{t('nav.workspace')}</div>
        <NavItem icon="bi-check2-square" label={t('nav.tasks')} active={is('tasks')} count={TASKS.filter(x => !x.done).length} onClick={() => p.navigate({ name:'tasks' })} />
        <NavItem icon="bi-inboxes" label={t('nav.approvals')} active={is('approvals')} count={APPROVALS.length} onClick={() => p.navigate({ name:'approvals' })} />
        <NavItem icon="bi-bell" label={t('nav.notifs')} active={is('notifs')} count={NOTIFS.filter(n => n.unread).length} onClick={() => p.navigate({ name:'notifs' })} />
      </div>

      {pinnedApps.length > 0 && (
        <div className="nav-group">
          <div className="nav-label">{t('nav.pinned')}</div>
          {pinnedApps.map(a => (
            <button key={a.id} className="nav-item" onClick={() => p.openApp(a)}>
              <i className={'bi ' + a.icon} style={{ color:a.color }}></i><span>{tt(a.name)}</span>
            </button>
          ))}
        </div>
      )}

      {p.role === 'admin' && (
        <div className="nav-group">
          <div className="nav-label">{t('nav.admin')}</div>
          <NavItem icon="bi-sliders" label={t('nav.adminConsole')} active={is('admin')} onClick={() => p.navigate({ name:'admin' })} />
        </div>
      )}

      <div className="sidebar-foot">
        <NavItem icon="bi-gear" label={t('nav.settings')} active={is('settings')} onClick={() => p.navigate({ name:'settings' })} />
        <NavItem icon="bi-question-circle" label={t('nav.help')} active={false} onClick={() => p.toast(p.lang === 'vi' ? 'Trung tâm trợ giúp (demo)' : 'Help center (demo)', 'info')} />
      </div>
    </div>
  );
}

/* Generic module sidebar used by all 3 modules (swap pattern). */
function ModuleSidebar({ app, items, active, onNavigate }) {
  const p = usePortal();
  const { tt } = useLang();
  return (
    <div className="sidebar module-side">
      <button className="back-portal" onClick={() => p.navigate({ name:'dashboard' })}>
        <i className="bi bi-arrow-left"></i><span>{p.t('shell.backPortal')}</span>
      </button>
      <div className="nav-group">
        <div className="nav-item is-active" style={{ pointerEvents:'none', background:'transparent', color:'var(--text)' }}>
          <i className={'bi ' + app.icon} style={{ color:app.color }}></i><span style={{ fontWeight:700 }}>{tt(app.name)}</span>
        </div>
      </div>
      <div className="nav-group">
        {items.map(it => (
          <NavItem key={it.id} icon={it.icon} label={it.label} count={it.count} active={active === it.id} onClick={() => onNavigate(it.id)} />
        ))}
      </div>
    </div>
  );
}

Object.assign(window, { NavItem, PortalSidebar, ModuleSidebar });