'use client';

import React from 'react';
import { cn } from '@/utils/helpers';
import { CheckCircle, Clock, XCircle, AlertCircle } from 'lucide-react';

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

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

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

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

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

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é',
  REJECTED: 'Rejeté',
};

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

const ticketIcons: Record<string, React.ReactNode> = {
  AVAILABLE: <AlertCircle className="w-3 h-3 mr-1" />,
  CLAIMED: <CheckCircle className="w-3 h-3 mr-1" />,
  PENDING: <Clock className="w-3 h-3 mr-1" />,
  EXPIRED: <XCircle className="w-3 h-3 mr-1" />,
  REJECTED: <XCircle className="w-3 h-3 mr-1" />,
};

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

  switch (type) {
    case 'role':
      colorClass = roleColors[value] || colorClass;
      label = roleLabels[value] || value;
      break;
    case 'ticket':
      colorClass = ticketColors[value] || colorClass;
      label = ticketLabels[value] || value;
      if (showIcon) {
        icon = ticketIcons[value] || null;
      }
      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 items-center text-xs font-semibold rounded-full',
        colorClass,
        className
      )}
    >
      {icon}
      {label}
    </span>
  );
};

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

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

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

export default StatusBadge;
