"use client"

import Link from "next/link"
import { usePathname } from "next/navigation"
import { Home, Search, Library, User } from "lucide-react"
import { cn } from "@/lib/utils"
import { usePlayer } from "./player-provider"

const AUTH_PAGES = ["/", "/signup", "/forgot-password", "/welcome"]

const navItems = [
  { href: "/home", label: "Accueil", icon: Home },
  { href: "/search", label: "Recherche", icon: Search },
  { href: "/library", label: "Bibliothèque", icon: Library },
  { href: "/profile", label: "Compte", icon: User },
]

export function BottomNav() {
  const pathname = usePathname()
  const { currentTrack } = usePlayer()

  const isAuthPage = AUTH_PAGES.includes(pathname)
  const isAdminPage = pathname.startsWith("/admin")
  const isArtistDashboard = pathname.startsWith("/artist") && !pathname.startsWith("/artist/[")

  if (isAuthPage || isAdminPage || isArtistDashboard) {
    return null
  }

  const hasMiniPlayer = currentTrack && pathname !== "/now-playing"

  return (
    <>
      {/* Spacer for mini player */}
      {hasMiniPlayer && <div className="h-14" />}
      <nav className="fixed bottom-0 left-0 right-0 z-50 border-t border-border bg-background/95 backdrop-blur-lg">
        <div className="mx-auto flex max-w-md items-center justify-around py-2">
          {navItems.map((item) => {
            const isActive = pathname === item.href || (item.href === "/home" && pathname === "/home")
            return (
              <Link
                key={item.href}
                href={item.href}
                className={cn(
                  "flex flex-col items-center gap-1 px-4 py-2 text-xs transition-colors",
                  isActive ? "text-primary" : "text-muted-foreground hover:text-foreground",
                )}
              >
                <item.icon className="h-5 w-5" />
                <span>{item.label}</span>
              </Link>
            )
          })}
        </div>
      </nav>
    </>
  )
}
