import { Link, useRouterState } from "@tanstack/react-router";
import { Home, FileText, QrCode, Headphones, User } from "lucide-react";

export function BottomNav() {
  const pathname = useRouterState({ select: (s) => s.location.pathname });
  const isActive = (p: string) =>
    p === "/" ? pathname === "/" : pathname.startsWith(p);

  if (pathname.startsWith("/admin")) return null;

  return (
    <nav className="fixed bottom-0 inset-x-0 mx-auto max-w-[480px] bg-card/95 backdrop-blur border-t border-border z-30 pb-[env(safe-area-inset-bottom)]">
      <div className="grid grid-cols-5 relative">
        <NavItem icon={Home} label="Home" to="/" active={isActive("/") && pathname === "/"} />
        <NavItem icon={FileText} label="Statement" to="/statement" active={isActive("/statement")} />
        <div className="flex items-center justify-center">
          <Link
            to="/scan"
            className="h-14 w-14 rounded-full -mt-6 flex items-center justify-center text-primary-foreground shadow-[var(--shadow-elevated)] ring-4 ring-background"
            style={{ background: "var(--gradient-primary)" }}
            aria-label="QR"
          >
            <QrCode className="h-6 w-6" />
          </Link>
        </div>
        <NavItem icon={Headphones} label="Support" to="/support" active={isActive("/support")} />
        <NavItem icon={User} label="Account" to="/account" active={isActive("/account")} />
      </div>
    </nav>
  );
}

function NavItem({
  icon: Icon,
  label,
  to,
  active,
}: {
  icon: any;
  label: string;
  to: string;
  active?: boolean;
}) {
  return (
    <Link to={to}>
      <div
        className={`flex flex-col items-center gap-1 py-2.5 ${
          active ? "text-primary" : "text-muted-foreground"
        }`}
      >
        <Icon className="h-5 w-5" strokeWidth={active ? 2.4 : 2} />
        <span className="text-[10px] font-semibold">{label}</span>
      </div>
    </Link>
  );
}