// Fichier : src/components/ui/StatusBadge.tsx

import React from 'react';
import { cn } from '@/utils/utils';
import type { AegisStatus } from '@/types/Status';

interface StatusBadgeProps {
  status: AegisStatus;
  className?: string;
}

// Configuration visuelle unique pour chaque statut
const STATUS_CONFIG: Record<AegisStatus, { bg: string; dot: string }> = {
  // Statuts Infrastructure & Contrats Positifs
  'Opérationnel': {
    bg: 'bg-emerald-50 text-emerald-700 border-emerald-200/60',
    dot: 'bg-emerald-500',
  },
  'Actif': {
    bg: 'bg-emerald-50 text-emerald-700 border-emerald-200/60',
    dot: 'bg-emerald-500',
  },
  'Ouvert': { bg: 'bg-blue-50 text-blue-700 border-blue-200/60', dot: 'bg-blue-500' },

  // Statuts Intermédiaires / En cours
  'Dégradé': {
    bg: 'bg-amber-50 text-amber-700 border-amber-200/60',
    dot: 'bg-amber-500',
  },
  'En Déploiement': {
    bg: 'bg-blue-50 text-blue-700 border-blue-200/60',
    dot: 'bg-blue-500',
  },
  'En Analyse': { bg: 'bg-amber-50 text-amber-700 border-amber-200/60', dot: 'bg-amber-500' },

  // Statuts Alertes / Inactifs
  'Hors Ligne': {
    bg: 'bg-red-50 text-red-700 border-red-200/60',
    dot: 'bg-red-500',
  },
  'Annulé': {
    bg: 'bg-slate-100 text-slate-700 border-slate-200',
    dot: 'bg-slate-400',
  },
  'Résolu': { bg: 'bg-emerald-50 text-emerald-700 border-emerald-200/60', dot: 'bg-emerald-500' },
};

export const StatusBadge: React.FC<StatusBadgeProps> = ({ status, className }) => {
  // Récupération de la configuration ou fallback de sécurité
  const config = STATUS_CONFIG[status] || {
    bg: 'bg-slate-50 text-slate-600 border-slate-200',
    dot: 'bg-slate-400',
  };

  return (
    <div
      className={cn(
        "px-2.5 py-1 rounded-full text-xs font-semibold inline-flex items-center border transition-colors min-w-fit max-h-fit",
        config.bg,
        className
      )}
    >
      <span className={cn("w-1.5 h-1.5 rounded-full mr-2 shrink-0", config.dot)} />
      {status}
    </div>
  );
};

export default StatusBadge;