"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, PhoneCall, 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",
    "/business": "business",
  }
  const selectedKey = pathToKey[pathname] || ""

  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: "business", label: "商务合作", href: "/business" },
    { key: "about", label: "关于我们", href: "/about" },
  ]

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

  return (
    <header className="w-full bg-white shadow-sm border-b border-gray-100 sticky top-0 z-50">
      <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 items-center">
            <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 className="hidden lg:flex items-center ml-10 border-l border-gray-100 pl-10 h-10">
              <div className="flex items-center space-x-3 group">
                <div className="text-blue-600 bg-blue-50 p-2.5 rounded-full transition-transform duration-300 group-hover:scale-110">
                  <PhoneCall size={26} strokeWidth={2.5} />
                </div>
                <div className="flex flex-col justify-center">
                  <span className="text-gray-500 text-base font-bold leading-tight tracking-tight">24小时服务热线</span>
                  <span className="text-blue-600 text-xl font-black leading-tight tracking-tighter">400-666-7001</span>
                </div>
              </div>
            </div>
          </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>

        {/* 移动端服务热线 */}
        <div className="mt-10 pt-8 border-t border-gray-100">
          <div className="flex items-center space-x-4 bg-blue-50/50 p-4 rounded-xl border border-blue-100/50">
            <div className="text-blue-600 bg-white p-3 rounded-full shadow-sm">
              <PhoneCall size={24} strokeWidth={2.5} />
            </div>
            <div className="flex flex-col">
              <span className="text-gray-500 text-xs font-bold leading-tight">24小时服务热线</span>
              <span className="text-blue-600 text-lg font-black leading-tight tracking-tight">400-666-7001</span>
            </div>
          </div>
        </div>
      </Drawer>
    </header>
  )
}

export default Navigation