// BottomNav component
const { useContext } = React;

function BottomNav() {
  const { screen, navigate, t } = window.useApp();
  const tabs = [
    { id: 'home', label: t('dashboard'), icon: HomeIcon },
    { id: 'history', label: t('history'), icon: ListIcon },
    { id: 'profile', label: t('profile'), icon: UserIcon },
  ];
  return (
    <nav style={navStyles.nav}>
      {tabs.map(tab => (
        <button
          key={tab.id}
          onClick={() => navigate(tab.id)}
          style={{ ...navStyles.tab, ...(screen === tab.id ? navStyles.tabActive : {}) }}
        >
          <tab.icon size={22} active={screen === tab.id} />
          <span style={navStyles.label}>{tab.label}</span>
        </button>
      ))}
    </nav>
  );
}

function HomeIcon({ size, active }) {
  return (
    <svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke={active ? 'var(--gold)' : 'var(--text-3)'} strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round">
      <path d="M3 9.5L12 3l9 6.5V20a1 1 0 01-1 1H4a1 1 0 01-1-1z"/>
      <path d="M9 21V12h6v9"/>
    </svg>
  );
}
function ListIcon({ size, active }) {
  return (
    <svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke={active ? 'var(--gold)' : 'var(--text-3)'} strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round">
      <rect x="3" y="4" width="18" height="4" rx="1"/>
      <rect x="3" y="10" width="18" height="4" rx="1"/>
      <rect x="3" y="16" width="18" height="4" rx="1"/>
    </svg>
  );
}
function UserIcon({ size, active }) {
  return (
    <svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke={active ? 'var(--gold)' : 'var(--text-3)'} strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round">
      <circle cx="12" cy="8" r="4"/>
      <path d="M4 20c0-4 3.6-7 8-7s8 3 8 7"/>
    </svg>
  );
}

const navStyles = {
  nav: {
    position: 'fixed', bottom: 0, left: 0, right: 0,
    height: 'calc(60px + var(--safe-bottom))',
    background: 'var(--surface)',
    borderTop: '1px solid var(--border)',
    display: 'flex',
    zIndex: 100,
    paddingBottom: 'var(--safe-bottom)',
  },
  tab: {
    flex: 1, display: 'flex', flexDirection: 'column',
    alignItems: 'center', justifyContent: 'center', gap: 2,
    background: 'none', border: 'none', cursor: 'pointer',
    padding: '6px 4px',
  },
  tabActive: {},
  label: { fontSize: 11, color: 'var(--text-3)', fontFamily: 'var(--font)', fontWeight: 500 },
};

Object.assign(window, { BottomNav });