// MobileTabBar.jsx — bottom tab bar navigation
const MobileTabBar = ({ route, setRoute, cartCount, user }) => {
  const tabs = [
    { id: 'home',    label: '~/',       icon: '>' },
    { id: 'shop',    label: '~/shop',   icon: '$' },
    { id: 'account', label: '~/acct',   icon: '@' },
    { id: 'cart',    label: null,        icon: null },
  ];

  const handleTab = (id) => {
    if (id === 'account' && !user) {
      setRoute('login');
    } else {
      setRoute(id);
    }
  };

  const isActive = (id) => {
    if (id === 'account') return route === 'account' || route === 'login' || route === 'register';
    if (id === 'shop') return route === 'shop' || route.startsWith('shop:');
    return route === id;
  };

  return (
    <nav style={{
      position: 'fixed', bottom: 0, left: 0, right: 0, zIndex: 50,
      height: 56, background: '#000',
      borderTop: '1px solid rgba(0, 255, 65, 0.25)',
      display: 'flex', alignItems: 'center', justifyContent: 'space-around',
      padding: '0 8px',
      fontFamily: "'JetBrains Mono', monospace",
    }}>
      {tabs.map((tab) => {
        const active = isActive(tab.id);
        const color = active ? '#00FF41' : '#6E6E6E';

        if (tab.id === 'cart') {
          const countStr = String(cartCount || 0).padStart(2, '0');
          return (
            <button
              key={tab.id}
              onClick={() => handleTab('cart')}
              style={{
                flex: 1, display: 'flex', flexDirection: 'column',
                alignItems: 'center', justifyContent: 'center',
                background: 'none', border: 'none',
                cursor: 'pointer', padding: 0,
                minHeight: 44, fontFamily: 'inherit',
                position: 'relative',
              }}
            >
              <span style={{
                fontSize: 16, fontWeight: 800, color,
                letterSpacing: '0.05em',
              }}>
                [{countStr}]
              </span>
              <span style={{
                fontSize: 9, color, letterSpacing: '0.15em',
                marginTop: 2,
              }}>
                CART
              </span>
              {cartCount > 0 && (
                <span style={{
                  position: 'absolute', top: 4, right: '50%',
                  transform: 'translateX(14px)',
                  width: 6, height: 6, borderRadius: '50%',
                  background: '#FF3344',
                  boxShadow: '0 0 4px rgba(255, 51, 68, 0.6)',
                }} />
              )}
            </button>
          );
        }

        return (
          <button
            key={tab.id}
            onClick={() => handleTab(tab.id)}
            style={{
              flex: 1, display: 'flex', flexDirection: 'column',
              alignItems: 'center', justifyContent: 'center',
              background: 'none', border: 'none',
              cursor: 'pointer', padding: 0,
              minHeight: 44, fontFamily: 'inherit',
            }}
          >
            <span style={{
              fontSize: 18, fontWeight: 800, color,
            }}>
              {tab.icon}
            </span>
            <span style={{
              fontSize: 9, color, letterSpacing: '0.15em',
              marginTop: 2,
            }}>
              {tab.label}
            </span>
          </button>
        );
      })}
    </nav>
  );
};

window.MobileTabBar = MobileTabBar;