import { useAuthStore } from '@/stores/authStore';
import { useUIStore } from '@/stores/uiStore';
import type { NavTab } from '@/types';
import { BarChart3, Users, Timer, ClipboardCheck, Grid3X3 } from 'lucide-react';

interface NavItem {
  key: NavTab;
  label: string;
  icon: React.ElementType;
}

const adminNav: NavItem[] = [
  { key: 'dashboard', label: 'Dashboard', icon: BarChart3 },
  { key: 'students', label: 'Students', icon: Users },
  { key: 'timing', label: 'Timing', icon: Timer },
  { key: 'reports', label: 'Reports', icon: ClipboardCheck },
  { key: 'more', label: 'More', icon: Grid3X3 },
];

const assistantNav: NavItem[] = [
  { key: 'dashboard', label: 'Dashboard', icon: BarChart3 },
  { key: 'students', label: 'Students', icon: Users },
  { key: 'timing', label: 'Timing', icon: Timer },
  { key: 'attendance', label: 'Attendance', icon: ClipboardCheck },
  { key: 'more', label: 'More', icon: Grid3X3 },
];

// Student nav: NO timing tab, view-only
const studentNav: NavItem[] = [
  { key: 'dashboard', label: 'My Progress', icon: BarChart3 },
  { key: 'more', label: 'More', icon: Grid3X3 },
];

export default function BottomNav() {
  const { user } = useAuthStore();
  const { activeTab, setActiveTab } = useUIStore();

  if (!user) return null;

  const navItems = user.role === 'admin' ? adminNav : user.role === 'assistant' ? assistantNav : studentNav;

  return (
    <nav className="fixed bottom-0 left-0 right-0 z-50 bg-white border-t border-gray-100 nav-shadow safe-area-bottom">
      <div className="flex items-center justify-around h-16">
        {navItems.map((item) => {
          const isActive = activeTab === item.key;
          const Icon = item.icon;
          return (
            <button
              key={item.key}
              onClick={() => setActiveTab(item.key)}
              className="flex flex-col items-center justify-center gap-0.5 w-16 h-full relative active:opacity-70 transition-opacity"
            >
              <Icon
                className={`w-5 h-5 transition-colors ${isActive ? 'text-orange-500' : 'text-gray-400'}`}
                strokeWidth={isActive ? 2.5 : 1.5}
              />
              <span className={`text-[10px] font-medium transition-colors ${isActive ? 'text-orange-500' : 'text-gray-400'}`}>
                {item.label}
              </span>
              {isActive && (
                <span className="absolute -top-px left-1/2 -translate-x-1/2 w-8 h-0.5 brand-gradient rounded-full" />
              )}
            </button>
          );
        })}
      </div>
    </nav>
  );
}
