import { Menu } from 'antd';
import { useLocation, useNavigate } from '@tanstack/react-router';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import {
  faChartLine,
  faClipboardList,
  faFunnelDollar,
  faCalendarDays,
  faUsers,
  faBoxesStacked,
  faGear,
  faPercent,
  faFileInvoiceDollar,
} from '@fortawesome/free-solid-svg-icons';
import type { ItemType } from 'antd/es/menu/interface';

/**
 * Sidebar canônica do SAR (260px fixa — brand.md).
 * Itens mockados para Rafael cockpit. Variantes por cockpit virão depois.
 */
export function Sidebar() {
  const navigate = useNavigate();
  const location = useLocation();

  const items: ItemType[] = [
    {
      key: '/',
      icon: <FontAwesomeIcon icon={faChartLine} fixedWidth />,
      label: 'Painel',
    },
    {
      key: '/agenda',
      icon: <FontAwesomeIcon icon={faCalendarDays} fixedWidth />,
      label: 'Agenda e Rotas',
    },
    {
      key: '/clientes',
      icon: <FontAwesomeIcon icon={faUsers} fixedWidth />,
      label: 'Clientes',
    },
    {
      key: '/produtos',
      icon: <FontAwesomeIcon icon={faBoxesStacked} fixedWidth />,
      label: 'Catálogo',
    },
    {
      key: '/funil',
      icon: <FontAwesomeIcon icon={faFunnelDollar} fixedWidth />,
      label: 'Funil de Vendas',
    },
    {
      key: '/pedidos',
      icon: <FontAwesomeIcon icon={faClipboardList} fixedWidth />,
      label: 'Pedidos',
    },
    {
      key: '/comissao',
      icon: <FontAwesomeIcon icon={faPercent} fixedWidth />,
      label: 'Comissão / FLEX',
    },
    {
      type: 'divider',
    },
    {
      key: '/relatorios',
      icon: <FontAwesomeIcon icon={faFileInvoiceDollar} fixedWidth />,
      label: 'Relatórios',
    },
    {
      key: '/configuracoes',
      icon: <FontAwesomeIcon icon={faGear} fixedWidth />,
      label: 'Configurações',
    },
  ];

  return (
    <aside
      style={{
        width: 'var(--layout-sidebar-width)',
        flexShrink: 0,
        height: 'calc(100vh - var(--layout-topbar-height))',
        background: 'var(--bg-surface)',
        borderRight: '1px solid var(--border-subtle)',
        position: 'sticky',
        top: 'var(--layout-topbar-height)',
        overflowY: 'auto',
        padding: 'var(--space-md) var(--space-xs)',
      }}
    >
      <Menu
        mode="inline"
        selectedKeys={[location.pathname]}
        items={items}
        onClick={({ key }) => navigate({ to: key as string })}
        style={{
          border: 'none',
          background: 'transparent',
        }}
      />
    </aside>
  );
}
