'use client';
import { usePathname, useRouter } from 'next/navigation';
import { Home, Users, BarChart2, User } from 'lucide-react';
import { motion } from 'framer-motion';

const TABS = [
  { label: 'Home',      icon: Home,     path: '/',          match: (p: string) => p === '/' },
  { label: 'Clients',   icon: Users,    path: '/?tab=clients', match: (p: string) => p.includes('clients') },
  { label: 'Analytics', icon: BarChart2, path: '/?tab=analytics', match: (p: string) => p.includes('analytics') },
  { label: 'Profile',   icon: User,     path: '/?tab=profile', match: (p: string) => p.includes('profile') },
];

interface Props {
  activeTab?: string;
  onTabChange?: (tab: string) => void;
}

export default function MobileBottomNav({ activeTab = 'home', onTabChange }: Props) {
  const router = useRouter();

  return (
    <nav className="fixed bottom-0 left-0 right-0 z-40 safe-bottom border-t lg:hidden"
      style={{ background: 'var(--bg-card)', borderColor: 'var(--border)' }}>
      <div className="flex items-center justify-around px-2 py-2">
        {TABS.map(tab => {
          const isActive = activeTab === tab.label.toLowerCase();
          return (
            <button
              key={tab.label}
              onClick={() => {
                if ('vibrate' in navigator) navigator.vibrate(30);
                onTabChange?.(tab.label.toLowerCase());
              }}
              className="flex flex-col items-center gap-1 px-4 py-1.5 rounded-xl transition-all touch-target"
              style={{ minWidth: 60 }}>
              <motion.div
                animate={{ scale: isActive ? 1.1 : 1 }}
                transition={{ type: 'spring', stiffness: 400, damping: 20 }}>
                <tab.icon
                  className="w-5 h-5"
                  style={{ color: isActive ? '#6366f1' : 'var(--text-secondary)' }}
                />
              </motion.div>
              <span className="text-xs font-medium"
                style={{ color: isActive ? '#6366f1' : 'var(--text-secondary)', fontSize: 10 }}>
                {tab.label}
              </span>
              {isActive && (
                <motion.div
                  layoutId="nav-indicator"
                  className="absolute bottom-1 w-1 h-1 rounded-full bg-indigo-500"
                />
              )}
            </button>
          );
        })}
      </div>
    </nav>
  );
}