"use client"

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

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

  // 在文档页面和管理后台不显示底部导航
  if (pathname.startsWith("/documentation") || pathname.startsWith("/admin")) {
    return null
  }

  const navItems = [
    { href: "/", icon: Home, label: "首页" },
    { href: "/match", emoji: "🤝", label: "匹配合作" },
    { href: "/my", icon: User, label: "我的" },
  ]

  return (
    <>
      {/* iOS风格底部导航 - 只有3个按钮 */}
      <nav className="fixed bottom-0 left-0 right-0 z-40 glass-nav safe-bottom">
        <div className="flex items-center justify-around py-2 max-w-lg mx-auto">
          {navItems.map((item, index) => {
            const isActive = pathname === item.href || (item.href === '/match' && pathname.startsWith('/match'))
            const Icon = item.icon

            return (
              <Link
                key={index}
                href={item.href!}
                className="flex flex-col items-center py-2 px-4 sm:px-6 touch-feedback transition-all duration-200"
              >
                <div className={`w-7 h-7 flex items-center justify-center mb-1 transition-colors ${
                  isActive ? "text-[var(--app-brand)]" : "text-[var(--app-text-tertiary)]"
                }`}>
                  {item.emoji ? (
                    <span className="text-2xl">{item.emoji}</span>
                  ) : (
                    <Icon className="w-6 h-6" strokeWidth={isActive ? 2.5 : 1.5} />
                  )}
                </div>
                <span className={`text-[10px] font-medium transition-colors ${
                  isActive ? "text-[var(--app-brand)]" : "text-[var(--app-text-tertiary)]"
                }`}>
                  {item.label}
                </span>
                {/* 激活指示器 */}
                {isActive && (
                  <div className="absolute -bottom-0.5 w-1 h-1 rounded-full bg-[var(--app-brand)]" />
                )}
              </Link>
            )
          })}
        </div>
      </nav>
    </>
  )
}