import { useNavigate, useLocation } from 'react-router-dom'
import { getUserInfoFromCookie, clearAuthCookies } from '@/utils/cookie'

export default function Header() {
  const navigate = useNavigate()
  const location = useLocation()
  const userInfo = getUserInfoFromCookie()

  // 只在 /cloud 路由下显示用户信息和登出按钮
  const isCloudPage = location.pathname === '/cloud'

  const handleLogout = () => {
    clearAuthCookies()
    localStorage.removeItem('access_token')
    localStorage.removeItem('refresh_token')
    navigate('/login')
  }

  return (
    <header className="h-16 bg-white border-b border-gray-200 flex items-center justify-between px-6">
      <div className="flex items-center space-x-4">
        <i className="fas fa-cloud text-primary text-2xl" style={{ color: '#667eea' }}></i>
        <span className="font-semibold text-gray-900 text-xl">Cloudaloud网盘</span>
      </div>

      {userInfo && isCloudPage && (
        <div className="flex items-center space-x-4">
          <div className="flex items-center space-x-2">
            <i className="fas fa-user text-gray-600"></i>
            <span className="text-sm text-gray-700">你好，{userInfo.username}</span>
            <button
              onClick={handleLogout}
              className="logout-btn rounded-md px-3 py-1.5 text-sm font-medium transition-colors"
              style={{
                background: '#fef2f2',
                color: '#ef4444',
                border: '1px solid #fecaca'
              }}
              onMouseEnter={(e) => {
                e.target.style.background = '#fee2e2'
              }}
              onMouseLeave={(e) => {
                e.target.style.background = '#fef2f2'
              }}
            >
              登出
            </button>
          </div>
        </div>
      )}
    </header>
  )
}