"use client";

/**
 * SiteBottomNav — mobile-only bottom tab bar.
 *
 * Four items: Home (Feed) · Knowledgebase · Search · Account.
 * Mirrors the Instagram pattern — fixed to the viewport bottom, full
 * width, equal-width tabs, the active tab uses the primary color.
 *
 * Hidden on md+ — desktop uses SiteSidebar.
 */

import Link from "next/link";
import { usePathname } from "next/navigation";
import { Home, Search, User as UserIcon } from "lucide-react";
import { useAuth } from "@/components/auth/auth-provider";
import { cn } from "@/lib/utils";

type Item = {
  href: string;
  label: string;
  icon: React.ReactNode;
  matchPrefixes?: string[];
};

export function SiteBottomNav() {
  const pathname = usePathname();
  const { user } = useAuth();

  const items: Item[] = [
    { href: "/", label: "Home", icon: <Home className="size-5" /> },
    {
      href: "/search",
      label: "Search",
      icon: <Search className="size-5" />,
      // Search is the knowledgebase entry point too — keep the tab lit
      // while the user is reading anywhere in the library.
      matchPrefixes: [
        "/search",
        "/books",
        "/letters",
        "/transcriptions",
        "/essays",
        "/glossary",
        "/journals",
        "/magazines",
        "/other-documents",
        "/disciples",
      ],
    },
    {
      href: user ? "/u/me" : "/login",
      label: user ? "You" : "Sign in",
      icon: <UserIcon className="size-5" />,
      matchPrefixes: ["/u/me", "/login", "/signup"],
    },
  ];

  function isActive(item: Item): boolean {
    if (item.matchPrefixes) {
      return item.matchPrefixes.some((p) =>
        p === "/" ? pathname === "/" : pathname.startsWith(p),
      );
    }
    if (item.href === "/") return pathname === "/";
    return pathname === item.href || pathname.startsWith(`${item.href}/`);
  }

  return (
    <nav
      aria-label="Primary"
      className={cn(
        "md:hidden fixed inset-x-0 bottom-0 z-40",
        "bg-background/95 backdrop-blur border-t border-border",
        "pb-[env(safe-area-inset-bottom)]",
      )}
    >
      <ul className="flex items-stretch">
        {items.map((item) => {
          const active = isActive(item);
          return (
            <li key={item.href} className="flex-1">
              <Link
                href={item.href}
                aria-label={item.label}
                aria-current={active ? "page" : undefined}
                className={cn(
                  "h-14 flex flex-col items-center justify-center gap-0.5",
                  active
                    ? "text-primary"
                    : "text-muted-foreground hover:text-foreground",
                )}
              >
                {item.icon}
                <span className="text-[0.65rem] font-medium">
                  {item.label}
                </span>
              </Link>
            </li>
          );
        })}
      </ul>
    </nav>
  );
}