/* App shell: sidebar (desktop) + topbar + bottom nav (mobile) */

const NAV = [
  { id: 'dashboard', label: 'Dashboard', icon: 'dashboard' },
  { id: 'activity', label: 'Activity', icon: 'history' },
  { id: 'inventory', label: 'Inventory', icon: 'inventory' },
  { id: 'transfers', label: 'Transfers', icon: 'transfer', badge: 2 },
  { id: 'add', label: 'Add asset', icon: 'add' },
  { id: 'vendors', label: 'Vendors', icon: 'vendors' },
  { divider: true },
  { id: 'import', label: 'Import', icon: 'import' },
  { id: 'users', label: 'Users', icon: 'users' },
  { id: 'devices', label: 'Devices', icon: 'devices' },
  { id: 'settings', label: 'Settings', icon: 'settings' },
];

const PAGE_META = {
  dashboard: { title: 'Dashboard', sub: 'Live yard status across all branches' },
  scan:      { title: 'Scan', sub: 'Tap a cylinder tag to log its movement' },
  inventory: { title: 'Inventory', sub: 'Every cylinder, searchable' },
  activity:  { title: 'Activity', sub: 'Who did what, and when' },
  transfers: { title: 'Transfers', sub: 'Move stock between branches' },
  add:       { title: 'Add asset', sub: 'Register a new cylinder & tag' },
  vendors:   { title: 'Vendors & customers', sub: 'Refill partners and dues' },
  users:     { title: 'Users', sub: 'People and their access' },
  devices:   { title: 'Devices', sub: 'Gate portals and handhelds' },
  import:    { title: 'Bulk import', sub: 'Commission cylinders in bulk' },
  settings:  { title: 'Settings', sub: 'Branches, flows, alerts' },
  asset:     { title: 'Cylinder detail', sub: 'Full lifecycle history' },
};

function Sidebar({ route, navigate, collapsed, setCollapsed, user }) {
  return React.createElement('aside', { className: 'sidebar' },
    React.createElement('div', { className: 'sb-head' },
      React.createElement('div', { className: 'sb-logo' }, React.createElement(CylGlyph, { size: 24, color: '#fff' })),
      React.createElement('div', { className: 'sb-wordmark' },
        React.createElement('b', null, 'Cryo Air Fluid'),
        React.createElement('span', null, 'Cylinder Tracking')
      )
    ),
    React.createElement('div', { className: 'sb-scroll' },
      React.createElement('button', { className: 'scan-cta', onClick: () => navigate('scan') },
        React.createElement(Icon, { name: 'scan', size: 20 }), React.createElement('span', null, 'Scan')
      ),
      NAV.map((it, i) =>
        it.divider
          ? React.createElement('div', { key: 'div' + i, style: { height: 1, background: 'var(--border)', margin: '12px 6px' } })
          : React.createElement('a', {
              key: it.id, className: `sb-link ${route === it.id ? 'active' : ''}`,
              onClick: () => navigate(it.id), title: it.label
            },
              React.createElement(Icon, { name: it.icon }),
              React.createElement('span', null, it.label),
              it.badge && React.createElement('span', { className: 'sb-pill' }, it.badge)
            )
      )
    ),
    React.createElement('div', { className: 'sb-foot' },
      React.createElement('div', { className: 'sb-user', onClick: () => navigate('settings') },
        React.createElement('div', { className: 'avatar' }, user.initials),
        React.createElement('div', { className: 'sb-foot-text' },
          React.createElement('b', null, user.name),
          React.createElement('span', null, user.role + ' · ' + user.branch)
        )
      )
    )
  );
}

function Topbar({ route, navigate, theme, toggleTheme, onMenu, openAlerts }) {
  const meta = PAGE_META[route] || { title: 'Cryo Air Fluid', sub: '' };
  return React.createElement('header', { className: 'topbar' },
    React.createElement('button', { className: 'tb-toggle mobile-only', onClick: onMenu, 'aria-label': 'Menu' },
      React.createElement(CylGlyph, { size: 22, color: 'var(--brand)' })),
    React.createElement('div', { className: 'tb-title' },
      React.createElement('b', null, meta.title),
      React.createElement('span', { className: 'desktop-only' }, meta.sub)
    ),
    React.createElement('div', { className: 'tb-spacer' }),
    React.createElement('div', { className: 'tb-search desktop-only', onClick: () => navigate('inventory') },
      React.createElement(Icon, { name: 'search', size: 18 }),
      React.createElement('input', { placeholder: 'Search cylinder, tag, customer…', readOnly: true }),
      React.createElement('kbd', null, '/')
    ),
    React.createElement('button', { className: 'tb-icon-btn', onClick: () => navigate('scan'), title: 'Scan', 'aria-label': 'Scan' },
      React.createElement(Icon, { name: 'scan', size: 20 })),
    React.createElement('button', { className: 'tb-icon-btn', onClick: openAlerts, title: 'Alerts', 'aria-label': 'Alerts' },
      React.createElement(Icon, { name: 'bell', size: 20 }),
      React.createElement('span', { className: 'tb-dot' })),
    React.createElement('button', { className: 'tb-icon-btn', onClick: toggleTheme, title: 'Toggle theme', 'aria-label': 'Toggle theme' },
      React.createElement(Icon, { name: theme === 'dark' ? 'sun' : 'moon', size: 20 }))
  );
}

const BOTTOM = [
  { id: 'dashboard', label: 'Dashboard', icon: 'dashboard' },
  { id: 'inventory', label: 'Inventory', icon: 'inventory' },
  { id: 'scan', label: 'Scan', icon: 'scan', center: true },
  { id: 'transfers', label: 'Transfers', icon: 'transfer' },
  { id: 'activity', label: 'Activity', icon: 'history' },
];

function BottomNav({ route, navigate }) {
  return React.createElement('nav', { className: 'bottomnav' },
    BOTTOM.map(it => it.center
      ? React.createElement('button', { key: it.id, className: 'bn-item bn-scan', onClick: () => navigate(it.id), 'aria-label': 'Scan' },
          React.createElement(Icon, { name: it.icon, size: 28 }))
      : React.createElement('button', { key: it.id, className: `bn-item ${route === it.id ? 'active' : ''}`, onClick: () => navigate(it.id) },
          React.createElement(Icon, { name: it.icon }), React.createElement('span', null, it.label))
    )
  );
}

/* Mobile slide-over menu for admin pages not in bottom nav */
function MobileMenu({ route, navigate, onClose, user, theme, toggleTheme }) {
  return React.createElement('div', { className: 'modal-back', onClick: onClose, style: { alignItems: 'stretch', justifyContent: 'flex-start' } },
    React.createElement('div', { onClick: e => e.stopPropagation(), style: {
      width: 'min(300px, 84vw)', background: 'var(--surface)', height: '100%', borderRight: '1px solid var(--border)',
      display: 'flex', flexDirection: 'column', animation: 'modalIn .25s ease'
    }},
      React.createElement('div', { className: 'sb-head', style: { borderBottom: '1px solid var(--border)' } },
        React.createElement('div', { className: 'sb-logo' }, React.createElement(CylGlyph, { size: 24, color: '#fff' })),
        React.createElement('div', { className: 'sb-wordmark' },
          React.createElement('b', null, 'Cryo Air Fluid'), React.createElement('span', null, 'Cylinder Tracking')),
        React.createElement('button', { className: 'x-btn', onClick: onClose }, React.createElement(Icon, { name: 'x', size: 18 }))
      ),
      React.createElement('div', { style: { flex: 1, overflow: 'auto', padding: '8px 14px' } },
        NAV.map((it, i) => it.divider
          ? React.createElement('div', { key: 'div' + i, style: { height: 1, background: 'var(--border)', margin: '12px 6px' } })
          : React.createElement('a', {
              key: it.id, className: `sb-link ${route === it.id ? 'active' : ''}`,
              onClick: () => { navigate(it.id); onClose(); }
            }, React.createElement(Icon, { name: it.icon }), React.createElement('span', null, it.label),
               it.badge && React.createElement('span', { className: 'sb-pill' }, it.badge)))
      ),
      React.createElement('div', { className: 'sb-foot' },
        React.createElement('button', { className: 'btn btn-block', onClick: toggleTheme },
          React.createElement(Icon, { name: theme === 'dark' ? 'sun' : 'moon', size: 18 }),
          theme === 'dark' ? 'Light mode' : 'Dark mode')
      )
    )
  );
}

Object.assign(window, { Sidebar, Topbar, BottomNav, MobileMenu, NAV, PAGE_META, BOTTOM });