'use client';

import Link from 'next/link';
import { FileText, Heart, Home, LockKeyhole, ShieldCheck, UserRound } from 'lucide-react';
import { cn } from '@/lib/utils';
import { getAdminLandingPath } from '@/lib/admin-access';
import { useAuth } from './auth-provider';

const baseItems = [
  { href: '/', label: 'Главная', icon: Home },
  { href: '/data', label: 'Данные', icon: UserRound },
  { href: '/documents', label: 'Документы', icon: FileText },
  { href: '/family', label: 'Семья', icon: Heart },
  { href: '/security', label: 'Защита', icon: LockKeyhole }
];

export function MobileNav({ active }: { active: string }) {
  const { user } = useAuth();
  const items = user?.canAccessAdmin
    ? [...baseItems, { href: getAdminLandingPath(user), label: 'Админ', icon: ShieldCheck }]
    : baseItems;

  return (
    <nav className="fixed inset-x-0 bottom-0 z-50 border-t border-[#eceef4] bg-white/95 px-2 pb-[max(0.5rem,env(safe-area-inset-bottom))] pt-2 backdrop-blur lg:hidden">
      <div className="mx-auto flex max-w-lg items-stretch justify-around gap-1">
        {items.map((item) => {
          const isActive =
            active === item.href || (item.href.startsWith('/admin') && active.startsWith('/admin')) || (item.href === '/family' && active.startsWith('/family'));
          return (
            <Link
              key={item.href}
              href={item.href}
              className={cn(
                'flex min-w-0 flex-1 flex-col items-center gap-1 rounded-xl px-1 py-1.5 text-[10px] font-medium transition',
                isActive ? 'text-[#3390ec]' : 'text-[#667085]'
              )}
            >
              <item.icon className={cn('h-5 w-5 shrink-0', isActive && 'stroke-[2.25]')} />
              <span className="truncate">{item.label}</span>
            </Link>
          );
        })}
      </div>
    </nav>
  );
}
