import React from 'react'
import { useStore } from '../state/store'
import { NotificationBell } from './notifications/NotificationBell'

export function Topbar(){
  const { auth, setAuth, ui, setUi } = useStore()

  function toggleMic(){
    const will = !auth.mic
    const next = { ...auth, mic: will }
    setAuth(next); localStorage.setItem('chb_auth', JSON.stringify(next))
    setUi(u=>({...u, toast: will ? 'Microphone enabled' : 'Microphone disabled'}))
  }

  function logout(){
    setAuth({ token:'', role:'', name:'', nickname:'', mic:false })
    localStorage.removeItem('chb_auth')
    window.location.href = '/login'
  }

  return (
    <div className="topbar">
      <div className="pill">CHB • Universal Brain</div>
      <div className="top-actions">
        <button className="btn" onClick={toggleMic} title="Mic permission">
          {auth.mic ? '🎙️ On' : '🎤 Off'}
        </button>
        <NotificationBell/>
        <div className="pill">{auth.role || 'user'} · {auth.name || 'guest'}</div>
        <button className="btn" onClick={logout}>Logout</button>
      </div>
    </div>
  )
}