"use client";

import Link from "next/link";
import { usePathname } from "next/navigation";
import { CheckSquare, CreditCard, UserCircle, LayoutDashboard } from "lucide-react";
import { cn } from "@/lib/utils";
import type { Role } from "@prisma/client";

const MANAGER_TABS = [
  { href: "/dashboard", label: "Home",      icon: LayoutDashboard },
  { href: "/approvals", label: "Approvals", icon: CheckSquare     },
  { href: "/profile",   label: "Profile",   icon: UserCircle      },
];

const ACCOUNTS_TABS = [
  { href: "/dashboard", label: "Home",     icon: LayoutDashboard },
  { href: "/payments",  label: "Payments", icon: CreditCard      },
  { href: "/profile",   label: "Profile",  icon: UserCircle      },
];

function tabsForRole(role: Role) {
  if (role === "ACCOUNTS") return ACCOUNTS_TABS;
  return MANAGER_TABS; // MANAGER, SUPERUSER
}

export function MobileBottomNav({ role }: { role: Role }) {
  const pathname = usePathname();
  const tabs = tabsForRole(role);

  return (
    <nav className="md:hidden flex h-16 shrink-0 items-stretch border-t border-neutral-200 bg-white">
      {tabs.map(({ href, label, icon: Icon }) => {
        const active = pathname === href || pathname.startsWith(href + "/");
        return (
          <Link
            key={href}
            href={href}
            className={cn(
              "flex flex-1 flex-col items-center justify-center gap-0.5 text-xs font-medium transition-colors",
              active ? "text-primary-600" : "text-neutral-500 hover:text-neutral-700"
            )}
          >
            <Icon className={cn("h-5 w-5", active ? "stroke-[2.5]" : "")} />
            {label}
          </Link>
        );
      })}
    </nav>
  );
}