"use client"

import Link from "next/link"
import { usePathname } from "next/navigation"
import { Home, MessageCircle, User } 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")) {
    return null
  }

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

  return (
    <>
      <nav className="fixed bottom-0 left-0 right-0 z-40 bg-[#0f2137]/95 backdrop-blur-md border-t border-gray-700/50">
        <div className="flex items-center justify-around py-3 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-6 text-gray-400 hover:text-[#38bdac] transition-colors"
                >
                  <Icon className="w-6 h-6 mb-1" />
                  <span className="text-xs">{item.label}</span>
                </button>
              )
            }

            return (
              <Link
                key={index}
                href={item.href!}
                className={`flex flex-col items-center py-2 px-6 transition-colors ${
                  isActive ? "text-[#38bdac]" : "text-gray-400 hover:text-white"
                }`}
              >
                <Icon className="w-6 h-6 mb-1" />
                <span className="text-xs">{item.label}</span>
              </Link>
            )
          })}
        </div>
      </nav>
      <QRCodeModal isOpen={showQRModal} onClose={() => setShowQRModal(false)} />
    </>
  )
}