pn-new-crm/src/components/layout/mobile/mobile-bottom-tabs.tsx

'use client';

import Link from 'next/link';
import { usePathname } from 'next/navigation';
import { Anchor, LayoutDashboard, Menu, Search, Users } from 'lucide-react';

import { cn } from '@/lib/utils';

type TabSpec = {
  label: string;
  icon: typeof LayoutDashboard;
  segment: string; // route segment after /[portSlug]/
};

// Left-of-center: Dashboard, Clients. Right-of-center: Berths, More.
// Search occupies the center slot. Documents demoted to the MoreSheet -
// reps reach docs less often than berths during a walking inventory check,
// and pinned-to-client documents are accessed via the client detail anyway.
const TABS_LEFT: TabSpec[] = [
  { label: 'Dashboard', icon: LayoutDashboard, segment: 'dashboard' },
  { label: 'Clients', icon: Users, segment: 'clients' },
];

const TABS_RIGHT: TabSpec[] = [{ label: 'Berths', icon: Anchor, segment: 'berths' }];

interface MobileBottomTabsProps {
  onMoreClick: () => void;
  onSearchClick: () => void;
}

export function MobileBottomTabs({ onMoreClick, onSearchClick }: MobileBottomTabsProps) {
  const pathname = usePathname();
  const portSlug = pathname.split('/').filter(Boolean)[0] ?? 'port-nimara';

  function isActive(segment: string): boolean {
    return pathname.startsWith(`/${portSlug}/${segment}`);
  }

  return (
    <nav
      aria-label="Primary navigation"
      className={cn(
        'fixed bottom-0 inset-x-0 z-40 bg-background border-t border-border',
        'pb-safe-bottom',
        // 5 equal-flex slots.
        'flex items-end',
      )}
    >
      {TABS_LEFT.map((tab) => (
        <NavTab key={tab.segment} tab={tab} portSlug={portSlug} active={isActive(tab.segment)} />
      ))}

      {/* Search button - styled identically to the other navbar tabs. */}
      <button
        type="button"
        onClick={onSearchClick}
        className="relative flex h-14 flex-1 flex-col items-center justify-center gap-0.5 text-xs text-muted-foreground transition-colors"
      >
        <Search className="relative size-5" aria-hidden />
        <span className="relative font-medium">Search</span>
      </button>

      {TABS_RIGHT.map((tab) => (
        <NavTab key={tab.segment} tab={tab} portSlug={portSlug} active={isActive(tab.segment)} />
      ))}

      <button
        type="button"
        onClick={onMoreClick}
        className="relative flex h-14 flex-1 flex-col items-center justify-center gap-0.5 text-xs text-muted-foreground transition-colors"
      >
        <Menu className="relative size-5" aria-hidden />
        <span className="relative font-medium">More</span>
      </button>
    </nav>
  );
}

function NavTab({ tab, portSlug, active }: { tab: TabSpec; portSlug: string; active: boolean }) {
  const Icon = tab.icon;
  return (
    <Link
      // eslint-disable-next-line @typescript-eslint/no-explicit-any
      href={`/${portSlug}/${tab.segment}` as any}
      aria-current={active ? 'page' : undefined}
      className={cn(
        'relative flex flex-1 flex-col items-center justify-center gap-0.5 h-14 text-xs transition-colors',
        active ? 'text-primary' : 'text-muted-foreground',
      )}
    >
      {/* iOS-native active indicator: a 2px accent bar at the top of
          the active tab. Cleaner than a colored pill - relies on the
          icon + label color change (text-primary above) to do the
          primary signaling, with this bar adding just enough visual
          anchor to read as "selected". */}
      <span
        aria-hidden
        className={cn(
          'absolute inset-x-0 top-0 mx-auto h-[2px] w-8 rounded-full transition-opacity',
          active ? 'bg-primary opacity-100' : 'opacity-0',
        )}
      />
      <Icon className="relative size-5" aria-hidden />
      <span className="relative font-medium">{tab.label}</span>
    </Link>
  );
}