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

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

interface BatchJobProgressProps {
  batchJob: {
    id: number;
    status: string;
    total_jobs: number;
    completed_jobs: number;
    failed_jobs: number;
    total_tokens: number;
    total_cost: number;
    progress_percent: number;
    estimated_seconds_remaining: number | null;
  };
}

function formatTokens(tokens: number): string {
  if (tokens >= 1_000_000) {
    return `${(tokens / 1_000_000).toFixed(1)}M`;
  }
  if (tokens >= 1_000) {
    return `${(tokens / 1_000).toFixed(1)}K`;
  }
  return tokens.toString();
}

function formatCost(cost: number): string {
  if (cost < 0.01 && cost > 0) {
    return '<$0.01';
  }
  return `$${cost.toFixed(2)}`;
}

function formatTimeRemaining(seconds: number): string {
  if (seconds < 60) {
    return '< 1m';
  }

  const minutes = Math.floor(seconds / 60);
  const hours = Math.floor(minutes / 60);
  const days = Math.floor(hours / 24);

  if (days > 0) {
    const remainingHours = hours % 24;
    return remainingHours > 0 ? `${days}d ${remainingHours}h` : `${days}d`;
  }

  if (hours > 0) {
    const remainingMinutes = minutes % 60;
    return remainingMinutes > 0 ? `${hours}h ${remainingMinutes}m` : `${hours}h`;
  }

  return `${minutes}m`;
}

export default function BatchJobProgress({ batchJob }: BatchJobProgressProps) {
  const isComplete =
    batchJob.status === 'completed' && batchJob.completed_jobs === batchJob.total_jobs;
  const hasFailed = batchJob.failed_jobs > 0;
  const isPending = batchJob.status === 'pending';
  const isProcessing = batchJob.status === 'processing';

  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'
          : hasFailed
            ? 'border-amber-200 bg-amber-50 dark:bg-amber-950/20 dark:border-amber-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" />
          ) : hasFailed ? (
            <AlertCircle className="h-5 w-5 text-amber-600 dark:text-amber-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" />
          )}
          <div>
            <span
              className={cn(
                'font-medium block',
                isComplete
                  ? 'text-green-800 dark:text-green-200'
                  : hasFailed
                    ? 'text-amber-800 dark:text-amber-200'
                    : 'text-blue-800 dark:text-blue-200',
              )}
            >
              {isComplete
                ? 'Batch generation complete!'
                : isPending
                  ? 'Queued — waiting to start...'
                  : isProcessing
                    ? `Generating drafts — ${batchJob.completed_jobs} of ${batchJob.total_jobs} complete`
                    : 'Batch processing'}
            </span>
            {isProcessing && (
              <span className="text-xs text-blue-600 dark:text-blue-300 mt-0.5 block">
                {batchJob.completed_jobs === 0
                  ? 'Preparing prompts and sending to OpenAI...'
                  : batchJob.completed_jobs < Math.ceil(batchJob.total_jobs / 2)
                    ? 'Receiving and validating AI responses...'
                    : 'Finalising drafts and saving results...'}
              </span>
            )}
            {isPending && (
              <span className="text-xs text-blue-600 dark:text-blue-300 mt-0.5 block">
                Your batch will begin once the current queue clears.
              </span>
            )}
          </div>
        </div>
        <div className="flex items-center gap-3 text-sm">
          <span
            className={cn(
              'font-mono',
              isComplete
                ? 'text-green-600 dark:text-green-400'
                : hasFailed
                  ? 'text-amber-600 dark:text-amber-400'
                  : 'text-blue-600 dark:text-blue-400',
            )}
          >
            {batchJob.completed_jobs}/{batchJob.total_jobs} jobs
          </span>
          {batchJob.failed_jobs > 0 && (
            <span className="text-red-600 dark:text-red-400 font-medium">
              {batchJob.failed_jobs} failed
            </span>
          )}
        </div>
      </div>

      <div
        className={cn(
          'mt-2 h-2 rounded-full overflow-hidden',
          isComplete
            ? 'bg-green-100 dark:bg-green-900'
            : hasFailed
              ? 'bg-amber-100 dark:bg-amber-900'
              : 'bg-blue-100 dark:bg-blue-900',
        )}
        role="progressbar"
        aria-valuenow={batchJob.completed_jobs}
        aria-valuemin={0}
        aria-valuemax={batchJob.total_jobs}
        aria-label={`Batch generation progress: ${batchJob.completed_jobs} of ${batchJob.total_jobs} jobs completed`}
      >
        <div
          className={cn(
            'h-full rounded-full transition-all',
            isComplete
              ? 'bg-green-600 dark:bg-green-500'
              : hasFailed
                ? 'bg-amber-600 dark:bg-amber-500'
                : 'bg-blue-600 dark:bg-blue-500',
          )}
          style={{ width: `${batchJob.progress_percent || 0}%` }}
        />
      </div>

      {isProcessing && (
        <div className="mt-2 flex items-center gap-2 text-xs text-muted-foreground">
          <Clock className="h-3 w-3" />
          <span>
            {batchJob.estimated_seconds_remaining !== null
              ? `~${formatTimeRemaining(batchJob.estimated_seconds_remaining)} remaining`
              : 'Calculating...'}
          </span>
        </div>
      )}

      {(batchJob.total_tokens > 0 || batchJob.total_cost > 0) && (
        <div className="mt-2 flex items-center gap-4 text-xs text-muted-foreground">
          {batchJob.total_tokens > 0 && (
            <span>
              Tokens: <strong className="font-mono">{formatTokens(batchJob.total_tokens)}</strong>
            </span>
          )}
          {batchJob.total_cost > 0 && (
            <span>
              Cost: <strong className="font-mono">{formatCost(batchJob.total_cost)}</strong>
            </span>
          )}
        </div>
      )}
    </div>
  );
}