// HIFA OIL Loyalty — App chrome: top bar, bottom nav, sheet, fuel bar

// ── Top app bar ───────────────────────────────────────────────
function AppBar({ variant = 'home', title, currency = 'BA', onMenu, onBack, onCurrency, onSettings, onFav }) {
  const iconBtn = (name, onClick, opts = {}) => (
    <Pressable onClick={onClick} style={{ width: 40, height: 40, display: 'flex',
      alignItems: 'center', justifyContent: 'center', borderRadius: 12 }}>
      <Icon name={name} size={opts.size || 24} color="var(--hifa-gold)" stroke={opts.stroke || 2}
        fill={opts.fill || 'none'} />
    </Pressable>
  );
  return (
    <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between',
      padding: '8px 10px', height: 56, flexShrink: 0,
      background: 'color-mix(in srgb, var(--bg) 82%, transparent)',
      backdropFilter: 'blur(14px)', WebkitBackdropFilter: 'blur(14px)',
      borderBottom: '1px solid var(--border)', position: 'relative', zIndex: 30 }}>
      <div style={{ display: 'flex', alignItems: 'center', gap: 2 }}>
        {variant === 'home'
          ? iconBtn('menu', onMenu, { stroke: 2.4 })
          : iconBtn('chevron-left', onBack, { size: 26, stroke: 2.4 })}
      </div>

      <div style={{ display: 'flex', alignItems: 'center', gap: 8, position: 'absolute',
        left: '50%', transform: 'translateX(-50%)' }}>
        {variant === 'home' ? (
          <Pressable onClick={onCurrency} style={{ display: 'flex', alignItems: 'center', gap: 7,
            padding: '5px 11px', borderRadius: 'var(--r-pill)', background: 'var(--surface-2)',
            border: '1px solid var(--border)' }}>
            <span className="t-label" style={{ color: 'var(--hifa-gold)', fontSize: 12 }}>{currency}</span>
            <span style={{ width: 22, height: 15, borderRadius: 3, overflow: 'hidden', display: 'block',
              background: 'linear-gradient(180deg,#0a4ba0 50%,#ffd200 50%)', position: 'relative' }}>
              <span style={{ position: 'absolute', inset: 0, background:
                'linear-gradient(135deg, transparent 46%, rgba(255,255,255,.25) 46% 54%, transparent 54%)' }} />
            </span>
          </Pressable>
        ) : (
          <span className="t-h3" style={{ color: 'var(--hifa-gold)' }}>{title}</span>
        )}
      </div>

      <div style={{ display: 'flex', alignItems: 'center', gap: 2 }}>
        {iconBtn('settings', onSettings, { stroke: 2 })}
        {iconBtn('star', onFav, { fill: 'var(--hifa-gold)', stroke: 0 })}
      </div>
    </div>
  );
}

// ── Bottom navigation (5 tabs, raised gold center) ────────────
function BottomNav({ active, onChange }) {
  const tabs = [
    { id: 'home', label: 'Početna', icon: 'house' },
    { id: 'nearby', label: 'U blizini', icon: 'locate-fixed' },
    { id: 'card', label: 'Kartica', icon: 'qr-code', center: true },
    { id: 'catalog', label: 'Katalog', icon: 'newspaper' },
    { id: 'profile', label: 'Profil', icon: 'user' },
  ];
  return (
    <div style={{ flexShrink: 0, display: 'flex', alignItems: 'flex-end', justifyContent: 'space-around',
      padding: '8px 8px 30px', background: 'var(--bg-2)', borderTop: '1px solid var(--border)',
      position: 'relative', zIndex: 30 }}>
      {tabs.map(t => {
        const on = active === t.id;
        if (t.center) {
          return (
            <Pressable key={t.id} onClick={() => onChange(t.id)}
              style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 5,
                flex: 1, marginTop: -26 }}>
              <div style={{ width: 60, height: 60, borderRadius: 20, display: 'flex',
                alignItems: 'center', justifyContent: 'center', background: 'var(--hifa-gold-grad)',
                boxShadow: 'var(--shadow-gold)', border: '3px solid var(--bg-2)' }}>
                <Icon name="qr-code" size={28} color="var(--on-gold)" stroke={2.2} />
              </div>
              <span className="t-label" style={{ fontSize: 10, color: on ? 'var(--hifa-gold)' : 'var(--text-3)' }}>{t.label}</span>
            </Pressable>
          );
        }
        return (
          <Pressable key={t.id} onClick={() => onChange(t.id)}
            style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 5, flex: 1, padding: '4px 0' }}>
            <Icon name={t.icon} size={23} color={on ? 'var(--hifa-gold)' : 'var(--text-3)'} stroke={on ? 2.4 : 2} />
            <span className="t-label" style={{ fontSize: 10, color: on ? 'var(--hifa-gold)' : 'var(--text-3)' }}>{t.label}</span>
          </Pressable>
        );
      })}
    </div>
  );
}

// ── Fuel balance bar ──────────────────────────────────────────
function FuelBar({ value, max, big = false }) {
  const pct = Math.min(100, (value / max) * 100);
  return (
    <div style={{ display: 'flex', alignItems: 'center', gap: 10, width: '100%' }}>
      <div style={{ width: big ? 40 : 32, height: big ? 40 : 32, borderRadius: '50%', flexShrink: 0,
        border: '2px solid var(--hifa-amber)', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
        <Icon name="flame" size={big ? 20 : 16} color="var(--hifa-amber)" fill="var(--hifa-amber)" stroke={0} />
      </div>
      <div style={{ flex: 1 }}>
        <div style={{ display: 'flex', alignItems: 'baseline', gap: 6, marginBottom: 6 }}>
          <span className="t-num" style={{ fontSize: big ? 22 : 18, color: 'var(--text)' }}>{fmtL(value)}</span>
          <span className="t-body" style={{ color: 'var(--text-3)', fontSize: 13 }}>/ {max} L</span>
        </div>
        <div style={{ height: 5, borderRadius: 999, background: 'var(--surface-3)', overflow: 'hidden' }}>
          <div style={{ height: '100%', width: pct + '%', borderRadius: 999, background: 'var(--hifa-gold-grad)',
            transition: 'width 1s ease' }} />
        </div>
      </div>
    </div>
  );
}

// ── Bottom sheet / modal ──────────────────────────────────────
function Sheet({ open, onClose, title, children }) {
  return (
    <div style={{ position: 'absolute', inset: 0, zIndex: 80, pointerEvents: open ? 'auto' : 'none' }}>
      <div onClick={onClose} style={{ position: 'absolute', inset: 0, background: 'rgba(0,0,0,0.6)',
        backdropFilter: open ? 'blur(2px)' : 'none', opacity: open ? 1 : 0, transition: 'opacity .25s ease' }} />
      <div style={{ position: 'absolute', left: 0, right: 0, bottom: 0,
        background: 'var(--surface)', borderTopLeftRadius: 'var(--r-sheet)', borderTopRightRadius: 'var(--r-sheet)',
        padding: '12px 20px 30px', boxShadow: 'var(--shadow-pop)', maxHeight: '82%', overflow: 'auto',
        transform: open ? 'translateY(0)' : 'translateY(105%)', transition: 'transform .32s cubic-bezier(.32,.72,0,1)' }}>
        <div style={{ width: 40, height: 4, borderRadius: 999, background: 'var(--border-2)', margin: '0 auto 16px' }} />
        {title && <h3 className="t-h2" style={{ color: 'var(--text)', margin: '0 0 16px' }}>{title}</h3>}
        {children}
      </div>
    </div>
  );
}

Object.assign(window, { AppBar, BottomNav, FuelBar, Sheet });