import React from 'react'
import { Loader2, Check, X } from 'lucide-react'
import { cn } from '@/lib/utils'

interface InitializationTask {
  label: string
  status: 'pending' | 'in_progress' | 'completed' | 'failed'
}

interface InitializingValidationProps {
  totalRows: number
  tasks: InitializationTask[]
}

export const InitializingValidation: React.FC<InitializingValidationProps> = ({
  totalRows,
  tasks
}) => {
  return (
    <div className="flex flex-col items-center justify-center h-[calc(100vh-10rem)]">
      <Loader2 className="h-12 w-12 animate-spin text-primary mb-4" />
      <h3 className="text-lg font-medium text-foreground mb-2">Initializing Validation</h3>
      <p className="text-sm text-muted-foreground mb-6">Processing {totalRows} rows...</p>

      {/* Task checklist */}
      <div className="w-80 space-y-2">
        {tasks.map((task, index) => (
          <div
            key={index}
            className={cn(
              "flex items-center gap-3 px-4 py-2 rounded-md transition-colors",
              task.status === 'completed' && "bg-green-50 border border-green-200",
              task.status === 'failed' && "bg-red-50 border border-red-200",
              task.status === 'in_progress' && "bg-blue-50 border border-blue-200",
              task.status === 'pending' && "bg-blue-50 border border-blue-200"
            )}
          >
            {/* Status icon */}
            <div className="flex-shrink-0">
              {task.status === 'completed' && (
                <Check className="h-4 w-4 text-green-600" />
              )}
              {task.status === 'failed' && (
                <X className="h-4 w-4 text-red-600" />
              )}
              {task.status === 'in_progress' && (
                <Loader2 className="h-4 w-4 text-blue-600 animate-spin" />
              )}
              {task.status === 'pending' && (
                <Loader2 className="h-4 w-4 text-blue-600 animate-spin" />
              )}
            </div>

            {/* Task label */}
            <span
              className={cn(
                "text-sm font-medium",
                task.status === 'completed' && "text-green-700",
                task.status === 'failed' && "text-red-700",
                task.status === 'in_progress' && "text-blue-700",
                task.status === 'pending' && "text-blue-700"
              )}
            >
              {task.label}
            </span>
          </div>
        ))}
      </div>
    </div>
  )
}

export default InitializingValidation
