import { Box } from '@/ui/Box';
import { Icon } from '@/ui/Icon';
import { Text } from '@/ui/Text';
import { LucideIcon, ChevronRight } from 'lucide-react';

interface NavLinkProps {
  href: string;
  label: string;
  icon?: LucideIcon;
  isActive?: boolean;
  variant?: 'sidebar' | 'top';
  collapsed?: boolean;
  LinkComponent?: React.ComponentType<{ href: string; children: React.ReactNode; className?: string }>;
}

export function NavLink({ href, label, icon, isActive, variant = 'sidebar', collapsed = false, LinkComponent }: NavLinkProps) {
  const isTop = variant === 'top';

  // Radical "Game Menu" Style
  // Active: Solid Primary Color, Shadow, Bold.
  // Inactive: Glass card with strong hover effects.

  const content = (
    <Box 
      display="flex" 
      alignItems="center" 
      justifyContent={collapsed ? 'center' : 'space-between'}
      gap={collapsed ? 0 : 3} 
      paddingX={collapsed ? 2 : 4} 
      paddingY={isTop ? 1.5 : 3} 
      className={`
        relative transition-all duration-300 ease-out rounded-xl border w-full
        ${isActive
          ? 'bg-primary-accent border-primary-accent shadow-[0_0_20px_rgba(25,140,255,0.3)]'
          : 'bg-white/5 border-white/5 group-hover:bg-white/15 group-hover:border-white/20 group-hover:shadow-lg group-hover:shadow-white/5'
        }
        ${!collapsed && isActive ? 'translate-x-2' : ''}
        ${!collapsed && !isActive ? 'group-hover:translate-x-2' : ''}
      `}
      title={collapsed ? label : undefined}
    >
      <Box display="flex" alignItems="center" gap={isTop ? 2 : 3} justifyContent={collapsed ? 'center' : 'start'} width={collapsed ? 'full' : 'auto'}>
        {icon && (
          <Icon 
            icon={icon} 
            size={isTop ? 4 : 5} // 16px for top, 20px for sidebar
            className={`transition-colors duration-200 ${isActive ? 'text-white' : 'text-text-med group-hover:text-white'}`}
          />
        )}
        
        {!collapsed && (
          <Text 
            size={isTop ? "xs" : "sm"} 
            weight="bold"
            variant="inherit"
            className={`tracking-wide transition-colors duration-200 ${isActive ? 'text-white' : 'text-text-med group-hover:text-white'}`}
          >
            {label}
          </Text>
        )}
      </Box>

      {/* Chevron on Hover/Active - Only when expanded and not top nav */}
      {!collapsed && !isTop && (
        <Icon 
          icon={ChevronRight} 
          size={4} 
          className={`transition-all duration-300 ${isActive ? 'text-white opacity-100' : 'text-white opacity-0 group-hover:opacity-100 -translate-x-4 group-hover:translate-x-0'}`} 
        />
      )}
    </Box>
  );

  if (LinkComponent) {
    return (
      <LinkComponent 
        href={href} 
        className={`w-full group block ${!isTop ? '' : ''}`}
      >
        {content}
      </LinkComponent>
    );
  }

  return (
    <a 
      href={href} 
      className={`w-full group block ${!isTop ? '' : ''}`}
    >
      {content}
    </a>
  );
}