import React from 'react';
import { normalizeStatut } from './helpers';

const STATUT_MAP: Record<string, { bg: string; color: string; label: string }> = {
    enattente: { bg: '#fef9c3', color: '#a16207', label: 'En attente' },
    en_attente: { bg: '#fef9c3', color: '#a16207', label: 'En attente' },
    'en attente': { bg: '#fef9c3', color: '#a16207', label: 'En attente' },
    validn1: { bg: '#dbeafe', color: '#1d4ed8', label: 'Validé N1' },
    validen1: { bg: '#dbeafe', color: '#1d4ed8', label: 'Validé N1' },
    valide_n1: { bg: '#dbeafe', color: '#1d4ed8', label: 'Validé N1' },
    validn2: { bg: '#ede9fe', color: '#7c3aed', label: 'Validé N2' },
    validen2: { bg: '#ede9fe', color: '#7c3aed', label: 'Validé N2' },
    valide_n2: { bg: '#ede9fe', color: '#7c3aed', label: 'Validé N2' },
    approuve: { bg: '#dcfce7', color: '#15803d', label: 'Approuvé' },
    paiementenattente: { bg: '#fef9c3', color: '#b45309', label: 'Paiement en attente' },
    paiement_en_attente: { bg: '#fef9c3', color: '#b45309', label: 'Paiement en attente' },
    payee: { bg: '#f0fdf4', color: '#16a34a', label: 'Payée' },
    refuse: { bg: '#fee2e2', color: '#dc2626', label: 'Refusée' },
    refus: { bg: '#fee2e2', color: '#dc2626', label: 'Refusée' },
    brouillon: { bg: '#f1f5f9', color: 'var(--text-secondary)', label: 'Brouillon' },
    valide: { bg: '#dcfce7', color: '#15803d', label: 'Validé' },
};

export const TagStatut = ({ statut }: { statut: string }) => {
    const key = normalizeStatut(statut);
    const s = STATUT_MAP[key] ?? STATUT_MAP['brouillon'];
    return (
        <span style={{
            display: 'inline-block', fontSize: 11, fontWeight: 700,
            padding: '3px 10px', borderRadius: 20, whiteSpace: 'nowrap',
            background: s.bg, color: s.color,
        }}>
            {s.label}
        </span>
    );
};

/** Alias fonction pour compatibilité avec l'ancien code inline */
export const tagStatut = (statut: string) => <TagStatut statut={statut} />;
