/* =============================================================
   KASDAP ONE — CUSTOMER APP SHELL + ROUTING
   (Admin lives in a SEPARATE app: Kasdap Admin.html)
============================================================= */
const { useState: useStateApp } = React;

function ModeSwitch() {
  const { mode, setMode, user, userModes } = useStore();
  const allowed = userModes(user);
  if (allowed.length < 2) return null; // single-mode accounts don't need the switch
  return React.createElement('div', { className: 'modeswitch', 'data-at': mode },
    React.createElement('div', { className: 'ms-thumb' }),
    React.createElement('button', { className: mode === 'd2c' ? 'on' : '', onClick: () => setMode('d2c'), disabled: !allowed.includes('d2c') },
      React.createElement(Icon, { name: 'user', size: 15 }), React.createElement('span', { className: 'lbl' }, 'D2C')),
    React.createElement('button', { className: mode === 'b2b' ? 'on' : '', onClick: () => setMode('b2b'), disabled: !allowed.includes('b2b') },
      React.createElement(Icon, { name: 'building', size: 15 }), React.createElement('span', { className: 'lbl' }, 'B2B'))
  );
}

function TopBar() {
  const { user, route, go, theme, toggleTheme, cartDetail, logout, roleMeta, userModes, toast } = useStore();
  const [menu, setMenu] = useStateApp(false);
  const modes = userModes(user);
  const accLabel = modes.length > 1 ? 'B2B + D2C' : (modes[0] === 'b2b' ? roleMeta(user.role).label : 'Retail');
  const nav = [
    { k: 'catalog', label: 'Catalogue', icon: 'pill' },
    { k: 'orders', label: 'My Orders', icon: 'receipt' },
    { k: 'dashboard', label: 'Dashboard', icon: 'grid' },
  ];

  return React.createElement(React.Fragment, null,
    React.createElement('nav', { className: 'topbar' },
      React.createElement('div', { className: 'brand', style: { cursor: 'pointer' }, onClick: () => go('catalog') },
        React.createElement('div', { className: 'brand-mark' }, React.createElement(Icon, { name: 'plus', size: 21 })),
        React.createElement('div', { className: 'brand-txt' },
          React.createElement('div', { className: 'brand-name' }, 'Kasdap', React.createElement('b', null, ' ONE')),
          React.createElement('div', { className: 'brand-sub' }, 'Unified Commerce'))
      ),
      React.createElement('div', { className: 'topnav' },
        nav.map(n => React.createElement('button', { key: n.k, className: route.name === n.k ? 'on' : '', onClick: () => go(n.k) },
          React.createElement(Icon, { name: n.icon, size: 16 }), n.label))
      ),
      React.createElement('div', { className: 'topbar-r' },
        React.createElement(ModeSwitch, null),
        React.createElement('button', { className: 'iconbtn hide-mobile', onClick: () => toast('No new notifications', 'info'), 'aria-label': 'Notifications' },
          React.createElement(Icon, { name: 'bell', size: 18 })),
        React.createElement('button', { className: 'iconbtn hide-mobile', onClick: toggleTheme, 'aria-label': 'Toggle theme' },
          React.createElement(Icon, { name: theme === 'dark' ? 'sun' : 'moon', size: 18 })),
        React.createElement('button', { className: 'iconbtn cart-btn', onClick: () => go('checkout'), 'aria-label': 'Cart' },
          React.createElement(Icon, { name: 'cart', size: 18 }),
          cartDetail.count > 0 && React.createElement('span', { className: 'cart-badge' }, cartDetail.count)),
        React.createElement('div', { className: 'avatar', onClick: () => setMenu(m => !m), title: user.name }, user ? roleMeta(user.role).short : 'GU')
      )
    ),
    menu && React.createElement('div', { className: 'menu-pop', onMouseLeave: () => setMenu(false) },
      React.createElement('div', { className: 'menu-head' },
        React.createElement('div', { className: 'nm' }, user.name),
        React.createElement('div', { className: 'rl' }, accLabel + (user.org ? ' · ' + user.org : ''))),
      React.createElement('button', { className: 'menu-item', onClick: () => { go('dashboard'); setMenu(false); } }, React.createElement(Icon, { name: 'grid', size: 17 }), 'My dashboard'),
      React.createElement('button', { className: 'menu-item', onClick: () => { go('orders'); setMenu(false); } }, React.createElement(Icon, { name: 'receipt', size: 17 }), 'My orders & quotes'),
      React.createElement('button', { className: 'menu-item', onClick: toggleTheme }, React.createElement(Icon, { name: theme === 'dark' ? 'sun' : 'moon', size: 17 }), 'Switch to ' + (theme === 'dark' ? 'light' : 'dark') + ' mode'),
      React.createElement('button', { className: 'menu-item', onClick: () => { window.open('https://wa.me/', '_blank'); setMenu(false); } }, React.createElement(Icon, { name: 'whatsapp', size: 17 }), 'WhatsApp support'),
      React.createElement('div', { className: 'hr', style: { margin: '6px 0' } }),
      React.createElement('button', { className: 'menu-item', style: { color: 'var(--rose)' }, onClick: logout }, React.createElement(Icon, { name: 'logout', size: 17 }), 'Sign out')
    )
  );
}

function BottomNav() {
  const { route, go, cartDetail } = useStore();
  const items = [
    { k: 'catalog', label: 'Shop', icon: 'pill' },
    { k: 'orders', label: 'Orders', icon: 'receipt' },
    { k: 'dashboard', label: 'Home', icon: 'grid' },
    { k: 'checkout', label: 'Cart', icon: 'cart' },
  ];
  return React.createElement('nav', { className: 'botnav' },
    React.createElement('div', { className: 'botnav-in' },
      items.map(it => React.createElement('button', { key: it.k, className: route.name === it.k ? 'on' : '', onClick: () => go(it.k) },
        React.createElement('div', { style: { position: 'relative' } },
          React.createElement(Icon, { name: it.icon, size: 21 }),
          it.k === 'checkout' && cartDetail.count > 0 && React.createElement('span', { className: 'cart-badge', style: { top: -6, right: -8 } }, cartDetail.count)),
        it.label))
    )
  );
}

function Placeholder({ name }) {
  return React.createElement('div', { style: { padding: 60, textAlign: 'center', color: 'var(--text-3)' } },
    React.createElement(Icon, { name: 'flask', size: 40, style: { margin: '0 auto 16px' } }),
    React.createElement('h2', { style: { fontSize: '1.4rem', color: 'var(--text-2)' } }, name + ' — coming up'));
}

function Router() {
  const { route } = useStore();
  switch (route.name) {
    case 'login': return React.createElement(AuthScreen, null);
    case 'catalog': return React.createElement(CatalogScreen, null);
    case 'product': return React.createElement(window.ProductScreen || Placeholder, { name: 'Product', id: route.params.id });
    case 'checkout': return React.createElement(window.CheckoutScreen || Placeholder, { name: 'Checkout' });
    case 'orders': return React.createElement(window.OrdersScreen || Placeholder, { name: 'Orders' });
    case 'order': return React.createElement(window.OrderDetailScreen || Placeholder, { name: 'Order', id: route.params.id });
    case 'dashboard': return React.createElement(window.UserDashboard || Placeholder, { name: 'Dashboard' });
    default: return React.createElement(CatalogScreen, null);
  }
}

function App() {
  const { user, route } = useStore();
  if (!user || route.name === 'login') return React.createElement(React.Fragment, null, React.createElement(AuthScreen, null), React.createElement(Toasts, null));
  return React.createElement('div', { className: 'app' },
    React.createElement(TopBar, null),
    React.createElement('main', null, React.createElement(Router, null)),
    React.createElement(BottomNav, null),
    React.createElement(Toasts, null)
  );
}

function Root() { return React.createElement(StoreProvider, null, React.createElement(App, null)); }

/* boot: detect live backend + hydrate real data, then render */
(async function boot() {
  try { if (window.KasdapAPI) await window.KasdapAPI.boot(); } catch (e) {}
  ReactDOM.createRoot(document.getElementById('root')).render(React.createElement(Root, null));
})();