'use client';

import React from 'react';
import { cn } from '@/utils/helpers';

type RoleType = 'ADMIN' | 'EMPLOYEE' | 'CLIENT' | string;
type TicketStatusType = 'AVAILABLE' | 'CLAIMED' | 'PENDING' | 'EXPIRED' | string;
type StatusType = 'active' | 'inactive' | 'verified' | 'unverified' | string;

interface StatusBadgeProps {
  type: 'role' | 'ticket' | 'status' | 'custom';
  value: string;
  className?: string;
}

const roleColors: Record<string, string> = {
  ADMIN: 'bg-red-100 text-red-800',
  EMPLOYEE: 'bg-blue-100 text-blue-800',
  CLIENT: 'bg-green-100 text-green-800',
};

const ticketColors: Record<string, string> = {
  AVAILABLE: 'bg-gray-100 text-gray-800',
  CLAIMED: 'bg-green-100 text-green-800',
  PENDING: 'bg-yellow-100 text-yellow-800',
  EXPIRED: 'bg-red-100 text-red-800',
};

const statusColors: Record<string, string> = {
  active: 'bg-green-100 text-green-800',
  inactive: 'bg-gray-100 text-gray-800',
  verified: 'bg-green-100 text-green-800',
  unverified: 'bg-yellow-100 text-yellow-800',
};

const roleLabels: Record<string, string> = {
  ADMIN: 'Admin',
  EMPLOYEE: 'Employé',
  CLIENT: 'Client',
};

const ticketLabels: Record<string, string> = {
  AVAILABLE: 'Disponible',
  CLAIMED: 'Réclamé',
  PENDING: 'En attente',
  EXPIRED: 'Expiré',
};

const statusLabels: Record<string, string> = {
  active: 'Actif',
  inactive: 'Inactif',
  verified: 'Vérifié',
  unverified: 'Non vérifié',
};

/**
 * Reusable status badge component for roles, ticket status, and general status
 */
export const StatusBadge: React.FC<StatusBadgeProps> = ({
  type,
  value,
  className,
}) => {
  let colorClass = 'bg-gray-100 text-gray-800';
  let label = value;

  switch (type) {
    case 'role':
      colorClass = roleColors[value] || colorClass;
      label = roleLabels[value] || value;
      break;
    case 'ticket':
      colorClass = ticketColors[value] || colorClass;
      label = ticketLabels[value] || value;
      break;
    case 'status':
      colorClass = statusColors[value] || colorClass;
      label = statusLabels[value] || value;
      break;
    case 'custom':
      // Use value as-is for custom badges
      break;
  }

  return (
    <span
      className={cn(
        'px-2 py-1 inline-flex text-xs font-semibold rounded-full',
        colorClass,
        className
      )}
    >
      {label}
    </span>
  );
};

// Utility functions for getting colors (for backward compatibility)
export const getRoleBadgeColor = (role: RoleType): string => {
  return roleColors[role] || 'bg-gray-100 text-gray-800';
};

export const getTicketStatusColor = (status: TicketStatusType): string => {
  return ticketColors[status] || 'bg-gray-100 text-gray-800';
};

export const getStatusColor = (status: StatusType): string => {
  return statusColors[status] || 'bg-gray-100 text-gray-800';
};

export default StatusBadge;