"use client"

import type React from "react"
import { useState } from "react"
import { Drawer } from "antd"
import Image from "next/image"
import Link from "next/link"
import { usePathname } from "next/navigation"
import { MenuIcon, X } from "lucide-react"

const Navigation: React.FC = () => {
  const pathname = usePathname()
  const [mobileMenuOpen, setMobileMenuOpen] = useState(false)

  const pathToKey: { [key: string]: string } = {
    "/": "home",
    "/products": "products",
    "/solutions": "solutions",
    "/news": "news",
    "/support": "support",
    "/about": "about",
  }
  const selectedKey = pathToKey[pathname] || "home"

  const menuItems = [
    { key: "home", label: "首页", href: "/" },
    { key: "products", label: "产品中心", href: "/products" },
    { key: "solutions", label: "解决方案", href: "/solutions" },
    { key: "news", label: "新闻动态", href: "/news" },
    { key: "support", label: "服务支持", href: "/support" },
    { key: "about", label: "关于我们", href: "/about" },
  ]

  const handleMobileMenuClick = () => {
    setMobileMenuOpen(false)
  }

  return (
    <header className="w-full bg-white shadow-sm border-b border-gray-100">
      <div className="max-w-full mx-auto md:px-20 sm:px-6 px-4">
        <div className="flex justify-between items-center h-18">
          {/* Logo 区域 */}
          <div className="flex items-center">
            <div className="flex items-center space-x-2">
              <Image src={"/assets/logo.png"} width={160} height={80} alt={"logo"}/>
            </div>
          </div>

          {/* 桌面端菜单 */}
          <div className="hidden sm:flex flex-1 justify-end">
            <nav className="flex h-18">
              {menuItems.map((item) => (
                <Link
                  key={item.key}
                  href={item.href}
                  className={`inline-flex items-center justify-center px-8 text-md font-semibold h-full relative transition-colors duration-200 ${
                    selectedKey === item.key
                      ? "text-blue-600 bg-blue-50"
                      : "text-gray-600 hover:text-gray-900"
                  }`}
                >
                  <span className={`relative py-2 ${
                    selectedKey === item.key
                      ? "after:content-[''] after:absolute after:bottom-[-4px] after:left-1/2 after:-translate-x-1/2 after:w-6 after:h-1 after:bg-blue-600 after:rounded-full"
                      : ""
                  }`}>
                    {item.label}
                  </span>
                </Link>
              ))}
            </nav>
          </div>

          {/* 移动端菜单按钮 */}
          <div className="sm:hidden">
            <button
              onClick={() => setMobileMenuOpen(true)}
              className="p-2 rounded-md text-gray-600 hover:text-gray-900 hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-blue-500"
            >
              <MenuIcon size={24}/>
            </button>
          </div>
        </div>
      </div>

      {/* 移动端侧边菜单 */}
      <Drawer
        title="菜单"
        placement="right"
        onClose={() => setMobileMenuOpen(false)}
        open={mobileMenuOpen}
        width={280}
        closeIcon={<X size={20}/>}
      >
        <nav className="flex flex-col space-y-4">
          {menuItems.map((item) => (
            <Link
              key={item.key}
              href={item.href}
              onClick={handleMobileMenuClick}
              style={{ color: selectedKey === item.key ? '#2563eb' : '#374151' }}
              className={`px-4 py-3 rounded-md text-base font-medium ${
                selectedKey === item.key
                  ? "bg-blue-50"
                  : "hover:bg-gray-100"
              }`}
            >
              {item.label}
            </Link>
          ))}
        </nav>
      </Drawer>
    </header>
  )
}

export default Navigation
