// sidebar.jsx — левая навигация

const Sidebar = ({ activeView, onNavigate, refreshKey }) => {
  const [, setTick] = React.useState(0);
  React.useEffect(() => { setTick((n) => n + 1); }, [refreshKey]);

  const activePeople = window.getActivePeople?.() || window.PEOPLE || [];
  const isAdmin = window.KB?.isAdmin?.();

  const publishedTests = (window.TESTS || []).filter((t) => t.status === 'published' || window.KB?.canEditContent?.());
  const navItems = [
    window.KB?.can('navHome') !== false && { id: 'home', label: 'Главная', icon: 'grid' },
    window.KB?.can('navKb') !== false && { id: 'database', label: 'База знаний', icon: 'database' },
    window.KB?.can('navTests') !== false && { id: 'tests', label: 'Тесты', icon: 'quiz', count: publishedTests.length || null },
    window.KB?.can('navOrg') !== false && { id: 'org', label: 'Структура', icon: 'org', count: activePeople.length },
    window.KB?.can('navSettings') !== false && { id: 'settings', label: 'Настройки', icon: 'settings', count: null },
  ].filter(Boolean);

  const unread = window.KB?.unreadNotificationsCount?.() || 0;
  const user = window.KB?.getCurrentUser?.() || window.findPerson(window.KB?.getCurrentUserId?.() || 'p9');

  return (
    <aside className="sidebar">
      <div className="sb-brand">
        <div className="sb-logo">W</div>
        <div className="sb-brand-text">
          <div className="sb-brand-name">База знаний</div>
          <div className="sb-brand-sub">WYSH</div>
        </div>
      </div>

      <div className="sb-section-label">Рабочее пространство</div>
      <nav className="sb-nav">
        {navItems.map((item) => (
          <button
            key={item.id}
            className={`sb-item ${activeView === item.id ? 'active' : ''}`}
            onClick={() => onNavigate(item.id)}
          >
            <Icon name={item.icon} className="sb-item-icon" />
            <span>{item.label}</span>
            {item.count != null && item.count > 0 && (
              <span className="sb-item-count">{item.count}</span>
            )}
          </button>
        ))}
      </nav>

      {unread > 0 && (
        <button type="button" className="sb-notify" onClick={() => onNavigate('settings')}>
          <Icon name="bell" size={14} />
          <span>{unread} нов{unread === 1 ? 'ое уведомление' : unread < 5 ? 'ых уведомления' : 'ых уведомлений'}</span>
        </button>
      )}

      <div className="sb-spacer" />

      <button className="sb-user" type="button" onClick={() => onNavigate('settings')}>
        <div className={`sb-user-avatar avatar ${user?.av || 'av-2'}`}>
          {user?.name?.split(' ').map((n) => n[0]).join('').slice(0, 2) || 'MO'}
        </div>
        <div style={{ flex: 1, minWidth: 0 }}>
          <div className="sb-user-name">{user?.name || 'Мария Орлова'}</div>
          <div className="sb-user-role">
            {user?.workspaceRoleName || user?.role || 'Сотрудник'}
            {isAdmin && ' · admin'}
          </div>
        </div>
        <Icon name="chevronDown" size={14} style={{ color: 'var(--text-3)' }} />
      </button>
    </aside>
  );
};

window.Sidebar = Sidebar;