'use client';

import { Badge } from '@/components/ui/Badge';
import { JiraAnomaly } from '@/services/integrations/jira/anomaly-detection';

interface AnomalyItemProps {
  anomaly: JiraAnomaly;
}

export function AnomalyItem({ anomaly }: AnomalyItemProps) {
  const getSeverityColor = (severity: string): string => {
    switch (severity) {
      case 'critical': return 'bg-red-100 text-red-800 border-red-200';
      case 'high': return 'bg-orange-100 text-orange-800 border-orange-200';
      case 'medium': return 'bg-yellow-100 text-yellow-800 border-yellow-200';
      case 'low': return 'bg-blue-100 text-blue-800 border-blue-200';
      default: return 'bg-gray-100 text-gray-800 border-gray-200';
    }
  };

  const getSeverityIcon = (severity: string): string => {
    switch (severity) {
      case 'critical': return '🚨';
      case 'high': return '⚠️';
      case 'medium': return '⚡';
      case 'low': return 'ℹ️';
      default: return '📊';
    }
  };

  return (
    <div className="border border-[var(--border)] rounded-lg p-3 bg-[var(--card)] hover:bg-[var(--muted)] transition-colors">
      <div className="flex items-start gap-2">
        <span className="text-sm">{getSeverityIcon(anomaly.severity)}</span>
        <div className="flex-1 min-w-0">
          <div className="flex items-center gap-2 mb-1">
            <h4 className="font-medium text-sm truncate">{anomaly.title}</h4>
            <Badge className={`text-xs shrink-0 ${getSeverityColor(anomaly.severity)}`}>
              {anomaly.severity}
            </Badge>
          </div>
          <p className="text-xs text-[var(--muted-foreground)] mb-2 line-clamp-2">{anomaly.description}</p>
          
          <div className="text-xs text-[var(--muted-foreground)]">
            <strong>Valeur:</strong> {anomaly.value.toFixed(1)}
            {anomaly.threshold > 0 && (
              <span className="opacity-75"> (seuil: {anomaly.threshold.toFixed(1)})</span>
            )}
          </div>

          {anomaly.affectedItems.length > 0 && (
            <div className="mt-2">
              <div className="text-xs text-[var(--muted-foreground)]">
                {anomaly.affectedItems.slice(0, 2).map((item, index) => (
                  <span key={index} className="inline-block bg-[var(--muted)] rounded px-1 mr-1 mb-1 text-xs">
                    {item}
                  </span>
                ))}
                {anomaly.affectedItems.length > 2 && (
                  <span className="text-xs opacity-75">+{anomaly.affectedItems.length - 2}</span>
                )}
              </div>
            </div>
          )}
        </div>
      </div>
    </div>
  );
}