import { CheckCircle2, Clock, Loader2 } from 'lucide-react';

import { cn } from '@/lib/utils';

interface AiJobProgressProps {
  aiJob: {
    status: string;
    completed_recommendations: number;
    total_recommendations: number;
    progress_percent: number;
  };
}

export default function AiJobProgress({ aiJob }: AiJobProgressProps) {
  const isComplete =
    aiJob.status === 'completed' && aiJob.completed_recommendations === aiJob.total_recommendations;
  const isPending = aiJob.status === 'pending';

  return (
    <div
      className={cn(
        'rounded-lg border p-4 mb-4',
        isComplete
          ? 'border-green-200 bg-green-50 dark:bg-green-950/20 dark:border-green-800'
          : 'border-blue-200 bg-blue-50 dark:bg-blue-950/20 dark:border-blue-800',
      )}
    >
      <div className="flex items-center justify-between">
        <div className="flex items-center gap-2">
          {isComplete ? (
            <CheckCircle2 className="h-5 w-5 text-green-600 dark:text-green-400" />
          ) : isPending ? (
            <Clock className="h-5 w-5 text-blue-600 dark:text-blue-400" />
          ) : (
            <Loader2 className="animate-spin h-5 w-5 text-blue-600 dark:text-blue-400" />
          )}
          <span
            className={cn(
              'font-medium',
              isComplete
                ? 'text-green-800 dark:text-green-200'
                : 'text-blue-800 dark:text-blue-200',
            )}
          >
            {isComplete
              ? 'All drafts generated!'
              : aiJob.status === 'pending'
                ? 'Queued — waiting to start...'
                : `Generating... (${aiJob.completed_recommendations} of ${aiJob.total_recommendations} drafts)`}
          </span>
        </div>
        <span
          className={
            isComplete ? 'text-green-600 dark:text-green-400' : 'text-blue-600 dark:text-blue-400'
          }
        >
          {aiJob.completed_recommendations}/{aiJob.total_recommendations}
        </span>
      </div>
      <div
        className={cn(
          'mt-2 h-2 rounded-full overflow-hidden',
          isComplete ? 'bg-green-100 dark:bg-green-900' : 'bg-blue-100 dark:bg-blue-900',
        )}
        role="progressbar"
        aria-valuenow={aiJob.completed_recommendations}
        aria-valuemin={0}
        aria-valuemax={aiJob.total_recommendations}
        aria-label={`Draft generation progress: ${aiJob.completed_recommendations} of ${aiJob.total_recommendations}`}
      >
        <div
          className={cn(
            'h-full rounded-full transition-all',
            isComplete ? 'bg-green-600 dark:bg-green-500' : 'bg-blue-600 dark:bg-blue-500',
          )}
          // progress % is dynamic — Tailwind arbitrary values require static strings
          style={{ width: `${aiJob.progress_percent || 0}%` }}
        />
      </div>
    </div>
  );
}