import { useUserStatus, SKATING_STATUSES } from '@/hooks/useUserStatus';
import { Badge } from '@/components/ui/badge';
import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '@/components/ui/tooltip';
import { cn } from '@/lib/utils';

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

export function UserStatusIndicator({
  pubkey,
  className,
  showLabel = false,
  size = 'sm',
}: UserStatusIndicatorProps) {
  const { data: status, isLoading } = useUserStatus(pubkey);

  if (isLoading || !status) return null;

  const preset = status.statusId
    ? SKATING_STATUSES.find(s => s.id === status.statusId)
    : null;

  const emoji = status.emoji || preset?.emoji || '🛹';
  const label = preset?.label || status.status;

  const sizeClasses = {
    sm: 'text-xs px-1.5 py-0',
    md: 'text-sm px-2 py-0.5',
    lg: 'text-base px-3 py-1',
  };

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

  return (
    <TooltipProvider>
      <Tooltip>
        <TooltipTrigger asChild>
          <div className={cn('inline-flex items-center gap-1', className)}>
            {/* Pulsing dot indicator */}
            <span className="relative flex">
              <span
                className={cn(
                  'animate-ping absolute inline-flex rounded-full bg-green-400 opacity-75',
                  dotSizeClasses[size]
                )}
              />
              <span
                className={cn(
                  'relative inline-flex rounded-full bg-green-500',
                  dotSizeClasses[size]
                )}
              />
            </span>
            {showLabel && (
              <Badge
                variant="outline"
                className={cn(
                  'border-green-500/50 text-green-400 font-medium',
                  sizeClasses[size]
                )}
              >
                {emoji} {label}
              </Badge>
            )}
          </div>
        </TooltipTrigger>
        <TooltipContent side="top" className="max-w-[200px]">
          <div className="text-center">
            <div className="text-lg mb-1">{emoji}</div>
            <p className="font-bold">{label}</p>
            {status.linkedSpot && (
              <p className="text-xs text-muted-foreground mt-1">
                📍 At a spot
              </p>
            )}
            {status.expiration && (
              <p className="text-xs text-muted-foreground mt-1">
                ⏱️ Auto-clears in {Math.round((status.expiration - Date.now() / 1000) / 60)} min
              </p>
            )}
          </div>
        </TooltipContent>
      </Tooltip>
    </TooltipProvider>
  );
}