import { Bell, ChevronRight, LogOut, Menu, ShieldCheck } from 'lucide-react'
import { useRole } from '../../context'
import type { Role } from '../../types'

const roleLabels: Record<Role, string> = {
  headquarters: '总部管理员',
  station: '分站负责人',
  reporter: '记者',
}

interface TopBarProps {
  pageTitle: string
  onMenuToggle: () => void
}

export function TopBar({ pageTitle, onMenuToggle }: TopBarProps) {
  const { role, identity, isAuthenticated, logout } = useRole()

  const handleLogout = () => {
    if (isAuthenticated) {
      logout()
    }
  }

  return (
    <header className="topbar">
      <button className="icon-button mobile-only" onClick={onMenuToggle} aria-label="打开菜单">
        <Menu size={21} />
      </button>
      <div className="breadcrumb">
        <span>记者站管理</span>
        <ChevronRight size={15} />
        <strong>{pageTitle}</strong>
      </div>
      <div className="top-actions">
        <button className="icon-button notification" aria-label="通知">
          <Bell size={19} />
          <i />
        </button>
        <div className="role-badge">
          <ShieldCheck size={17} />
          <span>{roleLabels[role]}</span>
        </div>
        <div className="user-box">
          <div className="avatar">{identity.name[0]}</div>
          <div>
            <strong>{identity.name}</strong>
            <span>{roleLabels[role]}</span>
          </div>
        </div>
        <button className="icon-button" onClick={handleLogout} aria-label="退出登录" title={isAuthenticated ? '退出登录' : '退出演示'}>
          <LogOut size={17} />
        </button>
      </div>
    </header>
  )
}