import { Badge } from '@/components/ui/badge';
import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '@/components/ui/tooltip';
import { Shield, CheckCircle2, AlertCircle } from 'lucide-react';
import { useTrustScore, getTrustBadgeConfig } from '@/hooks/useTrustScore';
import { cn } from '@/lib/utils';

interface TrustBadgeProps {
  pubkey: string | undefined;
  className?: string;
  showLabel?: boolean;
  size?: 'sm' | 'md' | 'lg';
}

/**
 * TrustBadge component displays a visual trust score indicator for a Nostr user.
 * 
 * Trust levels:
 * - 100: Self (your own content)
 * - 90: Direct follow
 * - 60: Friend-of-friend
 * - 30: NIP-05 verified
 * - 0: Unknown/unverified
 */
export function TrustBadge({ pubkey, className, showLabel = true, size = 'sm' }: TrustBadgeProps) {
  const { data: trustScore, isLoading } = useTrustScore(pubkey);
  const badge = getTrustBadgeConfig(trustScore);

  if (isLoading || !badge.show) {
    return null;
  }

  const sizeClasses = {
    sm: 'text-[9px] px-1.5 py-0 h-4 gap-0.5',
    md: 'text-xs px-2 py-0.5 h-5 gap-1',
    lg: 'text-sm px-3 py-1 h-6 gap-1.5',
  };

  const iconSizes = {
    sm: 'h-2.5 w-2.5',
    md: 'h-3 w-3',
    lg: 'h-4 w-4',
  };

  const getTooltipText = (score: number | undefined) => {
    if (score === undefined) return 'Trust score unavailable';
    if (score === 100) return 'This is your content';
    if (score >= 90) return 'You follow this user';
    if (score >= 60) return 'Friend of a friend (2 hops)';
    if (score >= 30) return 'NIP-05 verified user';
    return 'Unknown user';
  };

  return (
    <TooltipProvider>
      <Tooltip>
        <TooltipTrigger asChild>
          <Badge 
            variant={badge.variant}
            className={cn(sizeClasses[size], badge.className, className, 'cursor-help select-none')}
          >
            {badge.icon === 'check' && <CheckCircle2 className={iconSizes[size]} />}
            {badge.icon === 'shield' && <Shield className={iconSizes[size]} />}
            {!badge.icon && <AlertCircle className={iconSizes[size]} />}
            {showLabel && <span className="font-bold uppercase">{badge.label}</span>}
          </Badge>
        </TooltipTrigger>
        <TooltipContent side="bottom" className="max-w-xs">
          <div className="space-y-1">
            <p className="font-bold">{getTooltipText(trustScore)}</p>
            <p className="text-xs text-muted-foreground">
              Trust scores help identify reliable contributors in the skateboarding community.
            </p>
          </div>
        </TooltipContent>
      </Tooltip>
    </TooltipProvider>
  );
}