'use client';
import Link from 'next/link';
import { usePathname } from 'next/navigation';
import { useEffect, useState } from 'react';
import { ClipboardList, Droplets, Users } from 'lucide-react';

const TABS = [
  { href: '/clock', label: 'Employees', Icon: Users },
  { href: '/clock/stock', label: 'Fuel', Icon: Droplets },
  { href: '/clock/job-cards', label: 'Job cards', Icon: ClipboardList },
];

/** Mobile-app style tab bar. Hidden on the sign-in / password screens. */
export function ClockBottomNav({ access = 'full' }: { access?: 'full' | 'clock' | 'mechanic' }) {
  const path = usePathname();
  // Highlight the tapped tab at once: the next page takes a moment to load and an
  // unchanged bar reads as "the tap did not register".
  const [tapped, setTapped] = useState<string | null>(null);
  useEffect(() => setTapped(null), [path]);
  if (path.startsWith('/clock/login') || path.startsWith('/clock/change-password')) return null;
  // Mechanics have no clock in/out scanner, so no Employees tab.
  const tabs = access === 'mechanic' ? TABS.filter(t => t.href !== '/clock') : TABS;
  return <nav aria-label="Plant app" className="fixed inset-x-0 bottom-0 z-40 border-t border-border bg-surface pb-[env(safe-area-inset-bottom)]">
    <ul className={`mx-auto max-w-3xl grid ${tabs.length === 2 ? 'grid-cols-2' : 'grid-cols-3'}`}>
      {tabs.map(({ href, label, Icon }) => {
        const here = tapped ?? path;
        const active = href === '/clock' ? here === '/clock' : here.startsWith(href);
        return <li key={href}><Link href={href} onClick={() => setTapped(href)} aria-current={active ? 'page' : undefined}
          className={`flex min-h-[56px] flex-col items-center justify-center gap-0.5 text-xs font-medium ${active ? 'text-[#30638E]' : 'text-text-muted'}`}>
          <Icon size={22} strokeWidth={active ? 2.4 : 1.8}/>{label}</Link></li>;
      })}
    </ul>
  </nav>;
}