"use client";

import Link from "next/link";
import { usePathname } from "next/navigation";
import {
  Building2,
  Inbox,
  LayoutDashboard,
  Megaphone,
  Menu,
  Target,
} from "lucide-react";
import { cn } from "@/lib/utils";
import { useLocale } from "@/components/providers/locale-provider";

const ITEMS = [
  { href: "/dashboard", icon: LayoutDashboard, labelAr: "لوحة", labelEn: "Home" },
  { href: "/market/companies", icon: Building2, labelAr: "شركات", labelEn: "Companies" },
  { href: "/inbox", icon: Inbox, labelAr: "صندوق", labelEn: "Inbox" },
  { href: "/campaigns", icon: Megaphone, labelAr: "حملات", labelEn: "Campaigns" },
  { href: "/leads", icon: Target, labelAr: "عملاء", labelEn: "Leads" },
] as const;

export function MobileNav({ onMoreClick }: { onMoreClick: () => void }) {
  const pathname = usePathname();
  const { locale } = useLocale();

  return (
    <nav
      className="fixed inset-x-0 bottom-0 z-50 border-t border-border bg-card/95 pb-[env(safe-area-inset-bottom)] backdrop-blur-lg lg:hidden"
      aria-label="Mobile navigation"
    >
      <ul className="flex h-16 items-stretch justify-around px-1">
        {ITEMS.map((item) => {
          const active =
            pathname === item.href || pathname.startsWith(item.href + "/");
          const Icon = item.icon;
          return (
            <li key={item.href} className="flex flex-1">
              <Link
                href={item.href}
                className={cn(
                  "flex min-h-[44px] flex-1 flex-col items-center justify-center gap-0.5 rounded-lg px-1 text-[10px] font-medium transition-colors",
                  active ? "text-primary" : "text-muted-foreground"
                )}
              >
                <Icon className={cn("h-5 w-5", active && "text-primary")} />
                <span>{locale === "ar" ? item.labelAr : item.labelEn}</span>
              </Link>
            </li>
          );
        })}
        <li className="flex flex-1">
          <button
            type="button"
            onClick={onMoreClick}
            className="flex min-h-[44px] flex-1 flex-col items-center justify-center gap-0.5 rounded-lg px-1 text-[10px] font-medium text-muted-foreground"
          >
            <Menu className="h-5 w-5" />
            <span>{locale === "ar" ? "المزيد" : "More"}</span>
          </button>
        </li>
      </ul>
    </nav>
  );
}