import type { FunctionCall } from '@/lib/functionCallParser';
import { formatDuration } from '@/lib/functionCallParser';
import { cn } from '@/lib/utils';
import { CheckCircle2, Clock, Loader2, ShieldAlert, ShieldCheck, ShieldX } from 'lucide-react';

interface FunctionCallBadgeProps {
  functionCall: FunctionCall;
  className?: string;
}

export function FunctionCallBadge({ functionCall, className }: FunctionCallBadgeProps) {
  const { functionName, status, duration, authStatus } = functionCall;

  return (
    <div
      className={cn(
        'inline-flex items-center gap-1.5 rounded-md border px-1 py-0.5 text-xs font-medium',
        status === 'running'
          ? 'border-blue-200 bg-blue-50 text-blue-700 dark:border-blue-800 dark:bg-blue-950/30 dark:text-blue-400'
          : 'border-green-200 bg-green-50 text-green-700 dark:border-green-800 dark:bg-green-950/30 dark:text-green-400',
        className,
      )}
    >
      {status === 'running' ? (
        <Loader2 className="h-3 w-3 animate-spin" />
      ) : (
        <CheckCircle2 className="h-3 w-3" />
      )}
      <span className="font-mono">{functionName}</span>
      {authStatus && (
        <span
          className={cn(
            'inline-flex items-center gap-0.5 rounded px-1 py-0.5 text-[10px] font-semibold uppercase',
            authStatus === 'pending' && 'bg-amber-100 text-amber-700 dark:bg-amber-900/40 dark:text-amber-400',
            authStatus === 'approved' && 'bg-green-100 text-green-700 dark:bg-green-900/40 dark:text-green-400',
            authStatus === 'denied' && 'bg-red-100 text-red-700 dark:bg-red-900/40 dark:text-red-400',
          )}
        >
          {authStatus === 'pending' && <ShieldAlert className="h-2.5 w-2.5" />}
          {authStatus === 'approved' && <ShieldCheck className="h-2.5 w-2.5" />}
          {authStatus === 'denied' && <ShieldX className="h-2.5 w-2.5" />}
          {authStatus}
        </span>
      )}
      {status === 'completed' && duration !== undefined && (
        <>
          <span className="text-muted-foreground">•</span>
          <span className="flex items-center gap-0.5">
            <Clock className="h-3 w-3" />
            {formatDuration(duration)}
          </span>
        </>
      )}
    </div>
  );
}