'use client'
import Link from 'next/link'
import { useState, useRef, useEffect } from 'react'
import { BarChart3, FileText } from 'lucide-react'

const systemMenuItems = [
  { path: '/users', label: '用户管理' },
  { path: '/roles', label: '角色权限' },
  { path: '/logs', label: '操作日志' },
  { path: '/settings', label: '系统设置' },
]

export function Header() {
  const [open, setOpen] = useState(false)
  const menuRef = useRef<HTMLDivElement>(null)

  useEffect(() => {
    const handler = (e: MouseEvent) => {
      if (menuRef.current && !menuRef.current.contains(e.target as Node)) setOpen(false)
    }
    document.addEventListener('mousedown', handler)
    return () => document.removeEventListener('mousedown', handler)
  }, [])

  return (
    <header className="h-14 flex items-center justify-between px-6 flex-shrink-0" style={{ backgroundColor: '#fff', borderBottom: '1px solid #e8e8e8' }}>
      <div className="flex items-center gap-2">
        <h1 className="text-base font-semibold" style={{ color: '#1a1a1a' }}>地空业务支撑平台——生产管理子系统</h1>
      </div>
      <div className="flex items-center gap-4">
        <Link href="/reports" className="text-gray-500 hover:text-gray-900 transition-colors" title="数据统计"><BarChart3 size={18} /></Link>
        <Link href="/cost-reports" className="text-gray-500 hover:text-gray-900 transition-colors" title="运营报告"><FileText size={18} /></Link>
        <div className="w-px h-5 bg-gray-200" />
        <div ref={menuRef} className="relative">
          <button onClick={() => setOpen(!open)} className="flex items-center gap-2 cursor-pointer">
            <span className="text-sm" style={{ color: '#1a1a1a' }}>Super Admin</span>
            <span className="px-2 py-0.5 rounded text-xs text-white" style={{ backgroundColor: '#4a7c59' }}>管理员</span>
          </button>
          {open && (
            <div className="absolute right-0 top-10 w-36 rounded shadow-lg py-1 z-50" style={{ backgroundColor: '#fff', border: '1px solid #e8e8e8' }}>
              {systemMenuItems.map(item => (
                <Link key={item.path} href={item.path} onClick={() => setOpen(false)} className="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-50 transition-colors">{item.label}</Link>
              ))}
              <div style={{ borderTop: '1px solid #F0F0F0' }} />
              <button className="block w-full text-left px-4 py-2 text-sm" style={{ color: '#FF4D4F' }}>退出</button>
            </div>
          )}
        </div>
      </div>
    </header>
  )
}
