// TabBar — main tabs. A separate Voice FAB floats above this bar
// (rendered by App, not here), matching the product spec.

const tabbarStyles = {
  wrap: {
    position: 'absolute', left: 14, right: 14, bottom: 38,
    direction: 'rtl',
    zIndex: 100,
  },
  bar: {
    background: 'rgba(25,28,29,0.92)',
    backdropFilter: 'blur(22px) saturate(170%)',
    WebkitBackdropFilter: 'blur(22px) saturate(170%)',
    border: '1px solid rgba(255,255,255,0.10)',
    borderRadius: 999,
    boxShadow: '0 1px 0 rgba(255,255,255,0.08) inset, 0 6px 22px rgba(0,0,0,0.24), 0 18px 48px rgba(0,0,0,0.18)',
    padding: 5,
    display: 'flex', alignItems: 'center', gap: 3,
  },
  tab: {
    minWidth: 0,
    flex: 1,
    display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 2,
    padding: '7px 0 5px',
    borderRadius: 999,
    background: 'transparent', border: 'none',
    color: 'rgba(255,255,255,0.45)',
    font: "500 10px 'Estedad', sans-serif",
    cursor: 'pointer',
    transition: 'background 160ms var(--ease-out), color 160ms var(--ease-out), transform 160ms var(--ease-out)',
  },
  tabActive: {
    background: 'var(--firoozeh)',
    color: '#fff',
    boxShadow: '0 8px 18px rgba(42,157,143,0.28)',
  },
};

function TabBar({ active, onChange }) {
  const { Icons } = window;
  const tabs = [
    { key: 'home',      label: 'خانه',    Icon: Icons.Home },
    { key: 'tasks',     label: 'کارها',   Icon: Icons.CheckCircle },
    { key: 'knowledge', label: 'حافظه',    Icon: Icons.Book },
    { key: 'finance',   label: 'چرتکه',   Icon: Icons.Wallet },
    { key: 'assistant', label: 'دستیار',  Icon: Icons.Chat },
    { key: 'profile',   label: 'من',      Icon: Icons.User },
  ];
  return (
    <div style={tabbarStyles.wrap}>
      <div style={tabbarStyles.bar}>
        {tabs.map(t => {
          const isActive = active === t.key;
          return (
            <button
              key={t.key}
              className="sb-tab-button"
              style={{ ...tabbarStyles.tab, ...(isActive ? tabbarStyles.tabActive : {}) }}
              onClick={() => onChange(t.key)}
              aria-label={t.label}
              aria-current={isActive ? 'page' : undefined}
            >
              <t.Icon size={20} />
              <span style={{ maxWidth: '100%', overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>{t.label}</span>
            </button>
          );
        })}
      </div>
    </div>
  );
}

window.TabBar = TabBar;