"use client"

import Link from "next/link"
import { usePathname } from "next/navigation"
import { Home, User, Handshake } from "lucide-react"
import { useState } from "react"
import { MatchModal } from "@/components/match-modal"

export function BottomNav() {
  const pathname = usePathname()
  const [showMatch, setShowMatch] = useState(false)

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

  return (
    <>
      {/* iOS风格底部导航 - 只有3个按钮，匹配在当前页面弹窗 */}
      <nav className="fixed bottom-0 left-0 right-0 z-40 bg-black/80 backdrop-blur-xl border-t border-white/[0.06] safe-bottom">
        <div className="flex items-center justify-around py-2 max-w-lg mx-auto">
          {/* 首页 */}
          <Link href="/" className="flex flex-col items-center py-2 px-6 transition-all">
            <Home
              className={`w-5 h-5 mb-0.5 ${pathname === "/" ? "text-[var(--app-brand)]" : "text-white/40"}`}
              strokeWidth={pathname === "/" ? 2.5 : 1.5}
            />
            <span className={`text-[10px] ${pathname === "/" ? "text-[var(--app-brand)]" : "text-white/40"}`}>
              首页
            </span>
          </Link>

          {/* 匹配合作 - 点击弹出弹窗而不是跳转 */}
          <button onClick={() => setShowMatch(true)} className="flex flex-col items-center py-2 px-6 transition-all">
            <Handshake className="w-5 h-5 mb-0.5 text-white/40" strokeWidth={1.5} />
            <span className="text-[10px] text-white/40">匹配</span>
          </button>

          {/* 我的 */}
          <Link href="/my" className="flex flex-col items-center py-2 px-6 transition-all">
            <User
              className={`w-5 h-5 mb-0.5 ${pathname.startsWith("/my") ? "text-[var(--app-brand)]" : "text-white/40"}`}
              strokeWidth={pathname.startsWith("/my") ? 2.5 : 1.5}
            />
            <span className={`text-[10px] ${pathname.startsWith("/my") ? "text-[var(--app-brand)]" : "text-white/40"}`}>
              我的
            </span>
          </Link>
        </div>
      </nav>

      {/* 匹配弹窗 */}
      <MatchModal isOpen={showMatch} onClose={() => setShowMatch(false)} />
    </>
  )
}
