"use client";
import * as React from "react";
import Link from "next/link";
import { usePathname } from "next/navigation";
import { BarChart3, Boxes, MessageSquare, Swords, UserRound } from "lucide-react";
import { cn } from "@/lib/utils";

export const MOBILE_TABS = [
  { href: "/app/chat", label: "Chat", icon: MessageSquare, match: /^\/app\/(chat|projects|prompts|presets)/ },
  { href: "/app/arena", label: "Arena", icon: Swords, match: /^\/app\/arena/ },
  { href: "/app/models", label: "Models", icon: Boxes, match: /^\/app\/models/ },
  { href: "/app/usage", label: "Usage", icon: BarChart3, match: /^\/app\/usage/ },
  { href: "/app/settings/account", label: "Account", icon: UserRound, match: /^\/app\/settings/ },
] as const;

/**
 * Persistent bottom navigation for phones. Hidden automatically while the on-screen keyboard is open
 * (`html[data-keyboard]`) so the composer sits directly above the keyboard.
 */
export function BottomNav({ className }: { className?: string }) {
  const pathname = usePathname();
  return (
    <nav
      aria-label="Primary"
      className={cn(
        "glass-strong fixed inset-x-0 bottom-0 z-30 border-t border-hairline md:hidden",
        "pb-[var(--sab)] transition-transform duration-200 ease-out [html[data-keyboard]_&]:translate-y-full",
        className,
      )}
    >
      <ul className="mx-auto grid h-[var(--bottom-nav-h)] max-w-lg grid-cols-5">
        {MOBILE_TABS.map((t) => {
          const active = t.match.test(pathname);
          return (
            <li key={t.href} className="min-w-0">
              <Link
                href={t.href}
                aria-current={active ? "page" : undefined}
                className={cn("flex h-full flex-col items-center justify-center gap-0.5 text-[10.5px] font-medium tracking-tight transition-colors", active ? "text-fg" : "text-fg-subtle active:text-fg-muted")}
              >
                <span className={cn("flex h-7 w-12 items-center justify-center rounded-full transition-[background-color,transform] duration-200", active ? "bg-accent-soft text-accent" : "")}>
                  <t.icon className={cn("size-[21px]", active && "scale-105")} strokeWidth={active ? 2.2 : 1.8} />
                </span>
                {t.label}
              </Link>
            </li>
          );
        })}
      </ul>
    </nav>
  );
}