// 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;
  // Email đã nằm cố định ở "Không gian làm việc" → không lặp lại ở mục Đã ghim.
  // App quản trị (adminOnly) ghim → hiện trong nhóm "Quản trị" (users đã có sẵn trong nhóm, bỏ qua tránh lặp).
  const pinnedApps = p.apps.filter(a => a.id !== 'mail' && !a.adminOnly && p.pinned.includes(a.id));
  const pinnedAdminApps = p.apps.filter(a => a.adminOnly && a.id !== 'users' && 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-envelope" label={tt((APPS.find(a => a.id === 'mail') || {}).name)} active={r.name === 'module' && r.module === 'mail'} onClick={() => p.navigate({ name:'module', module:'mail' })} />
        <NavItem icon="bi-check2-square" label={t('nav.tasks')} active={r.name === 'module' && r.module === 'tasks'} count={p.tasks.filter(x => x.status !== 'done').length} onClick={() => p.navigate({ name:'module', module:'tasks' })} />
        <NavItem icon="bi-bell" label={t('nav.notifs')} active={is('notifs')} count={p.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-person-gear" label={tt((APPS.find(a => a.id === 'users') || {}).name)} active={r.name === 'module' && r.module === 'users'} onClick={() => p.navigate({ name:'module', module:'users' })} />
          <NavItem icon="bi-sliders" label={t('nav.adminConsole')} active={is('admin')} onClick={() => p.navigate({ name:'admin' })} />
          {/* Icon đơn sắc (không màu app) — đồng bộ các mục quản trị có sẵn */}
          {pinnedAdminApps.map(a => (
            <NavItem key={a.id} icon={a.icon} label={tt(a.name)} active={r.name === 'module' && a.module ? r.module === a.module : false} onClick={() => p.openApp(a)} />
          ))}
        </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 { t, tt } = useLang();
  // "Cài đặt" tách xuống đáy sidebar (góc trái dưới).
  const mainItems = items.filter(it => it.id !== 'settings');
  const settingsItem = items.find(it => it.id === 'settings');
  // Ứng dụng ghim hiện cả trong module (trừ chính module đang mở & Email — Email đã ở Workspace).
  const pinnedApps = p.apps.filter(a => a.id !== 'mail' && a.module !== app.module && p.pinned.includes(a.id));
  // Nhóm "dạng sổ": item có .children → cha bấm mở/gập, con thụt vào. Cha active khi id trùng hoặc con "all".
  const [openMap, setOpenMap] = React.useState({});
  const parentActive = (it) => active === it.id || active === it.id + ':all';
  const groupActive = (it) => active === it.id || String(active).startsWith(it.id + ':');
  const isOpen = (it) => (it.id in openMap) ? openMap[it.id] : groupActive(it);
  const toggleOpen = (it) => setOpenMap(m => ({ ...m, [it.id]: !isOpen(it) }));
  // --mod-color: highlight tab active theo đúng màu của module.
  return (
    <div className="sidebar module-side" style={{ '--mod-color':app.color }}>
      <button className="back-portal" onClick={() => p.navigate({ name:'dashboard' })}>
        <i className="bi bi-arrow-left"></i><span>{p.t('shell.backPortal')}</span>
      </button>
      {/* khung cụm tác vụ module: nền tint + viền theo màu module (--mod-color) */}
      <div className="module-nav-box">
        <div className="nav-item" 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>
        {mainItems.map(it => it.children ? (
          <div key={it.id} className="nav-collapsible">
            <div className="nav-parent">
              <NavItem icon={it.icon} label={it.label} count={it.count} active={parentActive(it)} onClick={() => onNavigate(it.id)} />
              <button className={'nav-caret' + (isOpen(it) ? ' is-open' : '')} onClick={() => toggleOpen(it)} aria-label="toggle">
                <i className="bi bi-chevron-right"></i>
              </button>
            </div>
            {isOpen(it) && (
              <div className="nav-sub">
                {it.children.map(ch => (
                  <button key={ch.id} className={'nav-item is-sub' + (active === ch.id ? ' is-active' : '')} onClick={() => onNavigate(ch.id)}>
                    <i className={'bi ' + (ch.icon || 'bi-dot')}></i><span>{ch.label}</span>
                    {ch.count != null && <span className="ncount">{ch.count}</span>}
                  </button>
                ))}
              </div>
            )}
          </div>
        ) : (
          <NavItem key={it.id} icon={it.icon} label={it.label} count={it.count} active={active === it.id} onClick={() => onNavigate(it.id)} />
        ))}
      </div>
      {pinnedApps.length > 0 && (
        <div className="nav-group mod-pinned">
          <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>
      )}
      <div className="sidebar-foot">
        {/* Trợ giúp: chung cho mọi module, nằm TRÊN nút Thiết lập. Đọc spec module tương ứng. */}
        <NavItem icon="bi-question-circle" label={t('nav.help')} active={active === 'help'} onClick={() => onNavigate('help')} />
        {settingsItem && (
          <NavItem icon={settingsItem.icon} label={settingsItem.label} count={settingsItem.count} active={active === settingsItem.id} onClick={() => onNavigate(settingsItem.id)} />
        )}
      </div>
    </div>
  );
}

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