"use client";

/**
 * SiteBottomNav — mobile-only bottom tab bar.
 *
 * Four items: Home · Search · Kautilya · 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 Image from "next/image";
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 { KautilyaIcon } from "@/components/selection-toolbar/shared";
import { cn } from "@/lib/utils";

type Item = {
  /** Tab label, used for the aria-label. Bottom nav is icon-only. */
  label: string;
  href: 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: "/ask",
      label: "Kautilya",
      icon: <KautilyaIcon className="size-5" />,
    },
    {
      href: user ? "/u/me" : "/login",
      label: user ? "You" : "Sign in",
      // Show the user's uploaded avatar when available so the nav
      // feels personalized. Falls back to the generic person glyph
      // for anonymous viewers and signed-in users who haven't
      // uploaded a picture yet. The avatar circle is slightly larger
      // (size-6 vs the size-5 icons elsewhere) so it reads as an
      // identifying glyph rather than fading in with the other tabs.
      icon: user?.avatar_url ? (
        <Image
          src={user.avatar_url}
          alt=""
          width={28}
          height={28}
          className="size-7 rounded-full object-cover ring-1 ring-foreground/10"
          unoptimized
        />
      ) : (
        <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 justify-around py-2">
        {items.map((item) => {
          const active = isActive(item);
          return (
            <li
              key={item.label}
              // flex + items-center + justify-center so the fixed-size
              // pill below sits centred inside its equal-width cell;
              // without these the pill collapses to the left edge of
              // each `flex-1` slot.
              className="flex-1 flex items-center justify-center"
            >
              <Link
                href={item.href}
                aria-label={item.label}
                aria-current={active ? "page" : undefined}
                className={cn(
                  "w-12 h-12 rounded-md flex flex-col items-center justify-center",
                  active
                    ? "text-white bg-primary"
                    : "text-muted-foreground hover:text-foreground",
                )}
              >
                {item.icon}
              </Link>
            </li>
          );
        })}
      </ul>
    </nav>
  );
}