import { useLocation, useNavigate } from '@tanstack/react-router';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import {
  faChartLine,
  faClipboardList,
  faClipboardCheck,
  faUsers,
  faAddressCard,
  faBoxesStacked,
  faFileInvoiceDollar,
  faTags,
} from '@fortawesome/free-solid-svg-icons';
import type { IconDefinition } from '@fortawesome/free-solid-svg-icons';
import { authStore } from '../../lib/auth-store';

interface NavItem {
  key: string;
  icon: IconDefinition;
  label: string;
}

function getRole(): string {
  const token = authStore.get();
  if (!token) return 'rep';
  try {
    const payload = JSON.parse(atob(token.split('.')[1] ?? ''));
    return (payload.role as string) ?? 'rep';
  } catch {
    return 'rep';
  }
}

const REP_ITEMS: NavItem[] = [
  { key: '/', icon: faChartLine, label: 'Painel' },
  { key: '/clientes', icon: faAddressCard, label: 'Clientes' },
  { key: '/pedidos', icon: faClipboardList, label: 'Pedidos' },
  { key: '/catalogo', icon: faBoxesStacked, label: 'Catálogo' },
  { key: '/relatorios', icon: faFileInvoiceDollar, label: 'Relatórios' },
];

const SUPERVISOR_ITEMS: NavItem[] = [
  { key: '/', icon: faChartLine, label: 'Painel' },
  { key: '/aprovacoes', icon: faClipboardCheck, label: 'Aprovações' },
  { key: '/pedidos', icon: faClipboardList, label: 'Pedidos' },
  { key: '/clientes', icon: faAddressCard, label: 'Clientes' },
  { key: '/relatorios', icon: faFileInvoiceDollar, label: 'Relatórios' },
];

const GERENTE_ITEMS: NavItem[] = [
  { key: '/ger', icon: faChartLine, label: 'Painel' },
  { key: '/ger/equipe', icon: faUsers, label: 'Equipe' },
  { key: '/clientes', icon: faAddressCard, label: 'Clientes' },
  { key: '/relatorios', icon: faFileInvoiceDollar, label: 'Relatórios' },
  { key: '/ger/politicas', icon: faTags, label: 'Políticas' },
];

function getItems(role: string): NavItem[] {
  if (role === 'manager' || role === 'admin') return GERENTE_ITEMS;
  if (role === 'supervisor') return SUPERVISOR_ITEMS;
  return REP_ITEMS;
}

export function BottomNav() {
  const navigate = useNavigate();
  const location = useLocation();
  const role = getRole();
  const items = getItems(role);

  return (
    <nav
      style={{
        position: 'fixed',
        bottom: 0,
        left: 0,
        right: 0,
        height: 'var(--layout-bottom-nav-height)',
        background: 'var(--bg-surface)',
        borderTop: '1px solid var(--border-subtle)',
        display: 'flex',
        zIndex: 'var(--z-fixed)' as unknown as number,
        boxShadow: '0 -2px 12px rgba(0,0,0,0.06)',
      }}
    >
      {items.map((item) => {
        const isActive =
          item.key === '/' || item.key === '/ger'
            ? location.pathname === item.key
            : location.pathname.startsWith(item.key);
        return (
          <button
            key={item.key}
            onClick={() => void navigate({ to: item.key })}
            style={{
              flex: 1,
              display: 'flex',
              flexDirection: 'column',
              alignItems: 'center',
              justifyContent: 'center',
              gap: 3,
              border: 'none',
              background: 'none',
              cursor: 'pointer',
              padding: '6px 4px',
              color: isActive ? 'var(--jcs-blue)' : 'var(--text-muted)',
              fontSize: 10,
              fontWeight: isActive ? 600 : 400,
              fontFamily: 'var(--font-family-base)',
              transition: 'color var(--duration-fast) var(--easing-standard)',
              WebkitTapHighlightColor: 'transparent',
            }}
          >
            <FontAwesomeIcon icon={item.icon} style={{ fontSize: 20 }} />
            {item.label}
          </button>
        );
      })}
    </nav>
  );
}
