import * as React from 'react'
import { Clock, RefreshCw } from 'lucide-react'

export interface QueueStatus {
  pending: number
  processing: number
  completed: number
  failed: number
}

export interface EnrichmentProgressProps {
  queueStatus: QueueStatus | null
  isLoading?: boolean
  onRefresh?: () => void
}

const STATUS_ITEMS: Array<{
  key: keyof QueueStatus
  label: string
  color: string
}> = [
  { key: 'pending', label: 'Pending', color: 'text-yellow-600' },
  { key: 'processing', label: 'Processing', color: 'text-blue-600' },
  { key: 'completed', label: 'Completed', color: 'text-green-600' },
  { key: 'failed', label: 'Failed', color: 'text-red-600' },
]

export function EnrichmentProgress({
  queueStatus,
  isLoading = false,
  onRefresh,
}: EnrichmentProgressProps) {
  if (!queueStatus) {
    return (
      <div className="bg-white rounded-lg border border-gray-200 p-6 text-center text-gray-500">
        <Clock className="w-8 h-8 mx-auto mb-2 text-gray-300" />
        <p className="text-sm">Queue status unavailable</p>
      </div>
    )
  }

  return (
    <div>
      {onRefresh && (
        <div className="flex justify-end mb-3">
          <button
            onClick={onRefresh}
            disabled={isLoading}
            className="flex items-center gap-2 text-sm text-gray-600 hover:text-gray-900 disabled:opacity-50"
          >
            <RefreshCw className={`w-4 h-4 ${isLoading ? 'animate-spin' : ''}`} />
            Refresh
          </button>
        </div>
      )}
      <div className="grid grid-cols-2 sm:grid-cols-4 gap-4">
        {STATUS_ITEMS.map(({ key, label, color }) => (
          <div key={key} className="bg-white rounded-lg border border-gray-200 p-4 text-center">
            <div className={`text-2xl font-bold ${color}`}>{queueStatus[key]}</div>
            <div className="text-sm text-gray-600 mt-1">{label}</div>
          </div>
        ))}
      </div>
    </div>
  )
}