import { Loader2, CheckCircle, AlertCircle } from 'lucide-react'

interface JobStatusProps {
  status: string
  progresso: number
  mensagem: string
}

const STATUS_LABELS: Record<string, string> = {
  fila: 'Na fila',
  transcrevendo: 'Transcrevendo',
  analisando: 'Analisando',
  baixando_broll: 'Buscando B-roll',
  montando: 'Montando',
  concluido: 'Concluido',
  erro: 'Erro',
}

export default function JobStatus({ status, progresso, mensagem }: JobStatusProps) {
  const isError = status === 'erro'
  const isDone = status === 'concluido'

  return (
    <div className="bg-white/5 border border-white/10 rounded-xl p-5 space-y-4">
      <div className="flex items-center gap-3">
        {isDone ? (
          <CheckCircle size={20} className="text-emerald-400 flex-shrink-0" />
        ) : isError ? (
          <AlertCircle size={20} className="text-red-400 flex-shrink-0" />
        ) : (
          <Loader2 size={20} className="text-indigo-400 flex-shrink-0 animate-spin" />
        )}
        <div>
          <p className="text-sm font-medium text-slate-200">
            {STATUS_LABELS[status] || status}
          </p>
          <p className="text-xs text-slate-400 mt-0.5">{mensagem}</p>
        </div>
        <span className="ml-auto text-sm font-mono text-indigo-300">{progresso}%</span>
      </div>

      {/* Barra de progresso */}
      <div className="h-2 bg-white/5 rounded-full overflow-hidden">
        <div
          className={`h-full rounded-full transition-all duration-500 ${
            isError
              ? 'bg-red-500'
              : isDone
              ? 'bg-emerald-500'
              : 'bg-gradient-to-r from-indigo-600 to-violet-500'
          }`}
          style={{ width: `${progresso}%` }}
        />
      </div>

      {/* Steps visuais */}
      <div className="flex gap-1">
        {['transcrevendo', 'analisando', 'baixando_broll', 'montando', 'concluido'].map((step) => {
          const stepOrder = ['transcrevendo', 'analisando', 'baixando_broll', 'montando', 'concluido']
          const currentIdx = stepOrder.indexOf(status)
          const stepIdx = stepOrder.indexOf(step)
          const active = stepIdx <= currentIdx && !isError
          const labels: Record<string, string> = {
            transcrevendo: 'Transcricao',
            analisando: 'IA',
            baixando_broll: 'B-roll',
            montando: 'Montagem',
            concluido: 'Pronto',
          }
          return (
            <div key={step} className="flex-1 text-center">
              <div
                className={`h-1 rounded-full mb-1 transition-all duration-300 ${
                  active ? 'bg-indigo-500' : 'bg-white/10'
                }`}
              />
              <span className={`text-[10px] ${active ? 'text-indigo-300' : 'text-slate-600'}`}>
                {labels[step]}
              </span>
            </div>
          )
        })}
      </div>
    </div>
  )
}