import { Link, useLocation } from 'react-router-dom';
import { MoreHorizontal } from 'lucide-react';
import { usePermissions } from '../../hooks/usePermissions';
import { getMobileNavItems } from '../../lib/navigation';

interface MobileNavProps {
    onMoreClick: () => void;
}

/**
 * Mobile bottom navigation bar with primary actions + "More" button
 */
export function MobileNav({ onMoreClick }: MobileNavProps) {
    const { role } = usePermissions();
    const location = useLocation();
    const navItems = getMobileNavItems(role);

    return (
        <nav
            className="md:hidden fixed bottom-0 left-0 right-0 bg-[var(--color-bg-elevated)] border-t border-[var(--color-border-default)] z-50"
            style={{ paddingBottom: 'env(safe-area-inset-bottom)' }}
        >
            <div className="flex items-center justify-around px-2 py-1">
                {navItems.map(item => {
                    const Icon = item.icon;
                    const isActive = location.pathname === item.path;
                    const label = item.shortLabel || item.label;

                    return (
                        <Link
                            key={item.id}
                            to={item.path}
                            className={`flex flex-col items-center justify-center gap-0.5 py-2 px-3 rounded-xl min-w-[64px] transition-all ${isActive
                                    ? 'text-[var(--color-primary)] dark:text-emerald-400'
                                    : 'text-[var(--color-text-tertiary)]'
                                }`}
                            aria-current={isActive ? 'page' : undefined}
                        >
                            <div className={`relative ${isActive ? 'scale-110' : ''} transition-transform`}>
                                <Icon size={22} strokeWidth={isActive ? 2.5 : 2} />
                                {isActive && (
                                    <div className="absolute -bottom-1 left-1/2 -translate-x-1/2 w-1 h-1 rounded-full bg-[var(--color-primary)]" />
                                )}
                            </div>
                            <span className={`text-[10px] ${isActive ? 'font-semibold' : 'font-medium'}`}>
                                {label}
                            </span>
                        </Link>
                    );
                })}

                {/* More Button */}
                <button
                    onClick={onMoreClick}
                    className="flex flex-col items-center justify-center gap-0.5 py-2 px-3 rounded-xl min-w-[64px] text-[var(--color-text-tertiary)] active:bg-slate-100 dark:active:bg-slate-700"
                    aria-label="More options"
                >
                    <MoreHorizontal size={22} />
                    <span className="text-[10px] font-medium">More</span>
                </button>
            </div>
        </nav>
    );
}
