import type { JobStatus } from '../types/api';

interface StatusBadgeProps {
  status: JobStatus;
}

export function StatusBadge({ status }: StatusBadgeProps) {
  const getStatusStyles = (status: JobStatus) => {
    switch (status) {
      case 'created':
        return 'bg-gray-100 text-gray-800';
      case 'ingesting':
        return 'bg-blue-100 text-blue-800';
      case 'ai_processing':
        return 'bg-purple-100 text-purple-800';
      case 'pending_qc':
        return 'bg-yellow-100 text-yellow-800';
      case 'approved_english':
      case 'approved_source':
        return 'bg-green-100 text-green-800';
      case 'rejected':
        return 'bg-red-100 text-red-800';
      case 'translating':
        return 'bg-blue-100 text-blue-800';
      case 'tts_generating':
        return 'bg-indigo-100 text-indigo-800';
      case 'pending_final_review':
        return 'bg-orange-100 text-orange-800';
      case 'completed':
        return 'bg-green-100 text-green-800';
      default:
        return 'bg-gray-100 text-gray-800';
    }
  };

  const getStatusLabel = (status: JobStatus) => {
    switch (status) {
      case 'created':
        return 'Created';
      case 'ingesting':
        return 'Ingesting';
      case 'ai_processing':
        return 'AI Processing';
      case 'pending_qc':
        return 'Pending QC';
      case 'approved_english':
        return 'Approved (EN)';
      case 'approved_source':
        return 'Approved for Translation';
      case 'rejected':
        return 'Rejected';
      case 'translating':
        return 'Translating';
      case 'tts_generating':
        return 'Generating Audio';
      case 'pending_final_review':
        return 'Pending Final Review';
      case 'completed':
        return 'Completed';
      default:
        return status;
    }
  };

  return (
    <span className={`inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium ${getStatusStyles(status)}`}>
      {getStatusLabel(status)}
    </span>
  );
}