// nav.jsx — Sidebar (desktop) + bottom tab bar (mobile)
(function () {
  const { Icon } = window;

  const NAV = [
    { id: 'dashboard', label: 'Home',     icon: 'grid' },
    { id: 'income',    label: 'Income',   icon: 'incomeNav' },
    { id: 'expenses',  label: 'Expenses', icon: 'expenseNav' },
    { id: 'credits',   label: 'Credits',  icon: 'credits' },
    { id: 'reports',   label: 'Reports',  icon: 'reports' },
    { id: 'settings',  label: 'Settings', icon: 'settings' },
  ];

  function Sidebar({ route, setRoute, user, onLogout }) {
    const initials = user?.initials
      || (user?.name || 'BO').split(' ').map(w => w[0]).join('').slice(0, 2).toUpperCase();
    const displayName = user?.name
      ? user.name.split(' ').slice(0, 2).map((w, i) => i === 1 ? w[0] + '.' : w).join(' ')
      : '—';

    return React.createElement('aside', { className: 'sidebar hide-mobile' }, [
      React.createElement('div', { key: 'logo', className: 'sb-logo' },
        React.createElement('span', { className: 'display logo-text' }, [
          React.createElement('span', { key: 'f' }, 'FIN'),
          React.createElement('span', { key: 'l', style: { color: 'var(--accent-ink)' } }, 'FLOW'),
        ])),
      React.createElement('div', { key: 'rule', className: 'sb-rule' }),
      React.createElement('nav', { key: 'nav', className: 'sb-nav' },
        NAV.map((n) =>
          React.createElement('button', {
            key: n.id,
            className: 'sb-item' + (route === n.id ? ' active' : ''),
            onClick: () => setRoute(n.id),
          }, [
            React.createElement('span', { key: 'b', className: 'sb-bar' }),
            React.createElement(Icon[n.icon], { key: 'i', size: 20,
              stroke: route === n.id ? 'var(--accent-ink)' : 'currentColor' }),
            React.createElement('span', { key: 'l', className: 'sb-label' }, n.label),
          ])
        )),
      React.createElement('div', { key: 'user', className: 'sb-user' }, [
        React.createElement('div', { key: 'av', className: 'sb-avatar' }, initials),
        React.createElement('div', { key: 'meta', className: 'sb-user-meta' }, [
          React.createElement('div', { key: 'n', className: 'sb-user-name' }, displayName),
          React.createElement('div', { key: 's', className: 'sb-sync' }, [
            React.createElement('span', { key: 'd', className: 'sync-dot' }),
            'Synced',
          ]),
        ]),
      ]),
    ]);
  }

  function BottomNav({ route, setRoute }) {
    return React.createElement('nav', { className: 'bottom-nav show-mobile' },
      NAV.map((n) =>
        React.createElement('button', {
          key: n.id,
          className: 'bn-item' + (route === n.id ? ' active' : ''),
          onClick: () => setRoute(n.id),
          'aria-label': n.label,
        }, React.createElement(Icon[n.icon], { size: 24,
          stroke: route === n.id ? 'var(--accent-ink)' : 'var(--text-3)' }))
      ));
  }

  Object.assign(window, { Sidebar, BottomNav });
})();