// Topbar.jsx — sticky topbar with global search, notifications, dark-mode toggle, profile.

function Topbar({ title, subtitle, onMenu, onToggleTheme, theme, onToggleNotif, notifOpen }) {
  return (
    <header style={{
      height:64, position:'sticky', top:0, zIndex:10, background:'var(--app-surface)',
      borderBottom:'1px solid var(--app-border)', display:'flex', alignItems:'center',
      padding:'0 24px', gap:14,
    }}>
      <button className="btn btn-ghost btn-icon" onClick={onMenu} style={{ display:'none' }} data-mobile-only="true">
        <i data-lucide="menu" style={{ width:18, height:18 }}></i>
      </button>
      <div>
        <div style={{ font:'700 17px/1.1 var(--m-font-sans)', color:'var(--app-text)', letterSpacing:'-.01em' }}>{title}</div>
        <div style={{ font:'500 12px/1 var(--m-font-sans)', color:'var(--app-text-3)', marginTop:6 }}>
          Business Pulse AI · <span style={{ color:'var(--app-text-2)' }}>{subtitle || title}</span>
        </div>
      </div>
      <div style={{ flex:1 }} />
      <div style={{ display:'flex', alignItems:'center', gap:10 }}>
        <div style={{
          height:38, padding:'0 12px', display:'flex', alignItems:'center', gap:8,
          background:'var(--app-surface-2)', border:'1px solid var(--app-border)',
          borderRadius:8, color:'var(--app-text-4)',
          font:'500 13px/1 var(--m-font-sans)', minWidth:280,
        }}>
          <i data-lucide="search" style={{ width:15, height:15, strokeWidth:1.8 }}></i>
          <span>Rechercher clients, produits, commandes…</span>
          <span style={{ marginLeft:'auto', font:'500 11px/1 var(--m-font-mono)', background:'var(--app-surface)', border:'1px solid var(--app-border)', borderRadius:4, padding:'2px 6px', color:'var(--app-text-3)' }}>⌘K</span>
        </div>

        <button className="btn btn-ghost btn-icon" onClick={onToggleNotif} style={{ position:'relative' }} title="Notifications">
          <i data-lucide="bell" style={{ width:16, height:16, strokeWidth:1.8 }}></i>
          <span style={{ position:'absolute', top:6, right:6, width:8, height:8, borderRadius:99, background:'#F8285A', border:'2px solid var(--app-surface)' }}></span>
        </button>
        <button className="btn btn-ghost btn-icon" onClick={onToggleTheme} title={theme==='dark' ? 'Mode clair' : 'Mode sombre'}>
          <i data-lucide={theme==='dark' ? 'sun' : 'moon'} style={{ width:16, height:16, strokeWidth:1.8 }}></i>
        </button>
        <button className="btn btn-ghost btn-icon" title="Aide">
          <i data-lucide="help-circle" style={{ width:16, height:16, strokeWidth:1.8 }}></i>
        </button>

        <div style={{ width:1, height:28, background:'var(--app-border)', margin:'0 4px' }}></div>

        <div style={{ display:'flex', alignItems:'center', gap:10, padding:'4px 4px 4px 10px', borderRadius:999, border:'1px solid var(--app-border)', background:'var(--app-surface-2)' }}>
          <div style={{ display:'flex', flexDirection:'column', alignItems:'flex-end', lineHeight:1 }}>
            <span style={{ font:'700 12px/1 var(--m-font-sans)', color:'var(--app-text)' }}>Anas Bensaïd</span>
            <span style={{ font:'500 10px/1 var(--m-font-sans)', color:'var(--app-text-3)', marginTop:3 }}>Admin</span>
          </div>
          <div className="avatar" style={{ width:32, height:32, background:'linear-gradient(135deg,#C2410C,#D97706)' }}>AB</div>
        </div>
      </div>
    </header>
  );
}

Object.assign(window, { Topbar });