// Bottom tab bar — persistent on idle screens
// Tabs (RTL, leading edge = right):
//   home    الرئيسية      rightmost
//   earnings الأرباح
//   wallet   المحفظة
//   profile  حسابي         leftmost
//
// Hidden on active-order, incoming alert, cash, completed.

const TABS = [
  { id: 'home',     label: 'الرئيسية', icon: 'home-solid',     iconOutline: 'home-outline' },
  { id: 'orders',   label: 'الطلبات',  icon: 'list-solid',     iconOutline: 'list-outline' },
  { id: 'earnings', label: 'الأرباح',  icon: 'chart-solid',    iconOutline: 'chart-outline' },
  { id: 'wallet',   label: 'المحفظة',  icon: 'wallet-solid',   iconOutline: 'wallet-outline' },
  { id: 'profile',  label: 'حسابي',    icon: 'user-solid',     iconOutline: 'user-outline' },
];

// Inline SVG tab icons — solid + outline pair
function TabIcon({ name, size = 26, color = 'currentColor', solid }) {
  const s = { width: size, height: size, viewBox: '0 0 24 24' };
  if (name === 'list') {
    return solid
      ? <svg {...s} fill={color}><rect x="3" y="5" width="18" height="3" rx="1"/><rect x="3" y="10.5" width="18" height="3" rx="1"/><rect x="3" y="16" width="18" height="3" rx="1"/></svg>
      : <svg {...s} fill="none" stroke={color} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><line x1="4" y1="6.5" x2="20" y2="6.5"/><line x1="4" y1="12" x2="20" y2="12"/><line x1="4" y1="17.5" x2="20" y2="17.5"/></svg>;
  }
  if (name === 'home') {
    return solid
      ? <svg {...s} fill={color}><path d="M12 3L2 12h3v8h6v-6h2v6h6v-8h3L12 3z"/></svg>
      : <svg {...s} fill="none" stroke={color} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M3 12l9-9 9 9"/><path d="M5 10v10h5v-6h4v6h5V10"/></svg>;
  }
  if (name === 'chart') {
    return solid
      ? <svg {...s} fill={color}><path d="M3 13h4v8H3zm7-6h4v14h-4zm7-4h4v18h-4z"/></svg>
      : <svg {...s} fill="none" stroke={color} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><rect x="3" y="13" width="4" height="8"/><rect x="10" y="7" width="4" height="14"/><rect x="17" y="3" width="4" height="18"/></svg>;
  }
  if (name === 'wallet') {
    return solid
      ? <svg {...s} fill={color}><path d="M21 7H5V5h14V3H5a2 2 0 00-2 2v14a2 2 0 002 2h16a2 2 0 002-2V9a2 2 0 00-2-2zm-3 8a2 2 0 110-4 2 2 0 010 4z"/></svg>
      : <svg {...s} fill="none" stroke={color} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M3 7v12a2 2 0 002 2h16a2 2 0 002-2V9a2 2 0 00-2-2H5a2 2 0 01-2-2 2 2 0 012-2h14"/><circle cx="18" cy="13" r="1.5" fill={color} stroke="none"/></svg>;
  }
  if (name === 'user') {
    return solid
      ? <svg {...s} fill={color}><circle cx="12" cy="8" r="4"/><path d="M4 21c0-4 4-7 8-7s8 3 8 7"/></svg>
      : <svg {...s} fill="none" stroke={color} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><circle cx="12" cy="8" r="4"/><path d="M4 21c0-4 4-7 8-7s8 3 8 7"/></svg>;
  }
  return null;
}

// ─────────────────────────────────────────────────────────────
// TabBar — 64px tall, RTL so home tab is on the right
// ─────────────────────────────────────────────────────────────
function TabBar({ active, onChange }) {
  return (
    <div style={{
      position: 'absolute', insetInline: 0, bottom: 0, zIndex: 25,
      background: 'var(--surface)',
      borderTop: '1px solid var(--line)',
      paddingBottom: 18, // home indicator clearance
      paddingTop: 6,
      display: 'flex', flexDirection: 'row',
      boxShadow: '0 -1px 0 var(--line), 0 -6px 18px rgba(15,23,42,0.04)',
    }}>
      {TABS.map((t) => {
        const isActive = active === t.id;
        const iconName = t.icon.replace('-solid','').replace('-outline','');
        return (
          <button key={t.id} className="tap" onClick={() => onChange(t.id)} style={{
            flex: 1, background: 'transparent', border: 'none',
            display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 2,
            padding: '8px 0 6px',
            color: isActive ? 'var(--primary)' : 'var(--text-2)',
            fontFamily: 'inherit', cursor: 'pointer',
          }}>
            <TabIcon name={iconName} size={26} color={isActive ? 'var(--primary)' : 'var(--text-2)'} solid={isActive} />
            <span style={{
              fontSize: 11, fontWeight: isActive ? 800 : 600,
              color: isActive ? 'var(--primary)' : 'var(--text-2)',
            }}>{t.label}</span>
            {isActive && (
              <div style={{
                position: 'absolute', top: 0, height: 3, width: 28, borderRadius: 999,
                background: 'var(--primary)',
              }} />
            )}
          </button>
        );
      })}
    </div>
  );
}

// ─────────────────────────────────────────────────────────────
// AppTopBar — idle screens. Avatar on right (RTL leading), bell on left.
// ─────────────────────────────────────────────────────────────
function AppTopBar({ title, online, badge = 0 }) {
  return (
    <div style={{
      position: 'absolute', top: 0, left: 0, right: 0, zIndex: 22,
      padding: '54px 14px 10px',
      display: 'flex', alignItems: 'center', justifyContent: 'space-between',
      pointerEvents: 'none',
    }}>
      {/* Avatar (leading = right in RTL) */}
      <div style={{ display: 'flex', alignItems: 'center', gap: 10, pointerEvents: 'auto' }}>
        <div style={{
          width: 38, height: 38, borderRadius: 999,
          background: 'var(--primary)', color: '#fff',
          display: 'grid', placeItems: 'center',
          fontWeight: 800, fontSize: 15,
          border: '2px solid var(--surface)',
          boxShadow: '0 4px 12px rgba(15,23,42,0.10)',
          position: 'relative',
        }}>
          م
          {/* online dot on avatar */}
          <span style={{
            position: 'absolute', bottom: -2, left: -2,
            width: 12, height: 12, borderRadius: 999,
            background: online ? 'var(--success)' : 'var(--text-3)',
            border: '2px solid var(--surface)',
          }} />
        </div>
        {title && (
          <div>
            <div style={{ fontSize: 12, color: 'var(--text-2)', fontWeight: 600 }}>أهلاً،</div>
            <div style={{ fontSize: 15, color: 'var(--text)', fontWeight: 800 }}>{title}</div>
          </div>
        )}
      </div>

      {/* Bell (trailing = left in RTL) */}
      <button className="tap" style={{
        width: 42, height: 42, borderRadius: 999,
        background: 'var(--surface)', color: 'var(--text)',
        border: '1px solid var(--line)',
        display: 'grid', placeItems: 'center',
        boxShadow: '0 4px 12px rgba(15,23,42,0.06)',
        pointerEvents: 'auto', position: 'relative',
      }}>
        <Icon name="bell" size={20} color="var(--text)" />
        {badge > 0 && (
          <span style={{
            position: 'absolute', top: 4, right: 4,
            minWidth: 16, height: 16, borderRadius: 999,
            background: 'var(--danger)', color: '#fff',
            fontSize: 10, fontWeight: 800,
            display: 'grid', placeItems: 'center',
            padding: '0 4px',
            border: '2px solid var(--surface)',
          }}>{badge}</span>
        )}
      </button>
    </div>
  );
}

Object.assign(window, { TabBar, AppTopBar, TabIcon });