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, ClipboardList, LayoutDashboard, Menu, Search, Users } from 'lucide-react';

import { cn } from '@/lib/utils';
import { usePermissions } from '@/hooks/use-permissions';

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

// Marina users: Dashboard, Clients | Berths. Search center, More right.
const MARINA_TABS_LEFT: TabSpec[] = [
  { label: 'Dashboard', icon: LayoutDashboard, segment: 'dashboard' },
  { label: 'Clients', icon: Users, segment: 'clients' },
];
const MARINA_TABS_RIGHT: TabSpec[] = [{ label: 'Berths', icon: Anchor, segment: 'berths' }];

// Residential-only users (e.g. residential partners) never have marina access,
// so the bottom tabs mirror their residential-only sidebar instead of showing
// Clients/Berths they 403 on (matches the AppShell route lockdown).
const RESIDENTIAL_TABS_LEFT: TabSpec[] = [
  { label: 'Clients', icon: Users, segment: 'residential/clients' },
  { label: 'Interests', icon: ClipboardList, segment: 'residential/interests' },
];
const RESIDENTIAL_TABS_RIGHT: TabSpec[] = [];

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

export function MobileBottomTabs({ onMoreClick, onSearchClick }: MobileBottomTabsProps) {
  const pathname = usePathname();
  const portSlug = pathname.split('/').filter(Boolean)[0] ?? 'port-nimara';
  const { can, isSuperAdmin } = usePermissions();
  const residentialOnly =
    !isSuperAdmin && can('residential_clients', 'view') && !can('clients', 'view');
  const tabsLeft = residentialOnly ? RESIDENTIAL_TABS_LEFT : MARINA_TABS_LEFT;
  const tabsRight = residentialOnly ? RESIDENTIAL_TABS_RIGHT : MARINA_TABS_RIGHT;

  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',
      )}
    >
      {tabsLeft.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>

      {tabsRight.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>
  );
}