import { Link, useLocation } from "react-router-dom";
import { Home, Package, FileText, Users, MoreHorizontal, Receipt, BarChart3, BookOpen } from "lucide-react";
import { cn } from "@/lib/utils";
import { useLanguage } from '@/contexts/LanguageContext';

interface NavItem {
  icon: React.ElementType;
  label: string;
  to: string;
  badge?: number;
}

export function BottomNavigation() {
  const { pathname } = useLocation();
  const { t } = useLanguage();

  const navItems: NavItem[] = [
    { icon: Home, label: t('nav.home'), to: "/", badge: undefined },
    { icon: Package, label: t('nav.purchase'), to: "/purchase", badge: undefined },
    { icon: FileText, label: t('nav.invoice'), to: "/invoice", badge: undefined },
    { icon: BarChart3, label: t('nav.stock'), to: "/stock", badge: undefined },
    { icon: BookOpen, label: t('nav.ledger'), to: "/ledger", badge: undefined },
  ];

  return (
    <nav className="
      fixed bottom-0 left-0 right-0 z-40
      h-16 bg-card border-t
      flex items-center justify-around
      md:hidden
      safe-area-inset-bottom
      shadow-lg
    ">
      {navItems.map((item) => {
        const isActive = pathname === item.to;
        const Icon = item.icon;
        
        return (
          <Link
            key={item.to}
            to={item.to}
            className={cn(
              "flex flex-col items-center justify-center",
              "relative flex-1 h-full",
              "active:bg-muted/50 transition-colors",
              "touch-manipulation select-none",
              isActive && "text-primary"
            )}
          >
            <Icon className={cn(
              "h-5 w-5 transition-transform",
              isActive && "scale-110"
            )} />
            <span className={cn(
              "text-xs mt-1 font-medium",
              isActive && "font-semibold"
            )}>
              {item.label}
            </span>
            {item.badge && item.badge > 0 && (
              <span className="
                absolute top-2 right-1/4
                flex items-center justify-center
                h-5 w-5 rounded-full
                bg-destructive text-destructive-foreground
                text-xs font-bold
              ">
                {item.badge > 9 ? '9+' : item.badge}
              </span>
            )}
            {isActive && (
              <div className="absolute top-0 left-1/2 -translate-x-1/2 w-12 h-1 bg-primary rounded-b-full" />
            )}
          </Link>
        );
      })}
    </nav>
  );
}