"use client";

import Link from "next/link";
import { usePathname } from "next/navigation";

export function BottomNav() {
  const pathname = usePathname();

  const isHome = pathname === "/dashboard";
  const isExplore = pathname.startsWith("/packages");
  const isWallet = pathname === "/deposit";
  const isProfile = pathname === "/profile";

  const activeColor = "#FED665";
  const inactiveColor = "rgba(255,255,255,0.4)";

  return (
    <nav className="fixed bottom-10 left-1/2 -translate-x-1/2 z-50 w-[calc(100%-40px)] max-w-md">
      <div className="dark-glass-pill rounded-full px-4 h-20 flex justify-around items-center shadow-[0_20px_50px_rgba(0,0,0,0.5)]">
        {/* Home */}
        <Link href="/dashboard" className="flex flex-col items-center justify-center relative w-14 h-14 group">
          <span
            className="material-symbols-outlined text-3xl transition-transform group-active:scale-90"
            style={{ color: isHome ? activeColor : inactiveColor, fontVariationSettings: isHome ? "'FILL' 1" : "'FILL' 0" }}
          >
            home
          </span>
          {isHome && <div className="absolute -bottom-1 w-1 h-1 bg-[#FED665] rounded-full shadow-[0_0_8px_#FED665]" />}
        </Link>

        {/* Explore */}
        <Link href="/packages" className="flex flex-col items-center justify-center w-14 h-14 group">
          <span
            className="material-symbols-outlined text-2xl transition-colors"
            style={{ color: isExplore ? activeColor : inactiveColor, fontVariationSettings: isExplore ? "'FILL' 1" : "'FILL' 0" }}
          >
            explore
          </span>
          {isExplore && <div className="absolute -bottom-1 w-1 h-1 bg-[#FED665] rounded-full shadow-[0_0_8px_#FED665]" />}
        </Link>

        {/* Savings / Deposit */}
        <Link href="/deposit" className="flex flex-col items-center justify-center w-14 h-14 group">
          <span
            className="material-symbols-outlined text-2xl transition-colors"
            style={{ color: isWallet ? activeColor : inactiveColor, fontVariationSettings: isWallet ? "'FILL' 1" : "'FILL' 0" }}
          >
            account_balance_wallet
          </span>
          {isWallet && <div className="absolute -bottom-1 w-1 h-1 bg-[#FED665] rounded-full shadow-[0_0_8px_#FED665]" />}
        </Link>

        {/* Profile */}
        <Link href="/profile" className="flex flex-col items-center justify-center w-14 h-14 group">
          <span
            className="material-symbols-outlined text-2xl transition-colors"
            style={{ color: isProfile ? activeColor : inactiveColor, fontVariationSettings: isProfile ? "'FILL' 1" : "'FILL' 0" }}
          >
            person
          </span>
          {isProfile && <div className="absolute -bottom-1 w-1 h-1 bg-[#FED665] rounded-full shadow-[0_0_8px_#FED665]" />}
        </Link>
      </div>
    </nav>
  );
}