"use client";

import Link from "next/link";
import { usePathname } from "next/navigation";
import { LayoutDashboard, ArrowLeftRight, Plus, RefreshCw, Bot } from "lucide-react";
import { cn } from "@/lib/utils/cn";
import { useUIStore } from "@/store/ui.store";

const LEFT_ITEMS = [
  { label: "Home",         href: "/dashboard",    icon: LayoutDashboard },
  { label: "Transactions", href: "/transactions", icon: ArrowLeftRight  },
];
const RIGHT_ITEMS = [
  { label: "Recurring", href: "/recurring", icon: RefreshCw },
  { label: "Adviser",   href: "/advisor",   icon: Bot       },
];

export function BottomNav() {
  const pathname = usePathname();
  const { setQuickAddOpen } = useUIStore();

  function isActive(href: string) {
    return pathname === href || (href !== "/dashboard" && pathname.startsWith(href));
  }

  return (
    <nav className="fixed bottom-0 left-0 right-0 z-50 md:hidden bg-slate-900/95 backdrop-blur-md border-t border-slate-700/60">
      <div className="flex items-center justify-around px-2 pt-1.5 pb-4">

        {LEFT_ITEMS.map(({ label, href, icon: Icon }) => (
          <Link
            key={href}
            href={href}
            className="flex flex-col items-center gap-0.5 min-w-[60px] py-1"
          >
            <Icon className={cn("h-5 w-5 transition-colors", isActive(href) ? "text-emerald-400" : "text-slate-500")} />
            <span className={cn("text-[10px] font-medium transition-colors", isActive(href) ? "text-emerald-400" : "text-slate-500")}>
              {label}
            </span>
          </Link>
        ))}

        {/* Center FAB */}
        <button
          onClick={() => setQuickAddOpen(true)}
          className="flex items-center justify-center w-14 h-14 rounded-full bg-emerald-500 shadow-lg shadow-emerald-500/40 -mt-6 border-4 border-slate-950 active:scale-95 transition-transform"
          aria-label="Add transaction"
        >
          <Plus className="h-6 w-6 text-white" />
        </button>

        {RIGHT_ITEMS.map(({ label, href, icon: Icon }) => (
          <Link
            key={href}
            href={href}
            className="flex flex-col items-center gap-0.5 min-w-[60px] py-1"
          >
            <Icon className={cn("h-5 w-5 transition-colors", isActive(href) ? "text-emerald-400" : "text-slate-500")} />
            <span className={cn("text-[10px] font-medium transition-colors", isActive(href) ? "text-emerald-400" : "text-slate-500")}>
              {label}
            </span>
          </Link>
        ))}

      </div>
    </nav>
  );
}