"use client"

import Link from "next/link"
import { usePathname } from "next/navigation"
import { Home, Users, User } from "lucide-react"

export function BottomNav() {
  const pathname = usePathname()

  // 管理后台不显示底部导航
  if (pathname.startsWith("/admin")) return null

  const navItems = [
    { href: "/", icon: Home, label: "首页", id: "home" },
    { href: "/match", icon: Users, label: "找伙伴", id: "match" },
    { href: "/my", icon: User, label: "我的", id: "my" },
  ]

  const isActive = (href: string) => {
    if (href === "/") return pathname === "/"
    return pathname.startsWith(href)
  }

  return (
    <nav className="fixed bottom-0 left-0 right-0 z-50 bg-[#0a0a0a]/95 backdrop-blur-xl border-t border-white/5 safe-area-bottom">
      <div className="flex items-center justify-around h-16 max-w-lg mx-auto">
        {navItems.map((item) => {
          const active = isActive(item.href)
          const Icon = item.icon

          return (
            <Link
              key={item.id}
              href={item.href}
              className={`flex flex-col items-center justify-center w-20 h-full transition-colors ${
                active ? "text-[#ff3b5c]" : "text-white/40"
              }`}
            >
              <Icon className={`w-6 h-6 mb-1 ${active ? "stroke-[2.5]" : ""}`} />
              <span className="text-xs font-medium">{item.label}</span>
            </Link>
          )
        })}
      </div>
    </nav>
  )
}