"use client"

import Link from "next/link"
import { usePathname } from "next/navigation"
import { Home, MessageCircle, User, BookOpen } from "lucide-react"
import { useState } from "react"
import { QRCodeModal } from "./modules/marketing/qr-code-modal"

export function BottomNav() {
  const pathname = usePathname()
  const [showQRModal, setShowQRModal] = useState(false)

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

  const navItems = [
    { href: "/", icon: Home, label: "首页" },
    { href: "/chapters", icon: BookOpen, label: "目录" },
    { action: () => setShowQRModal(true), icon: MessageCircle, label: "派对群" },
    { href: "/my", icon: User, label: "我的" },
  ]

  return (
    <>
      {/* iOS风格底部导航 */}
      <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 = item.href ? pathname === item.href : false
            const Icon = item.icon

            if (item.action) {
              return (
                <button
                  key={index}
                  onClick={item.action}
                  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)]"
                  }`}>
                    <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>
                </button>
              )
            }

            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)]"
                }`}>
                  <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>
      <QRCodeModal isOpen={showQRModal} onClose={() => setShowQRModal(false)} />
    </>
  )
}