import { useLocation, useNavigate } from "react-router-dom";
import { Home, Gamepad2, History, BarChart2, Users } from "lucide-react";
import { motion } from "framer-motion";

const TABS = [
  { path: "/", label: "Accueil", icon: Home },
  { path: "/jeux", label: "Mes jeux", icon: Gamepad2 },
  { path: "/history", label: "Parties", icon: History },
  { path: "/stats", label: "Stats", icon: BarChart2 },
  { path: "/players", label: "Joueurs", icon: Users },
];

export function BottomNav() {
  const navigate = useNavigate();
  const { pathname } = useLocation();

  const isActive = (path: string) =>
    path === "/" ? pathname === "/" : pathname.startsWith(path);

  return (
    <div className="fixed bottom-0 inset-x-0 z-50 pointer-events-none">
      <nav className="pointer-events-auto mx-auto max-w-md px-4 pb-[max(0.75rem,env(safe-area-inset-bottom))] pt-2">
        <div className="flex items-center justify-around bg-card/80 backdrop-blur-2xl border border-black/5 dark:border-white/10 shadow-lg shadow-black/10 rounded-[1.5rem] px-2 py-1.5">
          {TABS.map((tab) => {
            const active = isActive(tab.path);
            const Icon = tab.icon;
            return (
              <button
                key={tab.path}
                onClick={() => navigate(tab.path)}
                className="relative flex flex-col items-center gap-0.5 px-3 py-1.5 rounded-2xl"
              >
                {active && (
                  <motion.span
                    layoutId="tab-pill"
                    className="absolute inset-0 bg-primary/10 dark:bg-primary/20 rounded-2xl"
                    transition={{ type: "spring", stiffness: 400, damping: 32 }}
                  />
                )}
                <Icon
                  className={`w-[22px] h-[22px] relative z-10 transition-colors ${
                    active ? "text-primary" : "text-muted-foreground"
                  }`}
                  strokeWidth={active ? 2.6 : 2}
                />
                <span
                  className={`text-[10px] font-bold relative z-10 transition-colors ${
                    active ? "text-primary" : "text-muted-foreground"
                  }`}
                >
                  {tab.label}
                </span>
              </button>
            );
          })}
        </div>
      </nav>
    </div>
  );
}
