import { cn } from '@/lib/utils';
import {
  formatStandardizationTaskProgressSummary,
  getStandardizationTaskProgressStageLabel,
  isFailedStandardizationTaskProgress,
  isTerminalStandardizationTaskProgress,
} from '@/lib/standardizationTaskProgress';
import type { StandardizationTaskRecord } from '@/services/standardizedService';

interface StandardizationTaskMonitorProps {
  task: Pick<
    StandardizationTaskRecord,
    'execution_mode' | 'status' | 'provider_status' | 'progress_percent' | 'progress_current' | 'progress_total' | 'current_phase'
  >;
  compact?: boolean;
  className?: string;
}

export function StandardizationTaskMonitor({ task, compact = false, className }: StandardizationTaskMonitorProps) {
  const percent = Math.min(100, Math.max(0, task.progress_percent));
  const stageLabel = getStandardizationTaskProgressStageLabel(task);
  const summary = formatStandardizationTaskProgressSummary(task);
  const isFailed = isFailedStandardizationTaskProgress(task);
  const isTerminal = isTerminalStandardizationTaskProgress(task);
  const indicatorClassName = isFailed
    ? 'bg-rose-500'
    : isTerminal
      ? 'bg-emerald-500'
      : 'bg-primary';
  const stageTextClassName = isFailed
    ? 'text-rose-600'
    : isTerminal
      ? 'text-emerald-600'
      : 'text-muted-foreground';

  return (
    <div className={cn(compact ? 'min-w-[180px] space-y-1' : 'space-y-2', className)}>
      <div className="flex items-center justify-between gap-3">
        <span className={cn(compact ? 'text-xs font-medium' : 'text-sm font-medium')}>{percent}%</span>
        <span className={cn(compact ? 'max-w-[110px] text-[11px]' : 'text-xs', 'truncate', stageTextClassName)}>{stageLabel}</span>
      </div>
      <div className="h-1.5 overflow-hidden rounded-full bg-muted">
        <div className={cn('h-full transition-all', indicatorClassName)} style={{ width: `${percent}%` }} />
      </div>
      <p className={cn(compact ? 'text-[11px]' : 'text-xs', 'leading-none text-muted-foreground')}>{summary}</p>
    </div>
  );
}