import { Badge } from '@/Components/ui/badge';
import { InfoTooltip } from '@/Components/ui/info-tooltip';
import { cn } from '@/lib/utils';
import type { DecayPatternType } from '@/types/freshness';

interface DecayPatternBadgeProps {
  pattern: DecayPatternType;
  className?: string;
}

const patternConfig: Record<
  DecayPatternType,
  {
    label: string;
    variant:
      | 'default'
      | 'secondary'
      | 'destructive'
      | 'outline'
      | 'success'
      | 'critical'
      | 'high'
      | 'medium'
      | 'low';
    description: string;
  }
> = {
  gradual_decay: {
    label: 'Gradual Decay',
    variant: 'medium',
    description: 'Steady traffic loss over 8+ weeks — typically content staleness',
  },
  step_drop: {
    label: 'Step Drop',
    variant: 'high',
    description: 'Sudden traffic drop — likely algorithm update or competitor displacement',
  },
  post_update_decline: {
    label: 'Post-Update Decline',
    variant: 'destructive',
    description: 'Traffic dropped after a content update — content may have worsened',
  },
  query_mix_erosion: {
    label: 'Query Mix Erosion',
    variant: 'medium',
    description: 'Losing ranking for secondary keywords while maintaining primary',
  },
  position_drift: {
    label: 'Position Drift',
    variant: 'low',
    description: 'Gradual position decline across multiple queries',
  },
  seasonal_normalized_decay: {
    label: 'Seasonal Decay',
    variant: 'secondary',
    description: 'Traffic loss beyond seasonal patterns — genuine decline',
  },
  volatility: {
    label: 'Volatility',
    variant: 'outline',
    description: 'Unstable rankings — content may not match search intent consistently',
  },
};

export default function DecayPatternBadge({ pattern, className }: DecayPatternBadgeProps) {
  const config = patternConfig[pattern] ?? {
    label: pattern,
    variant: 'default' as const,
    description: '',
  };

  return (
    <div className="inline-flex items-center gap-1">
      <Badge variant={config.variant} className={cn(className)}>
        {config.label}
      </Badge>
      {config.description && (
        <InfoTooltip
          content={config.description}
          ariaLabel={`${config.label}: ${config.description}`}
          side="right"
        />
      )}
    </div>
  );
}