"use client";

import { useEffect } from "react";
import Link from "next/link";
import { usePathname } from "next/navigation";
import {
  MoreHorizontal,
} from "lucide-react";
import { cn } from "@/lib/utils";
import { sidebarNavItemById } from "@/lib/sidebar-navigation";
import { useUIStore } from "@/stores/ui-store";

export function MobileNav() {
  const pathname = usePathname();
  const {
    hiddenSidebarItemIds,
    initSidebarPreferences,
    mobileDockItemIds,
    setSidebarOpen,
  } = useUIStore();
  const tabs = mobileDockItemIds
    .filter((id) => !hiddenSidebarItemIds.includes(id))
    .map((id) => sidebarNavItemById.get(id))
    .filter((item): item is NonNullable<typeof item> => Boolean(item))
    .slice(0, 5);

  useEffect(() => {
    initSidebarPreferences();
  }, [initSidebarPreferences]);

  return (
    <nav className="fixed inset-x-0 bottom-0 z-40 border-t border-white/[0.05] bg-[#0a0a0d]/95 backdrop-blur-md md:hidden">
      <div className="flex items-center justify-around px-2 h-16">
        {tabs.map((tab) => {
          const isActive = tab.href === "/" ? pathname === "/" : pathname.startsWith(tab.href);
          return (
            <Link
              key={tab.name}
              href={tab.href}
              className={cn(
                "flex flex-col items-center justify-center gap-1 min-w-0 rounded-xl px-3 py-2 transition-all",
                isActive ? "text-white" : "text-white/25"
              )}
            >
              <tab.icon className={cn("h-5 w-5", isActive && "stroke-[2.5]")} />
              <span className={cn("text-[9px] font-bold uppercase tracking-wider truncate", isActive ? "text-white" : "text-white/20")}>
                {tab.name}
              </span>
            </Link>
          );
        })}
        <button
          type="button"
          onClick={() => setSidebarOpen(true)}
          className="flex min-w-0 flex-col items-center justify-center gap-1 rounded-xl px-3 py-2 text-white/25 transition-all hover:text-white/70"
          title="More"
        >
          <MoreHorizontal className="h-5 w-5" />
          <span className="truncate text-[9px] font-bold uppercase tracking-wider text-white/20">
            More
          </span>
        </button>
      </div>
      <div className="h-[env(safe-area-inset-bottom)]" />
    </nav>
  );
}