"use client";

import * as React from "react";
import { cn } from "@/lib/utils";
import { href, type Nav, type Tab } from "@/lib/nav";
import { NAV, MOBILE } from "./nav-items";

/**
 * The phone layout. A bottom bar is what a native app does, and it puts the
 * targets under the thumb instead of at the top of a tall screen. Respects the
 * home-indicator inset, which the previous layout did not.
 */
export function TabBar({
  nav,
  go,
  badges,
  visible,
}: {
  nav: Nav;
  go: (n: Nav) => void;
  badges: Partial<Record<Tab, number>>;
  visible: (t: Tab) => boolean;
}) {
  const items = NAV.filter((n) => MOBILE.includes(n.tab) && visible(n.tab));
  return (
    <nav
      aria-label="Sections"
      className="material-hi fixed inset-x-0 bottom-0 z-40 flex border-t border-edge
                 pb-[env(safe-area-inset-bottom)] md:hidden"
    >
      {items.map(({ tab, label, icon: Icon }) => {
        const on = nav.tab === tab;
        const badge = badges[tab] ?? 0;
        return (
          <a
            key={tab}
            href={href({ tab })}
            aria-current={on ? "page" : undefined}
            onClick={(e) => {
              if (e.metaKey || e.ctrlKey) return;
              e.preventDefault();
              go({ tab });
            }}
            className={cn(
              "focus-ring relative flex flex-1 flex-col items-center gap-0.5 py-2",
              "text-caption font-medium transition-colors",
              on ? "text-accent" : "text-mute",
            )}
          >
            <span className="relative">
              <Icon className="h-5 w-5" />
              {badge > 0 && (
                <span
                  className={cn(
                    "absolute -right-2 -top-1 min-w-[15px] rounded-pill px-1 text-[9px]",
                    "font-bold leading-[15px] nums",
                    tab === "review" ? "bg-warn text-black" : "bg-accent text-[var(--accent-ink)]",
                  )}
                >
                  {badge}
                </span>
              )}
            </span>
            {label}
          </a>
        );
      })}
    </nav>
  );
}