"use client"

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

export function BottomNav() {
  const pathname = usePathname()
  const [matchEnabled, setMatchEnabled] = useState(false) // 默认隐藏，等配置加载后再显示
  const [configLoaded, setConfigLoaded] = useState(false) // 配置是否已加载

  // 加载功能配置（必须在所有条件判断之前）
  useEffect(() => {
    const loadConfig = async () => {
      try {
        const res = await fetch('/api/db/config')
        const data = await res.json()
        if (data.features) {
          // 根据配置设置是否显示找伙伴按钮
          setMatchEnabled(data.features.matchEnabled === true)
        }
      } catch (e) {
        console.log('Load feature config error:', e)
        // 加载失败时，默认不显示找伙伴按钮
        setMatchEnabled(false)
      } finally {
        setConfigLoaded(true)
      }
    }
    loadConfig()
  }, [])

  // 在文档页面、管理后台、阅读页面和关于页面不显示底部导航（必须在所有 hooks 之后）
  if (
    pathname?.startsWith("/view/documentation") ||
    pathname?.startsWith("/admin") ||
    pathname?.startsWith("/view/read") ||
    pathname?.startsWith("/view/about")
  ) {
    return null
  }

  const navItems = [
    { href: "/view", icon: Home, label: "首页" },
    { href: "/view/chapters", icon: List, label: "目录" },
    ...(matchEnabled ? [{ href: "/view/match", icon: Users, label: "找伙伴", isCenter: true }] : []),
    { href: "/view/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>
    </>
  )
}