tfm_ainventory/frontend/components/BottomNav.tsx

'use client';

import { Smartphone, Package, History, Settings, Shield, LogOut } from 'lucide-react';
import { useRouter, usePathname } from 'next/navigation';
import { clsx, type ClassValue } from 'clsx';
import { twMerge } from 'tailwind-merge';

function cn(...inputs: ClassValue[]) {
  return twMerge(clsx(inputs));
}

interface BottomNavProps {
  currentUser: any;
}

export default function BottomNav({ 
  currentUser 
}: BottomNavProps) {
  const router = useRouter();
  const pathname = usePathname();

  const isHome = pathname === '/';
  const isInventory = pathname === '/inventory';
  const isLogs = pathname === '/logs';
  const isAdmin = pathname === '/admin';

  return (
    <footer className="fixed bottom-0 left-0 right-0 py-3 lg:py-4 xl:py-5 px-2 pb-safe bg-background border-t border-slate-900 z-40 transition-all duration-300">
      <div className="max-w-xl mx-auto flex justify-around items-center text-secondary">
        
        <button
          onClick={() => router.push('/')}
          aria-label="Go to Home"
          className={cn("flex flex-col items-center gap-1 rounded px-2 py-1 cursor-pointer transition-colors focus:ring-2 focus:ring-primary focus:outline-none", isHome && "text-primary")}
        >
          <Smartphone size={20} />
          <span className="text-xs lg:text-sm xl:text-base lg:text-lg xl:text-xl lg:text-2xl xl:text-3xl lg:text-4xl xl:text-5xl font-bold transition-all">Home</span>
        </button>

        {/* Inventory */}
        <button
          onClick={() => router.push('/inventory')}
          aria-label="Go to Inventory"
          className={cn("flex flex-col items-center gap-1 rounded px-2 py-1 cursor-pointer transition-colors focus:ring-2 focus:ring-primary focus:outline-none", isInventory && "text-primary")}
        >
          <Package size={20} />
          <span className="text-xs lg:text-sm xl:text-base lg:text-lg xl:text-xl lg:text-2xl xl:text-3xl lg:text-4xl xl:text-5xl font-bold transition-all">Inventory</span>
        </button>

        {/* Logs */}
        <button
          onClick={() => router.push('/logs')}
          aria-label="Go to Logs"
          className={cn("flex flex-col items-center gap-1 rounded px-2 py-1 cursor-pointer transition-colors focus:ring-2 focus:ring-primary focus:outline-none", isLogs && "text-primary")}
        >
          <History size={20} />
          <span className="text-xs lg:text-sm xl:text-base lg:text-lg xl:text-xl lg:text-2xl xl:text-3xl lg:text-4xl xl:text-5xl font-bold transition-all">Logs</span>
        </button>

        {/* Admin Settings */}
        {currentUser?.role === 'admin' && (
          <button
            data-testid="admin-button"
            onClick={() => router.push('/admin')}
            aria-label="Go to Admin"
            className={cn("flex flex-col items-center gap-1 rounded px-2 py-1 cursor-pointer transition-colors focus:ring-2 focus:ring-primary focus:outline-none", isAdmin && "text-primary")}
          >
            <Settings size={20} />
            <span className="text-xs lg:text-sm xl:text-base lg:text-lg xl:text-xl lg:text-2xl xl:text-3xl lg:text-4xl xl:text-5xl font-bold transition-all">Admin</span>
          </button>
        )}

        {/* Logout */}
        <button
          onClick={() => {
            if (window.confirm("Are you sure you want to logout?")) {
              import('@/lib/auth').then(m => m.clearAuth());
              window.location.href = '/login';
            }
          }}
          aria-label="Logout"
          className="flex flex-col items-center gap-1 text-rose-500 hover:text-rose-400 cursor-pointer transition-colors rounded px-2 py-1 focus:ring-2 focus:ring-rose-500 focus:outline-none"
        >
          <LogOut size={20} />
          <span className="text-xs lg:text-sm xl:text-base lg:text-lg xl:text-xl lg:text-2xl xl:text-3xl lg:text-4xl xl:text-5xl font-bold transition-all">Logout</span>
        </button>
      </div>
    </footer>
  );
}