import { useLocation, Link } from 'react-router-dom';
import { Home, Search, Layers, MessageSquare, User } from 'lucide-react';
import { useTranslation } from 'react-i18next';
import { cn } from '@/lib/utils';

const navItems = [
  { id: 'home', labelKey: 'nav.items.dashboard', icon: Home, path: '/dashboard' },
  { id: 'search', labelKey: 'nav.items.discover', icon: Search, path: '/discover' },
  { id: 'library', labelKey: 'nav.items.tracks', icon: Layers, path: '/library' },
  { id: 'chat', labelKey: 'nav.items.chat', icon: MessageSquare, path: '/chat' },
  { id: 'profile', labelKey: 'nav.settings', icon: User, path: '/settings' },
];

export function MobileBottomNav() {
  const location = useLocation();
  const { t } = useTranslation();

  return (
    <nav
      className="fixed bottom-0 left-0 right-0 z-40 bg-[var(--sumi-glass-bg)] backdrop-blur-xl shadow-[0_-4px_8px_-4px_rgba(26,26,30,0.08)] lg:hidden"
      aria-label="Mobile navigation"
    >
      <div className="flex items-center justify-around px-1 py-1">
        {navItems.map((item) => {
          const isActive = location.pathname.startsWith(item.path);
          const Icon = item.icon;

          return (
            <Link
              key={item.id}
              to={item.path}
              aria-current={isActive ? 'page' : undefined}
              className={cn(
                'relative flex flex-col items-center justify-center gap-0.5 py-2 px-3 min-w-12 min-h-12 rounded-xl transition-colors duration-[var(--sumi-duration-fast)]',
                isActive
                  ? 'text-primary'
                  : 'text-muted-foreground active:text-foreground',
              )}
            >
              <Icon className={cn('h-5 w-5', isActive && 'fill-primary/20')} />
              {/* text-[10px] exception: Tailwind has no scale below text-xs (12px); 10px is standard for mobile bottom nav labels */}
              <span className="text-[10px] font-medium leading-none">
                {t(item.labelKey)}
              </span>
              {isActive && (
                <span className="absolute top-0.5 left-1/2 -translate-x-1/2 w-5 h-0.5 rounded-full bg-primary" />
              )}
            </Link>
          );
        })}
      </div>
      {/* Safe area for iPhone home indicator */}
      <div className="h-[env(safe-area-inset-bottom)]" />
    </nav>
  );
}