function Topbar({ onPrint, cartCount }) {
  const { state, dispatch } = useStore();
  const { shop, cashier, currency, view } = state;
  const storedCashier = JSON.parse(localStorage.getItem('pos_cashier') || '{}');
  const isOwner = !storedCashier.pin;
  const tr = (key) => typeof t !== 'undefined' ? t(key) : key;

  const [time, setTime] = React.useState(new Date().toLocaleTimeString('fr-FR', {hour:'2-digit', minute:'2-digit'}));
  React.useEffect(() => {
    const timer = setInterval(() => setTime(new Date().toLocaleTimeString('fr-FR', {hour:'2-digit', minute:'2-digit'})), 30000);
    return () => clearInterval(timer);
  }, []);

  const navItems = [
    { id:'caisse',     icon:'🛒', label:tr('caisse')||'Caisse',       badge: cartCount > 0 },
    { id:'catalogue',  icon:'📦', label:tr('catalogue')||'Catalogue'  },
    { id:'clients',    icon:'👥', label:tr('clients')||'Clients'      },
    { id:'stock',      icon:'📦', label:tr('stocks')||'Stocks'        },
    { id:'dashboard',  icon:'📊', label:tr('dashboard')||'Dashboard'  },
    { id:'historique', icon:'🧾', label:tr('historique')||'Historique' },
    { id:'parametres', icon:'⚙️', label:tr('parametres')||'Paramètres' },
  ];

  function doLogout() {
    ['pos_auth_token','pos_auth_refresh','pos_auth_user','pos_shop','pos_catalog',
     'pos_clients','pos_historique','pos_superviseurs','pos_mouvements','pos_cashier'].forEach(k => localStorage.removeItem(k));
    window.location.href = 'login.html';
  }

  const topbarStyle = {
    background: '#fff',
    borderBottom: '1px solid #e2e8f0',
    display: 'flex',
    flexDirection: 'column',
    flexShrink: 0,
  };

  const row1Style = {
    display: 'flex',
    alignItems: 'center',
    justifyContent: 'space-between',
    padding: '8px 12px',
    gap: 8,
    flexWrap: 'wrap',
  };

  const row2Style = {
    display: 'flex',
    alignItems: 'center',
    padding: '0 8px 6px',
    gap: 4,
    overflowX: 'auto',
    WebkitOverflowScrolling: 'touch',
    scrollbarWidth: 'none',
  };

  return (
    <div style={topbarStyle}>
      {/* Ligne 1 : infos boutique + actions */}
      <div style={row1Style}>
        {/* Gauche : logo + nom */}
        <div style={{display:'flex', alignItems:'center', gap:10, minWidth:0}}>
          <div style={{width:36, height:36, borderRadius:10, background:'linear-gradient(135deg,#2563eb,#3b82f6)', display:'flex', alignItems:'center', justifyContent:'center', fontSize:18, flexShrink:0}}>🧾</div>
          <div style={{minWidth:0}}>
            <div style={{fontFamily:"'Playfair Display',serif", fontSize:15, color:'#1e293b', fontWeight:700, overflow:'hidden', textOverflow:'ellipsis', whiteSpace:'nowrap', maxWidth:150}}>{shop.name||'POS Pro'}</div>
            <div style={{fontFamily:"'DM Mono',monospace", fontSize:10, color:'#94a3b8'}}>{storedCashier.name||cashier?.name||''}</div>
          </div>
        </div>

        {/* Droite : heure + devise + boutons */}
        <div style={{display:'flex', alignItems:'center', gap:6, flexWrap:'wrap', justifyContent:'flex-end'}}>
          <span style={{fontFamily:"'DM Mono',monospace", fontSize:12, color:'#2563eb', fontWeight:600, background:'#eff6ff', padding:'4px 8px', borderRadius:6, border:'1px solid #bfdbfe'}}>{time}</span>
          <span style={{fontFamily:"'DM Mono',monospace", fontSize:12, color:'#16a34a', fontWeight:700, background:'#f0fdf4', padding:'4px 8px', borderRadius:6, border:'1px solid #86efac'}}>{currency.symbol} {currency.code}</span>
          
          <button onClick={onPrint} style={{background:'linear-gradient(135deg,#2563eb,#3b82f6)', color:'#fff', border:'none', borderRadius:8, padding:'6px 10px', fontSize:12, fontWeight:700, cursor:'pointer'}}>🖨</button>
          
          {isOwner && (
            <button onClick={()=>dispatch({type:'FIN_JOURNEE'})} style={{background:'#f1f5f9', color:'#64748b', border:'none', borderRadius:8, padding:'6px 10px', fontSize:12, fontWeight:700, cursor:'pointer'}}>🌙</button>
          )}
          {isOwner && (
            <button onClick={()=>window.location.href='boutiques.html'} style={{background:'#f1f5f9', color:'#64748b', border:'none', borderRadius:8, padding:'6px 10px', fontSize:12, fontWeight:700, cursor:'pointer'}}>🏪</button>
          )}
          <button onClick={()=>window.open('/pricing.html','_blank')} style={{background:'linear-gradient(135deg,#2563eb,#3b82f6)', color:'#fff', border:'none', borderRadius:8, padding:'6px 10px', fontSize:11, fontWeight:700, cursor:'pointer'}}>💳</button>
          <button onClick={()=>window.open('/aide.html','_blank')} style={{background:'#f1f5f9', color:'#64748b', border:'none', borderRadius:8, padding:'6px 10px', fontSize:12, cursor:'pointer'}}>❓</button>
          <button onClick={doLogout} style={{background:'#fff1f2', color:'#dc2626', border:'1px solid #fecaca', borderRadius:8, padding:'6px 10px', fontSize:12, fontWeight:700, cursor:'pointer'}}>🚪</button>
        </div>
      </div>

      {/* Ligne 2 : navigation scrollable */}
      <div style={row2Style}>
        {navItems.map(item => (
          <button key={item.id} onClick={() => dispatch({type:'SET_VIEW', payload:item.id})}
            style={{
              flexShrink: 0,
              display: 'flex',
              alignItems: 'center',
              gap: 4,
              padding: '7px 12px',
              borderRadius: 8,
              border: 'none',
              background: view === item.id ? '#eff6ff' : 'transparent',
              color: view === item.id ? '#2563eb' : '#64748b',
              fontWeight: view === item.id ? 700 : 500,
              fontSize: 12,
              cursor: 'pointer',
              whiteSpace: 'nowrap',
              position: 'relative',
              fontFamily: "'Lato', sans-serif",
            }}>
            <span>{item.icon}</span>
            <span>{item.label}</span>
            {item.badge && cartCount > 0 && (
              <span style={{background:'#2563eb', color:'#fff', borderRadius:10, fontSize:10, padding:'1px 6px', marginLeft:2}}>{cartCount}</span>
            )}
          </button>
        ))}
      </div>
    </div>
  );
}