/* HTD App Shell — Program 2 (status bar, header, command tabs) */
(function () {
  const { HTDIcon: Icon, HTDStatusGlyphs: StatusGlyphs } = window;

  function StatusBar() {
    return React.createElement('div', { className: 'statusbar' }, [
      React.createElement('div', { key: 't', className: 'sb-time' }, '9:41'),
      React.createElement('div', { key: 'n', className: 'notch' }),
      React.createElement(StatusGlyphs, { key: 'g' }),
    ]);
  }

  // header: variant 'wordmark' (HTD center + menu/compass/bell) or 'title'
  function AppBar({ variant = 'title', title, left = 'menu', onLeft, right = ['bell'], onAI, onSettings }) {
    const toastFor = { bell: 'NO NEW ALERTS', share: 'LINK COPIED', more: 'MORE OPTIONS · DEMO',
      search: 'SEARCH SHIPS IN BETA', spark: 'AI MEMORY · SYNCED', menu: 'COMMAND MENU · DEMO' };
    const fallback = (r) => () => window.HTDToast && window.HTDToast(toastFor[r] || 'DEMO');
    const leftBtn = left === 'back'
      ? React.createElement('button', { className: 'iconbtn', onClick: onLeft, 'aria-label': 'Back' }, React.createElement(Icon, { name: 'back', size: 22 }))
      : React.createElement('button', { className: 'iconbtn', onClick: onLeft || fallback('menu'), 'aria-label': 'Menu' }, React.createElement(Icon, { name: 'menu', size: 22 }));

    const rightBtns = right.map((r, i) =>
      React.createElement('button', {
        key: i, className: 'iconbtn',
        onClick: r === 'compass' ? onAI : r === 'settings' ? onSettings : fallback(r),
        'aria-label': r,
      }, React.createElement(Icon, { name: r, size: 21 })));

    return React.createElement('div', { className: 'appbar' }, [
      React.createElement('div', { key: 'l', className: 'appbar-side' }, leftBtn),
      React.createElement('div', {
        key: 'c',
        className: 'appbar-title' + (variant === 'wordmark' ? ' wordmark' : ''),
      }, title),
      React.createElement('div', { key: 'r', className: 'appbar-side' }, rightBtns),
    ]);
  }

  const TABS = [
    { id: 'home', label: 'TODAY', icon: 'home' },
    { id: 'mission', label: 'CHALLENGES', icon: 'trophy' },
    { id: 'feed', label: 'FEED', icon: 'feed' },
    { id: 'coach', label: 'COACH', icon: 'compass' },
    { id: 'profile', label: 'PROFILE', icon: 'profile' },
  ];

  function BottomTabs({ active, onChange }) {
    return React.createElement('nav', { className: 'tabbar' },
      TABS.map(t => React.createElement('button', {
        key: t.id,
        className: 'tab' + (active === t.id ? ' active' : ''),
        onClick: () => onChange(t.id),
        'aria-label': t.label,
        'aria-current': active === t.id ? 'page' : undefined,
      }, [
        React.createElement(Icon, { key: 'i', name: t.icon, size: 22, stroke: active === t.id ? 1.9 : 1.6 }),
        React.createElement('span', { key: 'l', className: 'tab-label' }, t.label),
      ])));
  }

  window.HTDShell = { StatusBar, AppBar, BottomTabs, TABS };
})();