pn-new-crm/src/components/layout/mobile/more-sheet.tsx

'use client';

import Link from 'next/link';
import { usePathname } from 'next/navigation';
import {
  Anchor,
  BarChart3,
  Bell,
  BellRing,
  Bookmark,
  Building2,
  Globe,
  Home,
  Mail,
  Receipt,
  Settings,
  Shield,
  ShieldAlert,
  Ship,
} from 'lucide-react';

import {
  Drawer,
  DrawerContent,
  DrawerHeader,
  DrawerTitle,
  DrawerClose,
} from '@/components/shared/drawer';

type MoreItem = {
  label: string;
  icon: typeof Building2;
  segment: string;
};

// Order: most-likely overflow targets first. Interests is here (rather
// than the bottom row) to dodge the Clients-vs-Interests UX confusion;
// reps reach the active deals via the Interests tab on a client detail
// (or via the new bottom-sheet drawer). Yachts is asset-record traffic
// best reached contextually from inside an interest or client.
const MORE_ITEMS: MoreItem[] = [
  { label: 'Interests', icon: Bookmark, segment: 'interests' },
  { label: 'Yachts', icon: Ship, segment: 'yachts' },
  { label: 'Companies', icon: Building2, segment: 'companies' },
  { label: 'Expenses', icon: Receipt, segment: 'expenses' },
  { label: 'Inbox', icon: Mail, segment: 'email' },
  { label: 'Reservations', icon: Anchor, segment: 'berth-reservations' },
  { label: 'Notifications', icon: BellRing, segment: 'notifications' },
  { label: 'Residential', icon: Home, segment: 'residential/clients' },
  { label: 'Website analytics', icon: Globe, segment: 'website-analytics' },
  { label: 'Alerts', icon: ShieldAlert, segment: 'alerts' },
  { label: 'Reports', icon: BarChart3, segment: 'reports' },
  { label: 'Reminders', icon: Bell, segment: 'reminders' },
  { label: 'Settings', icon: Settings, segment: 'settings' },
  { label: 'Admin', icon: Shield, segment: 'admin' },
];

export function MoreSheet({
  open,
  onOpenChange,
}: {
  open: boolean;
  onOpenChange: (next: boolean) => void;
}) {
  const pathname = usePathname();
  const portSlug = pathname.split('/').filter(Boolean)[0] ?? 'port-nimara';

  return (
    <Drawer open={open} onOpenChange={onOpenChange}>
      <DrawerContent>
        <DrawerHeader>
          <DrawerTitle>More</DrawerTitle>
        </DrawerHeader>
        <ul className="grid grid-cols-3 gap-2 px-3 pb-4">
          {MORE_ITEMS.map((item) => {
            const Icon = item.icon;
            return (
              <li key={item.segment}>
                <DrawerClose asChild>
                  <Link
                    // eslint-disable-next-line @typescript-eslint/no-explicit-any
                    href={`/${portSlug}/${item.segment}` as any}
                    // min-h-[88px] guarantees a 44pt vertical touch target
                    // (Apple HIG); icon + label centered. The grid gap is
                    // 8px so each cell still has clearance from neighbours.
                    className="flex min-h-[88px] flex-col items-center justify-center gap-1.5 rounded-md py-3 px-2 text-xs text-foreground hover:bg-accent active:bg-accent/80"
                  >
                    <Icon className="size-7 text-muted-foreground" aria-hidden />
                    <span className="font-medium">{item.label}</span>
                  </Link>
                </DrawerClose>
              </li>
            );
          })}
        </ul>
      </DrawerContent>
    </Drawer>
  );
}