'use client';

import {
  LayoutDashboard,
  Wallet,
  CreditCard,
  PiggyBank,
  Bell,
} from 'lucide-react';
import Link from 'next/link';
import { usePathname } from 'next/navigation';

interface MobileNavProps {
  unreadAlertsCount?: number;
}

const navigationItems = [
  { name: 'Dashboard', href: '/', icon: LayoutDashboard },
  { name: 'Deudas', href: '/debts', icon: Wallet },
  { name: 'Tarjetas', href: '/cards', icon: CreditCard },
  { name: 'Presupuesto', href: '/budget', icon: PiggyBank },
  { name: 'Alertas', href: '/alerts', icon: Bell, hasBadge: true },
];

export function MobileNav({ unreadAlertsCount = 0 }: MobileNavProps) {
  const pathname = usePathname();

  const isActive = (href: string) => {
    if (href === '/') {
      return pathname === '/';
    }
    return pathname.startsWith(href);
  };

  return (
    <nav className="fixed bottom-0 left-0 right-0 z-40 bg-slate-900 border-t border-slate-800 lg:hidden">
      <ul className="flex items-center justify-around h-16">
        {navigationItems.map((item) => {
          const active = isActive(item.href);
          const Icon = item.icon;

          return (
            <li key={item.name} className="flex-1">
              <Link
                href={item.href}
                className={`
                  flex flex-col items-center justify-center gap-1 py-2
                  transition-colors relative
                  ${
                    active
                      ? 'text-emerald-500'
                      : 'text-slate-400 hover:text-slate-300'
                  }
                `}
              >
                <div className="relative">
                  <Icon className="w-6 h-6" />
                  {item.hasBadge && unreadAlertsCount > 0 && (
                    <span className="absolute -top-1 -right-1 flex items-center justify-center min-w-[16px] h-4 px-1 text-[10px] font-semibold bg-red-500 text-white rounded-full">
                      {unreadAlertsCount > 99 ? '99+' : unreadAlertsCount}
                    </span>
                  )}
                </div>
                <span className="text-[10px] font-medium">{item.name}</span>
              </Link>
            </li>
          );
        })}
      </ul>
    </nav>
  );
}
