'use client';

import Link from 'next/link';
import { usePathname } from 'next/navigation';
import { Home, ClipboardList, Users, BarChart3, History, Trophy } from 'lucide-react';
import { cn } from '@/lib/utils';

const captainTabs = [
  { href: '/captain', label: 'Home', icon: Home },
  { href: '/captain/vihars', label: 'Vihars', icon: ClipboardList },
  { href: '/captain/volunteers', label: 'Sevaks', icon: Users },
  { href: '/captain/stats', label: 'Stats', icon: BarChart3 },
];

const volunteerTabs = [
  { href: '/volunteer', label: 'Home', icon: Home },
  { href: '/volunteer/history', label: 'History', icon: History },
  { href: '/volunteer/leaderboard', label: 'Top', icon: Trophy },
  { href: '/volunteer/stats', label: 'Stats', icon: BarChart3 },
];

export function BottomNav({ role }: { role: 'captain' | 'volunteer' }) {
  const pathname = usePathname();
  const tabs = role === 'captain' ? captainTabs : volunteerTabs;

  return (
    <nav className="sticky bottom-0 z-30 bg-paper/95 backdrop-blur-md border-t border-ink-100">
      <div className="container max-w-2xl">
        <div className="grid grid-cols-4">
          {tabs.map((tab) => {
            const active = pathname === tab.href || (tab.href !== `/${role}` && pathname.startsWith(tab.href));
            const Icon = tab.icon;
            return (
              <Link
                key={tab.href}
                href={tab.href}
                className={cn(
                  'flex flex-col items-center gap-0.5 py-2.5 transition-colors relative',
                  active ? 'text-ink' : 'text-ink-400 hover:text-ink-600',
                )}
              >
                {active && (
                  <span className="absolute top-0 left-1/2 -translate-x-1/2 w-8 h-0.5 bg-saffron-500 rounded-full" />
                )}
                <Icon className="w-5 h-5" strokeWidth={active ? 2 : 1.5} />
                <span className={cn('text-[10px] tracking-wide', active && 'font-medium')}>
                  {tab.label}
                </span>
              </Link>
            );
          })}
        </div>
      </div>
    </nav>
  );
}