import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
import { cn } from '@/lib/utils';
import { CheckCircle2, Circle, Clock, AlertCircle } from 'lucide-react';

const workflowSteps = [
  { id: 1, name: 'Application Submission', count: 12, status: 'completed' },
  { id: 2, name: 'Field Verification', count: 8, status: 'in_progress' },
  { id: 3, name: 'Preliminary Audit', count: 15, status: 'in_progress' },
  { id: 4, name: 'Committee Audit', count: 6, status: 'pending' },
  { id: 5, name: 'Surveillance Audit', count: 4, status: 'pending' },
  { id: 6, name: 'Final Approval', count: 3, status: 'pending' },
  { id: 7, name: 'Certification', count: 73, status: 'completed' },
];

export function WorkflowOverview() {
  const getStatusIcon = (status: string) => {
    switch (status) {
      case 'completed':
        return <CheckCircle2 className="h-5 w-5 text-emerald-500" />;
      case 'in_progress':
        return <Clock className="h-5 w-5 text-amber-500" />;
      case 'warning':
        return <AlertCircle className="h-5 w-5 text-red-500" />;
      default:
        return <Circle className="h-5 w-5 text-muted-foreground" />;
    }
  };

  return (
    <Card className="card-hover">
      <CardHeader>
        <CardTitle className="text-lg font-semibold">Workflow Pipeline</CardTitle>
      </CardHeader>
      <CardContent>
        <div className="space-y-3">
          {workflowSteps.map((step, index) => (
            <div
              key={step.id}
              className={cn(
                'flex items-center justify-between p-3 rounded-lg transition-all',
                step.status === 'in_progress' && 'bg-amber-50 border-l-4 border-amber-400',
                step.status === 'completed' && 'bg-emerald-50/50',
                step.status === 'pending' && 'bg-muted/30'
              )}
            >
              <div className="flex items-center gap-3">
                {getStatusIcon(step.status)}
                <div>
                  <p className="font-medium text-sm">{step.name}</p>
                  <p className="text-xs text-muted-foreground">
                    {step.count} application{step.count !== 1 ? 's' : ''}
                  </p>
                </div>
              </div>
              <div className="flex items-center gap-2">
                <span className={cn(
                  'text-lg font-bold',
                  step.status === 'in_progress' && 'text-amber-600',
                  step.status === 'completed' && 'text-emerald-600',
                  step.status === 'pending' && 'text-muted-foreground'
                )}>
                  {step.count}
                </span>
              </div>
            </div>
          ))}
        </div>
      </CardContent>
    </Card>
  );
}