'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 p-4 pb-safe bg-slate-950/80 backdrop-blur-md border-t border-slate-900 z-40">
      <div className="max-w-4xl mx-auto flex justify-around items-center text-slate-400">
        
        <button 
          onClick={() => router.push('/')}
          className={cn("flex flex-col items-center gap-1", isHome && "text-primary")}
        >
          <Smartphone size={20} />
          <span className="text-xs font-bold transition-all">Home</span>
        </button>

        {/* Inventory */}
        <button 
          onClick={() => router.push('/inventory')}
          className={cn("flex flex-col items-center gap-1", isInventory && "text-primary")}
        >
          <Package size={20} />
          <span className="text-xs font-bold transition-all">Inventory</span>
        </button>

        {/* Logs */}
        <button 
          onClick={() => router.push('/logs')}
          className={cn("flex flex-col items-center gap-1", isLogs && "text-primary")}
        >
          <History size={20} />
          <span className="text-xs font-bold transition-all">Logs</span>
        </button>

        {/* Admin Settings */}
        {currentUser?.role === 'admin' && (
          <button 
            onClick={() => router.push('/admin')}
            className={cn("flex flex-col items-center gap-1", isAdmin && "text-primary")}
          >
            <Settings size={20} />
            <span className="text-xs 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';
            }
          }}
          className="flex flex-col items-center gap-1 text-rose-500 hover:text-rose-400 transition-colors"
        >
          <LogOut size={20} />
          <span className="text-xs font-bold transition-all">Logout</span>
        </button>
      </div>
    </footer>
  );
}