"use client";

import { Menu, Plus } from "lucide-react";
import Link from "next/link";
import { usePathname } from "next/navigation";
import { useSidebar } from "@/components/ui/sidebar";
import { tr } from "@/i18n/tr";
import { cn } from "@/lib/utils";
import { BOTTOM_NAV, isActivePath, isAvailable, type NavItem } from "./nav-config";
import { useQuickAdd } from "./quick-add";

const itemClass =
  "flex min-h-14 flex-1 flex-col items-center justify-center gap-0.5 text-[0.7rem] font-medium outline-none focus-visible:bg-muted";

function BottomNavLink({ item, pathname }: { item: NavItem; pathname: string }) {
  const Icon = item.icon;
  if (!isAvailable(item)) {
    return (
      <span
        aria-disabled
        className={cn(itemClass, "text-muted-foreground/50")}
        title={tr.common.comingSoon}
      >
        <Icon className="size-5" />
        {item.label}
      </span>
    );
  }
  const active = isActivePath(pathname, item.href);
  return (
    <Link
      href={item.href}
      aria-current={active ? "page" : undefined}
      className={cn(itemClass, active ? "text-primary" : "text-muted-foreground")}
    >
      <Icon className="size-5" />
      {item.label}
    </Link>
  );
}

/** Mobil alt gezinme çubuğu (md altı). */
export function BottomNav() {
  const pathname = usePathname();
  const { openQuickAdd } = useQuickAdd();
  const { setOpenMobile } = useSidebar();
  return (
    <nav
      aria-label={tr.nav.main}
      className="fixed inset-x-0 bottom-0 z-40 border-t bg-background/95 pb-safe backdrop-blur supports-backdrop-filter:bg-background/80 md:hidden"
    >
      <div className="flex items-stretch">
        {BOTTOM_NAV.left.map((item) => (
          <BottomNavLink key={item.href} item={item} pathname={pathname} />
        ))}
        <div className="flex flex-1 items-center justify-center">
          <button
            type="button"
            onClick={openQuickAdd}
            aria-label={tr.quickAdd.button}
            className="-mt-5 flex size-14 items-center justify-center rounded-full bg-primary text-primary-foreground shadow-lg outline-none focus-visible:ring-4 focus-visible:ring-ring/50"
          >
            <Plus className="size-6" />
          </button>
        </div>
        {BOTTOM_NAV.right.map((item) => (
          <BottomNavLink key={item.href} item={item} pathname={pathname} />
        ))}
        <button
          type="button"
          onClick={() => setOpenMobile(true)}
          className={cn(itemClass, "text-muted-foreground")}
        >
          <Menu className="size-5" />
          {tr.nav.more}
        </button>
      </div>
    </nav>
  );
}