import { NavLink } from "react-router-dom";
import { useQuery } from "@tanstack/react-query";
import { fetchWorkflowTasks } from "../../api/workflow";
import { useAuth } from "../../auth/AuthContext";
import { hasAnyPermission } from "../../auth/permissions";
import {
  MOBILE_APPROVAL_PERMISSIONS,
  MOBILE_NAV_ITEMS,
} from "../../features/mobile/navigation";
import { cn } from "../../lib/utils";

function resolveBadgeLabel(count: number) {
  if (count > 99) {
    return "99+";
  }
  return String(count);
}

export function MobileBottomNav() {
  const { permissions } = useAuth();
  const canAccessApprovals = hasAnyPermission(permissions, [...MOBILE_APPROVAL_PERMISSIONS]);

  const pendingCountQuery = useQuery({
    enabled: canAccessApprovals,
    queryKey: ["mobile", "workflow", "pending-count"],
    queryFn: async () => {
      const response = await fetchWorkflowTasks({ status: "pending", page: 1, pageSize: 1 });
      return response.total;
    },
    refetchInterval: 30_000,
  });

  const pendingCount = pendingCountQuery.data ?? 0;

  return (
    <nav className="z-20 shrink-0 border-t border-zinc-200 bg-white/95 px-2 pb-[max(0.5rem,env(safe-area-inset-bottom))] pt-2 shadow-[0_-8px_24px_rgba(15,23,42,0.08)] backdrop-blur md:hidden">
      <div className="grid grid-cols-4 gap-2">
        {MOBILE_NAV_ITEMS.map((item) => {
          const disabled = item.anyOf ? !hasAnyPermission(permissions, [...item.anyOf]) : false;
          const badge = item.key === "approvals" && pendingCount > 0 ? resolveBadgeLabel(pendingCount) : null;

          if (disabled) {
            return (
              <button
                key={item.key}
                type="button"
                data-testid={`mobile-nav-${item.key}`}
                className="touch-target flex flex-col items-center justify-center gap-1 rounded-2xl px-2 py-2 text-xs font-medium text-zinc-400"
                disabled
                aria-disabled="true"
                title={`${item.label}不可用`}
              >
                <span className="material-symbols-outlined text-[20px]">{item.icon}</span>
                <span>{item.label}</span>
              </button>
            );
          }

          return (
            <NavLink
              key={item.key}
              end
              to={item.to}
              data-testid={`mobile-nav-${item.key}`}
              className={({ isActive }) =>
                cn(
                  "touch-target flex flex-col items-center justify-center gap-1 rounded-2xl px-2 py-2 text-xs font-medium transition-colors",
                  isActive
                    ? "bg-primary-50 text-primary ring-1 ring-primary-100"
                    : "text-zinc-500 hover:bg-zinc-50 hover:text-zinc-900",
                )
              }
            >
              {({ isActive }) => (
                <>
                  <span className="relative">
                    <span className="material-symbols-outlined text-[20px]">{item.icon}</span>
                    {badge ? (
                      <span
                        className={cn(
                          "absolute -right-3 -top-2 min-w-5 rounded-full px-1.5 py-0.5 text-[10px] font-semibold leading-none",
                          isActive ? "bg-primary text-white" : "bg-red-500 text-white",
                        )}
                      >
                        {badge}
                      </span>
                    ) : null}
                  </span>
                  <span>{item.label}</span>
                </>
              )}
            </NavLink>
          );
        })}
      </div>
    </nav>
  );
}