"use client"

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

function PlanetIcon({ className }: { className?: string }) {
  return (
    <svg className={className} viewBox="0 0 24 24" fill="currentColor">
      <circle cx="12" cy="12" r="8" fill="currentColor" opacity="0.9" />
      <ellipse cx="12" cy="12" rx="11" ry="4" fill="none" stroke="currentColor" strokeWidth="1.5" opacity="0.6" />
      <circle cx="9" cy="10" r="1.5" fill="white" opacity="0.4" />
    </svg>
  )
}

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

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

  const navItems = [
    { href: "/", icon: Home, label: "首页" },
    { href: "/chapters", icon: List, label: "目录" },
    { href: "/match", icon: PlanetIcon, label: "匹配", isCenter: true },
    { href: "/my", icon: User, label: "我的" },
  ]

  return (
    <>
      <nav className="fixed bottom-0 left-0 right-0 z-40 bg-[#1c1c1e]/95 backdrop-blur-xl border-t border-white/5 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
            const Icon = item.icon

            // 中间的匹配按钮特殊处理 - 使用小星球图标
            if (item.isCenter) {
              return (
                <Link key={index} href={item.href} className="flex flex-col items-center py-2 px-6 -mt-4">
                  <div
                    className={`w-14 h-14 rounded-full flex items-center justify-center shadow-lg transition-all ${
                      isActive
                        ? "bg-gradient-to-br from-[#00CED1] to-[#20B2AA] shadow-[#00CED1]/30"
                        : "bg-gradient-to-br from-[#00CED1] to-[#20B2AA] shadow-[#00CED1]/30"
                    }`}
                  >
                    <Icon className="w-7 h-7 text-white" />
                  </div>
                  <span className={`text-xs mt-1 ${isActive ? "text-[#00CED1] font-medium" : "text-gray-500"}`}>
                    {item.label}
                  </span>
                </Link>
              )
            }

            return (
              <Link
                key={index}
                href={item.href}
                className="flex flex-col items-center py-2 px-4 touch-feedback transition-all duration-200"
              >
                <div
                  className={`w-6 h-6 flex items-center justify-center mb-1 transition-colors ${
                    isActive ? "text-[#00CED1]" : "text-gray-500"
                  }`}
                >
                  <Icon className="w-5 h-5" strokeWidth={isActive ? 2 : 1.5} />
                </div>
                <span
                  className={`text-xs transition-colors ${isActive ? "text-[#00CED1] font-medium" : "text-gray-500"}`}
                >
                  {item.label}
                </span>
              </Link>
            )
          })}
        </div>
      </nav>
    </>
  )
}