import React from 'react'
import { cn } from '@/lib/utils'

type Status =
  | 'actif'
  | 'inactif'
  | 'Saisi'
  | 'Brouillon'
  | 'Envoyé'
  | 'Vu'
  | 'Signé'
  | 'Transformé en commande'
  | 'Annulé'
  | 'Refusé'
  | 'Enregistrée'
  | 'Préparée'
  | 'Livrée'
  | 'Facturée'
  | 'Validée'
  | 'Payée'
  | 'Partiellement payée'
  | 'En retard'
  | 'draft'
  | 'sent'
  | 'accepted'
  | 'paid'
  | 'overdue'
  | 'prospect'
  | 'vip'

const statusStyles: Record<Status, string> = {
  // Global Active/Inactive
  actif:
    'bg-green-100 text-green-700 border-green-200 dark:bg-green-900/30 dark:text-green-400 dark:border-green-800',
  inactif:
    'bg-gray-100 text-gray-600 border-gray-200 dark:bg-gray-800 dark:text-gray-400 dark:border-gray-700',

  // Sage 100 / Quote Statuses
  Saisi:
    'bg-gray-100 text-gray-600 border-gray-200 dark:bg-gray-800 dark:text-gray-400',
  Brouillon:
    'bg-gray-100 text-gray-600 border-gray-200 dark:bg-gray-800 dark:text-gray-400',
  Envoyé:
    'bg-blue-100 text-blue-700 border-blue-200 dark:bg-blue-900/30 dark:text-blue-400 dark:border-blue-800',
  Vu:
    'bg-purple-100 text-purple-700 border-purple-200 dark:bg-purple-900/30 dark:text-purple-400 dark:border-purple-800',
  Signé:
    'bg-[#338660]/10 text-[#338660] border-[#338660]/20 dark:bg-[#338660]/20 dark:text-green-400 dark:border-[#338660]/30',
  'Transformé en commande':
    'bg-[#338660]/10 text-[#338660] border-[#338660]/20 dark:bg-[#338660]/20 dark:text-green-400',
  Annulé:
    'bg-red-100 text-red-700 border-red-200 dark:bg-red-900/30 dark:text-red-400 dark:border-red-800',
  Refusé:
    'bg-red-100 text-red-700 border-red-200 dark:bg-red-900/30 dark:text-red-400',

  // Order Statuses
  Enregistrée:
    'bg-blue-50 text-blue-700 border-blue-100 dark:bg-blue-900/20 dark:text-blue-300',
  Préparée:
    'bg-indigo-50 text-indigo-700 border-indigo-100 dark:bg-indigo-900/20 dark:text-indigo-300',
  Livrée:
    'bg-[#338660]/10 text-[#338660] border-[#338660]/20 dark:bg-[#338660]/20 dark:text-green-400',
  Facturée:
    'bg-teal-50 text-teal-700 border-teal-100 dark:bg-teal-900/20 dark:text-teal-300',

  // Payment Statuses
  Validée: 'bg-blue-50 text-blue-700 border-blue-100',
  Payée:
    'bg-[#338660]/10 text-[#338660] border-[#338660]/20 dark:bg-[#338660]/20 dark:text-green-400',
  'Partiellement payée':
    'bg-amber-100 text-amber-700 border-amber-200 dark:bg-amber-900/30 dark:text-amber-400',
  'En retard':
    'bg-red-100 text-red-700 border-red-200 dark:bg-red-900/30 dark:text-red-400',

  // Legacy
  draft: 'bg-gray-100 text-gray-600',
  sent: 'bg-blue-100 text-blue-700',
  accepted: 'bg-[#338660]/10 text-[#338660]',
  paid: 'bg-[#338660]/10 text-[#338660]',
  overdue: 'bg-red-100 text-red-700',
  prospect: 'bg-blue-50 text-blue-700',
  vip: 'bg-purple-50 text-purple-700',
}

interface StatusBadgetLettreProps {
  status: Status
  className?: string
}

const StatusBadgetLettre: React.FC<StatusBadgetLettreProps> = ({
  status,
  className,
}) => {
  return (
    <span
      className={cn(
        'inline-flex items-center px-2.5 py-0.5 rounded-md text-xs font-semibold border whitespace-nowrap transition-colors',
        statusStyles[status],
        className
      )}
    >
      {status}
    </span>
  )
}

export default StatusBadgetLettre