'use client';

import * as React from 'react';
import Link from 'next/link';
import { usePathname } from 'next/navigation';
import { Ellipsis } from 'lucide-react';

import { cn } from '@/lib/utils';
import { Sheet, SheetContent, SheetHeader, SheetTitle } from '@/components/ui/sheet';
import { NavList } from '@/components/layout/nav-list';
import type { NavItem } from '@/lib/layout/nav-items';

function isActive(pathname: string, href: string): boolean {
  return pathname === href || pathname.startsWith(`${href}/`);
}

interface BottomTabBarProps {
  /** Os 4 itens principais, já resolvidos na ordem de exibição. */
  items: NavItem[];
  /** Restante do menu, exibido no sheet "Mais". */
  moreItems: NavItem[];
}

/** Bottom tab bar mobile (`<md`) — 4 itens fixos + "Mais" com o restante do menu. */
export function BottomTabBar({ items, moreItems }: BottomTabBarProps) {
  const pathname = usePathname();
  const [moreOpen, setMoreOpen] = React.useState(false);
  const moreActive = moreItems.some(
    (item) => isActive(pathname, item.href) || item.children?.some((child) => isActive(pathname, child.href)),
  );

  return (
    <>
      <nav
        aria-label="Navegação principal"
        className="fixed inset-x-0 bottom-0 z-20 flex h-16 items-stretch border-t border-border bg-surface md:hidden"
      >
        {items.map((item) => {
          const Icon = item.icon;
          const active = isActive(pathname, item.href);
          return (
            <Link
              key={item.href}
              href={item.href}
              aria-current={active ? 'page' : undefined}
              className={cn(
                'flex flex-1 flex-col items-center justify-center gap-0.5 text-[11px] font-medium text-neutral-500',
                active && 'text-primary-on-light',
              )}
            >
              <Icon className="size-5" aria-hidden />
              {item.label}
            </Link>
          );
        })}
        <button
          type="button"
          onClick={() => setMoreOpen(true)}
          aria-haspopup="dialog"
          className={cn(
            'flex flex-1 flex-col items-center justify-center gap-0.5 text-[11px] font-medium text-neutral-500',
            moreActive && 'text-primary-on-light',
          )}
        >
          <Ellipsis className="size-5" aria-hidden />
          Mais
        </button>
      </nav>

      <Sheet open={moreOpen} onOpenChange={setMoreOpen}>
        <SheetContent side="bottom" className="max-h-[70vh] gap-0 p-0">
          <SheetHeader>
            <SheetTitle>Mais opções</SheetTitle>
          </SheetHeader>
          <div className="overflow-y-auto px-3 pb-4">
            <NavList items={moreItems} onNavigate={() => setMoreOpen(false)} />
          </div>
        </SheetContent>
      </Sheet>
    </>
  );
}