import * as React from 'react';
import styles from './SideNav.module.scss';
import { Icon } from '../../shared/ui/Icon/Icon';
import { IconName } from '../../shared/ui/Icon/iconNames';
import { NavSection } from '../../shared/routing';

interface INavItem {
  id: NavSection;
  title: string;
  icon: IconName;
}

// Порядок неслучаен: сверху действие (создать), затем три очереди — то, что
// ждёт пользователя прямо сейчас, — и только потом архив и поиск.
const ITEMS: INavItem[] = [
  { id: 'new', title: 'Новая заявка', icon: 'plus' },
  { id: 'approvals', title: 'На согласовании', icon: 'user-check' },
  { id: 'execution', title: 'На исполнении', icon: 'helmet' },
  { id: 'rework', title: 'Доработка', icon: 'edit' },
  { id: 'own', title: 'Мои заявки', icon: 'clipboard' },
  { id: 'search', title: 'Поиск', icon: 'search' },
];

interface ISideNavProps {
  activeId: NavSection;
  onChange: (id: NavSection) => void;
  /** Счётчики очередей: сколько заявок ждёт пользователя в каждом разделе. */
  counts?: Partial<Record<NavSection, number>>;
  collapsed: boolean;
  onToggleCollapsed: () => void;
}

// Тёмный боковой рейл портала на всю высоту: бренд сверху, разделы снизу.
// Сворачивается до узкой полосы с одними иконками.
export const SideNav: React.FC<ISideNavProps> = ({
  activeId,
  onChange,
  counts,
  collapsed,
  onToggleCollapsed,
}) => {
  const navClasses = [styles.nav, collapsed ? styles.navCollapsed : ''].filter(Boolean).join(' ');

  return (
    <nav className={navClasses} aria-label="Разделы портала">
      <div className={styles.head}>
        <div className={styles.brand}>
          {!collapsed && <span className={styles.brandText}>Портал заявок</span>}
        </div>
        <button
          type="button"
          className={styles.toggle}
          onClick={onToggleCollapsed}
          aria-label={collapsed ? 'Развернуть меню' : 'Свернуть меню'}
          title={collapsed ? 'Развернуть меню' : 'Свернуть меню'}
        >
          <Icon name={collapsed ? 'chevron-right' : 'chevron-left'} size="sm" />
        </button>
      </div>

      <div className={styles.items}>
        {ITEMS.map((item) => {
          const isActive = item.id === activeId;
          const itemClasses = [styles.item, isActive ? styles.itemActive : ''].filter(Boolean).join(' ');
          const count = counts?.[item.id];
          const showCount = !!count;

          return (
            <button
              key={item.id}
              type="button"
              className={itemClasses}
              aria-current={isActive ? 'page' : undefined}
              onClick={() => onChange(item.id)}
              title={collapsed ? item.title : undefined}
            >
              <span className={styles.itemIcon}>
                <Icon name={item.icon} size="sm" />
              </span>
              {!collapsed && <span className={styles.itemTitle}>{item.title}</span>}
              {showCount && <span className={styles.badge}>{count}</span>}
            </button>
          );
        })}
      </div>
    </nav>
  );
};