import { CheckCircle2, Clock3, LoaderCircle, XCircle } from 'lucide-react';

import { Badge } from '@/components/ui/badge';
import { Progress } from '@/components/ui/progress';
import type { UploadStatus } from '@/types';

interface UploadStatusBadgeProps {
  status: UploadStatus;
  progress: number;
}

const statusConfig = {
  queued: {
    label: 'Queued',
    icon: Clock3,
    className: 'bg-zinc-500/15 text-zinc-500 dark:text-zinc-300',
  },
  processing: {
    label: 'Processing',
    icon: LoaderCircle,
    className: 'bg-blue-500/15 text-blue-600 dark:text-blue-400',
  },
  completed: {
    label: 'Completed',
    icon: CheckCircle2,
    className: 'bg-emerald-500/15 text-emerald-600 dark:text-emerald-400',
  },
  failed: {
    label: 'Failed',
    icon: XCircle,
    className: 'bg-red-500/15 text-red-600 dark:text-red-400',
  },
} satisfies Record<
  UploadStatus,
  { label: string; icon: typeof Clock3; className: string }
>;

export function UploadStatusBadge({
  status,
  progress,
}: UploadStatusBadgeProps) {
  const config = statusConfig[status];
  const Icon = config.icon;

  return (
    <div className="space-y-1.5">
      <Badge variant="secondary" className={config.className}>
        <Icon
          className={status === 'processing' ? 'animate-spin' : undefined}
        />
        {config.label}
      </Badge>
      {status === 'processing' ? (
        <div className="w-24 space-y-1">
          <span className="text-xs text-muted-foreground">
            {progress}% complete
          </span>
          <Progress value={progress} className="h-1.5" />
        </div>
      ) : status === 'completed' ? (
        <p className="text-xs text-muted-foreground">100%</p>
      ) : null}
    </div>
  );
}