// BottomNav.jsx — sticky patient quick nav (#triage · #directory · #smile-mentors · #marketplace)
const { useEffect } = React;

const BOTTOM_NAV_ITEMS = [
  { screen: 'triage', label: 'Triage', icon: 'tooth' },
  { screen: 'directory', label: 'Find', icon: 'pin' },
  { screen: 'smile-mentors', label: 'Jobs', icon: 'briefcase' },
  { screen: 'marketplace', label: 'Shop', icon: 'cart' },
];

const BOTTOM_NAV_SCREENS = new Set([
  'landing', 'modern', 'chooser', 'triage', 'directory', 'snapshot',
  'practice-detail', 'smile-mentors', 'marketplace', 'jobs', 'jobs-post', 'ce-hub',
  'industry', 'other', 'press', 'investor', 'educator', 'researcher',
]);

const SCREEN_ALIASES = {
  jobs: 'smile-mentors',
  'jobs-post': 'smile-mentors',
  'ce-hub': 'smile-mentors',
  modern: 'landing',
  chooser: 'landing',
};

function BottomNav({ screen, go }) {
  const visible = BOTTOM_NAV_SCREENS.has(screen);
  const activeKey = SCREEN_ALIASES[screen] || screen;

  useEffect(() => {
    const root = document.querySelector('.app.has-bottom-nav-target') || document.getElementById('app');
    if (!root) return undefined;
    if (visible) root.classList.add('has-bottom-nav');
    else root.classList.remove('has-bottom-nav');
    return () => root.classList.remove('has-bottom-nav');
  }, [visible]);

  if (!visible || !go) return null;

  const nav = (target) => (e) => {
    e.preventDefault();
    go(target);
  };

  return (
    <nav className="td-bottom-nav" aria-label="Patient quick navigation">
      {BOTTOM_NAV_ITEMS.map((item) => {
        const isActive = activeKey === item.screen
          || (item.screen === 'smile-mentors' && (screen === 'jobs' || screen === 'ce-hub' || screen === 'jobs-post'));
        return (
          <button
            key={item.screen}
            type="button"
            className={isActive ? 'is-active' : ''}
            onClick={nav(item.screen)}
            aria-label={item.label}
            aria-current={isActive ? 'page' : undefined}
          >
            {window.FlatIcon && window.ICONS && window.ICONS[item.icon]
              ? React.createElement(window.FlatIcon, { name: item.icon, size: 20 })
              : null}
            <span>{item.label}</span>
          </button>
        );
      })}
    </nav>
  );
}

Object.assign(window, { BottomNav, BOTTOM_NAV_SCREENS, BOTTOM_NAV_ITEMS });