'use client';

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

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

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

// Bottom nav ordering, left → right:
//   Dashboard  — daily overview
//   Berths     — marina inventory grid (touches sales + ops both)
//   Clients    — the address book / dedup surface (centered: it's the
//                primary mental anchor for "find this person", with
//                interests living as a tab on the client detail rather
//                than a peer in the bottom nav)
//   Documents  — signature tracking (chase signers, EOI queue)
//   More       — overflow drawer (Interests, Yachts, Companies, …)
//
// Interests is intentionally NOT in the bottom row — having both Clients
// and Interests as peer tabs created a Clients-vs-Interests confusion
// for sales reps, and the per-client interests tab + the new bottom-sheet
// drawer cover the day-to-day deal review without needing a dedicated tab.
// Yachts stays out for the same reason as before: it's an asset record
// most often reached from inside an interest or client, not browsed.
const TABS: TabSpec[] = [
  { label: 'Dashboard', icon: LayoutDashboard, segment: 'dashboard' },
  { label: 'Berths', icon: Anchor, segment: 'berths' },
  { label: 'Clients', icon: Users, segment: 'clients' },
  { label: 'Documents', icon: FileSignature, segment: 'documents' },
];

export function MobileBottomTabs({ onMoreClick }: { onMoreClick: () => void }) {
  const pathname = usePathname();

  // Derive the active port slug from the URL so tab links always target the
  // current port, even after a port-switch. The dashboard route shape is
  // /[portSlug]/<rest>, so the slug is the first non-empty path segment.
  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',
        'grid grid-cols-5',
      )}
    >
      {TABS.map((tab) => {
        const active = isActive(tab.segment);
        const Icon = tab.icon;
        return (
          <Link
            key={tab.segment}
            // eslint-disable-next-line @typescript-eslint/no-explicit-any
            href={`/${portSlug}/${tab.segment}` as any}
            aria-current={active ? 'page' : undefined}
            className={cn(
              'flex flex-col items-center justify-center gap-0.5 h-14 text-xs',
              active ? 'text-primary' : 'text-muted-foreground',
            )}
          >
            <Icon className="size-5" aria-hidden />
            <span className="font-medium">{tab.label}</span>
          </Link>
        );
      })}
      <button
        type="button"
        onClick={onMoreClick}
        className="flex flex-col items-center justify-center gap-0.5 h-14 text-xs text-muted-foreground"
      >
        <Menu className="size-5" aria-hidden />
        <span className="font-medium">More</span>
      </button>
    </nav>
  );
}